Upgrade to CKEditor 5 now 4 is EOL

[neekfenwick]

I note that CKEditor 4 has reached End-Of-Life https://ckeditor.com/docs/ckeditor5/latest/updating/ckeditor4/migration-from-ckeditor-4.html

From a quick look, there is a CDN for version 5 and some changes to the way it's instantiated but it might be an easy replacement.

Is there any effort underway to migrate to 5, or should I have a look at it? I imagine this would be a Zen Cart 2.x feature as it might break some addons that rely on 4.x (I've no idea if this is a real concern or not).

[scottcwilson]

Please proceed. It is unlikely to break any addons.

[drbyte]

I took a stab at this, and have pushed a couple PRs:

• Auto-add unique-ish id attribute to admin textarea fields #6248 that adds an id to all textarea fields, which makes this easier to target elements properly.
• CKEditor 5 #6249 an implementation that "appears" 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 in Classic mode.

Feel free to explore this proposed approach.
Feedback will be needed with extensive testing, lest content gets accidentally lost or formatting gets messed up because of settings or oversights.

[neekfenwick]

Nice @drbyte .. I just cloned your ckeditor5 branch (and pasted in the commit from #6248. As you mentioned, you seem to have branched ckeditor5 from master, then later merged 6248 into master and not rebased ckeditor5 onto master so it doesn't include this required change; or maybe you just haven't pushed it).

Looking at plugins, the docs all show how to use npm to handle dependencies and import statements to bring them into scope. I don't know how to mix that approach with what we have in zencart, exactly. For example, if we want to bring in the SpecialCharacters plugin described at https://ckeditor.com/docs/ckeditor5/latest/api/module_special-characters_specialcharactersconfig-SpecialCharactersConfig.html with the plugin docs being at https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html

I was able to use the https://ckeditor.com/ckeditor-5/online-builder/ to build my own ckeditor5 bundle, which contains a build folder with all the selected plugins bundled and ready to use, so changing our admin/includes/ckeditor5.php to bring in that ckeditor.js instead of the CDN one works and makes the plugins available.

Do you think we would want to bundle a custom build like this with zencart, or stick with using the CDN and bring in plugins dynamically?

[sloanxue]

I'm currently using zencart version 1.57d and 1.58a.
The problem I'm facing now is that the product description can't be edited properly, only source code can be displayed.
I've tried to download the two files in ckeditor5 branch [2855bf0] and replace the old ones.
1.57d displays the following error message: (1.58a doesn't have an error message, but displays the source code)
TypeError: Cannot convert undefined or null to object
at Function.keys ()
at qh.init (ckeditor.js:sourcemap:6:703857)
at qh. (ckeditor.js:sourcemap:6:439486)
at qh.fire (ckeditor.js:sourcemap:6:435854)
at [as init] (ckeditor.js:sourcemap:6:439538)
at ckeditor.js:sourcemap:6:921994

I would like to propose on behalf of zencart's amateur users, It is really too hard for amateur users like me to fix the problem.

That external resources maybe unreachable due to issues such as updates or internet connect problem, why not download and integrate external resources directly into zencart.

So we can still call the downloaded resources when external resources are unavailable or slow network is detected .
Like fckeditor of version 1.3, which can be used as a spare tire.

By the way, I want to let you know that more than 20% population of the earth can not directly access the servers of google, jquery, bootstrapcdn, gstatic, cravatar (e.g. China, Iran, Iraq, Pakistan, Turkey, North Korea, Syria, Vietnam, etc.)

[neekfenwick]

These changes are on the master branch or branches from it, and are not yet released and not intended for amateur users (no offense :) ).

You probably need to copy the 3 lines of text from the #6248 pull request into your codebase i.e. what you see in 0336a29 .. I know it's an ugly hack but it's what you get when you use feature branch software.

edit: I had exactly this problem when testing this branch of the software, re: your quote "Cannot convert undefined or null to object" .. it was because the jQuery lookup for a node ID failed, because the node didn't have that ID, which would have been there if those 3 lines of code had been there. If you debug the JS in your browser it's pretty clear where it fails, but you need to see into #6209 to see why.

On your points about external resources, I believe zencart uses a CDN for jQuery, which is pretty pivotal to functionality. I have proposed that we host ckeditor locally on #6209, let's see where that goes. It's not urgent at this point, as it's not released or even on master branch.

[scottcwilson]

The problem I'm facing now is that the product description can't be edited properly, only source code can be displayed.

Your workaround here is to switch back to the plain text editor.
Admin > Configuration > My Store > HTML Editor.

[drbyte]

As you mentioned, you seem to have branched ckeditor5 from master, then later merged 6248 into master and not rebased ckeditor5 onto master so it doesn't include this required change; or maybe you just haven't pushed it).

Thanks for the heads-up. Rebased and pushed.

Looking at plugins, the docs all show how to use npm to handle dependencies and import statements to bring them into scope. I don't know how to mix that approach with what we have in zencart, exactly.

Since 99% of storeowners won't be able to use npm, and supporting people via the forum to guide them on doing it is a non-starter, the npm build approach isn't realistic in this context. (I'd take a different stance if the majority of our front-end tooling was already dependent on npm, but it isn't, and that's for the same reasons.)

I was able to use the https://ckeditor.com/ckeditor-5/online-builder/ to build my own ckeditor5 bundle, which contains a build folder with all the selected plugins bundled and ready to use, so changing our admin/includes/ckeditor5.php to bring in that ckeditor.js instead of the CDN one works and makes the plugins available.

That's probably the most sensible approach. Alternatively, we could adjust it to use the CDN's super-build instead of classic.

My initial objective was to ensure that the CDN approach could be viable, and then time-permitting explore the custom-build approach.

Do you think we would want to bundle a custom build like this with zencart, or stick with using the CDN and bring in plugins dynamically?

I think the custom build is probably best. That will allow a storeowner to update their own custom build ... whether to refresh the editor to the latest version, or even to customize it with their own desired set of plugins.

(The custom build is what the original CKEditor 3 and 4 implementations did when they were just an addon. It was easy to drop in your own custom build. We opted for the CDN when the CDN offered a straightforward editor that wasn't hard to configure for reasonable use. (It's unfortunate that the CDN options are now all-or-nothing, but that's mostly because they've returned to providing fewer features out-of-the-box.))

Moving away from direct dependence on the CDN will also help address those whose CDN access is limited, as commented earlier in this discussion.

We can consider leaving the CDN Support in the PHP code as a fallback if the required custom-build files are not found. Just have to be sure there aren't undesired side-effects of missing any certain plugins (ie: it doesn't mangle the HTML on save, resulting in unrecoverable losses of former content).

