Adding a WYSIWYG HTML Editor to Your Site

What is a WYSIWYG HTML editor?

A WYSIWYG (What You See Is What You Get) HTML editor is a JavaScript-driven Web form field that lets users enter formatted text, much like using a word processor. The editor then converts this formatted text into HTML when the form is sent to the Web server. Here’s what a WYSIWYG HTML editor looks like:

Most WYSIWYG editors let you do at least the following:

• Add formatting such as bold, italic, and underlining
• Create headings (H1, H2 and so on)
• Create links
• Use different font faces, sizes, and colours
• Insert bulleted and numbered lists
• Create tables
• Left-align, right-align, centre, and justify text
• Embed images, Flash movies, and more
• Edit the HTML directly if desired

Many editors take things further, allowing you to upload images, Flash movies and other files to the Web server, and browse files on the server.

Advantages of a WYSIWYG editor

The nice thing about a WYSIWYG editor is that your site users don’t have to understand HTML in order to produce richly formatted content. This makes WYSIWYG editors great for content management systems, blogging systems, webmail applications, or any situation where you want people to be able to enter rich content via a Web form.

Even if you’re familiar with HTML, you’ll probably find it quicker to enter and format text using a WYSIWYG editor than hand-coding your HTML markup and CSS.

Disadvantages of a WYSIWYG editor

One problem with WYSIWYG HTML editors is that they tend to churn out poor-quality, bloated HTML, although recent editors have improved their HTML output considerably.

Another problem is that users of a content management system with a WYSIWYG editor can easily break the style conventions of a site by adding their own non-standard formatting (see Inline HTML editors ruin your brand). For example, the site’s style guide might stipulate that all headings should be green, but the user decides to create a red heading in the WYSIWYG editor. It’s hard to prevent this kind of problem using WYSIWYG HTML editors (although you can lock them down to a certain extent).

For a different way to enter and format content, see Textile and Markdown: 2 Nice Alternatives to WYSIWYG Editors.

The 2 popular editors: CKEditor and TinyMCE

Although there are many JavaScript WYSIWYG editors available today, the 2 most popular editors are CKEditor (formerly FCKeditor) and TinyMCE.

Both editors are free to use, and very feature-rich. Both are excellent choices, and there isn’t much to separate the two these days. The older FCKeditor was harder to work with and produced messier HTML than TinyMCE, but CKEditor is much better in these respects.

You can try out the live demos of CKEditor and TinyMCE and see which you prefer.

File management

Both CKEditor and TinyMCE have optional, paid plugins that allow you to upload files and manage files on the server:

• CKFinder for CKEditor
• MCFileManager and MCImageManager for TinyMCE

Alternatively, various free 3rd-party file manager/uploader plugins are available, including:

• KFM for CKEditor and TinyMCE
• Tinymce Ajax File Manager for CKEditor and TinyMCE
• TinyBrowser for TinyMCE

It’s also easy to write your own file manager plugin, assuming you’re comfortable with JavaScript and a server-side language such as PHP. Both editors make it very easy to integrate plugins. (Here’s a tutorial on writing your own CKEditor uploader in PHP.)

Installing the editors

Both editors are easy to install on your website. Essentially the steps are:

1. Download and install the editor JavaScript code
2. Create or edit a Web form that contains one or more textarea elements
3. Add a small chunk of JavaScript to convert the textarea element(s) into WYSIWYG editor(s)

The next sections briefly explain how to install and use CKEditor and TinyMCE.

Installing CKEditor

Follow these steps to get CKEditor up and running, and embed a WYSIWYG editor in your form:

1. Download CKEditor

Download the CKEditor code from the download page, then extract the .zip or .tar.gz file to a ckeditor folder on your hard drive.

Now move the ckeditor folder into your website folder.

2. Include the CKEditor application code in your Web form

Open the HTML page or template containing the Web form that you want to use with CKEditor. This form should contain a textarea element.

In order to make your form work with CKEditor, you need to include the ckeditor.js file in the page containing the form. Add this line inside the page’s head element:

<script type="text/javascript" src="ckeditor.js"></script>

adjusting the path to your ckeditor.js file if required.

3. Convert your form’s textarea element into a CKEditor instance

The last step is to convert the textarea field into a CKEditor field. To do this, all you have to do is add a singe line of JavaScript to your form:

