wysiwyg editor

This page is an analysis of 2024-11, when Tiki28 is soon to be released, so this can permit to pick a direction for Tiki29.

Tiki has a WYSIWYG for Tiki-Flavored Markdown but it also needs a solution for HTML.

Currently, there are two HTML-WYSIWYG libs in use:
1. In Tiki: CKEditor 4
Its opensource version has reached its end of life on June 30, 2023.

2. In Cypht: KindEditor
It is no longer maintained, and archived by the owner since Jan 9, 2024.

Given the implicit need to replace both libraries, we should consider the following criteria for a suitable replacement:

• A much better lib will be the one compatible both in Tiki and Cypht at once.
• A customizable toolbar to be able to add Tiki's specific editor tools.
• Easily tweakable to match Cypht and Tiki Bootstrap theming
• Lightweight

Options

Quill

BSD-3-Clause license
Sizes:
- quill.js: 209KB
- quill.snow.css: 25KB

• Pros
  • The editor is not confined within an iframe, its style can be customized via CSS
  • Modular architecture exposing additional config options and APIs to alter the interactions
  • The toolbar is customizable and can be switched off as well
  • Provide a Keyboard module allowing to enable custom behavior for keyboard events
• Cons
  • Shipped with few tools. i.e. A table builder tool is missing

Summernote

MIT license
Sizes:
- summernote-bs5.js: 358KB
- summernote-bs5.css: 24KB

• Pros
  • Bootstrap style-based editor, themable with bootswatch.
  • Customizable toolbar
  • Has many tools compared to Quill. Such as: the table builder, code view, full screen, many more font formatting tools, etc.
  • A functional codemirror integration for code view
  • Built on jQuery, also found in Tiki and Cypht
• Cons
  • ?

Trix

MIT license
Sizes:
- trix.umd.js: 449KB
- trix.css: 20KB

• Pros
  • ?
• Cons
  • No extension mechanism. Custom tools can't be added to the toolbar
  • Not Bootstrap based
  • Has very few tools.
  • Overall, it's an editor to use where complex content manipulation is not needed such as with the Tiki syntax, plugins, etc.

Slate

MIT license

• Pros
  • ?
• Cons
  • Doesn't provide API to add custom tools to the toolbar
  • A React based library
  • Still in beta version

Squire

MIT license
Sizes:
- squire.js: 50.8KB

• Pros
  • Customizable yes, but requires building the entire UI from scratch
  • "In addition to its use at Fastmail, it is also currently used in production at ProtonMail, SnappyMail, StartMail, Tutanota, Zoho Mail, Superhuman and Teamwork Desk, as well as other non-mail apps including Google Earth" Source: https://github.com/fastmail/Squire/blob/master/README.md
• Cons
  • Does not provide any UI, everything UI-related should be made from scratch
    • Could we re-use the UI from ToastUI editor?
      • There’s no need to combine ToastUI and Squire, as everything Squire can do is also possible with ToastUI. However, ToastUI can be used as an HTML WYSIWYG editor by converting between HTML and Markdown. But then, Cypht would be excluded from this option, as it does not handle Markdown.
      • @Merci Jacob https://www.cypht.org/features.html reports "Compose messages in plain text, HTML, or Markdown"
      • @Marc Laporte I understand that statement, but is this actually functional in Cypht? If it is a projected integration, how would a message composed in Markdown via Cypht be rendered in another client that only supports plain text and HTML?
        • @Merci Jacob: Message is written in Markdown and converted to HTML: https://github.com/cypht-org/cypht/pull/812
  • Not enough tool features provided

CKEditor 5

While CKEditor 5 is available, it’s not an option we can consider. Unlike CKEditor 4, which was initially released under the MIT license, CKEditor 5 is published under the GPL-2.0 license, which is incompatible with Tiki.

TinyMCE

TinyMCE falls into the same category as CKEditor 5; its GPL-2.0 license is also incompatible with Tiki.

Jodit

MIT license
Sizes:
- jodit.js: 1.9MB
- jodit.css: 180KB

• Pros
  • Not Bootstrap based, but it can be customized with Bootstrap variables.
  • Customizable
  • Has many integrated tools

• Cons
  • It offers two licensing models: MIT and commercial
  • Has a slightly larger bundle compared to the other candidates

Votes

• Summernote
• Summernote

Implementation roadmap

• summernote setup in the JavaScript build system
• Edit the wysiwyg toolbar generator to match summernote toolbar data structure
• Handle tools with Tiki's custom behaviour (image upload, editor settings, syntax and plugins helper, wiki link, autosave)
• Add support for Tiki plugins
• Adjust tiki-admin_toolbars to render summernote ui and relative tools when wysiwyg is chosen as mode