[英]How to add a custom plugin to a CKEditor 5 build?
我正在學習如何使用 CKEditor 5 以及如何添加和創建插件。 按照本教程,我已經成功地添加了一個現有的官方插件:
據說在 CKEditor 5 中有兩種添加插件的方法。基本上,您可以使用現成的構建並為其添加插件,也可以更改編輯器創建設置。
修改構建的優勢在於,無論何時創建 CKEditor 實例,您都不再需要配置任何內容,因為所有內容都已使用所需的設置進行構建。 此外,客戶端應用程序不需要使用例如 Webpack 導入代碼進行新分發。
我在開發過程中不使用 Git/GitHub,因此我從Git 存儲庫下載了 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
在顯示的鏈接中說:
因此,除非您的插件沒有依賴項,否則您絕不能將插件添加到現有構建中。
但與此同時,教程頁面上似乎教導了相反的內容:
我沒有太多使用 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\_logs\2019-11-01T12_40_26_177Z-debug.log
dependencies
和devDependencies
屬性之間的依賴package.json
。后果:同樣的事情發生。
所有 CKEditor 5 項目依賴項都設置在devDependencies
中的 devDependencies 上。 我的插件在CKEditor 5項目中的安裝已經通過現有的兩種方式完成:
並且再次顯示了相同的問題。 啊,還有。 奇怪的事情發生了。 我已經說過我正確執行了 CKeditor 5 alignment 插件的安裝。 我什至已經展示了這是如何完成的,畢竟這個問題。 我嘗試在本地安裝 alignment 插件,我從存儲庫下載了它。 我通過鏈接和文件進行了相同的安裝,使用這種方法,插件神秘地給了我ckeditor-duplicated-modules
問題,如前所述。
我不知道如何正確地從 CKEditor 5 本身在本地安裝此插件,而無需從 Internet 下載(使用npm install <module name>
)。 我很清楚我做錯了什么,但我無法確定它是什么。 如果有人能給我提示、替代方案,當然還有解決方案,我將不勝感激。 我已經嘗試了幾天了,我不知道我能做什么,不能做什么。 如果有人可以幫助我,我將不勝感激。
在這里找到解決方案沒有成功,我了解到我可以在 ckeditor git 存儲庫中尋求幫助。 請按照以下地址獲取解決方案:
也許這只是措辭,但您不必“安裝”您的自定義插件。 只需將您的插件信息添加到 \src\ckeditor.js 文件(導入、builtinPlugins[]、工具欄 [] 等)。 然后執行 npm 運行構建,它將包含在 \build\ckeditor.js
除了引用本地插件外,您將按照與更改 alignment 插件相同的步驟更改 \src\ckeditor.js。 只需確保自定義插件的名稱匹配即可。
由於您沒有 UI 工具欄代碼,我認為您需要的只是 ClassicEditor.builtInPlugins = [..., MyPlugin] 中的導入和條目
這應該足以測試 init
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.