Web Development optimize

Support rich text with the Yahoo! User Interface Library

The Yahoo! User Interface Library allows developers to build powerful Web interfaces using code that has been fully tested for proper functionality. The Rich Text Editor is just one example of the power controls available in the YUI Library.

During a recent project, my team's task was to redesign a Web page that utilized an ActiveX control as a rich text editor. One goal of the project was to replace the ActiveX control with a more standardized approach. We chose to use the rich text editor available with the Yahoo! User Interface (YUI) Library. This week I examine using the YUI Library's Rich Text Editor.

YUI Library

The YUI Library is a set of utilities and controls in JavaScript, as well as CSS templates for building richly interactive Web applications using standard technologies such as DHTML, DOM scripting, and AJAX.

You can download the YUI Library 2.3.1 for free from SourceForge.net. The download allows you to install the libraries on a Web server. Another option is to use the library files directly from Yahoo! servers. Yahoo! provides an excellent overview of how to use its servers for applications implementing functionality via the YUI Library.

Rich Text Editor

A recent addition to the YUI Library is the Rich Text Editor. It is a user interface control that replaces the standard HTML textarea element. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images.

A critical feature of the Rich Text Editor is its toolbar, which provides access to various features like text formatting, color choices, and so forth. You may choose which toolbar features to include in an implementation via scripting. In addition, the toolbar is extensible via a plug-in architecture so that advanced implementations can achieve a high degree of customization.

Putting the Rich Text Editor to work

If you want to use the Rich Text Editor, it requires a YUI Library CSS skin to properly render the control. The following YUI Library files (CSS and JavaScript source files) are necessary to use the Rich Text Editor. The following lines reference the files on the previously mentioned Yahoo! servers, but you may use a local installation as well.

<!-- Skin CSS file -->

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/assets/skins/sam/skin.css">

<!-- Utility Dependencies -->

<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js"></script>

<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->

<script src="http://yui.yahooapis.com/2.3.1/build/container/container_core-min.js"></script>

<script src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js"></script>

<script src="http://yui.yahooapis.com/2.3.1/build/button/button-beta-min.js"></script>

<!-- Source file for Rich Text Editor-->

<script src="http://yui.yahooapis.com/2.3.1/build/editor/editor-beta-min.js"></script>

The following base HTML is used to deliver the Rich Text Box, but you'll still need to add scripting to fully implement the control.

<body class="yui-skin-sam">

<textarea name="texteditor" id="texteditor" cols="50" rows="10">

This text will be displayed in the text area.

</textarea></body>

Now the cols and rows attributes of the HTML texarea element will be overridden by settings specified in the Rich Text Editor's script. The name assigned to the HTML textarea element is important, since it will be used in the JavaScript code when establishing the relationship between a textarea element and a Rich Text Editor.

Also, the class assigned to the HTML body element (yui-skin-sam) is used to visually format the Rich Text Editor control. This CSS skin is defined in the CSS file imported into the application (see previous list). The skin should be applied to the parent HTML element of the textarea element. In this case, the HTML body element is used, but it could be any element that contains the textarea.

Once the textarea has been defined along with the proper YUI Library files included in the page, the Rich Text Editor control must be rendered. The rendering is accomplished via JavaScript placed within the page. The script can be used to define various Rich Text Editor options such as the toolbar. As an example, I may use the following JavaScript to format our Rich Text Editor:

var rtf = new YAHOO.widget.Editor('texteditor', {

height: '300px',

width: '522px'});

rtf.render();

This snippet establishes the height and width of the editor while declaring an instance of the Rich Text Editor. Also, it assigns the textarea called texteditor to the Rich Text Editor. The final line in the script actually causes the Rich Text Editor to display when it calls its render method.

When you use the Rich Text Editor control without any specifics about the toolbar, it results in the default behavior of including all toolbar features like text alignment, font face, font size, color, and so forth. You may choose to limit the toolbar options available to users.

The final example uses a Rich Text Editor, but the toolbar options are defined in the JavaScript code to render it. The following options are used:

  • The toolbar options are defined in its own variable. This is later used to instantiate the editor.
  • A title is assigned to the editor via the toolbar's titlebar property.
  • The collapse property signals whether the user may collapse/hide the toolbar.
  • The buttons property allows you to define the buttons displayed in the toolbar. In this example, buttons are displayed for text formatting as well as selecting colors.

Once the toolbar options are defined, a Rich Text Editor object is instantiated with the toolbar variable passed to it along with the HTML textarea element. The final step is to render the control. A complete list of options is available in the YUI Library API documentation.

<html><head>

<title>Working with YUI Library Rich Text Editor</title>

<!-- Skin CSS file -->

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/assets/skins/sam/skin.css" />

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/fonts/fonts-min.css" />

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/container/assets/skins/sam/container.css" />

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/menu/assets/skins/sam/menu.css" />

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/button/assets/skins/sam/button.css" />

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/editor/assets/skins/sam/editor.css" />

<!-- Utility Dependencies -->

<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js"></script>

<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->

<script src="http://yui.yahooapis.com/2.3.1/build/container/container_core-min.js"></script>

<script src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js"></script>

<script src="http://yui.yahooapis.com/2.3.1/build/button/button-beta-min.js"></script>

