如何将自定义插件添加到CKEditor 5版本?

说话

使用的工具:

介绍

我正在学习如何使用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,因此我从此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和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)
 |---|[email protected] (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文件中。

我尝试过的

  1. 删除node_modulespackage-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/[email protected] build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ckeditor/[email protected] 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
  1. 更改中设置dependenciesdevDependencies属性之间的依赖关系package.json

后果:同样的事情也会发生。

所有CKEditor 5项目依赖项都devDependencies在package.json中设置我的插件在CKEditor 5项目中的安装已通过两种现有模式完成:

再次显示相同的问题。啊! 另外,发生了一些奇怪的事情。我已经说过,我已经正确执行了CKeditor 5对齐插件的安装。我什至展示了这是如何完成的。解决所有这些问题之后,我尝试在本地安装对齐插件。我从存储库下载了该文件,并通过链接和文件进行了相同的安装。ckeditor-duplicated-modules如前所述,通过这种方法,该插件神秘地给我带来了问题。

我不确切知道从本地从CKEditor 5本身安装此插件而不需要从Internet(npm install <module name>从npm存储库中)下载该插件的正确方法我很清楚自己做错了什么,但是我无法确定是什么。如果有人可以给我提示,替代方法,当然还有解决方案,我将不胜感激。我已经尝试了几天,但我不知道自己能做什么和不能做什么。如果有人可以帮助我,我将不胜感激。

说话

由于无法在这里找到解决方案,我了解到可以在ckeditor git存储库中寻求帮助。请按照以下地址进行解决:

https://github.com/ckeditor/ckeditor5/issues/5699

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Laravel 5-如何将自定义消息添加到验证?

来自分类Dev

如何在Laravel 5中将自定义配置文件添加到app / config?

来自分类Dev

R-将自定义包添加到CRAN的克隆版本

来自分类Dev

将自定义文本添加到MVC 5的下拉列表中

来自分类Dev

将自定义文本添加到MVC 5的下拉列表中

来自分类Dev

如何在cytoscape.js 2.6版本中添加自定义布局

来自分类Dev

如何在cytoscape.js 2.6版本中添加自定义布局

来自分类Dev

如何为Python 3.4版本安装PyQt5?

来自分类Dev

如何激活gcc 4.7版本?

来自分类Dev

如何激活gcc 4.7版本?

来自分类Dev

如何将自定义事件添加到NativeScript UI插件

来自分类Dev

如何将自定义JAR添加到“ eclipse-pmd”插件?

来自分类Dev

是否有将自定义Javascript添加到ASP.NET MVC 5页面的正确方法?

来自分类Dev

在ASP.NET MVC 5中将自定义角色添加到Windows角色

来自分类Dev

将自定义样式的按钮添加到CKEditor

来自分类Dev

如何将自定义地图和自定义数据添加到Highmaps?

来自分类Dev

如何将自定义文件添加到自定义文章列表页面

来自分类Dev

将自定义Gradle插件添加到项目

来自分类常见问题

如何使IntelliJ scala项目使用Scala 2.9.2版本?

来自分类Dev

如何在Wamp中安装5.2版本的PHP

来自分类Dev

如何获得LinqToExcel 64位版本

来自分类Dev

如何在SuiteScript 2.0版本中创建搜索

来自分类Dev

如何使IntelliJ scala项目使用Scala 2.9.2版本?

来自分类Dev

如何从64位版本制作32位程序?

来自分类Dev

如何安装软件包texinfo的4.11版本?

来自分类Dev

如何获得Windbg x86版本?

来自分类Dev

如何安装32位版本的Google NaCl SDK?

来自分类Dev

如何使用rand-C99版本

来自分类Dev

如何安装libc6版本> = 2.29?

Related 相关文章

热门标签

归档