How to add a custom plugin to a CKEditor 5 build?
Question
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:
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
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:
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
- Delete
node_modulesandpackage-lock.jsonfiles 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/ckeditor5-build-classic@15.0.0 build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ckeditor/ckeditor5-build-classic@15.0.0 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
- Change the dependencies between the
dependenciesanddevDependenciesproperties set withinpackage.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:
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.
2 answers
solution1
1 ACCPTED 2019-11-05 17:27:08
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:
solution2
0 2019-11-04 22:41:17
Maybe it is just wording, but you shouldn't have to "install" your custom plugin. Simply add your plugin info to the \src\ckeditor.js file (the import, the builtinPlugins[], the toolbar [] etc). Then do npm run build and it will include it in the \build\ckeditor.js
You would do follow the same steps in changing the \src\ckeditor.js as you did for the alignment plugin except you reference your local plugin. Just make sure the names of your custom plugin match.
Since you have no UI toolbar code I think all you would need is the import and an entry in the ClassicEditor.builtInPlugins = [..., MyPlugin]
That should be enough to test init
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.