RTE Editor

[Crip]

I saw this thought it might be a useful snippet..

NS6+ IE5+ Rich Text Editor (for textareas)
Description: Replace a form's textarea field(s) with a custom one that supports WYSIWYG formatting with this Rich Text Editor script. It allows the user to easily format the entered content, such as make it bold, change its size, colors etc. The resulting source code is then submitted as regular text for further processing by your form script.

This script works in IE5+/Mozilla 1.3+/Mozilla Firebird/Firefox 0.6.1+/Netscape 7.1+. In Mozilla, it relies on the Mozilla Rich Text Editing API. Browsers that aren't supported should see just a regular form textarea.

• See Demo: http://www.dynamicdrive.com/dynamicindex16/richtexteditor/index.htm
  Directions:
  
  Simply download the zip file rte.zip (right click, select "Save As"), which contains all the necessary files for the script. Included is also "install.htm", our quick guide to adding the script to your form. For easy reference, the installation instructions are shown below as well.
  
  Basic steps to installation
  Step 1: Insert the below script into the HEAD section of your page:
  
  
  Code Select Expand
  
<script language="JavaScript" type="text/javascript" src="richtext_compressed.js"></script>

  
  **Note: Alternatively, you can insert the below code instead to reference the original, non compressed version of the .js file instead. This file is significantly larger than the compressed version, though the source is human readable:
  
  
  Code Select Expand
  
<script language="JavaScript" type="text/javascript" src="richtext.js"></script>

  
  Step 2: Inside the zip file you downloaded, upload the files:
  
  1) The relevant .js file you have chosen above
  2) The sole .css file included in the zip file
  3) Palette.htm, blank.htm, and "insert_table.htm"
  4) The entire images directory
  
  Upload the above to your web page directory, in the same directory where your form is in.
  
  Step 3: Inside your form where you wish the rich text editor to appear, add the below code:
  
  
  Code Select Expand
  
<script language="JavaScript" type="text/javascript">
<!--
//Usage: writeRichText(fieldname, html, width, height, buttons, readOnly)
writeRichText('rte1', 'here's the "<em>preloaded</em> <b>content</b>"', 400, 200, true, false);
//-->
</script>

  
  As you can see, you can control the initial content and dimensions of the rich text editor. "rtel" is the name of the text editor, which can be arbitrary but should be unique.
  
  Step 4: Finally, just before the form containing the rich text editor is submitted, the script needs to sync the value contained within the editor to ensure it gets properly submitted. To archive this, a special function needs to be attached to the onSubmit event of your form. This is shown below:
  
  
  Code Select Expand
  
<form name="myform" onsubmit="return submitForm();">

<script language="JavaScript" type="text/javascript">
<!--
function submitForm() {
//make sure hidden and iframe values are in sync before submitting form
updateRTE('rte1'); //use this when syncing only 1 rich text editor ("rtel" is name of editor)
//updateRTEs(); //uncomment and call this line instead if there are multiple rich text editors inside the form
alert("Submitted value: "+document.myform.rte1.value) //alert submitted value
return true; //Set to false to disable form submission, for easy debugging.
}

//Usage: initRTE(imagesPath, includesPath, cssFile)
initRTE("images/", "", "");
//-->
</script>

<!-rest of your form-->
"
"
</form>

  
  Don't be intimated by Step 3. Basically, just add the above script containing function submitForm() to your form, and attach it to the onsubmit event handler inside the form tag.
  
  Adding more than one rich text editor inside the form
  You can easily add multiple rich text editors within the same form. Simply repeat Step 3 for each instance of an editor. Then, inside the script of Step 4, change:
  
  
  Code Select Expand
  
updateRTE('rte1');

  
  to call instead:
  
  
  Code Select Expand
  
updateRTEs();

  
  And that's it.....