Tutorial #43
Embedded Text Editor - CKEditor Intermediate   2014-01-20

Introduction

The basic way to allow a user to enter arbitrary text into a web page form is through a textarea input, but many applications need to represent richer content than these can handle. Examples include web-based content management systems, chat systems, social media sites, etc.

Most users are not able or willing to enter rich text as HTML so simplified markup languages such as Markdown and Textile have been developed. But these are a half measure - what we want to offer users is a full text editor that resembles programs like Microsoft Word, albeit with a smaller set of features. This should support basic text formatting, inclusion of links, display of images etc. and the text resulting from user entry and formatting should be sent to your server as HTML.

One popular solution is CKEditor from Frederico Knabben. This offers a large number of features, flexible styling and extensive customization. The editor is implemented in JavaScript and, despite a daunting range of options, can be set up very easily.

This tutorial walks you through a basic ckeditor configuration and shows how you access the generated text on the server. The demo looks like this:

Demo 1 screenshot for this tutorial


Step by Step

1: Go to the CKEditor site and download the package of code as a ZIP file.

The Download page offers three prepackaged versions of the code base. For this tutorial I chose the Full Package. This is overkill for most applications but it shows you all of the core options.

Image 1 for this tutorial

2: Unpack the ZIP file

The distribution ZIP file contains the ckeditor.js file along with sample code, CSS files, etc. You can put all of this into your site's directory tree or just extract ckeditor.js into your javascripts directory.

3: Take a look at the Demo

The next section will describe how to configure your web page to use ckeditor, but for now, look at the demo and try out the various features available. The icons in the toolbars should be self explanatory, but each of them has a short tooltip.

Image 2 for this tutorial

Try entering some text and changing the font / color/ size / etc. Submit the text to the demo server and the returned page will show you the Raw HTML that ckeditor has generated.

The HTML is modern in that it uses styles but because there is no associated CSS file, you cannot include CSS classes, unless you choose to edit the HTML Source which is available to you.

For a basic editor configuration, this is all there is to it. The editor works independently in the browser and it is up to your server code to handle the uploaded HTML.

As with ALL user input sent to server, you need to protect against content that includes inappropriate material or malicious code. The editor cannot prevent that.


Understanding the Code

Adding ckeditor to your page is extremely simple, at least in this example.

Include the ckeditor.js script and create a form that will submit the user content to your server.

Create a textarea input and give it a unique name

That's it ! When the page loads, ckeditor takes over any Textarea inputs and transforms them into the editor seen in the demo.

On the Server just handle the text from the editor as you would any other textarea in a form. The only difference is that the text is HTML instead of plain text.

In this demo code, the server escapes the < and > characters and renders them, so that you can see the raw HTML back on the client.


In working with ckeditor I ran into this console error: Uncaught TypeError: Cannot read property 'ltr' of undefined. Specifically I installed the full download after having used the standard download and reloading the demo page did not display the editor but did report this error in the console. This is reported elsewhere and the solution is to clear you browser cache. It should not be an issue in the regular use of the editor.

CKEditor is capable of a lot more than shown in this example. For example, you can configure div blocks as editable such that they transform from regular HTML into editor frames if you click on them. You can specify the language that will be used in the editor, including right to left languages such as Arabic and Hebrew. It is especially nice that ckeditor has been written with Accessibility in mind. Take a look at the code samples that are included in the distribution and the CKEditor Documentation.

CKEditor seems to work great as a general purpose in-browser editor. But if the input that you want to handle is more structured, specifically software source code, then an editor with language-specific syntax highlighting is going to be a better choice. Look out for a tutorial on this site that covers the ace code editor.


More Information

Wikipedia page on Online Rich Text Editors

CKEditor

CKEditor on Github

CKEditor Documentation


Code for this Tutorial


Share this tutorial


Related Tutorials

44 : Embedded Code Editor - Ace   (Intermediate)


Comment on this Tutorial


comments powered by Disqus