Adding a Rich JavaScript 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:

Adding Reach JavaScript Editor To Your Site

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.

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:

Edit Article<script type="text/javascript" src="ckeditor.js"></script></pre>
<h1>Edit Article</h1>
<form action="form_handler.php" method="post">
<div>
<h1>Article Title</h1>
<textarea name="content" rows="10" cols="80">Here's some sample text</textarea>

<script type="text/javascript">
CKEDITOR.replace('content');
</script>
<input type="submit" value="Submit" /></div>
</form>

Here’s how the form looks:

CKEditor Example

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:

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

</pre>
<h1>Edit Article</h1>
<form action="form_handler.php" method="post">
<div>
<h1>Article Title</h1>
<textarea name="articleContent" rows="10" cols="80">Here's some sample text</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>
<pre>

Here’s how the form looks:

TinyMCE Example

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.

Redactor

http://redactorjs.com

Red Actor Javascript Editor

Redactor is the most fantastic yet beautiful and easy-to-use WYSIWYG editor on jQuery. It is lightning fast, small, scalable, and powerful.

You can easily make your web project much more attractive for your customers and visitors by implementing the Redactor as your default text-editor.

You can upload files and images using drag-n-drop, set up autosave, develop your own plugins and extensions.

Features

  • Awesome drag & drop files and images upload
  • Keyboard shortcuts
  • Many toolbar options
  • Various display modes
  • Source code view
  • Incredible fullscreen view
  • Autoresize as you type
  • Autosave utility
  • Multiple editors on the same page
  • API
  • Support and regular updates

Cross-browser

  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Opera
  • IE 8+

Download Redactor:

http://redactorjs.com/download/

Installing Redactor

To install Redactor, place the following code between the <head></head> tags:

<script src="/js/redactor/redactor.js"></script>
<link rel="stylesheet" href="/js/redactor/css/redactor.css" />

If your Redactor download is placed in a different folder, don’t forget to change file’s paths.

You can call Redactor using the following code:


<script type="text/javascript">

$(document).ready(

function()

{

$('#redactor_content').redactor();

}

);

</script>

This code may also be placed between the <head></head> tags or at any other place on the page.

Finally, you need to place a <textarea> element with ID “redactor_content” (or with the ID that you set during Redactor’s call). This element will be replaced by the visual representation of the Redactor.

<textarea id="redactor_content" name="content" style="height: 560px;"></textarea>

Gathering everything:


<!DOCTYPE html>

<html>

<head>

<title>Redactor</title>

<meta charset="utf-8">

<script src="/js/jquery-1.7.min.js"></script>

<link rel="stylesheet" href="/js/redactor/css/redactor.css" />

<script src="/js/redactor/redactor.js"></script>

<script type="text/javascript">

$(document).ready(

function()

{

$('#redactor_content').redactor();

}

);

</script>

</head>

<body>

<textarea id="redactor_content" name="content" style="height: 560px;"></textarea>

</body>

</html>

See live preview.

Be careful: if you want the editor’s area to be the same height as the <textarea> itself, set the proper height. This is shown in the example above.

Hint: you don’t have to set width as Redactor will always be 100% of its container size. Therefore, if you wish to set a specific width, you should wrap the <textarea> with a container that has the appropriate specific width, like this:


<div style="width: 700px;">

<textarea id="redactor_content" name="content" style="height: 560px;"></textarea>

</div>

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor’s degree in Engineering from State University Of Bangladesh, I’m also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i’m a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I’m also a Course Instructor of ZCPE PHP 7 Certification and professional web development course at w3programmers Training Institute – a leading Training Institute in the country.
4 comments on “Adding a Rich JavaScript HTML Editor to Your Site
  1. I do every thing again and again what you do but i can’t show the editing menu, show the simple form only. I try with ckeditor and redactor but same thing happen. Now what can i do ? Please help me.

Leave a Reply

Your email address will not be published. Required fields are marked *