使用的工具:
- 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位)
简介
我正在学习如何使用CKEditor 5以及如何添加和创建插件。通过按照这个教程，我已经成功地添加了一个现有的官方插件：
据说在CKEditor 5中有两种方法添加插件。基本上，您可以使用现成的构建并向其中添加插件，或者您可以更改编辑器创建设置。修改构建的优点是，每当创建CKEditor实例时，您不再需要配置任何内容，因为已经使用所需的设置构建了一切。此外，客户端应用程序无需进行新的分发，例如使用Webpack导入代码。
我如何进行这个过程：
在我的开发过程中，我没有使用Git / GitHub，所以我从this Git repository下载了ckeditor5-build-classic zip文件，并将其内部内容移动到所需的文件夹中。使用Visual Studio Code，我将该文件夹作为项目打开，并开始按照所述教程描述的相同步骤进行操作。
npm install
然后：
npm install --save-dev @ckeditor/ckeditor5-alignment
我对src/ckeditor.js源代码进行了相同的修改，最终使用以下命令创建了构建：
npm run build
有了构建后，我把生成的3个文件（ckeditor.js、ckeditor.js.map和translations文件夹）与一个
index.html页面放在一起：<!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>
我的目录结构：
Test App+
|---index.html
|---app.js
|---jquery-3.4.1.min.js
|---ckeditor.js
|---ckeditor.js.map
|---translations (folder)
|---styles.css
这是我的app.js文件：
$( document ).ready(function() {
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
console.log('CKEditor is ready.');
})
.catch(error => {
console.error('Error: ' + error);
});
});
当我打开index.html时，CKEditor 5工作得非常好，并包括添加的插件。
创建自己的插件（问题）
以这种方式安装插件非常容易和实用，所以我尝试创建自己的插件并执行相同的安装过程。为此，我一直在按照以下说明进行操作：
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
我的项目符合这个结构：
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.');
}
}
当我在 CKEditor 5 项目中安装插件后，构建成功创建。然而，在测试编辑器时，浏览器显示以下问题：
ckeditor-duplicated-modules
因此，除非您的插件没有依赖项，否则绝不能向现有构建添加插件。
但与此同时，在教程页面上似乎教授相反的内容：
我不太熟悉Node JS或npm的使用经验。 我相信我的项目中存在一些错误配置，但我不知道具体在哪里。 我认为可能在我的package.json文件中。我尝试过以下方法：
1. 从插件项目中删除node_modules和package-lock.json文件。
结果如下：
当使用安装的插件构建CKEditor时，Webpack会报错：
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
- 更改在
package.json中设置的dependencies和devDependencies属性之间的依赖关系。
结果：同样的事情发生了。
所有CKEditor 5项目的依赖关系都在devDependencies中设置在package.json中。已经通过两种现有模式在CKEditor 5项目中安装了我的插件：
然后再次出现了相同的问题。啊！还发生了一些奇怪的事情。我已经说过，我正确地执行了CKeditor 5对齐插件的安装。我甚至展示了如何做到这一点。在所有这些问题之后，我尝试在本地安装对齐插件。我从仓库中下载了它，并通过链接和文件进行了相同的安装。采用这种方法，插件神秘地给我带来了ckeditor-duplicated-modules问题，就像之前提到的那样。