[MGNLUI-6885] Upgrade to CKEditor 5 Created: 22/Dec/17  Updated: 21/Dec/23

Status: Open
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Improvement Priority: Neutral
Reporter: Julian Nodarse Assignee: Unassigned
Resolution: Unresolved Votes: 16
Labels: dx-core-6.3, maintenance, tech-debt
Remaining Estimate: Not Specified
Time Spent: 0.25d
Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLUI-6293 Update CKEditor to 4.15 to get rid of... Closed
relates to MGNLUI-6975 CKEditor removes superscript and subs... Closed
relates to MGNLUI-6976 CKEditor paste from word removes supe... Closed
relates to MAGNOLIA-8091 add emoji support in editor Open
causality
dependency
duplicate
relation
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: CKEditor 5
Team: Nucleus

 Description   

We are currently using CKEditor version 4. Should we consider upgrading to CKEditor 5?

Here are some links to consider:
About Migration
CKEditor 5 Framework



 Comments   
Comment by Christopher Zimmermann [ 08/May/19 ]

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migrate.html

"When compared to its predecessor, CKEditor 5 should be considered a totally new editor. Every single aspect of it was redesigned — from installation, to integration, to features, to its data model, and finally to its API. Therefore, moving applications using a previous CKEditor version to version 5 cannot be simply called an “upgrade”. It is something bigger, so the “migration” term fits better.

There is no “drop in” solution for migrating. In this guide we hope to summarize the most important aspects you need to consider before you proceed with installing CKEditor 5."

Comment by Chuck Aksamit [ 04/Mar/20 ]

It's been two years since this ticket was started and a year since the last comment. I wrote the related SUGGEST-113 ticket, so I'm looking to check in on this again! CKEditor 5 are now out of alpha, beta and up to release 17.0.0 as of a couple weeks ago. And yes it is a migration, possibly a new field altogether or a implementation that lets the dialog creator enable CKE5 via a property on the field definition.

A comment on my ticket was related to Vaadin having integrations for CKE5. I did some searching and didn't see anyone working on CKE5/Vaadin yet but maybe Magnolia would have more clout than me in ask them for that?

Comment by Richard Gange [ 05/Mar/20 ]

Hey caksamit-

I don't see anything out there either. It doesn't look like CKE5 is a priority in the Vaadin ecosystem. It's something they consider to be an "add-on" rather than a component of the core product. The editor itself comes from a third party, obviously, so I think they rely on community contributions for things like that. For example, there is also CodeMirror which is another popular online editor. Also an add-on https://vaadin.com/directory/component/v-codemirror/overview.

In the end, I'm not sure it's something we can request from them. I think it will take the efforts of an independent developer to make this happen. In any case I will keep an eye out for any new developments.

Cheers
Rich

Comment by Thomas Duffey [ 19/Mar/20 ]

Suggesting something like CodeMirror is likely missing the point. CKEditor is meant to provide a rich-text content management experience while CodeMirror and similar is a browser based code editor. A typical content manager won't benefit from the latter while the former is super important.

The current ckeditor is getting old. It has features like "paste from word" that don't really work any more, yet people want to paste from Word. Lack of a modern rich text editor in Magnolia is becoming an issue.

Is the stance really to just wait and see if someone else does it?

Comment by Christopher Zimmermann [ 19/Mar/20 ]

Hi Tom, Is it an issue for many of your customers? Are there other concrete examples besides the "paste from word"? (which I agree is a strong argument already) I think a good next step for Magnolia would be to do some research on how much of an effort it would be to implement the vaadin addon. But even this takes time, so we need to compare the severity of this issue with others on our backlog - so any aditional input and/or rationales would help us.

Comment by Richard Gange [ 19/Mar/20 ]

I just checked and the latest version of Magnolia uses ckeditor 4.11.3 which was released in February.

If we can get Vaadin to update to 4.12+ we can get the paste from word feature. See https://ckeditor.com/blog/CKEditor-4.12-with-Paste-from-Word-enhancements-released/

Comment by Richard Gange [ 19/Mar/20 ]

See MGNLVA-7

Comment by Chuck Aksamit [ 19/Mar/20 ]

@rgange I looked at MGNLVA-7 and upgrading to the latest CKE4 is not what this ask is about at all. Like @tduffey said, this also misses the point. So I'm going elaborate.

