BeWebmaster

Create simple cross-browser textarea editor

Ad

This tutorial will help you create simple cross-browser textarea editor you can use on any of your HTML forms. View the sample.
The main DHTML methods we will use to create this cross-browser textarea editor are:

  • execCommand.
    This method  executes a command on the current document, current selection, or the given range.
  • getElementById
    Returns a reference to the first object with the specified value of the ID attribute.

Commands specify an action to take on the given object. Commands we will use are:

  • Bold
    Toggles the current selection between bold and nonbold.
  • Underline
    Toggles the current selection between underlined and not underlined.
  • Italic
    Toggles the current selection between italic and nonitalic.
  • JustifyCenter
    Centers the format block in which the current selection is located.
  • JustifyLeft
    Left-justifies the format block in which the current selection is located.
  • JustifyRight
    Right-justifies the format block in which the current selection is located.
  • Indent
    Increases the indent of the selected text by one indentation increment.
  • Outdent
    Decreases by one increment the indentation of the format block in which the current selection is located.
  • Undo
    Undo the step
  • Redo
    Redo the step

Main DHTML properties we will use are:

  • innerHTML
    Sets or retrieves the HTML between the start and end tags of the object.
  • designMode
    Sets or retrieves a value that indicates whether the document can be edited.

First, we will create the form.htm page containing the buttons and a javascript code that will call the functions which display and update editors textarea. I will not take too much time explaining the html code except that the form is using form.php file to display content submitted.
Download the button images here.

<html>
<head>
<title>Rich Text Editor</title>

</head>
<body>
<script language= "JavaScript" type= "text/javascript" src= "editor.js" ></script>
<table width="750">
<form action="form.php" name="edit" method="POST" id="edit" onsubmit="return submitForm();">
<tr>
<td> <a href= "javascript:editorCommand('content', 'bold', '')" ><img src="images/bold.gif" width="25" height="24" alt="Bold" title="Bold"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'underline', '')" ><img  src="images/underline.gif" width="25" height="24" alt="Underline" title="Underline"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'italic', '')" ><img  src="images/italic.gif" width="25" height="24" alt="Italic" title="Italic"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'justifyleft', '')" ><img  src="images/j_left.gif" width="25" height="24" alt="Align Left" title="Align Left"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'justifycenter', '')" ><img src="images/j_center.gif" width="25" height="24" alt="Align Center" title="Align Center"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'justifyright', '')" ><img src="images/j_right.gif" width="25" height="24" alt="Align Right" title="Align Right"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'indent', '')" ><img src="images/indent.gif" width="25" height="24" alt="Indent" title="Indent"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'outdent', '')" ><img src="images/outdent.gif" width="25" height="24" alt="Outdent" title="Outdent"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'undo', '')" ><img src="images/undo.gif" width="25" height="24" alt="Undo" title="Undo"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'redo', '')" ><img src="images/redo.gif" width="25" height="24" alt="Redo" title="Redo"></a> </td>

<td width="100%" align="levt">Shift+Enter for single line spacing</td>
</tr>
<tr>
<td colspan="12">
<script language= "JavaScript" type= "text/javascript" >
<!--
function submitForm() {
 updateEditor('content');
  return true;
}

initiateEditor();
//-->
</script>
<script language= "JavaScript" type= "text/javascript" >
    //this calles displayEditor function. Parametars are (textarea name, textarea  width, textarea  height)
    displayEditor('content', ' ', 600, 300);
//-->
</script>
</td>
</tr>
<tr><td colspan="12"> <input type="submit" name="Submit" value="Submit"> </td></tr>
</form>
</table>

</body>
</html>

So let's create the javascript file that does all the work called editor.js.

//First lets initiate some variables

var isEditable= false;
var isIE;
var isGecko;
var isSafari;
var isKonqueror;

function initiateEditor() {
 //check what browser is in use
 var browser = navigator.userAgent.toLowerCase();
 isIE = ((browser .indexOf( "msie" ) != -1) && (browser .indexOf( "opera" ) == -1) && (browser .indexOf( "webtv" ) == -1));
 isGecko = (browser .indexOf( "gecko" ) != -1);
 isSafari = (browser .indexOf( "safari" ) != -1);
 isKonqueror = (browser.indexOf( "konqueror" ) != -1);
 
 //enable designMode if the browser is not safari or konqueror.
 if (document.getElementById && document.designMode && !isSafari && !isKonqueror) {
   isEditable= true;
 }
}
//Javascript function dislpayEditor will create the textarea.

function displayEditor(editor, html, width, height) {
   if(isEditable){
       document.writeln('<iframe id="' + editor + '" name="' + editor + '" width="' + width + 'px" height="' + height + 'px"></iframe>');
//create a hidden field that will hold everything that is typed in the textarea
       document.writeln('<input type="hidden" id="hidden' + editor + '" name="hidden' + editor + '" value="">');
//assign html (textarea value) to hiddeneditor
      document.getElementById('hidden' + editor).value = html;
//call function designer
      designer(editor, html);
   }else{
     document.writeln('<textarea name="' + editor + '" id="' + editor + '" cols="39" rows="10">' + html + '</textarea>');
   }
}

//this is designer function that enables designMode and writes defalut text to the text area
function designer(editor, html) {
    var browser = navigator.userAgent.toLowerCase();
    isIE = ((browser .indexOf( "msie" ) != -1) && (browser .indexOf( "opera" ) == -1) &&    (browser .indexOf( "webtv" ) == -1));
     var mainContent= "<html id=" + editor + "><head></head><body>" + html + "</body></html>" ;
//assign the frame(textarea) to the edit variable using that frames id
     var edit = document.getElementById(editor).contentWindow.document;
//write the content to the textarea
      edit.write(mainContent);
//enable the designMode
      edit.designMode =  "On" ;
//enable the designMode for Mozilla
    if(!isIE){
     document.getElementById(content).contentDocument.designMode = "on" ;
    }
}

//To execute command we will use javascript function execCommand.
function editorCommand(editor, command, option) {
// first we assign the content of the textarea to the variable mainField
    var mainField;
          mainField = document.getElementById(editor).contentWindow;
 // then we will use execCommand to execute the option on the textarea making sure the textarea stays in focus
   try {
          mainField.focus();
          mainField.document.execCommand(command, false, option);
          mainField.focus();
    } catch (e) { }
}

function updateEditor(editor) {
 if (!isEditable) return;
//assign the value of the textarea to the hidden field.
 var hiddenField = document.getElementById('hidden' + editor);
 if (hiddenField.value == null) hiddenField.value = "";
  hiddenField.value = document.getElementById(editor).contentWindow.document.body.innerHTML;
}

Now that we have the JavaScript code let's create form.php file. Most important part of the form.php is the phpSafe function. This function makes sure that quotes are displayed appropriatly.

<?php
// from the form we are getting the hidden field value and sending it to the phpSafe function
$hiddencontent = phpSafe($_REQUEST['hiddencontent']);
function phpSafe($strText) {
 //removes backslash created by php from the string
    $tmpString = $strText;
    $tmpString = str_replace(chr(92), "", $tmpString); 
    return $tmpString;
}
echo $hiddencontent;
?>

Save all three files in the same folder and upload to your server. Play with the code and try adding more functionality or buttons. Here are some helpfull resources: