Adding CKEditor Plugins Not Working

[danielsiemers]

Description

I am trying to use the tables plugin, namely the TableProperties and TableCellProperties features. After following the Adding CKEditor Plugins guide in the README, it seems that there was an issue in the order that the asset bundles interact with each other and the following errors were produced:

Uncaught ReferenceError: CKEditor5 is not defined
    at 79 (table.js?v=1689131881:5:19646)
    at o (table.js?v=1689131881:5:19763)
    at 704 (table.js?v=1689131881:5:19397)
    at o (table.js?v=1689131881:5:19763)
    at table.js?v=1689131881:5:20760
    at table.js?v=1689131881:5:153350
    at table.js?v=1689131881:5:153402

No plugin named Table found in window.CKEditor5.
No plugin named TableCellProperties found in window.CKEditor5.
No plugin named TableProperties found in window.CKEditor5.

And when clicking on a table cell I get

toolbarview-item-unavailable {item: 'tableProperties'} 
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-toolbarview-item-unavailable
toolbarview-item-unavailable {item: 'tableCellProperties'} 
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-toolbarview-item-unavailable

Steps to reproduce

1. Create and register a Craft Module (or Plugin, have tried both)

<?php
namespace modules;

use Craft;
use craft\ckeditor\web\assets\ckeditor\CkeditorAsset;
use modules\resources\TableAsset;
use yii\base\Event;

class Module extends \yii\base\Module
{
    /**
     * Initializes the module.
     */
    public function init()
    {
        // Set a @modules alias pointed to the modules/ directory
        Craft::setAlias('@modules', __DIR__);

        // Set the controllerNamespace based on whether this is a console or web request
        if (Craft::$app->getRequest()->getIsConsoleRequest()) {
            $this->controllerNamespace = 'modules\\console\\controllers';
        } else {
            $this->controllerNamespace = 'modules\\controllers';
        }

        parent::init();

        Event::on(CkeditorAsset::class, CkeditorAsset::EVENT_PUBLISH, function() {
            Craft::$app->view->registerAssetBundle(TableAsset::class);
        });
    }
}

2. Install the table npm package npm install --save @ckeditor/ckeditor5-table
3. Copy the /build directory from the npm package to the /resources/build directory of your Craft Module
4. Create a TableAsset

<?php

namespace modules\resources;

use craft\ckeditor\web\assets\BaseCkeditorPackageAsset;

class TableAsset extends BaseCkeditorPackageAsset
{
    public $sourcePath = __DIR__ . '/build';

    public $js = [
        'table.js',
    ];

    public array $pluginNames = [
        'Table',
        'TableProperties',
        'TableCellProperties',
    ];

    public array $toolbarItems = [
        'tableProperties',
        'tableCellProperties'
    ];
}

Load up the Craft CP and you will see that your table plugin has unssuccessfully been installed.

When looking into the elelment source, it appears that the table.js script is being loaded before the ckeditor5...js scripts.

<script src="https://.../table.js?v=1689131881"></script>
<script src="https://.../ckeditor5-dll.js?v=1689114789"></script>
<script src="https://.../ckeditor5-craftcms.js?v=1689114789"></script>

Please Help!

Additional info

• Craft version: 4.4.14
• PHP version: 8.1
• Database driver & version: mysql57
• Plugins & versions: craftcms/ckeditor: 3.4.0, @ckeditor/ckeditor5-table: 38.1.1 (this is where the table.js DLL file was extracted from)

[wmdhosting]

#115
coming soon :)

[MoritzLost]

I'm also seeing this issue, but with the highlight plugin. I've followed the instructions and created an asset bundle:

<?php

namespace modules\CKEditorPlugins\web\assets\highlight;

use craft\ckeditor\web\assets\BaseCkeditorPackageAsset;

class HighlightAsset extends BaseCkeditorPackageAsset
{
    public $sourcePath = __DIR__ . '/build/38.1.1';

    public $js = [
        'highlight.js',
    ];

    public array $pluginNames = ['Highlight'];

    public array $toolbarItems = ['highlight'];
}

This works – I see the highlight toolbar icon in the CKEditor Configs and can drag it into the active toolbar. However, when opening an entry form with the CKEditor field, I get errors and warnings in the console:

