When putting together the front end for various CMSes a common request is to allow the administrator to add HTML to text fields.
This can bring with it bring with it all sorts problems such as security and from my point of view malformed, or invalid XHTML (count those <font> tags!). One way to get around these problems is to use a rich text editor component in your page. This is a small box which replaces your text field and allows the administrator to add HTML content using a WYSIWYG interface.
There are plenty of rich text editors out there, both commerical and open-source, but I decided to have a bash at creating my own.
The rich text editor works by replacing textareas with iframes. The document inside the iframe is switched to document edit mode which allows the user to type and select type inside of a webpage. Formatting for the rich text editor is controlled by hooking in to browsers' navtive APIs via Javascript. When you submit the form the content of the rich text editor is sent as the value of the replaced textarea.
Feel free to download and use this rich text area as you see fit, but first read this page to find out how to use it, it plays nicely with some of the other Webamin Javascript components that I've been working on recently... more about those coming soon!
Include the files that you'll need:
<script src="/webadmin-richtexteditor/prototype.js" type="text/javascript"></script>
<script src="/webadmin-richtexteditor/editor.js" type="text/javascript"></script>
<link href="/webadmin-richtexteditor/styles.css" rel="stylesheet" type="text/css" />
Syntax:
new Webadmin.RichTextEditorForm(form id, {options});
Example:
new Webadmin.RichTextEditorForm("textarea1");
This is set using properties of the options object.
You can customise the buttons shown on the control strip.
Syntax:
button: true|false
Example:
ul: true, li: true, strike: true, subscript: true, superscript: true, underline: true, unlink: true
The rich text area could easily be extended to add additional HTML tags.
This is set using properties of the options object.
If you have multiple textareas inside a form and only want selected textareas to be changed in to rich text editors you should use the only param. This should be a CSS class which has been applied to the textareas that you wish to become rich text editors.
Syntax:
only: 'class name'
Example:
only: 'editable'
This is set using properties of the options object.
You can also pass in a callback using the callback param. This should be a Javascript function and will be passed one param, value, which is the HTML content of the rich text editor. This function will be fired for each textarea when the form is submitted.
Syntax:
callback: function(value)
Example:
callback: function(value){ alert(value); }
Example:
new Webadmin.RichTextEditorForm('form1', {ul: true, ol: true, only: 'editable', callback: function(value){ alert(value); });
This would change any textareas with the class of 'editable' from the form with the id of 'form1' in to rich text editors with the default control stip and additional buttons for unordered and ordered lists.
Using in a page would look something like this:
<script type="text/javascript">
new Webadmin.RichTextEditorForm('form1', {ul: true, ol: true, only: 'editable', callback: function(value){ alert(value); });
</script>
One of the big drawbacks of using the browser APIs for rich text editing is that they can produce some pretty wild mark up. You can be assured that it will be well-formed XML but there is no guarantee that it will be valid XHTML! For example Internet Explorer generates all tag and attribute names using capital letters where the XHTML spec states that both should be in lowercase letters. The biggest problem is when the adminstrator cut-and-pastes from Microsoft Office, this inserts Microsoft's proprietry code in to the textarea and some leads to some pretty horrific results.
I've factored this in when creating the rich text area and included some functions to clean up the HTML output and remove any invalid tags and attributes, this isn't perfect yet but it's a start and something I intend to work on further.