YUI Library Examples: Resize Utility: Custom resizing for the Rich Text Editor

Setting up the Editors HTML

Setting up the Editor's HTML is done by creating a textarea control on the page.

Setting up the Editors Javascript

Once the textarea is on the page, then initialize the Editor like this:

Setting up the Resize Utility

Now we listen for the editorContentLoaded event and setup our Resize instance.

Making the Resize Utility do what we want

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.

Styling the resize handle

Next we will override the default Resize CSS and make the handle a little bigger.

Full Example Source

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        editor = null,
        resize = null;

Event.onDOMReady(function() {
        editor = new YAHOO.widget.SimpleEditor('editor', {
            height: '300px',
            width: '522px',
            dompath: true,
            animate: true
        });
        editor.on('editorContentLoaded', function() {
            resize = new YAHOO.util.Resize(editor.get('element_cont').get('element'), {
                handles: ['br'],
                autoRatio: true,
                status: true,
                proxy: true,
                setSize: false //This is where the magic happens
            });
            resize.on('startResize', function() {
                this.hide();
                this.set('disabled', true);
            }, editor, true);
            resize.on('resize', function(args) {
                var h = args.height;
                var th = (this.toolbar.get('element').clientHeight + 2); //It has a 1px border..
                var dh = (this.dompath.clientHeight + 1); //It has a 1px top border..
                var newH = (h - th - dh);
                this.set('width', args.width + 'px');
                this.set('height', newH + 'px');
                this.set('disabled', false);
                this.show();
            }, editor, true);
        });
        editor.render();
    });

})();