Create simple cross-browser textarea editor

Added on Tuesday, December 15th, 2009. Written by DEVpapers.

This tutorial will help you create simple richtext editor you can use on any of your HTML forms. View the sample.
The main DHTML methods we will use 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 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=”‘ + 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 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
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($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:

Author: Emir Plicanic of bewebmaster.com