New post – Reconsidering the CKEditor 4 to 5 upgrade

[ryan]

With 2023 fast approaching, and CKEditor 4 having an EOL in 2023, I'm starting to feel a little pressure to get a plan in place. But is the replacement (CKEditor 5) the best path forward? https://processwire.com/blog/posts/reconsidering-the-ckeditor-5-upgrade/

[Pixrael]

@ryan did you consider https://imperavi.com/ products?

[ryan]

@Pixrael I have in the past, though they've never had a compatible license. They make great stuff. But for things like this I tend to stick to things that have a GitHub repo and compatible license. I've always seen Redactor as something that would be good for a 3rd party module rather than a core inclusion. 

[bernhard]

Quote

I consider long term consistency, compatibility and upgradeability to be sacred in PW. I don't fault CKEditor's approach, but it's just not compatible with PW's approach. You won't ever have to "rewrite from scratch" anything in or for ProcessWire, unless you want to.

Loving it ?

Quote

Actually, I'm not hunting for it anymore... I'm already using it as an Inputfield in ProcessWire here locally (both regular and inline), putting it through its paces, stress testing it with hundreds of instances, and throwing everything I can at it, and so far at least, it is putting a big smile on my face. It's not CKEditor, though has a lot in common with it. If testing continues to be a success, I think you'll be able to start using it in ProcessWire this month. Stay tuned.

You can't do that ? What is it? https://github.com/quilljs/quill ? https://github.com/summernote/summernote/ ?

Quote

stress testing it with hundreds of instances, and throwing everything I can at it, and so far at least, it is putting a big smile on my face.

Also, some insights on that part would be especially interesting ? 

Fingers crossed for a smooth transition! Thx for all your great work!!

[Ivan Gretsky]

I guess we're going back to TinyMCE)))

[Gideon So]

Very much curious about what it is. Ryan has always surprised me in the past and looking forward to the new surprise.

Gideon

[pwired]

Quote

But is the replacement (CKEditor 5) the best path forward?

Let's not forget that CKEditor has many (returning) forum posts/questions about it's behavior and associated hard to find configurations 

Keep in mind that something like CKEditor5 will be just too much for many clients/end users/office workers/
who are in need for a more easy and intuitive to use editor:

https://getcontenttools.com/demo

 

[Beluga]

My first thought was that Ryan is building his own rich text editor, maybe using a toolkit like ProseMirror. Let's keep guessing and maintain the hype ?

[MrSnoozles]

My bet goes to the Atlaskit Editor. Should have all features that CKEditor 4 had plus a few new ones. And it's very customizable.

[zoeck]

11 minutes ago, MrSnoozles said:

My bet goes to the Atlaskit Editor.

I hope not, the editor is used in Atlassian Jira and it is really bad there.
And when the manufacturer already has problems with the editor... ? 

[MrSnoozles]

Nice to know. I never had anything to do with it. Just know it exists and it looks nice and powerful on the first sight.

[matjazp]

quill?

[pwired]

The Processwire Paradigm has already decided for CKEditor 5
No need to question it.

[kongondo]

On 10/15/2022 at 10:34 AM, Beluga said:

Let's keep guessing and maintain the hype ?

Based on this comment:

On 10/14/2022 at 10:20 PM, ryan said:

GitHub repo and compatible license.

Plus activity and familiarity, I am also thinking summernote ?, or Trumbowyg. Although there is a million other possibilities here.

Edited October 18, 2022 by kongondo

[The G]

My issue with CKEditor 4 is that the document is saved as HTML, because multiple reasons:

• The saved HTML code is processed every time you wanna change it.
• Because is HTML, some (like me ?) tend to go full power only to be slapped on the fingers by the security checks.
• Makes programmatic export/import of content less simple than how I would like it.
• Makes finding if a Processwire element (like an image or file) is included in a CKEditor field less simple than how I would like it.

From what I read, CKEditor 5 and ProseMirror are using a custom data model. I really hope @ryan is considering one for his rich text editor!

[diogo]

6 hours ago, The G said:

From what I read, CKEditor 5 and ProseMirror are using a custom data model. I really hope @ryan is considering one for his rich text editor!

This is exactly what creates the upgrading problem that Ryan is trying to avoid, since data is in HTML already in all processwire installs.

[ryan]

Lots of good guesses! Here's all the details: https://processwire.com/blog/posts/new-rte-for-pw/

[bernhard]

My first reaction: Seriously?! TinyMCE reminded me of my old and awful Joomla days ?

Then: Ok... that looks nice... Ok... very nice... Ok... that looks great!!

Thank you Ryan for all your great work! Looking forward to using it soon ? 

Let's show our love to TinyMCE and star the project on Github https://github.com/tinymce/tinymce

On 10/15/2022 at 12:55 AM, Ivan Gretsky said:

I guess we're going back to TinyMCE)))

Congrats, you are the winner ? 

[szabesz]

11 hours ago, ryan said:

Here's all the details:

Thanks a million Ryan!

My highlights:

• it'll be available to install by or before this time next week
• Yes there's a dark mode!
• The toolbar configuration ... via InputfieldTextTags ...
• plugins are selectable from checkboxes
• Five UI
• The inline editor after we click in it
• Multi-language

I will especially be happy to use Five UI and the inline editor appearing after we click in it, as these options save a lot of screen space which I prefer to whitespace bonanza.

BTW, may I propose that in the "other settings" section we can also have options via InputfieldTextTags wherever appropriate (instead of typing in literals).

[bernhard]

@ryan CKEditor had a problem when using Frontend Editing. Maybe you can see if TinyMCE has the same issue and address it while you are on it ? 

The problem: Let's say you have one "body" field and you want to use it on the "home" and on the "basic-page" template. And let's say you want different toolbars for both templates. Unfortunately the toolbar can not be customised via template context, so I tried the technique that @Robin S showed here: https://processwire.com/talk/topic/17195-customise-ckeditor-toolbar-per-role/

Unfortunately the "getInputfield()" hack does also not work in frontend context - all editors have the same toolbar, the one that is set in the field settings without any template context. For me this is a "serious" problem because I'm using CKE for all kinds of text-input with most of the time very limited toolbars (sometimes only a "bold" button to give editors the option to highlight some words of a headline). Sometimes it's fine to have separate fields for separate contexts, but sometimes it would be nicer to share a common setup and then do only single changes via template context (eg allowing links on one template but not on another or such).

Thx!

[ryan]

@bernhard I'm not sure I know why that issue occurs in CKEditor, but I don't see any reason why the issue should exist in TinyMCE. I'm sure there's also a way around it in CKEditor, though I don't understand the issue well enough yet to suggest something. Most (maybe all) of the TinyMCE settings should lend themselves very well to context. The way I've got it setup currently is that it maintains all the settings (that differ from the defaults), namespaced by field name in ProcessWire.config.InputfieldTinyMCE.settings. Then any field-template context settings (that differ from the field settings) are in data attributes on the Inputfield. Field settings override defaults, then template-context settings override those. InputfieldCKEditor settings work in a similar way, but with less efficiency (all settings bundled rather than just those that override defaults), and it doesn't have the option for the data attribute override settings. Hopefully TinyMCE will work for the context you mention but let me know if not, I'm sure we'll be able to figure it out. 

[bernhard]

Great to hear that, thx! I'll not invest any time in why it's not working for me on CKE as I've just built all sites with custom fields and I don't want to refactor that ? I'll let you know if I see any problems on TinyMCE ?