How to add a custom plugin to a CKEditor 5 build?

javascript npm webpack ckeditor ckeditor5

10,725

Having been unsuccessful in finding a solution here, I learned that I could ask for help in the ckeditor git repository. Please follow the following address for a resolution:

https://github.com/ckeditor/ckeditor5/issues/5699

10,725

Author by

Loa

Updated on June 05, 2022

Comments

Loa almost 2 years
Tools used:
- Visual Code Studio (1.39.2)
- Node JS (13.0.1)
- NPM (6.12.0)
- CKEditor 5 (15.0.0)
- Mozilla Firefox (69.0.3 32-bits)
Intro

I am learning how to use CKEditor 5 and how to add and create plugins. I have been successful in adding a existing and oficial plugin by following this tutorial:

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build

It is said there are two ways to add plugins in CKEditor 5. Basically, you can use a ready-made builds and add plugins to them, or you can change the editor creation settings.

The advantage of modify a build is that you no longer need to configure anything whenever a CKEditor instance is created, since everything has already been built with the desired settings. Also, the client app does not need to do a new distribution with, for instance, Webpack, importing code.

How I did the process

I do not use Git/GitHub in my development process, so I downloaded the ckeditor5-build-classic zip file from this Git repository, and I moved the inside contents to a desired folder. Using visual studio code, I opened the folder as a project, and started to manipulate it following the same procedures described in the mentioned tutorial:
```
npm install
```
Then:
```
npm install --save-dev @ckeditor/ckeditor5-alignment
```
I made the same modifications to the src/ckeditor.js source code, and finally created the build with the following command:
```
npm run build
```
With the build created, I put all 3 resulting files (ckeditor.js, ckeditor.js.map and translations folder) together with a index.html page:
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="ckeditor.js"></script>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="editor-container">
        <div id="editor">CKEditor content.</div>
    </div>
</body>
</html>
```
My directory structure:
```
 Test App+
 |---index.html
 |---app.js
 |---jquery-3.4.1.min.js
 |---ckeditor.js
 |---ckeditor.js.map
 |---translations (folder)
 |---styles.css
```
Here is my app.js:
```
$( document ).ready(function() {
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            console.log('CKEditor is ready.');
        })
        .catch(error => {
           console.error('Error: ' + error); 
        });
});
```
When I open index.html, CKEditor 5 works wonderfully and includes the added plugin.

Creating my own plugin (the problem)

Installing a plugin this way is very easy and practical, so I tried to create my own plugin and perform the same process to install it. To do this, I've been following directions from:

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-a-block-widget.html https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html https://github.com/ckeditor/ckeditor5-alignment

My project meets this structure:
```
 MyPlugin+
 |---package.json
 |---package-lock.json
 |---src+
 |---|---myplugin.js
 |---|---myplugin_ui.js
 |---|---myplugin_editing.js
 |---node_modules+
 |---|---lodash-es (folder)
 |---|---ckeditor5 (folder)
 |---|---@ckeditor (folder)
```
package.json:
```
{
  "name": "myplugin",
  "version": "1.0.0",
  "description": "My first CKEditor 5 plugin project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "RDS",
  "license": "ISC",
  "dependencies": {
    "@ckeditor/ckeditor5-core": "^15.0.0",
    "@ckeditor/ckeditor5-ui": "^15.0.0"
  }
}
```
myplugin.js:
```
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import MyPlugin_ui from './myplugin_ui';
import MyPlugin_editing from './myplugin_editing';

export default class MyPlugin extends Plugin
{
    static get requires()
    {
        return [MyPlugin_editing , MyPlugin_ui];
    }
}
```
myplugin_ui.js:
```
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

export default class MyPlugin_ui extends Plugin
{
    init()
    {
        console.log('MyPlugin_ui#init() has been called.');
    }
}
```
myplugin_editing.js:
```
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

export default class MyPlugin_editing extends Plugin
{
    init()
    {
        console.log('MyPlugin_editing#init() has been called.');
    }
}
```
When I install the plugin in the CKEditor 5 project the build is successfully created. However, when testing the editor the browser shows the following problem:
```
ckeditor-duplicated-modules
```
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

In the link shown it is said:

Therefore, you must never add plugins to an existing build unless your plugin has no dependencies.

But at the same time, the opposite seems to be taught on the tutorial page:

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build

I don't have much experience using Node JS or npm. I'm sure I have some misconfiguration in my project, but I don't know where. I believe it could be in my package.json file.

What I have tried
1. Delete node_modules and package-lock.json files from plugin project.
Consequences:

When building the CKEditor build with installed plugin, Webpack says:
```
ERROR in ../MyPlugin/src/myplugin.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
 @ ../MyPlugin/src/myplugin.js 1:0-57 5:38-44
 @ ./src/ckeditor.js

ERROR in ../MyPlugin/src/myplugin_editing.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
 @ ../MyPlugin/src/myplugin_editing.js 1:0-57 3:46-52
 @ ../MyPlugin/src/myplugin.js
 @ ./src/ckeditor.js

ERROR in ../MyPlugin/src/myplugin_ui.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
 @ ../MyPlugin/src/myplugin_ui.js 1:0-57 3:41-47
 @ ../MyPlugin/src/myplugin.js
 @ ./src/ckeditor.js

ERROR in chunk main [entry]
ckeditor.js
C:\Users\RDS\Desktop\CKEditor\ckeditor5-build-classic-master\src\ckeditor.js 15684830ec81692702e020bf47ce4f65
Unexpected token (4:26)
| 
| 
| class MyPlugin_ui extends !(function webpackMissingModule() { var e = new Error("Cannot find module '@ckeditor/ckeditor5-core/src/plugin'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
| {
|     init()
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ckeditor/[email protected] build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ckeditor/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\RDS\AppData\Roaming\npm-cache\_logs\2019-11-01T12_40_26_177Z-debug.log
```
1. Change the dependencies between the dependencies and devDependencies properties set within package.json.
Consequences: The same things happen.

All CKEditor 5 project dependencies are set on devDependencies in package.json. The installation of my plugin in the CKEditor 5 project has already been done by two existing modes:
- npm link
- package.json file as dependency
And again the same problems are shown. Ah! Also, something strange happened. I have already said that I properly performed the installation of the CKeditor 5 alignment plugin. I have even shown how this was done. After all this problem, I tried to install the alignment plugin locally. I downloaded it from repository, and I did the same installation via link and also file. With this approach, the plugin mysteriously gave me ckeditor-duplicated-modules problem, as previously mentioned.

I don't know exactly how it would be the right way to install this plugin from CKEditor 5 itself locally without having to download it from the internet (with npm install <module name> from npm repository). I am well aware that I am doing something wrong, but I cannot identify what it is. I would appreciate if anyone could give me tips, alternatives, and of course, maybe a solution. I've been trying for a few days now, and I don't know what I can and can't do anymore. I would be really grateful if someone could help me.
Loa over 4 years

Hi @user12323114, thanks for the reply. You said: Simply add your plugin info to the \src\ckeditor.js file (the import, the builtinPlugins[], the toolbar [] etc). How would I do it? I did not understand it very well. Could you elaborate? Oh, and welcome to the community. We're glad to have you here.