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.
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.
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.)
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!)
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>
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');
editor1.display();
</script>
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.
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:
<?php
$content=addslashes(preg_replace('`[\r\n]`','\n',$content));
?>
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 ?>');
editor1.display();
</script>
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');
editor2.display();
</script>
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!
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.
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.
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:
Note that what is displayed for these font families depends on browser/system settings.
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:
There are eight different text styles to choose from for your content. They include:
Normal
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.
There are additional text decorations and styles such as bold, underline, italic, superscript and subscript that are available through the use of buttons.
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.
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: http://koivi.com/WYSIWYG-Editor/). 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.
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.
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.
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="opener.page.addImage(\'http://example.com/path-to/image.jpg\')">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.
UPDATE (9/12/2006): I just received a couple reports about "Access denied" errors in MSIE. Initially, I thought this was due to their browser settings; then my browser started doing it as well. Seems that an update to MSIE/windows at some point recently causes this to happen, and makes the editor useless in MSIE. However, by simply removing the SRC attribute from the IFRAME tag in editor.js line 371, it works again. This whill, however, cause problems with secure/insecure content when using with HTTPS protocol. Fix suggestions welcomed and appreciated.
UPDATE (4/3/2006): A fix was appled that helps MSIE from complainint about access denied errors due to caching. More Info Thanks again to André.
UPDATE (4/2/2006): A fix was appled that keeps MSIE from complainint about non-secure items over an SSL connection when using the editor by adding a SRC attribute to the generated iframe element. Thanks André for finding this and suggesting the fix!
UPDATE (9/2/2005): Safari anyone? Check out the BETA verions that supports some function in SAFARI! Granted, it's not nearly as featureful as the one on this page, but it's a definate first step to supporting Safari...
UPDATE (8/25/2005): I've decided to give a little bit of documentation about adding images on this page. There haven't been any released updated to the code; however, I will probably be doing a large rewrite (already started) so that browsers like Safari are supported.
UPDATE (4/27/2005): The editor now supports the use of a style sheet for the iframe element. This allows you to make the editor content look how it would on the page the user is editing.
UPDATE (4/27/2005): The editor now supports the use of SpellerPages 0.5.1 for a spell check feature. Eventually, I may update this article to demonstrate the two new features added today, but for now you're on your own.
UPDATE (2/9/2005): I have managed to find time to get rid of the browser UA checking. This editor is now self-sufficient - no need for the Browser Detect Lite script anymore.
MAJOR UPDATE (1/28/2005): I've received many requests and questions regarding the ability to use multiple instances of this editor on a single web page. The previous versions allowed you to display multiple editors, but they would not function properly. The key word here is "instances." That's right! The new version of this editor has had some major work done to the code to make it Object Oriented JavaScript. This page has now been updated to reflect that as well as give some examples on its use. There is still some work to be done within the Javascript source as well as getting some more documentation on this page. Eventually I'll get around to it.
UPDATE (1/11/2005): Thanks to Shimon Young for spotting a bug! If the form is submitted while in source view, the editor view is toggled before processing information so that the HTML code is submitted correctly.
UPDATE (12/8/2004): Table insertion support has been added for MSIE browsers.
UPDATE (5/17/2004): The editor now has the ability to display a textarea (and a warning to the user) if the browser does not support the editor. There were a few changes to the script in order to facilitate this, including the ability to easily set the height, width, submitted field name and default content of the editor.
UPDATE (5/11/2004): OK, the problem I was having is now fixed. Thanks to Alberto Berselli for helping out on this. The hidden textarea was changed to a hidden input type with the name "html_content" (which is the variable that will hold the HTML code submitted) and uses the id "iView_content" in the javascript code.
The next step of development for this project is to create a loading script that will display either this editor, or a plain textarea box for browsers that do not support it. The goal of this project is to integrate the editor into a CMS that I have been building (which may or may not be released to the public).
UPDATE (5/10/2004): MSIE font foreground and highlight colors now work! That makes this a nearly complete cross-browser TTW (Through the Web - or works inside a browser) WYWSIWYG editor. I am currently having problems with getting the iView_content field to be set on form submission, but I am going to try and integrate this into a CMS I am working with, so this development should take much less time than the last fix!
If you have questions or comments on any of the programming or description of this page, please direct them here.
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.