Top 3 Free Rich Text Editor For Web Application

Are you looking for a free rich text editor for your web application? A WYSIWYG(what you see is what you get) editor allows you to enter descriptive content along with HTML elements. In this article, we discuss the top 3 free rich text editors which are popular and easy to install.

There are several WYSIWYG editors available on the Internet. I have given a try to some of the editors and picked up a 3 best free WYSIWYG HTML editor which are – CKEditor, TinyMCE, and Trix.

Why Need of Rich Text Editor?

One can ask why one should use the rich text editor? The answer is simple. In the textarea, it’s not easy and user-friendly to enter large pieces of content. It is very difficult to enter different kinds of HTML elements in the textarea. Wrapping the content inside elements and maintaining their hierarchy is hard in textarea.

To simplify this problem, we have the option to use a rich text editor. These WYSIWYG editors provide a good user interface and a user experience in place of textarea.

CKEditor – Web Text Editor

CKEditor is a popular and commonly used free rich text editor. This editor is designed to simplify website content creation.

To use the CKEditor, you first need to include its JS file. They have provided 3 types of packages – Basic, Standard, Full. You can choose either package based on the requirement. Different JS file is available for each package.

Here is the link for CKEditor packages http://ckeditor.com/download

On the above page, one can choose any package and get a JS source path of a package.

CKEditor CDN

For instance, I use the standard package so my code will be as follows.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1"></textarea>
        <script>
            CKEDITOR.replace( 'editor1' );
        </script>
    </body>
</html>

The above code will generate an editor that looks like the screenshot below.

CKEditor

TinyMCE – Advanced WYSIWYG Editor

TinyMCE is one of the most used open-source editor. Well known brands are using this editor in their core development.

Installation of TinyMCE editor is super easy. Following code replaces textarea with the TinyMCE WYSIWYG editor.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
  <textarea>Next, get a free Tiny Cloud API key!</textarea>
</body>
</html>

Below is the screenshot of an editor that is generated using the above code.

TinyMCE Editor

This editor provides a rich set of toolbars. The user can add features(plugins) like emotions, anchor, full-screen mode, image, print, spell checker, table, word count, etc. in the toolbar of an editor. You will get the full list of all available toolbar features on their documentation.

Trix – an Open Source WYSIWYG Editor

Trix is another open source rich text editor from Basecamp. As this editor is used in Basecamp, millions of users are already using it . I wrote a separate article about Trix editor so please check out this article which explains how to use Trix editor in your websites.

I hope you got a basic understanding of the popular free rich text editors. Please share your thoughts and suggestions in a comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

4 thoughts on “Top 3 Free Rich Text Editor For Web Application

  1. HI Sir,
    I tried to use exactly how you have mentioned for “tinymce” but i am getting error as per below:
    0X800a1391-javascript runtime error:’tinymce’ is undefined

    Please help sir how to fix.

Leave a Reply

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