<blockquote>
<p>Is there a CKEditor 5 alternative for this?</p>
</blockquote>
<p>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.</p>
<blockquote>
<p><strong>Note</strong>: These steps assume that you already have knowledge about Craft CMS asset bundle. If you are unfamiliar with asset bundle, please refer to the <a href="https://craftcms.com/docs/5.x/extend/asset-bundles.html" rel="nofollow noreferrer">Craft CMS Asset Bundle documentation</a> to learn how to create and manage modules in Craft.</p>
</blockquote>
<h2>Steps to Install a CKEditor Plugin in Craft CMS</h2>
<blockquote>
<p>Once the CKEditor package is in place in your Craft plugin, create an asset bundle that extends BaseCkeditorPackageAsset.</p>
</blockquote>
<p>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.</p>
<h2>1. Creating the DLL build plugin</h2>
<p>You can start by creating the DLL build of your plugin. You have two options:</p>
<ol>
<li>Use an existing package from CKEditor. You can explore available
packages <a href="https://github.com/ckeditor/ckeditor5/tree/master/packages" rel="nofollow noreferrer">here</a>.</li>
<li>Build your own plugin from scratch using the <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/develpment-tools/package-generator/using-package-generator.html" rel="nofollow noreferrer">CKEditor package generator</a>.</li>
</ol>
<p>To use an existing package, run the following command to get the zip version of the selected package:
<code>npm pack @ckeditor/{the-package-from-the-list}@41.0.0</code></p>
<p>After extracting the zip file, you won't need to run <code>npm run dll:build</code> 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.</p>
<h2>2. Create the asset bundle</h2>
<p>Next, create an asset bundle that <code>extends BaseCkeditorPackageAsset</code> and include the DLL file in its asset folder. Here’s an example using the <a href="https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-special-characters" rel="nofollow noreferrer">ckeditor5-special-characters</a> package:</p>
<pre><code>    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'
        ];


    }
</code></pre>
<p>folder structure based on above code</p>
<pre><code>yourModule/
│
├── assetbundles/
│   └── ckeditorcustomization/
│       ├── dist/
│       │   └── special-characters.js
│       └── CkeditorCustomizationAsset.php
│
└── Module.php
</code></pre>
<p>Now you have assetbundle with DLL build, you just need to register this assetbundle into CKEditor.</p>
<h2>3. Registering Package into CKEditor</h2>
<p>Finally, register the package in CKEditor by adding this code in the <code>init()</code> function of your module:</p>
<p><code>\craft\ckeditor\Plugin::registerCkeditorPackage(CkeditorCustomizationAsset::class);</code></p>
<hr />
<p>This should integrate your CKEditor plugin into Craft CMS.</p>
<p>All the step is based on <a href="https://craftquest.io/courses/extending-ckeditor/224788" rel="nofollow noreferrer">Craft Quest's Customizing CKEditor in Craft CMS 5</a></p>

CC BY-SA 4.0
2024-11-03T10:15:10.443Z
Thank you a lot. In the end I also followed the Craft Quest tutorial. And then I realised that I did not have to install that plugin, as I could get the desired behaviour with rendering a link (a tag) instead of a button. 
Apart from that I had problems installing the style plugin because the tutorial and your indication were not clear where I would find the pluginName. Maybe I was not searching thoroughly for "pluginName", but yeah anyway thanks a lot, although I did not need it :)
Merc
CC BY-SA 4.0
2024-10-22T10:21:12.243Z
2024-10-22T10:27:08.777Z
2024-10-22T10:27:08.777Z
Nixxian365
<p>There seemed to be a plugin that did exactly what I need:
<a href="https://ckeditor.com/cke4/addon/simplebutton" rel="nofollow noreferrer">https://ckeditor.com/cke4/addon/simplebutton</a></p>
<p>But first it is for CKEditor 4, but I am using Craft 5 and therefore CKEditor 5.</p>
<p>So my questions are:</p>
<ul>
<li>How can I add plugins to CKEditor 5 within craft</li>
<li>Is there a CKEditor 5 alternative for this?</li>
</ul>
<hr />
<p>Edit:
I found this link: <a href="https://github.com/craftcms/ckeditor?tab=readme-ov-file#adding-ckeditor-plugins" rel="nofollow noreferrer">https://github.com/craftcms/ckeditor?tab=readme-ov-file#adding-ckeditor-plugins</a>
And it should be telling me how to install a plugin.</p>
<p>In my case I have found <a href="https://ckeditor.com/docs/ckeditor5/latest/features/style.html#installation" rel="nofollow noreferrer">this plugin (CKEditor 5 Styles)</a>
but still the instructions are very cryptic how I should install it.</p>
<p>I understand that, because it is a first-party package, that there is alreads a <code>build</code></p>
<p>The next instruction</p>
<blockquote>
<p>Once the CKEditor package is in place in your Craft plugin, create an asset bundle which extends BaseCkeditorPackageAsset</p>
</blockquote>
<p>is alot less clear.</p>
<ol>
<li>How do I know that the plugin is in place? I have done nothing so far, I just know that craft 5 already installs ckeditor 5...</li>
<li>&quot;create an asset bundle&quot;. Well there is an example but I find it difficult to translate to my case.</li>
</ol>
<p>All other instructions that follow are also unclear.
Maybe somebody can help me a little bit with this.
I think it is probably rather basic if you know yii and so forth, but to me the whole project structure and the logic how those things go together is a mystery :).</p>

<plugins><ckeditor5>
How to add a plugin to CKEditor 5 in craft 5?
# How to add a plugin to CKEditor 5 in craft 5?

(Asked by: username_0 on 2024-10-17)

There seemed to be a plugin that did exactly what I need:
<https://ckeditor.com/cke4/addon/simplebutton>

But first it is for CKEditor 4, but I am using Craft 5 and therefore CKEditor 5.

So my questions are:

* How can I add plugins to CKEditor 5 within craft
* Is there a CKEditor 5 alternative for this?

---

Edit:
I found this link: <https://github.com/craftcms/ckeditor?tab=readme-ov-file#adding-ckeditor-plugins>
And it should be telling me how to install a plugin.

In my case I have found [this plugin (CKEditor 5 Styles)](https://ckeditor.com/docs/ckeditor5/latest/features/style.html#installation)
but still the instructions are very cryptic how I should install it.

I understand that, because it is a first-party package, that there is alreads a `build`

The next instruction

> Once the CKEditor package is in place in your Craft plugin, create an asset bundle which extends BaseCkeditorPackageAsset

is alot less clear.

1. How do I know that the plugin is in place? I have done nothing so far, I just know that craft 5 already installs ckeditor 5...
2. "create an asset bundle". Well there is an example but I find it difficult to translate to my case.

All other instructions that follow are also unclear.
Maybe somebody can help me a little bit with this.
I think it is probably rather basic if you know yii and so forth, but to me the whole project structure and the logic how those things go together is a mystery :).

**Tags:** plugins, ckeditor5


---

## 1 answers

### Answer by username_1 on 2024-10-22. Score: 2 | Accepted answer

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

> **Comments:**
> **username_0**: Thank you a lot. In the end I also followed the Craft Quest tutorial. And then I realised that I did not have to install that plugin, as I could get the desired behaviour with rendering a link (a tag) instead of a button.  Apart from that I had problems installing the style plugin because the tutorial and your indication were not clear where I would find the pluginName. Maybe I was not searching thoroughly for "pluginName", but yeah anyway thanks a lot, although I did not need it :)  

---

