Support rich text with the Yahoo! User Interface 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();



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

Comments

Post a Comment

Popular posts from this blog

DevOps - Key Concepts - Roles & Responsibilities - Tools & Technologies

-
KEY CONCEPTS FUNDAMENTAL PRINCIPLES  ROLES & RESPONSIBILITIES  TOOLS & TECHNOLOGIES  VERSION CONTROL SYSTEMS (VCS) CONTINUOUS INTEGRATION AND CONTINUOUS DELIVERY (CI/CD)  CONFIGURATION MANAGEMENT  CONTAINERIZATION AND ORCHESTRATION  INFRASTRUCTURE AS CODE (IAC)  MONITORING AND LOGGING TOOLS  COLLABORATION AND COMMUNICATION TOOLS  TEST AUTOMATION TOOLS  CLOUD PLATFORMS AND SERVICES  DevOps  DevOps, short for Development and Operations, is a set of practices and principles that aims to foster collaboration, communication, and integration between development teams and operations teams. It focuses on improving the efficiency, speed, and quality of software development and delivery processes. Key Concepts Here are some key aspects of DevOps: ·          Culture: DevOps promotes a culture of collaboration, trust, and shared responsibility among development, operations, and other teams involved in the software development lifecycle. It emphasizes breaking down silos and fostering
Read more

Rewriting the DotNetNuke Url Rewriter Module

-
Ref: http://www.ifinity.com.au/Blog/Technical_Blog/EntryID/19/ As part of my ongoing interest in making DotNetNuke websites more person and search engine friendly, I started hunting around in the space again to see what was available. While the latest DotNetNuke releases have good ability to enter site rewrite rules (such as an automatic home.aspx redirection), the crucial problem for me is that the site doesn't generate simple Url's (instead it still outputs pagename/tabid/nn/default.aspx) I had previously looked at the Inventua Http module, and while it is a good product, it didn't quite suit my needs. I guess it came down to not being able to get the source code either. It also didn't work with the Catalook module, which I have done some work with and still support on some sites. Further searching brought me across Scott McCulloch's 'Friendly Urls' work on his site at http://www.ventrian.com/Resources/Projects/FriendlyUrls.aspx . (it's even a
Read more

Trouble In the House of Google

-
Image
Let's look at where stackoverflow.com traffic came from for the year of 2010. When 88.2% of all traffic for your website comes from a single source , criticizing that single source feels … risky. And perhaps a bit churlish, like looking a gift horse in the mouth, or saying something derogatory in public about your Valued Business Partnertm. Still, looking at the statistics, it's hard to avoid the obvious conclusion. I've been told many times that Google isn't a monopoly, but they apparently play one on the internet. You are perfectly free to switch to whichever non-viable alternative web search engine you want at any time. Just breathe in that sweet freedom, folks. Sarcasm aside, I greatly admire Google. My goal is not to be acquired, because I'm in this thing for the long haul – but if I had to pick a company to be acquired by, it would probably be Google. I feel their emphasis on the information graph over the social graph aligns more closely with our mission th
Read more