Adding a WYSIWYG HTML Editor to Your Site

Explores JavaScript WYSIWYG HTML editors, and shows how to integrate the popular CKEditor and TinyMCE editors into your Web forms.

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:

CKEditor screenshot
CKEditor is a popular JavaScript-based WYSIWYG HTML editor

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:

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

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:

CKEditor in an example form
CKEditor used in an example "article edit" form for a CMS

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 &lt; and > should be encoded as &gt;.

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:

TinyMCE in an example form
The example "article edit" form containing the TinyMCE editor

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!

Follow Elated

Related articles

Responses to this article

16 responses (oldest first):

19-Feb-11 02:31
I have successfully added ckeditor to my Question Answers script at: http://www.aboutcivil.com/answers , Thanks to your nice tutorial.

The WYSIWIG editor now shows up instead of the text field but is not accepting the data. Like when i press submit button, it says "Your answer cannot be empty" , means its not taking the input and wont process it. Can u please help me on this issue??
20-Feb-11 19:42
@haseebjamal: I can't see the WYSIWYG field in your page. Where's your call to CKEDITOR.replace()?

Cheers,
Matt
20-Feb-11 23:30
@Matt
After you have registered, please click on any question, when the answer button shows up below the question, click it and then the ckeditor shows up, working fine but the form is not submitting.

Thanks for your time Matt
21-Nov-11 07:16
Excellent tutorial and dead easy to follow, I have very basic knowledge and managed to add tinymce in minutes - great work!! Thanks!
23-Nov-11 20:34
@matt2002: You're welcome - thanks for the feedback
26-Nov-11 17:29
Thank You, Dead Easy To Follow, Thanks for being such a good teacher...
13-Mar-12 13:47
Hello Matt,
First of all thanks for your tut on CMS. I am trying to add ckeditor into textarea field of edit article page of CMS (downloaded by your site). But no changes is showing there.
I've added

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

to head tag and add CKEDITOR.replace( 'content' ); after the

</textarea>

tag.


Tell what is the problem. I know i am missing out something but dont know actually.
Help me!
23-Mar-12 01:22
@vny009: There is a discussion in the comments for the CMS tutorial about integrating CKEditor:

http://www.elated.com/forums/topic/5114/

Just search the page for "ckeditor".
23-Mar-12 12:20
Thanks for your reply but I've no problem with CKeditor now.
I solved it already. Thanks again for your tutorials.
Can you make a tutorial for how to make a complete basic site by drupal.
I have searched many contents regarding it but not satisfied with that.
29-Mar-12 03:15
@vny009: Glad to hear it. Never used Drupal but I might have a go at some point - could be a fun project!
02-Jul-12 02:28
Dear Matt,

Thanks for another great article.

Can i print this article. kindly send me printable link if possible.

Thanks in advance.
04-Aug-12 14:37

<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
mode : "exact",
elements : "content"
});
</script>



This little piece of code I placed at the top doesn't allow my form's content to be submitted to the database. When I removed it, the form's content was submitted, how do I sort this out? Thanks a lot.
10-Aug-12 02:03
@papadammy: You'll need to post the URL of your form so we can take a look.
02-Dec-12 11:14
Hi-Thanks for this nice tutorial (from wayback when-December 2009!).
I am looking at tinymce editor at the moment.
Currently I am echoing the editor content in form_handler.php with:

<?php
/* post.php : this page shows what insert.php has sent */
echo(stripslashes($_POST['articleContent']));
?>

I really want to try & save the editor content to a file but this is proving difficult for me (see my post on StackOverflow here:
http://stackoverflow.com/questions/13660978/saving-tinymce-textarea-content-to-file/13662092#comment18751239_13662092

[Edited by Richard_Paul on 02-Dec-12 11:15]
03-Dec-12 17:23
31-May-13 16:03
Hi--

I feel dumb asking this since it seems fairly fundamental and no one else has mentioned it so its most likely something I'm doing wrong... but:

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

It's a snippet of code from the CKEditor example that you've shown above. As you can see, the ID or Name of the textbox is "content" and if my understanding is correct, this is the ID or Name that needs to go into the CKEDITOR.replace call. In this case, "articleContent" is written there when it should be "content"? I'm kind of confused about this. Please help. Thank you.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page