Forum OpenACS Development: CKEditor 5

Thanks

Josue C.

The oacs-5-10 branch has 3 supported editors

* CKeditor 4
* xinha
* Tinymce

In the head branch, there is basic support for CKeditor 5, which i did a few years ago in a weekend project.

CKeditor 4 has its problems, since versions after 4.22.1 require a license, and 4.22.1 has vulnerabilities (for most applications, these are not an issue, check yourself on Snyk).

CKeditor 5 is currently free of issues, but they have now a very "modular" design, where some of the modules (which were free with version 4) require a license as well. Furthermore, they advocate a composition with npm, which makes packaging for OpenACS more of an issue. I have heard, that Markus Moser picked up the version and added some more support, but I do not know the details.

xinha is still working, the project got some newer updates after years of a standstill, but still, maintenance is not great.

TinyMCE is regularly updated, and looks like a pretty solid option.

However, it is not so easy to give a general recommendation. If one needs just a basic rich-text widget, all of these might be useful. If one has very detailed requirements, custom plugins, support for mobile devices, etc. things might look different. ckeditor4 offers a version detailed configuration interface from the xowiki form fields (choose between standard, inplace, inline, templates, image selectors, allowedContent, various callbacks and skins), which are not available (to this extent and/or in a fully compatible way) for the other editors. If it comes to user-experience, end-users are sometimes very passionate about certain features. Moreover, on-site documentation with screenshots has to be adjusted, when the editor is switched, etc.

We still keep for OpenACS 5.10.1 CKEditor 4 the default choice for xowiki, but that might change in the future.

In the meantime, TinyMCE own plugins for multimedia do work, but without a backend they will store files as base64 into the document.

A cheap approach, that we also applied to some use case, is to extract this base64 content on the server side and create a file on the fly, e.g. in the file-storage.

Just ideas for the impatients for now 😊

In attachments and richtext-tinymce I have implemented something similar to what we have done on LEARN: a generic UI that does not rely on the specific editor API, integrated via a trivial plugin in the editor package.

I have used some of the api from the previous implementation, but to keep the interface "editor agnostic", I could not use any of the "CKEditor tech".

If you have a look at the plugin code for tinymce, there is actually very little going on: it opens an iframe to the attachments page and waits until the iframe sends a message containing the content we are supposed to inject on the page. I expect this to be possible In a very similar way for other editors, e.g. ckeditor5.

To test it, install the latest richtext-tinymce, then in the site-wide DefaultConfig parameter input something like like:

relative_urls "false"
menu "{insert: { title: 'Insert', items: 'oacsAttachments | charmap hr' }}" 
external_plugins {{oacsAttachments: '/resources/richtext-tinymce/plugins/oacsAttachments.js'}}
plugins "oacsAttachments"
toolbar "blocks fontsize | bold italic underline strikethrough forecolor backcolor subscript superscript | link unlink anchor | oacsAttachments | alignleft aligncenter alignright alignjustify numlist bullist | removeformat table hr tlfMathJax | fullscreen code"

(the important is to load the plugin and make it part of menu, toolbar or both somehow)

Let me know if this goes in the right direction.

Ciao

Antonio