<!-- Source file for Rich Text Editor-->

<script src="http://yui.yahooapis.com/2.3.1/build/editor/editor-beta-min.js"></script>

<style>

body { margin:0; padding:0; font-face: arial; font-size: 10pt;}

.yui-editor-container {z-index: 999;}

.editable {

border: 5px solid black;

argin-top: 100px;

margin: .25em;

float: left;

width: 350px;

height: 100px;

overflow: auto;

}

.textbox {

margin-left: 10px;

width: 100px;

height: 25px;

}

.label {

margin-left: 10px;

width: 50px;

height: 25px;

font-weight: bold;

}

</style></head>

<body class="yui-skin-sam">

<span class="label">First Name:</span><input type="text" name="firstName" id="firstName" class="textbox" /><br />

<span class="label">Last Name:</span><input type="text" name="lastName" id="lastName" class="textbox" /><br />

<textarea name="texteditor" id="texteditor">

Test within TextArea.

</textarea>

<script>

var toolbar = {

height: '200px',

width: '420px',

toolbar: {

titlebar: 'TechRepublic.com Editor',

collapse: true,

buttons: [

{ group: 'textstyle', label: 'Font Style',

buttons: [

{ type: 'push', label: 'Bold', value: 'bold' },

{ type: 'push', label: 'Italic', value: 'italic' },

{ type: 'push', label: 'Underline', value: 'underline' },

{ type: 'separator' },

{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,

menu: [

{ text: 'Arial', checked: true },

{ text: 'Arial Black' },

{ text: 'Comic Sans MS' },

{ text: 'Courier New' },

{ text: 'Lucida Console' },

{ text: 'Tahoma' },

{ text: 'Times New Roman' },

{ text: 'Trebuchet MS' },

{ text: 'Verdana' }

] },

{ type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },

{ type: 'separator' },

{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },

{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }

] } ] } };

myEditor = new YAHOO.widget.Editor('texteditor', toolbar);

myEditor.render();

</script></body></html>

It is worth noting that the text is formatted using standard HTML to format the text within the Rich Text Editor, so bold text uses the HTML strong element; the font element is used for font styling, and so forth.

An improved interface

I have been a big fan of the YUI Library since I first discovered it more than a year ago. It allows developers to build powerful Web interfaces using code that has been fully tested for proper functionality. The Rich Text Editor is just one example of the power controls available in the YUI Library.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

15 comments
tplancon
tplancon

I'm a noob with js. I got this to work OK in a page but I'd like to "hide" the toolbar/title if the page is printed. I'm use to doing this in the link to a css file with the "media=screen" or "media=print" attribute. Can something similar be done with this script?

MichelliL
MichelliL

I can't seem to get this to work. I get the page to display, with the rich text area, but I can't actually type within the area. The cursor blinks in there, but keystrokes do not register. If I click outside of the textarea, the cursor never comes back. I like the potential, but I just can't figure out what I'm doing wrong. Any advice? (I literally copied the code in the second example and pasted it into a blank file, saving it as .html. I did change the breaks, putting breaks after each complete line, but whitespace shouldn't affect this, should it?)

coopster7
coopster7

Can anybody comment/compare the YUI RTE to others, particularly TinyMCE?

Jaqui
Jaqui

they are javascript, which should be illegal. no-one with two brain cells to rub together would use ANY clientside scripting like javascript, not if they are writing for a secure application.

bcasner
bcasner

Another good set of javascript libraries is Mootools (http://mootools.net/). Not quite as powerful, but much smaller so less transfer load when bringing up pages.

Justin James
Justin James

I had the same question in my mind, and was about to post it when I saw you did it first. :) J.Ja

EdMerc
EdMerc

Would you please explain your statement.

Jaqui
Jaqui

I do not trust anyone's code to not be malicious, as anyone who has ever seen the malware infestations in ms products, so any clientside coding is leaving your system vulnerable to malicious code from that clientside scripting. no javascript. no flash no activex controls these things are at best a SEVERE security risk, the activex being a critical security risk, since windows runs activex as a system level bit of code by default. clientside = a breach in security.

TheRealMrG.
TheRealMrG.

So I took a look at your profile and then took a look at your personal site and was surprised to find that you happily use JavaScript on your blog.

webmaster
webmaster

The sole purpose?!?!? WTF is wrong with you? If you are so concerned with badware, then just unplug the freaking wire! ~DtD

Jaqui
Jaqui

that is the sole purpose of clientside. to infest systems with malware.

hendrixextra-sur
hendrixextra-sur

I too am quite tired of this same diatribe from this same person. We get it, you don't like Javascript, so why don't you leave it alone and let the rest of us get on with a productive discussion in the topic of our development languages. You are free to not use these technologies, but they are here to stay, in wide use and the rest of us would like to discuss its uses and implementations. Additionally, you are also free to run all your script server-side, I really don't care, what I do care about is having to slog through threads to expressly avoid your unproductive and unsolicited rants.

SnoopDougEDoug
SnoopDougEDoug

Would you quit posting this same diatribe on EVERY post that discusses client-side Javascript! Of course you should never blithely allow script from an unknown source, but Yahoo? Are you that paranoid?