Rich Text (WYSIWYG) HTML Through-The-Web Editor

On this page is an example of a web content editor for use in custom Content Management Systems (CMS). This editor was designed and tested to work with the following browsers:

Also, the beta version actually partially works with Safari 2.0 (412) as well! See that page for more comments and features including language translations for interface elements.

The editor can be used to visually create content that can be placed on a web site where the user only needs to have familiarity with a word processor.

As initially released on Jan 28, 2005, this editor is programmed using Javascript in an object oriented way. In other words, the editor is no longer just a bunch of functions that work together to accomplish this. Instead, the editor.js file now defines a class that can be used to create editor objects with.

Multiple Instances

Previously I said it could be done, but never had the time to really test it out. Well, I was wrong (nobody's perfect!).

However, now that the source for the editor has been converted to OO Javascript, you can put as many "instances" of the editor on a page as you want!. Check out the information to the left for more information about use this feature.

TTW HTML Editor Interface

Using the TTW WYSIWYG Editor

Since I get a lot of requests for code examples on how to use the editor, I will give you some instructions on how to use it now that the source code has been converted to object-oriented Javascript. (Of course, you could have just used the "View Source" option in your browser.)

Displaying the Editor

  1. The first step in getting the editor to work is to download the files. Once downloaded, extract the zip archive so you can actually use the files. (Yes, some people actually forgot to do that!)

  2. Next, create the HTML in which you want to use the editor. In the head of that document, use the following lines to include the Javascript WYSIWYG_Editor class definition file (changing directory names where appropriate to fit your configuration):

    <script type="text/javascript" src="editor.js"></script>
  3. Find the location in your HTML source where you want the editor interface to be displayed. The editor is made to be displayed inside an HTML form so that you can actually send the data somewhere else. In your form tag, you will need to add the onsubmit atribute and tell it to call a class method before submit (or you will get no data submitted).

    Your HTML form tag should look similar to: <form onsubmit="editor1.prepareSubmit()" method="post">

    Now, insert the following in the place that you want the interface to be displayed (changing variable names to suit your needs):

    <script type="text/javascript">
        var editor1 = new WYSIWYG_Editor('editor1');

    The class will take more optional arguements, and there are also a number of class properties that you can edit to make the editor display differently. For now, you will have to view the Javascript source code to find those. Eventually, I may be able to find time to outline each of the properties on this page as well.

That's it! Seriously, that is all you have to to display the editor on your page.

Loading Content Into The Editor

So now that this page has become a bit popular, I am starting to get a few email messages (7 or 8 a day) asking how to put content into the editor when it is displayed. Obvisouly, people are looking to integrate this into some sort of CMS.

In order to do this, you need to be sure that there are no newline or carriage return characters in the content (and that there are no </script> tags in it. (You may be able to get around the script end tag by substituting the brackets with something else, but I haven't had a reason to do so as of yet.) To do this in PHP, we can use a simple regex to accomplish this:


What the code does above is looks for all "\r" and "\n" characters and replaces them with the literal string '\n'. This way, when you generate the javascript code, the content will be all on one line so that your browser doesn't get a javascript error. The addslashes function will also escape any single quote marks found in the content by prepending a backslash in front of it. This prevents your content's quote mark from ending the javascript string prematurely.

Now that the content is ready to be used in the JavaScript source inside the HTML output, we can load the data into the editor. To do this, you just need to passed the content to be loaded as an argument to the constructor. This example is done using PHP to generate the HTML output, so if you are using other languages, you will need to adapt this to your needs. All that is needed to do is change our original code above for displaying the editor to the following:

<script type="text/javascript">
    var editor1 = new WYSIWYG_Editor('editor1','<?php echo $content ?>');

Displaying Multiple Instances of the Editor

Want to have more editors on this page? If so, all you'd have to do is include the following where you want it to display:

<script type="text/javascript">
    var editor2 = new WYSIWYG_Editor('editor2');

Of course, you'd have to edit variable names to include more editor interfaces as well as add the correct method calls to the HTML form tag as well. Each of the editors will now operate independent of each other. It really doesn't get much simpler than this!

Accessing the Submitted Code

When you submit the form that contains the editor interface, you should be able to access the generated HTML as submitted in editor1_content where "editor1" is the variable name (and first arguement passed to the constructor) you used to create the editor.

If you are finding that the variable is not submitted, be sure that your form does not have another element with the same name attribute as your editor's Javascript variable name. If it is submitted, but is always empty, check the same thing as well as being sure that you have hadded the correct onsbumit value.

Editor Content Formatting Features

Below are descriptions of the features included with this editor. Note that text formatting may change according to style sheets specified in the programming of the website the content will be placed in.

Font Family

There are five different generic font families to choose from for your content. These styles may display differently on different browsers as well as on different computers. These generic font families include:

  • Cursive
  • Fantasy
  • Sans Serif
  • Serif
  • Typewriter

Note that what is displayed for these font families depends on browser/system settings.

Font Size

There are five different relative font sizes to choose from for your content. These sizes may display differently on different browsers as well as on different computers. These relative font sizes include:

  • X Small
  • Small
  • Medium
  • Large
  • X Large

Text Styles

There are eight different text styles to choose from for your content. They include:

  • Normal

  • Heading 1

  • Heading 2

  • Heading 3

  • Heading 4

  • Heading 5
  • Heading 6
  • Address

Font Color and Highlights

There is a palette of 70 colors to choose from for the color of the type as well as the background color of the type. The examples below show what a selecting blue color for each would look like.

  • Font Color
  • Highlight Color

Other Text Decorations and Styles

There are additional text decorations and styles such as bold, underline, italic, superscript and subscript that are available through the use of buttons.

Content Alignment

The user of this editor can also specify the content to be justified left, center or right. There are also buttons to allow a user to indent and outdent content content blocks.

There is a button to insert tables. When clicked, the user will be prompted for the number of columns per row, then the number of rows in the table. This option allows users to create tabulated text alignment.

Web Elements

Within this form, there are buttons for creating web elements like links, lists, tables and horizontal rules.

Links are created by selecting some content, clicking the Hyperlink button, and entering the fully-qualified URL when prompted (example: Removing a link from content is as simple as selecting the content and clicking the button to remove the link.

There are two different types of lists: ordered and unordered. Unordered lists are generally referred to as bulleted lists. Note that depending on style sheets in your site's programming that the bullets or numbers may appear differently.

An example of a horizontal rule can be found just under the submit button toward the top of this page.

View Source Code

For those of you who know HTML, you may want to tweak the code before submitting. The Toggle Mode option that will allow you switch between HTML source editing or the WYSIWYG interface.

Editor Style Sheets

What to use this editor for a web site that uses CSS to define text styles, but the people using the editor keep changing the colors from default? If so, use a style sheet so that the web site's text styles are reflected in the editor! Simply pass the path to the style sheet as the 6th parameter to the WYSIWYG_Editor function or set the editor1.stylesheet property.

Spell Check with SpellerPages 0.5.1

Need to allow for spell checking? Download SpellerPages 0.5.1, and simply pass the path to it as the 7th parameter to WYSIWYG_Editor or set the editor1.spell_path.


There is no support for inserting images in the editor. The purpose of this editor is to allow site owners to do quick text formatting to their site. Since this is being developed for a custom CMS, the data submitted via this form would be stored in a database - images would be handled in a different area of the CMS. Once the CMS is completed, I may make it public if there is enough interest in it.

This editor does support the adding of images into the content window. However, at this time, I have the option disabled in the editor.js file because of the need for a server-side script (my implementation is done in PHP). For those of you who are curious or want to implement the image control you must first set the this.image_button = true; in editor.js (around line 135). Then in WYSIWYG_Editor.prototype.insertImage, there is a reference to /_include/back_end/image_dialog.php replace this reference with the page that you want to see in the popup. This page (in my implementation) is simply a list of images with "Insert" links. These links look like <a href="javascript:;" onClick="\'\')">Insert Image</a>. That's all you need to enable the image functions.

You can insert script tags into the content for processing, however, you cannot display them within the editor by setting the editor's content property without first modifying it. When parsing the content and finding "</script>", browsers take that as the literal end of the script - even when it is inside the function call. To get around this, you will have to break up any <script> tags so that they look like: <scr'+'ipt>

Also note that when you are providing the content to be displayed in the editor as a method arguement, it must all be on one line and escaped just like all other JavaScript function calls and string assignments. Don't forget to change all single quotes to \' and replace all line feeds and carriage returns with \n and \r respectively.



If you have questions or comments on any of the programming or description of this page, please direct them here.

Source Code

You can retrieve a copy of the code used for this demonstration in Zip format. This includes this page as well as the Javascript and images required. This page has a reference to a file called "site_menu" that you can safely remove or ignore.