Is there a CKEditor 5 alternative for this?
I'm not an expert in CKEditor, so I can't help specifically with the alternative for Simple-Button plugin, I tried to recreate it in CKEditor 5, but the changes from version 4 to 5 were too significant, and I wasn't able to successfully recreate it. However, I can explain how to install a new plugin in CKEditor for Craft CMS.
Note: These steps assume that you already have knowledge about Craft CMS asset bundle. If you are unfamiliar with asset bundle, please refer to the Craft CMS Asset Bundle documentation to learn how to create and manage modules in Craft.
Steps to Install a CKEditor Plugin in Craft CMS
Once the CKEditor package is in place in your Craft plugin, create an asset bundle that extends BaseCkeditorPackageAsset.
I believe this means that if you already have the DLL build package from your plugin (in this case, for Simple-Button), you can create an asset bundle in your module that extends BaseCkeditorPackageAsset.
1. Creating the DLL build plugin
You can start by creating the DLL build of your plugin. You have two options:
- Use an existing package from CKEditor. You can explore available
packages here.
- Build your own plugin from scratch using the CKEditor package generator.
To use an existing package, run the following command to get the zip version of the selected package:
npm pack @ckeditor/{the-package-from-the-list}@41.0.0
After extracting the zip file, you won't need to run npm run dll:build since the DLL build file is already created in build/package-name.js. This package-name.js file is your DLL build and can be used in Craft CMS’s asset bundle.
2. Create the asset bundle
Next, create an asset bundle that extends BaseCkeditorPackageAsset and include the DLL file in its asset folder. Here’s an example using the ckeditor5-special-characters package:
class CkeditorCustomizationAsset extends BaseCkeditorPackageAsset
{
public $sourcePath = __DIR__ . '/dist'; // Path to the DLL build
public $depends = [];
public $css = [];
public $js = [
'special-characters.js' // The DLL file
];
public array $pluginNames = [ // these names came from the DLL file, you can search 'pluginName' for the available options
'SpecialCharacters',
'SpecialCharactersEssentials'
];
public array $toolbarItems = [ // this toolbar came from the DLL file, you can search 'componentFactory.add()' for the available options
'specialCharacters'
];
}
folder structure based on above code
yourModule/
│
├── assetbundles/
│ └── ckeditorcustomization/
│ ├── dist/
│ │ └── special-characters.js
│ └── CkeditorCustomizationAsset.php
│
└── Module.php
Now you have assetbundle with DLL build, you just need to register this assetbundle into CKEditor.
3. Registering Package into CKEditor
Finally, register the package in CKEditor by adding this code in the init() function of your module:
\craft\ckeditor\Plugin::registerCkeditorPackage(CkeditorCustomizationAsset::class);
This should integrate your CKEditor plugin into Craft CMS.
All the step is based on Craft Quest's Customizing CKEditor in Craft CMS 5