[neekfenwick]

I think the custom build is probably best. That will allow a storeowner to update their own custom build ... whether to refresh the editor to the latest version, or even to customize it with their own desired set of plugins.

I hadn't actually looked closely at the "super build", so the docs at https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#superbuild are interesting, which I'm sure you've read, I hadn't, included here for completeness:

"The superbuild, available instantly from the CDN, is a pre-configured package that offers access to almost all available plugins and all predefined editor types.

Keep in mind that the superbuild contains a lot of code. You may not need all of it for your use case. It is best to use the superbuild for testing and evaluation purposes rather than in a production environment."

Perhaps a nice in-between approach, to cater for site owners who don't know how to perform builds, don't like what's packaged with zencart, and still want a fuller editor, we could bundle a custom built editor with zencart as discussed above, but provide a config option to switch to a super build from CDN if it's not floating their boat? Something like CKEDITOR5_BUILD_OPTION with values of "local" or "super-build". We could make it a boolean meaning "super build or not" but that would limit to 2 options, we might want more in future, so a string type seems more flexible.

Just a thought :)

[sloanxue]

These changes are on the master branch or branches from it, and are not yet released and not intended for amateur users (no offense :) ).

You probably need to copy the 3 lines of text from the #6248 pull request into your codebase i.e. what you see in 0336a29 .. I know it's an ugly hack but it's what you get when you use feature branch software.