CKEDITOR.replace( 'fieldname' );

where fieldname is the name or ID of your textarea field.

This should be placed after your textarea field in the markup. Alternatively, you can place it in the head element, or as an onload event handler on the body element.

CKEditor Example

Here’s a complete example form showing how to integrate CKEditor. This is a simple article edit form for a fictional CMS. The CKEditor-related code is highlighted in bold:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Edit Article</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="ckeditor.js"></script>
</head>
<body>
  <h1>Edit Article</h1>
  <form action="form_handler.php" method="post">
    <div>
      <textarea cols="80" rows="10" id="content" name="content"> 
        &lt;h1&gt;Article Title&lt;/h1&gt;
        &lt;p&gt;Here's some sample text&lt;/p&gt;
      </textarea>
      <script type="text/javascript">
        CKEDITOR.replace( 'articleContent' );
      </script>
      <input type="submit" value="Submit"/>
    </div>
  </form>
</body>
</html>

Here’s how the form looks:

When the form is submitted in the above example, CKEditor converts the user-entered content into HTML and stores it in the articleContent field. This field is then sent to a server-side PHP script (form_handler.php) along with any other fields in the form. form_handler.php would then process the content as needed (probably storing it in a database).

When the user next wants to edit the article, the server-side script would retrieve the article content from the database and insert it between the <textarea> and </textarea> tags for editing. CKEditor will then display the content in WYSIWYG format so that the user can edit it.

Make sure your server-side script encodes HTML entities in the content inside the <textarea> / </textarea> tags. For example, < should be encoded as < and > should be encoded as >.

You can see that it’s very easy to get a basic CKEditor WYSIWYG field up and running. Next, you’ll probably want to configure the editor to add/remove options from the toolbar, alter the options in the Styles drop-down menu, tweak the HTML produced by the editor, and so on. Find out more on the CKSource documentation site.

Installing TinyMCE

Setting up TinyMCE is much like setting up CKEditor. The only difference is in the JavaScript that you add to your form. Here’s how to do it:

1. Download TinyMCE

Download the main TinyMCE package, then extract the .zip file to a tinymce folder on your hard drive.

Inside the tinymce folder you’ll find a jscripts folder containing a tiny_mce folder. Move this tiny_mce folder to your website folder.

2. Include the TinyMCE code in your Web form

To make your form work with TinyMCE, you include the tiny_mce.js file in the page containing the form. This file is inside the tiny_mce folder you moved into your website folder.

Add this line inside the page’s head element:

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

adjusting the path to your tiny_mce folder if required.

3. Convert your form’s textarea element into a TinyMCE instance

Finally, convert the textarea field into a TinyMCE field. To do this, add the following JavaScript to your form:

tinyMCE.init({
  theme : "advanced",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  mode : "exact",
  elements : "fieldname",
});

where fieldname is the name or ID of your textarea field.

The JavaScript above creates a TinyMCE editor using the “advanced” theme (all buttons enabled), and positions the toolbar top left. The "exact" mode tells TinyMCE to convert only the textarea elements specified in the elements argument.

You can place this code anywhere in your page body, or in the head element.

TinyMCE Example

Here’s the “article edit” form again, this time integrating TinyMCE. The TinyMCE-related code is highlighted in bold:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Edit Article</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
</head>
<body>
  <h1>Edit Article</h1>
  <form action="form_handler.php" method="post">
    <div>
      <textarea cols="80" rows="10" id="articleContent" name="articleContent">
        &lt;h1&gt;Article Title&lt;/h1&gt;
        &lt;p&gt;Here's some sample text&lt;/p&gt;
      </textarea>
      <script type="text/javascript">
      tinyMCE.init({
        theme : "advanced",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        mode : "exact",
        elements : "articleContent"
      });
      </script>
      <input type="submit" value="Submit"/>
    </div>
  </form>
</body>
</html>

Here’s how the form looks:

As with CKEditor, when the form is submitted the content is sent to the server as HTML.

TinyMCE is very flexible and easy to customize. Check out the list of configuration options, as well as the wide range of bundled plugins. For more info see the TinyMCE documentation.

Summary

In this article you looked at the concept of JavaScript WYSIWYG HTML editors, and learned about their advantages and drawbacks. You explored the 2 most popular editors available today — CKEditor and TinyMCE — and you learned how to integrate both editors with a simple Web form.

Have fun!