While we all can recognize CKE4 is a long held staple in rich text editing on the web, the fact here is CKE5 is a redesigned, new editor because of the failings and inconsistencies of the previous CKE API and outdated JS development patterns used in the project. Javascript has came a long way in the last 8 years since CKE4 was originally released (even further if you compare back to the origins of the FCKEditor project in 2003) and it really shows when you try to build a new custom plugin for it, try to use it on a mobile device or even just try to provide two RichText fields in the same dialog with different configurations which is currently impossible.

Not only is CKE5 written in and utilizes ES6+ features, it and it's plugins are now part of NPM and follow a industry standard process for install, initialization and error handling. Instantiation is greatly improve by isolating configuration between instances instead of relying on a global window.CKEDITOR object. When it comes to extending the editor, CKE5 further shines with more consistent and succinct API structure and events as well as support for ES6 Promises and Classes. It's all around a better tool for the plugin developer and I would say also for the new developer as the conventions used in CKE4 are so dated that schools, especially code camps, are not teaching them.

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html
https://ckeditor.com/docs/ckeditor5/latest/api/index.html
https://github.com/ckeditor/ckeditor5

 

But the complexities of custom development or inconsistencies with today's implementation patterns aside, there's also a lot of great new features in CKE5 that Magnolia could leverage as features to provide a richer, more communal and more mobile-friendly experience that our clients want today! I'll outline a small selection of them below.

Collaboration
The collaboration features of CKE5 are features we've had potential Magnolia clients beg for. The commenting (which we at Crescendo hacked into Magnolia ourselves as a demonstration), tracking changes, and real-time editing are so common in other content entry systems that Microsoft Word, Google Docs and even code editors like Atom and VS Code have them. These are things that come with the package of CKE5 and the video linked below goes over them in more detail. Collaborations can even use mentions to notify fellow editors of things they might want to review.

https://youtu.be/TQG4yNVnGV4
https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/collaboration.html
https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html

Fine-tuned editor role separation
We've also had clients ask if they can give specific users rights to manage specific portions of a rich text field. Now that might be all images, or all SEO data, or all text but not images or even a way to create a madlibs style field where the editor can change some specific text but not, say, a dynamic link specifically generated and embedded into the text from session data. Well, CKE5 has features for this too.

https://ckeditor.com/docs/ckeditor5/latest/features/restricted-editing.html

Improved link and media experience
The interface for working with links in editable documents has standardized across apps over the years since CKE4 was released and CKE5 follows suit meaning a reduced learning curve for new Magnolia users. Media linking is even simplified and improved in a similar fashion. The image uploading, managing and even editing process has been upgraded in CKE5 too, it's both more convenient and more feature rich.

https://ckeditor.com/docs/ckeditor5/latest/features/link.html
https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html
https://ckeditor.com/docs/ckeditor5/latest/features/image.html
https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

Mobile ready
CKE5 has a smaller footprint so it loads faster. It has larger buttons and a better menu collapse state. It has better touch event handling and modal placement for mobile. It is simply much more mobile ready for the day when Magnolia gets there too. We at Crescendo Collective have already put effort into development of custom input tools just for mobile Magnolia administrators and feel content administration and specifically RichText is going to be primary use case for those administrators when the project finally gets around to having a mobile-ready AdminCentral.

 

I hope all of this illustrates where we see CKE4 as languishing and really only being viable as a desktop text editor wherein the administrator can do minimal custom text styling and maybe manage some table content. CKE5 on the other hand not only provides and improves on those features but offers features that could add to the capabilities of Magnolia itself and if integrated correctly, could provide a premium and feature-rich editing experience vs. the competition.

 

Comment by Christopher Zimmermann [ 20/Mar/20 ]

caksamit Thank you for that! The PM team will definitely take a deep look at CKE5, you've pointed out many things that are highly relevant for Magnolia's current path. However I could imagine that we may only be able to support a subset of the CKE5 features out-of-the box simply because they sound so powerful/complex and far-reaching. But would really only know after studing further. And as always, keep in mind that we have many exciting improvements to make and important maintenance to do - so we just have to evaluate and balance them.

Also, re: MGNLVA-7 - although upgrading to CKE4 misses the point of this ticket- it does solve other problems that customers have, and it is certainly relevant to this ticket, even though it does not address it. Thanks to rgange for working to get improvements in that can be made quickly where/if possible.

