Are you looking for a free rich text editor for your web application? A rich text aka WYSIWYG(what you see is what you get) editor allows you to add descriptive content along with HTML elements. This article discusses the top 3 free rich text editors that are popular among developers.
There are several WYSIWYG editors available on the Internet. I have tried a few of them and picked the 3 best free WYSIWYG HTML editors which are – CKEditor, TinyMCE, and Trix. The CKEditor and TinyMCE both come with free and premium plans. On the other hand, Trix is a completely free rich text editor. The user can try these editors one by one and choose the suitable one.
Why Need a Rich Text Editor?
In the textarea element, it’s not easy to add large pieces of content. It is very difficult to include different HTML elements in the textarea. Wrapping the content inside elements and maintaining their hierarchy is hard to manage in textarea.
To simplify this problem, we use the rich text editor. These WYSIWYG editors provide a better UI and UX compared to the textarea. With these editors, users can easily add HTML elements to the content.
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 integrate CKEditor, you can either use CDN or their predefined builds. In the below example, I show you integration using CDN. For predefined builds, you may refer to their documentation or read my article where I explained the same with the Laravel framework.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CKEditor</title>
</head>
<body>
<div id="editor"></div>
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>The above code will generate an editor that looks like the screenshot below.
TinyMCE – Advanced WYSIWYG Editor
TinyMCE is also one of the most used rich text editors. Well-known brands are using this editor in their core development.
Integration of the TinyMCE editor is super easy. Using the following code, you can easily replace textarea with the TinyMCE WYSIWYG editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE</title>
</head>
<body>
<textarea id="editor"></textarea>
<script type="text/javascript" src='https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js'></script>
<script>
tinymce.init({
selector: "#editor"
});
</script>
</body>
</html>Below is the screenshot of the TinyMCE editor generated using the above code.
You may have noticed a string no-api-key in the JS source path. You can use the editor with this string but it shows a tooltip for creating an account with TinyMCE. Once you create an account, you’ll get an API key which you need to replace with this no-api-key string.
This editor provides a rich set of toolbars. In the toolbar, one can add features(plugins) like emotions, anchor, full-screen mode, image, print, spell checker, table, word count, etc. You will get the full list of available toolbar features in their documentation.
For Laravel developers, I’d recommend reading my article How to Use TinyMCE editor in Laravel.
Trix – an Open Source WYSIWYG Editor
Trix is another popular open-source rich text editor from Basecamp. As this editor is used in Basecamp, millions of people are already using it. I wrote a separate in-depth article about Trix editor so please check out this article.
These are the top free rich text editors. Are you using something else and getting better results? Please share in the comment section below.
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.
Thanks You So Much Sir……….
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.
Make sure you used the scripts and are placed in correct order.
good like
thank you