Используемые инструменты:
Intro
Я изучаю, как использовать CKEditor 5 и как добавлять и создавать плагины. Я успешно добавил существующий и официальный плагин, следуя этому руководству:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build
Говорят, что есть два способа добавления плагинов в CKEditor 5. По сути, вы можете использоватьготовых сборок и добавления к ним плагинов, или вы можете изменить настройки создания редактора.
Преимущество изменения сборки состоит в том, что вам больше не нужно ничего настраивать при создании экземпляра CKEditor, поскольку всеуже был построен с нужными настройками. Кроме того, клиентскому приложению не нужно делать новый дистрибутив с, например, Webpack, импортируя код.
Как я делал процесс
Я не использую Git / GitHub в своей разработкепроцесс, поэтому я скачал zip-файл ckeditor5-build-classic из этого репозитория Git , и переместил внутреннее содержимое в нужную папку. Используя код Visual Studio, я открыл папку как проект и начал манипулировать ею, следуя тем же процедурам, которые описаны в упомянутом руководстве:
npm install
Затем:
npm install --save-dev @ckeditor/ckeditor5-alignment
Я сделалте же самые изменения исходного кода src/ckeditor.js и, наконец, создание сборки с помощью следующей команды:
npm run build
После создания сборки я поместил все 3 результирующих файла (ckeditor.js, ckeditor.js. папку с картой и переводами) вместе со страницей 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
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
В показанной ссылке сказано:
Следовательно, вы никогда не должны добавлять плагины к существующей сборке , если ваш плагин не имеет зависимостей.
Но в то же время, на странице учебника учат противоположному:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build
У меня нет особого опыта использования 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 в package.json. Установка моего плагина в проекте CKEditor 5 уже была выполнена двумя существующими режимами:
И снова показаны те же проблемы. Ах! Также произошло нечто странное. Я уже говорил, что правильно выполнил установку плагина выравнивания CKeditor 5. Я даже показал, как это было сделано. После всех этих проблем я попытался установить плагин выравнивания локально. Я скачал его из репозитория, и я сделал ту же установку по ссылке, а также файл. При таком подходе плагин таинственным образом вызывал у меня проблему ckeditor-duplicated-modules, как уже упоминалось ранее.
Я не знаю точно, как было бы правильно установить этот плагин из самого CKEditor 5 локально без загрузки из интернета (с npm install <module name> из репозитория npm). Я прекрасно понимаю, что делаю что-то не так, но не могу понять, что это такое. Я был бы признателен, если бы кто-нибудь мог дать мне советы, альтернативы и, конечно, возможно, решение. Я пытался в течение нескольких дней, и я не знаю, что я могу и не могу сделать больше. Буду очень признателен, если кто-нибудь сможет мне помочь.