Create simple cross-browser textarea editor

JavaScript

This tutorial will help you create simple cross-browser textarea editor you can use on any of your HTML forms. View the sample.

UPDATED Dec/2010!

Added support for latest versions of:

  • Chrome
  • Safari
  • FireFox
  • Opera
  • IE9

The main DHTML methods used in 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 used to specify an action to take on the given object:

  • 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 used:

  • 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.

Download the button images here.

CSS File

.editorbuttons {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.editorbuttons li {
	float: left;
}
.editorbuttons li img {
	border:none;
}
.editorbody{clear:both; float:none;}

 

HTML File



    

  • Bold
    • 

  • Underline
    • 

  • Italic
    • 

  • Align Left
    • 

  • Align Center
    • 

  • Align Right
    • 

  • Indent
    • 

  • Outdent
    • 

  • Undo
    • 

  • Redo
    • 

  • Shift+Enter for single line spacing
    • 



< script language= "JavaScript" type= "text/javascript" >  </script> <script language= "JavaScript" type= "text/javascript"> //this calles displayEditor function. Parametars are (textarea name, ,default text, textarea width, textarea height) displayEditor('content', 'Default Text', 600, 300); //--> </script>

JavaScript File

See comments for details

//First set isEditable to false to make sure editor is not loaded in browsers that don't support it
var isEditable= false;
function initiateEditor() {

 //enable designMode if the browser supports it.
 if (document.getElementById && document.designMode)  {
   isEditable= true;
 }
}
//Javascript function dislpayEditor will create the textarea. 

function displayEditor(editor, html, width, height) {
   if(isEditable){
       document.writeln('<iframe name="' + editor + '" id="' + editor + '"  height="' + height + 'px" width="' + width + 'px">');
//create a hidden field that will hold everything that is typed in the textarea
       document.writeln('');
//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 + '');
   }
}

//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 >" ;
//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);
	  edit.close();
//enable the designMode
      edit.designMode =  "On" ;
	  document.getElementById(editor).contentDocument.designMode = "on";
}

//To execute command we will use javascript function editorCommand.
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;
}

PHP File

Most important part of the PHP code is the phpSafe function. This function makes sure that quotes are displayed appropriatly. See comments for details.

 

// 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 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:

 

Related Posts:

8 comments