Uncaught ReferenceError: CKEditor5 is not defined
    79 https://kraemer-pferdesport.test/cpresources/a0814bbc/highlight.js?v=1690288492:5
    i https://kraemer-pferdesport.test/cpresources/a0814bbc/highlight.js?v=1690288492:5
    704 https://kraemer-pferdesport.test/cpresources/a0814bbc/highlight.js?v=1690288492:5
    i https://kraemer-pferdesport.test/cpresources/a0814bbc/highlight.js?v=1690288492:5
    <anonymous> https://kraemer-pferdesport.test/cpresources/a0814bbc/highlight.js?v=1690288492:5
    <anonymous> https://kraemer-pferdesport.test/cpresources/a0814bbc/highlight.js?v=1690288492:5
    <anonymous> https://kraemer-pferdesport.test/cpresources/a0814bbc/highlight.js?v=1690288492:5
[highlight.js:5:4039](https://kraemer-pferdesport.test/cpresources/a0814bbc/highlight.js?v=1690288492)

No plugin named Highlight found in window.CKEditor5.

I've tried to register the AssetBundle with a higher position to ensure it's loaded after the CKEditor core:

Event::on(
    CkeditorAsset::class,
    CkeditorAsset::EVENT_PUBLISH,
    fn () => Craft::$app->view->registerAssetBundle(HighlightAsset::class, 99999),
);

This makes the error go away, but the toolbar icon still doesn't show up. Looks like using this approach, the editor is initialized before the plugin script is loaded:

No plugin named Highlight found in window.CKEditor5.

toolbarview-item-unavailable > Object { item: "highlight" }
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-toolbarview-item-unavailable

Any ideas @brandonkelly?

[alexkuzmin]

Hi @MoritzLost , I'm also trying to add this plugin (and some others from the first-party packages). Could you give a hint, how did you get the build directory and dll package there? Here in readme is written:

If you’re including one of CKEditor’s first-party packages, it will already include a build directory with a DLL-compatible package inside it.

There are no build directories in first-party packages (e.g. https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-highlight), maybe they should be built additionally. I've tried to load the plugin from npm that plugin and to call npm run dll:build, but it throws an error Cannot find module 'ckeditor5/build/ckeditor5-dll.manifest.json'. Thanks.

[MoritzLost]

@alexkuzmin You're looking at the source files, those don't include the compiled assets. You need the compiled package from NPM, which contains the build directory. If you have NPM in your project, you can just install the package to get the compiled DLL:

npm install @ckeditor/ckeditor5-highlight

If you don't have NPM or don't want to have this as a dependency (as you can't really use the node_modules folder for your AssetBundle directly anyway), you can also just ask NPM to give you the tarball without adding it as a dependency:

npm pack @ckeditor/ckeditor5-highlight
tar -xzvf ckeditor-ckeditor5-highlight-38.1.1.tgz

npm pack will download the package and return it as a tarball, then tar -x will extract it. The extracted files include the build/ folder, which you can then copy over to your module/plugin and then include it with an AssetBundle.

That's as far as I got – including the plugin works, and it initializes correctly in the config screen, but not in the actual field layout, see the comment above.

[alexkuzmin]

Thanks @MoritzLost , I've got the build directory and could reproduce the issue from above.

[brandonkelly]

This is now fixed on the bugfix/119-package-plugins branch (db0e950), however the fix required a new event added to Craft (craftcms/cms@a84324c), which I made for the next 4.5 beta release. So I’m going to hold off on merging that change into main until Craft 4.5 goes stable (planned for the 22nd).

If you want to test the fix before then, make the following changes to composer.json:

"craftcms/cms": "4.5.x-dev as 4.5.0-beta.2",
"craftcms/ckeditor": "dev-bugfix/119-package-plugins as 3.5.0-alpha",

Then run composer update.

Note that the technique for registering CKEditor packages has changed as well. You no longer need to listen for CkeditorAsset::EVENT_PUBLISH and call registerAssetBundle() from the handler. Instead, register the package’s asset bundle like so:

\craft\ckeditor\Plugin::registerCkeditorPackage(MyAssetBundle::class);

registerCkeditorPackage() is coming in CKEditor 3.5.0, so if you need this for a plugin, you should bump the plugin’s craftcms/ckeditor requirement to ^3.5.0.

[brandonkelly]

CKEditor 3.5.0 is out with that fix 🎉

As mentioned, it requires Craft 4.5.0.

[MoritzLost]

@brandonkelly Thanks for the update! The highlight plugin is working correctly now 🔆