CKEditor 5

[drbyte]

Ref #6209

This uses CKEditor 5 "Classic Mode", which turns a textarea field into an in-browser editor field.

Minor differences from CKE4:

• right-click "context menu" is no longer a custom menu: it's just the browser's own context-menu.
• button-bar no longer offers cut/copy/paste: but normal keyboard shortcuts and right-click menu can be used.
• spell-check not offered without purchasing a commercial license

Tested on versions v210, v200, v158, v157, v156 to confirm that the CKE5 editor loads correctly using the code changes in this PR.

To backport to an older version, simply copy the files from this PR.
/admin/includes/ckeditor.php (whole file)
/editors/ckeditor5/config.js (whole file and directory)
and manually patch the stylesheet:
/admin/includes/css/stylesheet.css (just the last few lines related to .ck-editor__editable must be copied into the old file) (Note on v156 the stylesheet is in the /admin/includes dir, not in the /admin/includes/css subdir)

[drbyte]

NOTE: Requires changes found in #6248 in order to work correctly.

[scottcwilson]

Do you want to merge this into master for eventual release in 2.1? That way people could start testing it more easily?

[barco57]

we are running behind on this one...

this is a ZC 2.0.1

[scottcwilson]

We're working on it.

[drbyte]

Lots of updates today.
Seems to be working for most of the features previously supported in v4.

[proseLA]

based on this post here, as well as my experience, the vertical height of the window can no longer be controlled via the config.height setting. it needs to be done via css.

i have added the following line to one of the global stylesheets which seems to work fine.

.ck-editor__editable {
    min-height: 250px;
}

[drbyte]

@proseLA wrote:
the vertical height of the window can no longer be controlled via the config.height setting. it needs to be done via css.

Thanks for digging that out. I was wondering what direction to take there.

Perhaps we should also set max-height, since it kinda just expands to 100% of the content height, which can be a little unruly. An example in demo data is EZ-Pages number 14.

[proseLA]

i like the idea of having both (min-height and max-height) of those there. and 250 and perhaps 500 for max could be good starting points. but whatever seems right to others is fine with me...

as to which css file you want to include them in... well i have no opinion on that one...

[drbyte]

Tested on versions v210, v200, v158, v157, v156 to confirm that the CKE5 editor loads correctly using the code changes in this PR.

/admin/includes/ckeditor.php (whole file)
/admin/includes/css/stylesheet.css (just the last few lines related to .ck-editor__editable must be copied into the old file)
/editors/ckeditor5/config.js (whole file and directory)

(Note on v156 the stylesheet is in the includes dir, not in the css subdir)

[matt-in-real-life]

For english-only stores, the code currently in this PR should work fine on v156-thru-v201

In Chrome 126.0.6478.116, CKEditor fails to initialize (remains as default textarea) and see this in the console:

TypeError: Reduce of empty array with no initial value at Array.reduce (<anonymous>) at translation-service.ts:239:16 at new Ea (locale.ts:132:23) at new Qa (context.ts:163:17) at new Cg (editor.ts:293:37) at new <anonymous> (elementapimixin.ts:23:2) at new vC (classiceditor.ts:56:3) at classiceditor.ts:192:19 at new Promise (<anonymous>) at vC.create (classiceditor.ts:191:10)

[drbyte]

Thanks for your patience.
I was able to trigger the error.

It appears that it doesn't like having a translations configuration section if it's empty.

I've pushed an update which seems to work fine now with single-language sites. Tested on v158 and v210.

On multiple-language sites it also works, but ... Multi-Language works now.

[matt-in-real-life]

Many thanks all, working fine now.

[dbltoe]

Anyone tried 1.5.7d?

[njcyx]

Many thanks all, working fine now.

It is working fine on my end now. Thanks for everyone's help.

[njcyx]

Many thanks all, working fine now.

It is working fine on my end now as well (v1.58a). Thanks for everyone's help.

[drbyte]

Anyone tried 1.5.7d?

Yes.

[njcyx]

I have two questions regarding ck5, not sure if it is a good place to post here...

In the previous version ck4, it seems it has a special right-click menu. So under the editing page, if I right click my mouser, it will show a special menu, to replace the menu from the browser. For example, if I right click the any text, it will show Cut, Copy and Paste. If I right click anywhere in a table, it will show Cell, Row, Column, Delete table and Table properties.

In new version ck5, it seems this function is gone. If I right click anywhere under the editing page, it will only show the default options from the browser. Also, it seems I cannot find a place to edit table prosperities now...

For ck4, if I double click any hyperlinks, it will pop up a window with two tabs, one for link info, another for target. Under target tab, I can set the action to open a new window (_blank), or same window (_self). I cannot find this function in ck5 as well... In ck5, if I double click any hyperlinks, I'm only able to either change the link, or remove the link

[njcyx]

I have two questions regarding ck5, not sure if it is a good place to post here...

In the previous version ck4, it seems it has a special right-click menu. So under the editing page, if I right click my mouser, it will show a special menu, to replace the menu from the browser. For example, if I right click the any text, it will show Cut, Copy and Paste. If I right click anywhere in a table, it will show Cell, Row, Column, Delete table and Table properties.

In new version ck5, it seems this function is gone. If I right click anywhere under the editing page, it will only show the default options from the browser. Also, it seems I cannot find a place to edit table prosperities now...

For ck4, if I double click any hyperlinks, it will pop up a window with two tabs, one for link info, another for target. Under target tab, I can set the action to open a new window (_blank), or same window (_self). I cannot find this function in ck5 as well... In ck5, if I double click any hyperlinks, I'm only able to either change the link, or remove the link

I just tried this demo on ck websites (https://ckeditor.com/ckeditor-5/demo/feature-rich/).

1. Right click menu is indeed gone.
2. For table property, if I click anywhere inside of the table, it will show a popup with the options on the top. So this function is missing in this plug-in, or maybe this function is limited somehow?
3. The previous options for hyperlinks seem gone as well. If I double click any hyperlinks, it only show options as edit or remove.

[barco57]

I tested and it seems that by default Ckeditor5 adds target="_blank" and rel="noopener noreferrer" to links, so you would have to have the source button available to get in and edit.

[drbyte]

In the previous version ck4, it seems it has a special right-click menu. So under the editing page, if I right click my mouser, it will show a special menu, to replace the menu from the browser. For example, if I right click the any text, it will show Cut, Copy and Paste.

Correct: This is no longer a feature in CKEditor v5. Fortunately the browser's context-menu already allows copy/paste by default.

[drbyte]

in ck4, If I right click anywhere in a table, it will show Cell, Row, Column, Delete table and Table properties.
In new version ck5, it seems I cannot find a place to edit table properties now...

For ck4, if I double click any hyperlinks, it will pop up a window with two tabs, one for link info, another for target. Under target tab, I can set the action to open a new window (_blank), or same window (_self). I cannot find this function in ck5 as well... In ck5, if I double click any hyperlinks, I'm only able to either change the link, or remove the link

I've updated it to include the Table Properties editor, and an option to specify target=_blank for links.

[drbyte]

@torvista If you have some time, do you mind testing multi-language stuff?

[dbltoe]

Steve is on holiday till @ 11th or 12th