edit: I had exactly this problem when testing this branch of the software, re: your quote "Cannot convert undefined or null to object" .. it was because the jQuery lookup for a node ID failed, because the node didn't have that ID, which would have been there if those 3 lines of code had been there. If you debug the JS in your browser it's pretty clear where it fails, but you need to see into #6209 to see why.

On your points about external resources, I believe zencart uses a CDN for jQuery, which is pretty pivotal to functionality. I have proposed that we host ckeditor locally on #6209, let's see where that goes. It's not urgent at this point, as it's not released or even on master branch.

Thank you for help, I add 3 lines in [admin/includes/functions/html_output.php], it works partial，the picture can not insert.

I understand that "It's not urgent at this point, as it's not released or even on master branch."

Actually I just want to find a way to make ckediter work properly with zencart 1.57.
It is be great if any update package or upgrade patch for version 1.57/1.58 could be publish.

Most zencart store owners like me still use 1.57 version, which are reluctant to upgrade to version 1.58 and the upcoming version 2.0, because the new version has too many files to modify compared to 1.57.
Just like Windows users are used to win7, they are not willing to take the initiative to upgrade to win10 or win11 unless they have no choice.

So this issue is urgent for those of us who are amateur users.

Highly appreciate for you help.

[drbyte]

Actually I just want to find a way to make ckediter work properly with zencart 1.57.

But ... it already does. Below is a screenshot taken today from a v1.5.7 site, using original distribution code, which loads CKEditor4 via CDN.

If your site is having difficulties using CKEditor, please open a new issue and provide explanation of the problem, including what errors are occurring, and details of exactly how you've customized/altered your Admin and Javascript and JQuery etc.

This current discussion thread is for converting future Zen Cart versions from using CKEditor 4 to version 5.

[sloanxue]

But ... it already does. Below is a screenshot taken today from a v1.5.7 site, using original distribution code, which loads CKEditor4 via CDN.

Thank you Drbyte!
I just tried again, and it works now. it might be my mistake!

It shows "No date found for resource with given identifier" on my zencart last night.
And shows the home page of ckeditor.com when I try to open the link （https://cdn.ckeditor.com/4.14.0/standard-all/ckeditor.js） directly from browser when use VPN connect from other countries.
So I thought the CKediter 4 is dead, and I turn to here to found the sloution.

Now I can use CKediter 4 by use VPN connect from US, but it still can NOT work connect directly from China.

It seems still the problem of internet access block by Chinese government.
Most store owner from China, Iran, Iraq, Pakistan, Turkey, North Korea, Syria, Vietnam, etc. still have problem to use CND resource. really hope new zencart could have options to download all the CND resource locally by choice.

Thank you!

[proseLA]

one of the things i have had to do in the past is add ckfinder to ckeditor. the only way i found to do that was replace this section of code:

zencart/admin/includes/ckeditor.php

Lines 34 to 39 in 96f75cf

	CKEDITOR.replace(jQuery(this).attr('name'),
	{
	customConfig: '<?php echo (function_exists('zen_catalog_base_link') ? zen_catalog_base_link() : '/') . DIR_WS_EDITORS . 'ckeditor/config.js'; ?>',
	language: lang[index]
	});
	}

with this:

CKEDITOR.replace(jQuery(this).attr('name'),
                    {
                        customConfig: '<?php echo (function_exists('zen_catalog_base_link') ? zen_catalog_base_link() : '/') . DIR_WS_EDITORS . 'ckeditor/config.js'; ?>',
                        language: lang[index],
                        filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
                        filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
                        filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
                        filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
                    });
            }

i am not sure if the superbuild includes ckfinder and its associated libraries; but if it does not, it would be nice if one could add ckfinder without modifying any core ZC files.