From the comments there is obviously some frustration on all sides. Which is understandable, as sometimes things take way too long or don't happen. But please stay friendly guys! We're frustrated because we are all passionate about this product we work with every day. Hmmm, where are the dang emoticons here, Jira??? 

Comment by Marty Glaubitz [ 07/May/20 ]

Yo, any updates here? We need this update because our customers need support for soft line breaks and better table support

Comment by Tobias Hitzfeld [ 26/Aug/20 ]

We're recognising that CKEdit and Chrome replaces SPACE characters with &nbsp. in Magnolia 5.7.7 sometimes. Found https://dev.ckeditor.com/ticket/11415 and https://github.com/ckeditor/ckeditor4/issues/3819. What about an upgrade?

Comment by Simon Lutz [ 23/Sep/20 ]
  • Complement with an additional field instead of replace?
  • No vaadin 8 add-ons for ckeditor 5 - only for vaadin 14
Comment by Christopher Chard [ 31/Mar/21 ]

Hi there,
I will repeat what martyglaubitz said:
Yo, any updates here? We need this update because our customers we need support for soft line breaks and better table support

Comment by Roman Kovařík [ 11/Nov/21 ]

Hey cchard,

as there is no vaadin8 addon with CKEditor 5, the upgrade is blocked until Magnolia migrates to a newer vaadin version.

Roman

Comment by Richard Gange [ 27/Dec/21 ]

We did just update though --> CKEditor to 4.17.1 (see MGNLUI-6944). Maybe that helps a bit with plugin compatibilities.

Comment by Cutolo Luigi [ 18/Apr/23 ]

Hello,

since CKEditor 4 is going end of life in June 2023, as specified in this article , are you planning to update to version 5?

Thanks

Luigi

Comment by Quach Hao Thien [ 19/Apr/23 ]

Discovery

What's new in Ckeditor 5?

  1. (New) Editing engine
  2. (Upgraded) Modern UI
  3. (Upgraded) Powerful APIs
  4. (Upgraded) Markdown output
  5. (New) TypeScript
  6. (New) Collaboration ready
  7. (Upgraded) File conversion
  8. (New) Premium features bundle with Slash commands

The new/upgraded features marked as bold might effect to the current implementation of RichTextField which extends from vaadin extension (https://github.com/alump/CKEditor) that we are using for Magnolia UI 6.2

Which customised plugins could be affected?

File browser: filebrowser/plugin.js

Magnolia expand: magnoliaexpand/plugin.js

Magnolia link: magnolialink/plugin.js

Which RichTextField could be affected?

RichTextField: RichTextFieldFactory.java
--DamRichTextField: DamRichTextFieldFactory.java
----JcrDamRichTextField: JcrDamRichTextFieldFactory.java
----ContentRichTextField: ContentRichTextFieldFactory.java

These factories above using the MagnoliaRichTextField.java, which extends from the extension, also be affected.

And stylesheet?

richtextfield.scss

 

 

 

Comment by Roman Kovařík [ 19/Apr/23 ]

https://ckeditor.com/blog/ckeditor-4-end-of-life/#b-ckeditor-4-open-source-users

 
Therefore commercial projects that use CKEditor 4 for free under an Open Source license are incompatible with GPL 2+ and need to purchase a commercial license to migrate to CKEditor 5.

Looks like this is a no go anyway? The only option would be trying:

If you would like to migrate to CKEditor 5 but your Open Source project is incompatible with a GPL 2+ license, you can still contact us for a free OS license.

?

Comment by Chuck Aksamit [ 19/Apr/23 ]

Looking at the Content Editor Module, I noticed it uses an inline CKEditor that looks like v5. Is that the case or is there some heavily customized v4 config in use there? The heading buttons stand out as v5 to me.

 

https://docs.magnolia-cms.com/product-docs/6.2/Modules/List-of-modules/Content-Editor-module/Light-rich-text-field.html

https://ckeditor.com/ckeditor-5/demo/editor-types/#inline

 

https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#heading-buttons

 

 

Comment by Richard Gange [ 19/Apr/23 ]

Hey caksamit-

That is v4 in the content editor. It's just been slimmed down. At the moment we are evaluating the effort to support ckeditor 5. One of the hurdles is Vaadin 8 doesn't offer a jar which supports ckv5. Also there seems to be some licensing issues to be sorted out with using v5.

BR
Rich

Generated at Mon Feb 12 09:40:59 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.