Cet article est également disponible en : Français

When the need arises to focus on writing texts for web pages, WYSIWYG editors allow you to project yourself into what your text will look like once it is published on your page, or at least give you a good idea of what it will be like. Here is a selection of editors that can be installed in your web projects.

This selection is the result of a research at the end of 2018. It is likely that some scripts have evolved over time. Some of them are also paying scripts. I will try to be as explicit as possible on the description of each one to give you an overview of the available features of these WYSIWYG text editors.

My selection of WYSIWYG editors

QuillJS

Quill JS is a free open source WYSIWYG editor available on Github with over 23k active users. The editor is cross-platform and built on the API Driven Design logic.

QuillJS Éditeur Wysiwyg

The editor offers quite a lot of features, the classics for online styles such as bold, underline, strikethrough, italics, paragraph styles and title structures, but also lists, block code (interesting for people who keep a technical blog) as well as images and videos, or mathematical formulas.
You can use JSON formats as input as well as output.
I regret the absence of a lightweight “inline” editor (when the tool offers some shortcuts under the mouse after a text selection for example).

  • Price: Free
  • Open Source: Yes
  • Documentation
  • Themable: Yes
  • “Inline” Editor: Nope
  • Distraction-free editor: Nope
  • Accessibility: Not sure
  • Extensible: Yes

Visit QuillJS

Froala WYSIWYG Editor

Froala wants to be a serious competitor of TinyMCE, offering a clean design and ease of installation for developers.

Froala Wysiwyg Editor

Methods, options and events are accessible via a rather well documented API. You will find the classics of a WYSIWYG editor with in addition some practical options such as the “inline” editor, the possibility to extract a PDF from the editor or to switch to fullscreen. The possibility to edit tables and much more thanks to more than 30 plugins available.

Test Froala

Trumbowyg

The strength of Trumbowyg Editor is its lightness. It’s a jQuery plugin of only 20kb (8kb gzip) whose goal is to bring simple content editing features while trying not to propose any deadend.

Trumbowyg Editor

This editor also offers the great classics of text editing, but also brings some unusual tools such as: base64 image insertion, the ability to propose an upload, the ability to resize your images, the ability to use MathML, access to the Giphy library or emojis. One of its strengths is the possibility to create and reuse HTML templates.

  • Price: Free
  • Open Source: Yes
  • Documentation
  • Themable: Yes
  • Inline Editor: Nope
  • Distraction-free editor: Yes with fullscreen option
  • Accessibility: Not sure
  • Extensible: Yes

Visit Trumbowyg

EditorJS WYSIWYG

EditorJS offers an editor that is “clean data” and “pluggable” thanks to its API. The output format is JSON and the editor is Open Source. Unlike other editors, EditorJS offers to edit blocks of content that you will be able to move and reorder, a bit like the Gutenberg editor for WordPress offers today.

EditorJS

The atypical format of this editor is to offer you an edition per block of content with very specific options for each type of block: when you click on a block you will get the options available for this block, when you select a textual content you will get the options for this text, including inline styles.

Apart from the editorial aspect, which I find quite handy, this editor offers classic editing options, but also has a very high potential for extensibility, in particular thanks to its reusable block system.

  • Price: Free
  • Open Source: Yes
  • Documentation
  • Themable: Yes
  • Inline Editor: Yes, only inline (style-block editor)
  • Distraction-free editor: Nope
  • Accessibility: Keyboard navigation
  • Extensible: Yes

Visit Editor.JS

TinyMCE Bootstrap Plugin

TinyMCE is one of the best known editors on the market, but also one of the editors that has evolved the most over time and that takes into account the feedback of its users. I’m not going to sell you its merits here, but I’m going to present to you this extension for Bootstrap.

Bootstrap is one of the most used CSS frameworks nowadays, and even if I won’t go back on the advantage or not of this type of tool, it seems to be a good idea to have an appropriate editor using this framework in the generated web content.

TinyMCE Bootstrap plugin

This TinyMCE 5 and Bootstrap 4 compatible plugin, at the time of writing these lines, therefore offers access to an advanced editor with all the layout elements (margin, column), components (table, buttons, alerts, etc) and variables (colors, weights, borders, background), etc.

Visit TinyMCE Bootstrap Plugin

WYSIWYG HTML Editor Pro – PHP version

In the all-JS era, I was asked several times for viable solutions offering a small PHP compatible editor script with image upload. I had no answer until recently when I was advised this paying editor.
I personally have not tested it but I trust the person who recommended it and will not hesitate to update this article the day I test it.

WYSIWYG HTML Editor
Exemple de l’action “Insert Image” avec une bibliothèque d’images disponibles.

Visit WYSIWYG HTML Editor Pro

Forgotten WYSIWYG editors?

As I said in the introduction, these editors and plugins fell in my research results on specific criteria. If you know editors that are useful to you on a daily basis or using techno that I didn’t mention, feel free to share them as comments.

Self-promotion allowed of course, if you have written a script, now is the time to share it. The ones that will have particularly caught my attention will be added to the list 🙂

Thank you and good writing!