CKEditor HTML WYSIWYG Editor

Web-based Word Processor For Your Web Pages

Posted on February 23, 2017 in APIs & Plugins

When you develop a web page or a web application with the content creation features, you need to implement an interface to let your users add texts, images, videos, and all their content in a user-friendly manner. For content creation, the user expectation is always a simple interface which is similar to Microsoft Office Word or OpenOffice. The best way to implement this feature is, including a web-based word processor (or in advanced terms, we can call a WYSIWYG editor) in your web application.


WYSIWYG (pronounced “wiz-ee-wig”,  acronym for “what you see is what you get”) editor is a program that allows a developer to see what the end result will look like while the interface or document is being created with the content. WYSIWYG editor family began with simple word processing programs and evolved into more sophisticated programs like Microsoft Office Word over time. For web, we have to use a special member of this family, HTML WYSIWYG editors. 

CKEditor and TinyMCE are the most widely-using WYSIWYG editors that bring common word processor features directly to your web pages. Users feel comfortable to use these tools since their interface is very similar to PC-based word processor software like MS Office Word. Web developers love these programs because they can convert the content in the editing area into a HTML code which can be directly fetched and stored in a database as normal text. And both these tools are open-source! 

As a web developer, I prefer CKEditor over TinyMCE for two reasons;

1) Advanced Features + Documentation + Community Support
We are web developers. Our clients have various expectations and we often have to tailor our product according as per their requirement. CKEditor has a rich API, rich libraries, and custom tools with a great documentation and better community support. You won’t believe that I used CKEditor for content creation purposes of a StackExchange-like web application for my school.

2) Customizability 
I once included the Office 2013 skin to the custom build of my CKEditor and a friend of mine said “Wow, this is like using Office Word on a web browser”. For us, web developers, it’s just a matter of code. But general users feel very comfortable when our tool is customized for their tastes. CKEditor has the essential gear to cater users with different flavors and you will definitely love it. 

Alright boys, let’s get into our business. First, you have to download CKEditor tool set from web and keep it in your root directory (For Laravel users, it’s your public directory). Then we have to include few mark-up code lines to the place where you keep your word processor and link your webpage with CKEditor. Let’s see the steps.

1) Download CKEditor from Builder tool http://ckeditor.com/builder

You may wonder why I recommend you the Builder tool. Yes, you can always download the CKEditor tool set and then separately add extra plugins, skins, and languages. But if you use Builder, you can load all the features into one set and there will be no need to play with your code. (Builder makes your life easy)

There are two types of plugins in CKEditor. Preset includes plugins coming from CKEditor developers originally. Under 1. Choose preset, you can choose how many plugins you want in the preset. You can compare the differences among Basic, Standard, and Full preset options from here

Under 2. Select your plugins and skin, you find additional plugins and skins, mostly coming from third-party developers for specific purposes. As per your need, choose what you want. 
e.g. For Math inputs, choose “Equation Editor” plugin. For instant text editing, select “Floating-Tools” plugin.

Now from Available skins section, select a skin you like. 

Under 3. Finalize and download, select the language you want to see in your editor (Yes, you can get Sinhala). Now check “I agree …..” statement, then select “Optimized” (A .zip file will be downloaded) and, finally click the “Download CKEditor”. 

2) Extract CKEditor to your Root directory

You know how to extract a .zip file, right? Inside the .zip file, you will have the ckeditordirectory. Keep it inside your Root directory of the project. (For Laravel users, it’s your Public directory)

3) Link CKEditor with your web page



To save the content in your text area, you can simply include textarea block into a HTML form and using HTML post method, submit the text area content as text in raw HTML. 

Now comes a small understanding. If you call your saved content in the database, you can retrieve only a raw HTML text with various HTML tags and scripting codes. To see what the HTML text really look like (i.e. original content we entered), we have to convert the raw HTML into the normal rich view.

If you use PHP (or any PHP-based framework), use following code snippet to convert your HTML code into rich characters. Here in the following example, I assume you have an object called news_item and the HTML text is stored inside it as body attribute. 


If you use any other language, just use the method to convert HTML into rich characters and apply it to your saved HTML content. 

Now it is time for us to try our code. Leave a comment if you have any trouble. My next tutorial is on adding images to CKEditor with KCFinder integration: CKEditor: Image Upload with KCFinderDon’t miss it, because image uploading is an essential feature almost all the time. Happy coding! 

comments powered by Disqus