In this article, we will discuss “Best Open Source Rich Text Editors”. As you know, Rich Text Editors are basically required in all kind of website or web apps. These editors are helping us to manage our content formatting easily.
Table of Contents
Best Open Source Rich Text Editors
Quill
Quill is a powerful, free, open-source WYSIWYG editor with modular architecture and expressive API. It is completely customizable to fit any need. Its worked well on cross-platform supported and worked on all the modern browsers. It’s available on Github and having the 20260 stars. Means you can contribute in this repository any time.
<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
Working Example by Quill
Trumbowyg
Trumbowyg is a lightweight WYSIWYG editor, It is a customizable jQuery plugin, generates semantic code, comes with a powerful API. It is only 20KB, means faster page loading. Providing necessary features, no useless features. Support all the modern browsers such as Firefox, Chrome, Opera, and IE9+. It’s available on Github and having the 2514 stars. Means you can contribute in this repository any time.
// In head tag
<link rel="stylesheet" href="node_modules/trumbowyg/dist/ui/trumbowyg.css">
// HTML
<textarea id="editor"></textarea>
// end of the body
<!-- Import jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<!-- Import Trumbowyg -->
<script src="node_modules/trumbowyg/dist/trumbowyg.js"></script>
<script>
$('#editor').trumbowyg();
</script>
Summernote
Summernote a super simple WYSIWYG editor. It’s an open source jquery plugin and available at GitHub. Having 7865 stars on GitHub repository, you can contribute in this repository any time. It’s providing a dedicated support for Bootstrap 4 CSS framework.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote Example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
CKEditor 4
CKEditor is a wonderful HTML text editor. It has a large community, which used this around the web. It’s also offering the paid licenses for large projects. CKEditor available in different versions, we are discussing the versions 4. You can found all the source code on GitHub, it’s helping us to contribute to the improvements.
Download the stable versions from here, also you can select the package such as basic, standard, full or customize as per your requirements.
All copy of downloads are fully functional, you can read the license conditions here.
// Avaliable Packages // Standard <script src="//cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script> // Basic <script src="//cdn.ckeditor.com/4.10.1/basic/ckeditor.js"></script> // Full <script src="//cdn.ckeditor.com/4.10.1/full/ckeditor.js"></script>
Pick anyone as per your requirement. Example for CKEditor using standard package:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Example</title>
<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="text_editor"></textarea>
<script>
CKEDITOR.replace( 'text_editor' );
</script>
</body>
</html>
CKEditor 5
CKEditor 5 is text editor created with a powerful framework. Now, the question is why CKEditor 5?
And the answer is, CKEditor 5 code is written from scratch in ES6 standards. It provides tools to easily integrate it with modern technologies like Angular, React, Vue Js, Webpack, Node Js, NPM, and etc.
You can found CKEditor 5 also on Github. And the well-formed documentation is also available.
Native integration for Angular and React Js is also available. You can read more on this here. Also, CKEditor 5 is improving very well and shall be ready for the Vue js very soon. You can track CKEditor with Vue js at here. We will discuss this more in our future tutorials.
TinyMCE
TinyMCE is the most used text editor. It is a powerful and flexible text editor so millions of user used this in their projects. Difference paid versions are also available with extra features. The open-source version is available and its maintained by the community.
A working example of TinyMCE
Conclusion
In the end, we are discussing some of the “Best Open Source Rich Text Editors”. all those plugins or resources which are mentioned above, used by me in my previous projects. Please feel free to add the comment if any query or your suggestions. If you feel that we have forgotten any wonderful resource or plugin, then feel free to share it using comment box 🙂
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee
😮
As for CKEditor 5 – native integrations for React and Angular are already available, check https://ckeditor.com/blog/best-wysiwyg-editor-for-angular-react/ for more details. We are almost closing the Vue.js integration as well – you can track the progress here: https://github.com/ckeditor/ckeditor5-vue Thanks for including both versions of CKEditor in the summary!
Thanks, Wiktor W.
Updated, thanks for your help 😉
Ckeditor is not free for commercial projects.It is bad thing. Need to delete Ckeditor from this list.
https://support.ckeditor.com/hc/en-us/articles/115002539665-Can-I-include-CKEditor-4-and-CKEditor-5-in-a-commercial-environment-?fbclid=IwAR0kZ6ptVW_XRD6BKOSkU-6PAVEVG601CDfd9nt_8KXd19BR2O7yUnh6iEc
Is CKEditor free of cost to be used in an application to be used within an organisation.
Not for commercial projects. You can get more details on the official site.
If the user of published app are at most 5 person, and the developer working on the project are at most 2 person, yes, it’s free. Other than that, you need to get a subscription license.