This example shows how to customize the Resize Utility for things like the Rich Text Editor Control.
Setting up the Editor's HTML is done by creating a textarea
control on the page.
Once the textarea
is on the page, then initialize the Editor like this:
Now we listen for the editorContentLoaded
event and setup our Resize instance.
Now we have a resizable Editor instance, but it doesn't resize the way we want. It only resizes the outer element. But we want the Editor to resize the content area as well.
This is where the config option setSize
comes in. When you set the setSize
option to false (only when using the proxy config),
the Resize Utility will not resize the element. It will return the data needed to resize it in the resize
Event.
So now we listen for the startResize
Event to set the disabled
option on the Editor instance.
Then we listen for the resize
Event to get the new height and width. Once we have that we can do a little math and tell the Editor instance to resize itself.
Next we will override the default Resize CSS and make the handle a little bigger.
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings