Best JS Wysiwyg Editor For Web Development

Best JS Wysiwyg Editor For Web Development


January, 7 2022

Now, let's go together to learn about commonly used WYSIWYG tools for web developer.

Wysiwyg HTML Editor Online Open Source

The WYSIWYG text editor allows users to simply create documents such as text, images, videos, etc. right on the web page. The meaning of the word WYSIWYG is "what you see is what you get". In my opinion, it is often used for blogging, editing content...

CKEditor

CKEditor with more than 10 years of development experience, you can be assured of the quality of this text editor. It supports more than 70 languages including Vietnam and is used by many programmers, I think this is a good choice for your website. Not only that it can run on many different browsers, works well with most front end frameworks today, you can use CDN to embed it directly in your HTML page... Currently it has two versions running in parallel, CKEditor 4 and CKEditor5, depending on the purpose of use, you will choose the right editor for you. The homepage also has a detailed description of these two programs you can learn more.

 CKEditor

Trumbowyg

Trumbowyg is a code editor optimized for HTML5 and it supports most popular browsers like IE9+, Firefox, Chrome... As far as I can see it contains all the tools for text editing with a large capacity. only 20Kb. It's light, isn't it, it will help your website run more smoothly. In addition, it also has other support plugins to help you work better such as inserting emoticons, supporting other countries' languages, adding sounds, inserting special characters...

 Trumbowyg

TinyMCE 5

TinyMCE 5 is an editor that gives you the flexibility to edit the parts you want in this program easily. In addition to the basic elements for an editor, I find it also provides a lot of support to help better user experience such as adding comments, checking links, providing premium icons and skins, error checking. spelling for the content... However, this is also its weak point because if you want to use the advanced tools, the fee falls around 25 $ for a month.

 TinyMCE 5

Quill

Quill is an open source editor so feel free to use it for all types of commercial or non-commercial websites. It is built with many functions such as adding links, images, videos or adding code snippets to the content... What I like about Quill is how easy it is to set up and display on all web browsers. Modern and responsive on multiple device screens, with detailed tutorials on common problems when using it.

 Quill

Trix

Trix is an open source editor that makes it easy to compose messages, write comments, write articles... in the web. It is rated over 15K stars on github and used by many programmers. If you only need the necessary functions for content creation, then Trix in my opinion is a great choice.

 Trix

Jodit Editor 3

Jodit Editor 3 is an open source github editor written in pure TypeScript without using any additional libraries. It allows you to set up in many ways like npm, download, use CDN... for your website. What I like about it is that in addition to detailed instructions, there is also a program that gives us the freedom to choose the tools to attach to Jodit Editor through the code containing the automatic properties.

 Jodit Editor 3

Summernote

Summernote is an open source editor on github with over 9K star votes. It is designed through the Bootstrap framework with all the necessary features for creating content on the website. You just need to download its css and js source files and add the Bootstrap framework (Support two versions 3 and 4 too) to be able to use it for your website.

 Summernote

Editor.js

Editor.js is an open source block-styled editor. It will not use HTML tags like regular editors, but it will output the content as JSON, making it easier for us to manage. It also has support plugins through the use of APIs. Thanks to this function, any programmer can contribute many interesting and useful plugins to this program.

 Editor.js

MediumEditor

MediumEditor is an open source editor built for editing content similar to the Medium website for bloggers. It only contains the basic utilities needed for the editor, so the size is only about 28kB. This will help your website to be more optimized. In addition, if we want to add other features to optimize editing, MediumEditor also provides additional external utility tools that are updated regularly.

 MediumEditor

Wysihtml

Wysihtml is an open source editor built by the Voog team. It is fully functional to help you edit documents easily and supports most modern browsers, today's device screens. There are some tools I quite like in it, which are automatically converting invalid HTML tags, automatically analyzing content when copied from Word, PDF, displaying content as HTML...

 Wysihtml

ContentTools

ContentTools is an open source editor built for editing HTML content with ease. It provides a full range of utilities for editing content and you can also add other libraries and utilities into the program easily (See the API section). In addition, I see it has articles on how to set up, add or remove functions in the program... very detailed and meticulous.

 ContentTools

Froala

Froala is an editor that is easy to set up for websites and allows you to expand the features depending on your use. Because it is written in pure javascript, you can use it for most modern front-end frameworks today. In addition, it provides a lot of useful tools such as image editing, adding or editing videos, adding icons, managing tables... However, if you want to use it for commercial purposes, you must buy a license.

 Froala

Redactor

Redactor is a fully functional editor with a simple and beautiful design. With more than 9 years of development including many support plugins, I think this is a good product for you to use for your website. In addition, it has extremely detailed examples for each problem programmers often encounter in the process of using the program. However, it also has a limitation that you will have to buy a license when using it for commercial purposes.

 Redactor

HTML Editors Examples

Simple wysiwyg editor

Simple wysiwyg editor

Check out the results below!

See the Pen Simple wysiwyg editor by Travis (@trhino) on CodePen.

Link

Angular WYSIWYG Rich-text Editor

Angular WYSIWYG Rich-text Editor

Check out the results below!

See the Pen AngularJS Text-Angular WYSIWYG Rich-text Editor by Paul B. Hartzog (@paulbhartzog) on CodePen.

Link

React-Quill Demo

React-Quill Demo

Check out the results below!

See the Pen React-Quill Demo by Alex (@alexkrolick) on CodePen.

Link

HTML5 WYSISYG Inline Editor

HTML5 WYSISYG Inline Editor

Check out the results below!

See the Pen Worlds simplest WYSIWYG inline editor by Barney Parker (@barney-parker) on CodePen.

Link

SWEditor

SWEditor

Check out the results below!

See the Pen SWEditor v0.2.0 by Moncho Varela (@nakome) on CodePen.

Link

TinyMCE Basic Example

TinyMCE Basic Example

Check out the results below!

See the Pen TinyMCE Basic Example by TinyMCE (@tinymce) on CodePen.

Link

CKEditor 5 Classic with Bootstrap

CKEditor 5 Classic with Bootstrap

Check out the results below!

See the Pen CKEditor 5 Classic and Bootstrap by CKEditor (@ckeditor) on CodePen.

Link

CKEditor v4 & Vue.js v2

CKEditor v4 & Vue.js v2

Check out the results below!

See the Pen CKEditor v4 & Vue.js v2 by Christophor Wilson (@CSWApps) on CodePen.

Link

Live Markdown Editor

Live Markdown Editor

Check out the results below!

See the Pen Live Markdown Editor by Marco Biedermann (@marcobiedermann) on CodePen.

Link

Summary

I hope the article will provide you with useful wysiwyg html editor javascript free and if you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!