CKEditor 5

[drbyte]

Ref #6209

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

This implementation "appears" initially to work, but I haven't tested whether there are features lost by making the change, nor any frustrations that end-users might encounter by using it with Classic mode defaults and no plugins.

Feedback requested because extensive testing is needed, lest content gets accidentally lost or formatting gets messed up because of settings or oversights.

[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.

[drbyte]

Needs testing for multi-language.

[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)

[drbyte]

NOTE: I found some issues with the multi-language part. Will explore more tomorrow.

[drbyte]

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

[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)

[proseLA]

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)

i have english only test stores, running in the same chrome version, and am unable to reproduce the error.

do you have any more info? javascript versions?

[matt-in-real-life]

do you have any more info? javascript versions?

Zen Cart v1.5.8a
jQuery 3.6.1
jQuery UI 1.13.2

[njcyx]

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)

Greetings. I have the exact same error as @matt-in-real-life mentioned. ck5 didn't load.

Zen Cart v1.5.8a
jQuery 3.6.1
jQuery UI 1.13.2
PHP 8.1
English only site.
Response classic template.

Chrome 126.0.6478.127

I downloaded two files from the "Files Changed" tab on the top of this page. Code has been manually added to the end of the css file.

[drbyte]

Hmmm. I can't duplicate the problem on Chrome 126.0.6478.127 either. Also tried in incognito mode with no plugins/extensions enabled.

While it shouldn't matter, do you mind listing what plugins/extensions you have installed and enabled in Chrome?

[proseLA]

i am not able to reproduce it as well...

[drbyte]

Puzzled that it's even accessing translation-service.ts ... but haven't dug into that yet. Just observation from error msg posted.

[scottcwilson]

@matt-in-real-life Can you test from another browser in case it's related to an extension you have enabled ?

[lat9]

Could that just be the browser-caching the javascript?

[matt-in-real-life]

Same issue in Incognito in Chrome and in FireFox 115.12.0esr (64-bit) with no extensions. All on macOS 13.6 (22G120).

Could that just be the browser-caching the javascript?

Cache cleared after making the changes initially, but which JS are you referring to? The relevant config.js is a new file in a new directory, so won't be cached.

[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.

[drbyte]

@matt-in-real-life @njcyx You can try again using the updated /admin/includes/ckeditor.php file.

[drbyte]

Update: Multi-language should be working correctly now as well.

[drbyte]

Undecided about removing Subscript,Superscript from the default button bar options. It'd make it cleaner.