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();
- Date: November 5th, 2007
- Author: Tony Patton
</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.
