如何将自定义插件添加到 CKEditor 5 构建中?
How to add a custom plugin to a CKEditor 5 build?
使用的工具:
- 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 代码,我将文件夹作为项目打开,并按照上述教程中描述的相同步骤开始操作它:
npm install
然后:
npm install --save-dev @ckeditor/ckeditor5-alignment
我对 src/ckeditor.js
源代码进行了相同的修改,最后使用以下命令创建了构建:
npm run build
创建构建后,我将所有 3 个结果文件(ckeditor.js、ckeditor.js.map 和翻译文件夹)与 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
在显示的 link 中说:
Therefore, you must never add plugins to an existing build unless your
plugin has no dependencies.
但与此同时,教程页面上似乎教的恰恰相反:
我没有太多使用 Node JS 或 npm 的经验。我确定我的项目中有一些配置错误,但我不知道在哪里。我相信它可能在我的 package.json 文件中。
我试过的
- 从插件项目中删除
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\_logs19-11-01T12_40_26_177Z-debug.log
- 更改
dependencies
和 devDependencies
属性之间的依赖关系设置 package.json
。
后果:同样的事情发生了。
所有 CKEditor 5 项目依赖项都设置在 package.json 中的 devDependencies
上。我的插件在CKEditor 5项目中的安装已经通过现有的两种方式完成:
- npm link
- package.json file as dependency
再次出现同样的问题。啊!另外,奇怪的事情发生了。我已经说过我正确地安装了 CKeditor 5 对齐插件。我什至展示了这是如何完成的。遇到这个问题,我尝试在本地安装对齐插件。我从存储库下载了它,并通过 link 和文件进行了相同的安装。使用这种方法,插件神秘地给了我 ckeditor-duplicated-modules
问题,如前所述。
我不知道从 CKEditor 5 本身本地安装这个插件的正确方法是什么,而不必从互联网上下载它(npm install <module name>
来自 npm 存储库)。我很清楚我做错了什么,但我无法确定它是什么。如果有人能给我提示、替代方案,当然还有解决方案,我将不胜感激。我已经尝试了几天了,我不知道自己能做什么,不能做什么。如果有人能帮助我,我将不胜感激。
也许这只是措辞,但您不必 "install" 您的自定义插件。只需将您的插件信息添加到 \src\ckeditor.js 文件(导入、builtinPlugins[]、工具栏 [] 等)。然后执行 npm 运行 build 并将其包含在 \build\ckeditor.js
除了引用本地插件外,您将按照与对齐插件相同的步骤更改 \src\ckeditor.js。只需确保您的自定义插件的名称匹配即可。
因为你没有 UI 工具栏代码,我认为你只需要导入和 ClassicEditor.builtInPlugins = [..., MyPlugin]
中的条目
这应该足以测试 init
在这里没有找到解决方案,我了解到我可以在 ckeditor git 存储库中寻求帮助。请按照以下地址进行解决:
使用的工具:
- 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 代码,我将文件夹作为项目打开,并按照上述教程中描述的相同步骤开始操作它:
npm install
然后:
npm install --save-dev @ckeditor/ckeditor5-alignment
我对 src/ckeditor.js
源代码进行了相同的修改,最后使用以下命令创建了构建:
npm run build
创建构建后,我将所有 3 个结果文件(ckeditor.js、ckeditor.js.map 和翻译文件夹)与 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
在显示的 link 中说:
Therefore, you must never add plugins to an existing build unless your plugin has no dependencies.
但与此同时,教程页面上似乎教的恰恰相反:
我没有太多使用 Node JS 或 npm 的经验。我确定我的项目中有一些配置错误,但我不知道在哪里。我相信它可能在我的 package.json 文件中。
我试过的
- 从插件项目中删除
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\_logs19-11-01T12_40_26_177Z-debug.log
- 更改
dependencies
和devDependencies
属性之间的依赖关系设置package.json
。
后果:同样的事情发生了。
所有 CKEditor 5 项目依赖项都设置在 package.json 中的 devDependencies
上。我的插件在CKEditor 5项目中的安装已经通过现有的两种方式完成:
- npm link
- package.json file as dependency
再次出现同样的问题。啊!另外,奇怪的事情发生了。我已经说过我正确地安装了 CKeditor 5 对齐插件。我什至展示了这是如何完成的。遇到这个问题,我尝试在本地安装对齐插件。我从存储库下载了它,并通过 link 和文件进行了相同的安装。使用这种方法,插件神秘地给了我 ckeditor-duplicated-modules
问题,如前所述。
我不知道从 CKEditor 5 本身本地安装这个插件的正确方法是什么,而不必从互联网上下载它(npm install <module name>
来自 npm 存储库)。我很清楚我做错了什么,但我无法确定它是什么。如果有人能给我提示、替代方案,当然还有解决方案,我将不胜感激。我已经尝试了几天了,我不知道自己能做什么,不能做什么。如果有人能帮助我,我将不胜感激。
也许这只是措辞,但您不必 "install" 您的自定义插件。只需将您的插件信息添加到 \src\ckeditor.js 文件(导入、builtinPlugins[]、工具栏 [] 等)。然后执行 npm 运行 build 并将其包含在 \build\ckeditor.js
除了引用本地插件外,您将按照与对齐插件相同的步骤更改 \src\ckeditor.js。只需确保您的自定义插件的名称匹配即可。
因为你没有 UI 工具栏代码,我认为你只需要导入和 ClassicEditor.builtInPlugins = [..., MyPlugin]
中的条目这应该足以测试 init
在这里没有找到解决方案,我了解到我可以在 ckeditor git 存储库中寻求帮助。请按照以下地址进行解决: