Add A WYSIWYG Editor To Your Forms, It’s Easy!

Before we begin you are going to need the YUI Library, by Yahoo!, which is issued under a BSD license. You can get the library by going to this link YUI. We, will be using version 2.7.0 of this library for this script.

Once you’ve downloaded the folder, extract the files and put the folder “yui” in a folder where your form will be. Now add the following line of code on the header of your document, this is the CSS file that the editor needs.

<link rel="stylesheet" type="text/css" href="yui/build/assets/skins/sam/skin.css" />

Anything that uses the this library has to be inside an element with the following class ” yui-skin-sam “, so we are going put this class in the <body> tag as follows.

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

Now we are going to create a form with a text box only, you can add your fields if you wish.

<form action="youractionhere" method="post">
<textarea name="message" id="message" cols="70" rows="20">
<strong>Some Text</strong>
</textarea>
<input type="submit" value="submit" />
</form>

Note:the cols and rows attributes will not affect the width or height of the textarea but they are there just in case users have Javascript turned off.

Now that the form is ready we are ready to render the editor. Add the following lines of code as close as you can to the </body> tag in the same order as the are shown.

<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/element/element-min.js"></script>  

<script src="yui/build/container/container_core-min.js"></script>
<script src="yui/build/menu/menu-min.js"></script>
<script src="yui/build/button/button-min.js"></script> 

<script src="yui/build/editor/editor-min.js"></script>
<script type="text/javascript">
// you may corntrol the width and height in here
var myEditor = new YAHOO.widget.Editor('message', {
    height: '200px',
    width: '600',
	dompath: true,
	handleSubmit: true
});
myEditor.render();

</script>

Note:You may change the attribute “name” in the form but the “id”, message, must be the same as as in the line
YAHOO.widget.Editor(‘message‘, {.

We are done!, you should be able to see an editor like in the following image, all that text is text I typed.

wysiwyg

You can use the following snippet of PHP code I wrote to test your editor. I used stripslashes just in case you have magic quotes on.

// don't forget to filter the message before you or when you
// assign it to $message
$message=stripslashes($_POST['message']);

echo $message;

And here is the full source.

<html>
<head>
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="yui/build/assets/skins/sam/skin.css" />
</head>
<body class="yui-skin-sam">
<form action="getmessage.php" method="post">
<textarea name="message" id="message" cols="70" rows="20">
<strong>Some Text</strong>
</textarea>
<input type="submit" value="submit" />
</form>
<!-- Utility Dependencies -->
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="yui/build/container/container_core-min.js"></script>
<script src="yui/build/menu/menu-min.js"></script>
<script src="yui/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="yui/build/editor/editor-min.js"></script>
<script type="text/javascript">
var myEditor = new YAHOO.widget.Editor('message', {
    height: '200px', //control
    width: '600px',
	dompath: true,
	handleSubmit: true
});
myEditor.render();

</script>

</body>
</html>

Tagged as: YUI