October 22, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Enhancing Web Forms with Rich Text Editors

  • March 19, 2007
  • By Vlad Kofman
  • Send Email »
  • More Articles »

Cross-Browser Rich Text Editor by Kevin Roth

So far, I have described custom RTEs on popular sites, but if you want to install one in your own project, you do not have to write it from scratch. One of the popular RTEs has been around since 2003* and was written by Kevin Roth. It is licensed under Creative Commons License, which means you can freely use it on your site, but there is also an option to buy the "uncompressed" source from the author. This RTE supports all major browsers and, if it is loaded on an unsupported version, it will just show a text area. The amount of supported formatting and editing commands varies per browser, but is very impressive for one man's work. Please see the references section for a link to the feature matrix.

* In 2003, this RTE won a Planet Source Code superior coding contest.



Click here for a larger image.

To implement Kevin's RTE, download the source code, unzip it someplace in the web server's directory structure, and add a reference to the main JavaScript file in the HEAD tag of the form page where RTE should appear. For example, if you extracted to /js/rte, insert this reference to the script:

<script language="JavaScript"
        type="text/javascript"
        src="js/rte/richtext_compressed.js"></script>

To initialize the RTE, call an API function:

//Usage: initRTE(imagesPath, includesPath, cssFile)
initRTE("images/", "", ""); 

Inside the form, exactly in the spot where rich text editor is to appear, add something like this:

<script language="JavaScript" type="text/javascript">
<!--
writeRichText('myRTE', '', 400, 200, true, false);

//Usage: writeRichText(fieldname, html, width, height, buttons,
//                     readOnly)

//-->
</script>

myRTE is the name of the editor, and it should be unique on the form. The next parameter is pre-populated text (with HTML markup), which is useful if there was a problem and the form needs to be re-displayed back to the user. The other parameters are self explanatory.

Note: This version of the RTE will create the <textarea>, and it will not attach the existing one as you will see in some other implementations. Due to this, before the form is submitted to the server, the RTE needs to sync its content to submit everything properly. To sync another API, JavaScript function needs to be called on the onSubmit event of the form. Actually, there are two functions, one if there is only one RTE on the form and another if there are multiple.

updateRTE('myRTE');

or

updateRTEs();

You can put the calls to the init and update functions in the same JavaScript code block. Also, if you choose to do something else when the form is submitted, you can put the call to update in a wrapper function. For example:

<form name="myform" onsubmit="return checkForm();">

<script language="JavaScript" type="text/javascript">
<!.

initRTE("images/", "", "");

function checkForm()
{
   // do something here . check the form
   // make sure hidden and iframe values are in sync before
   // submitting form
   updateRTE('myRTE');

   // use this when syncing only 1 rich text editor ("myRTE" is the
   // name of the editor)
   // updateRTEs();     // if there are multiple rich text editors
                        // inside the form

   return true;
   }    //-->
</script>

The install of this RTE is straightforward; under the hood, it includes a lot of features. If you are looking for a quick way to add an RTE to your form, you may want to consider this implementation.

The DOJO Editor (and Editor2)

Dojo is an AJAX/JavaScript framework in its beta stage (version 0.4.3). I have covered it in some detail in my previous article. One of the widgets that comes with its core installation is Dojo Rich Text Editor contributed to Dojo, written by Paul Sowden and David Schontzler. As with the framework, the Editor is licensed under the Academic Free License.

Here is Dojo's RTE (limited):

After you install Dojo, to use the Dojo's RTE it needs to be loaded. For example:

<script type="text/javascript"
        src="js/dojo/dojo.js"></script>
<script>
   dojo.require("dojo.widget.Editor");
</script>

The editor is highly configurable, and has a lot or features; however, be prepared to look through a lot of badly placed documentation. It also seems that most of the documentation is pointing to the version 1 of the editor, which has been upgraded to version 2 somewhere between Dojo 0.4.1 and 0.4.3.

To insert the Dojo RTE, a custom type can be added to the <textarea>, among other ways. For example:

<textarea dojoType="Editor"
          items="bold;italic;underline;strikethrough;|;createLink;">
</textarea>

For more information on this RTE, please see the reference guide by Paul Sowden and David Schontzler.





Page 2 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel