YUI Library Home

Site Search (YDN & YUIBlog):

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

# Resize Utility: Custom resizing for the Rich Text Editor

This example shows how to customize the Resize Utility for things like the Rich Text Editor Control.

View example in new window.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus.

## Setting up the Editors HTML

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

<form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus. </textarea> </form>

## Setting up the Editors Javascript

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

(function() { //Setup some private variables var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { editor = new YAHOO.widget.SimpleEditor('editor', { height: '300px', width: '522px', dompath: true, animate: true }); editor.render(); }); })();

## Setting up the Resize Utility

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

editor.on('editorContentLoaded', function() { resize = new YAHOO.util.Resize(editor.get('element_cont').get('element'), { handles: ['br'], autoRatio: true, status: true, proxy: true }); });

## 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.

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);

## Styling the resize handle

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

/* The ID of the editor's container and the bottom right resize handle. */ #editor_container .yui-resize-handle-br { /* Make the handle a little bigger than the default */ height: 11px; width: 11px; /* Resposition the image */ background-position: -20px -60px; /* Kill the hover on the handle */ background-color: transparent; }

## 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(); }); })();

## Configuration for This Example

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.

### Resize Utility Examples:

- Simple Resize
- Proxy Resize
- Animated Proxy Resize
- 8-way Element Resize
- Ghosting and Custom Proxy Resize
- Custom resizing for the Rich Text Editor
- Split Pane resizing with Grids CSS
- Skinning the Resize Utility
- Layout inside a resizable Panel (included with examples for Layout Manager)
- Creating a Resizable Panel (included with examples for Container Family)
- Complex Application (included with examples for Layout Manager)

### More Resize Utility Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings