YUI (Yahoo! User Interface) provides a large collection of JavaScript UI tools to make developing your web application easier. One of the best and most under utilized is the Rich Text Editor.
The YUI Rich Text Editor makes an easy interface for users to format text in a WYSIWYG manner. It then spits out the HTML code from the editor. We’re going to cover how to get this up and running.
So here we have a sample HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Rich Text Editor Demo</title> </head> <body> <h1>YUI Rich Text Editor Demo</h1> <form method="post"> <textarea id="content"> </textarea> <input type="submit" value="Submit" /> </form> </body> </html>
It’s all fine and dandy but we’d like to give our users some text formatting options without making them learn HTML.
First things first: We need to include YUI and their Rich Text Editor’s components into our HTML page. (JavaScript and CSS files)
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/editor/assets/skins/sam/simpleeditor.css" /> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/editor/simpleeditor-min.js"></script>
We’ll put that code in the head section so we get this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Rich Text Editor Demo</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/editor/assets/skins/sam/simpleeditor.css" /> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/editor/simpleeditor-min.js"></script> </head> <body> <h1>YUI Rich Text Editor Demo</h1> <form method="post"> <textarea id="content"> </textarea> <input type="submit" value="Submit" /> </form> </body> </html>
Now that we’ve included the YUI & Rich Text Editor scripts we need to add the “yui-skin-sam” class to a parent of the textarea (the body works) so that YUI knows where to use the code.
So we have this:
<body class="yui-skin-sam">
Next, we configure the editor. This one will work for most people (customize as needed):
<script type="text/javascript">
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var myConfig = {
height: '300px',
width: '600px',
dompath: true,
focusAtStart: true,
handleSubmit: true
};
YAHOO.log('Create the Editor..', 'info', 'example');
var myEditor = new YAHOO.widget.SimpleEditor('content', myConfig); // "content" is the textarea ID
myEditor._defaultToolbar.buttonType = 'advanced';
myEditor.render();
</script>
Here’s what our finished code looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rich Text Editor Demo</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/editor/assets/skins/sam/simpleeditor.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/editor/simpleeditor-min.js"></script>
<script type="text/javascript">
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var myConfig = {
height: '300px',
width: '600px',
dompath: true,
focusAtStart: true,
handleSubmit: true
};
YAHOO.log('Create the Editor..', 'info', 'example');
var myEditor = new YAHOO.widget.SimpleEditor('content', myConfig);
myEditor._defaultToolbar.buttonType = 'advanced';
myEditor.render();
</script>
</head>
<body class="yui-skin-sam">
<h1>YUI Rich Text Editor Demo</h1>
<form method="post">
<textarea id="content">
</textarea>
<input type="submit" value="Submit" />
</form>
</body>
</html>
And we’re done! You can see the demo below. If you want to go further check out the website. Once you give the textarea a name it’s submitted just like regular data and they transform the rich text into HTML.
Security
Of course, the user can always send false data or turn off JavaScript to send unwanted HTML code. Make sure to filter what the user sends you using a server side language like PHP. You probably won’t have to worry about this though if you’re only using this as an admin module of some sort.
5 Comments
As you have mentioned(it being under utilized), I have never heard of this before. But it does seem very awesome, however I expected that I would be able to use it without a server side language. Well, technically, I can but then the application would be prone to XSS attacks which would be very stupid. None the less it still remains awesome and I would certainly use it.
You made some good points there. I checked on the internet for additional information about the issue and found most individuals will go along with your views on this
web site.
Quality content is the crucial to interest the users to
pay a quick visit the site, that’s what this web page is providing.
whoah this weblog is fantastic i love studying your articles.
Stay up the great work! You realize, a lot of individuals are looking round for this information, you could help them greatly.
whoah this weblog is fantastic i love studying your articles.
Stay up the great work! You realize, a lot of individuals are looking round for this
information, you could help them greatly.