ckeditor - 如何在不重建的情况下在 CKEditor 中添加或删除插件？

Question

我刚刚开始使用 CKEditor 4(很久以前使用过版本 1)。我喜欢我可以在线构建并下载它，但是当我这样做时，我会使用工具栏配置工具来设置我的工具栏。

如果我以后想添加或删除特定插件会怎样？我是否必须使用构建工具构建一个全新的 CKEditor，然后下载它以替换现有的，然后重新配置我的工具栏？我真的不想每次都重新配置工具栏。

有几个插件我以后可能想使用，所以我只是想弄清楚我现在是否需要包含它们，或者我以后可以毫不费力地添加它们吗？

Answer 1

移除插件

删除很容易。 CKEditor 提供配置选项，您可以在其中定义要删除的插件。 https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-removePlugins 例如

CKEDITOR.replace( 'editor', {
  removePlugins: 'basicstyles,justify'
} );

您需要记住，删除插件可能会破坏依赖关系。例如。你想删除 clipboard 插件，但你想加载 pastefromword 插件。从 Word 粘贴需要剪贴板才能正常工作，删除剪贴板会中断加载此插件。控制台会抛出足够的错误。

插件选项

另一种解决方案是定义您希望在编辑器中加载的插件。您需要在配置中使用 plugin 选项 https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-plugins .这只会加载定义的插件及其依赖项。例如。在上述情况下，当您定义要加载的 pastefromword 插件时，这也会加载 clipboard 插件。

添加插件

有加载额外插件的配置选项。您可以在其中定义要加载的插件名称:https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-extraPlugins .这里的情况有点复杂，因为插件需要可用于编辑器。当你想加载插件时，你需要做两件事:

1. 加载插件(更详细的描述如下)
2. 为编辑器实例添加插件，带有 extraPlugins 配置选项。

可能会有这样的情况，你的一个页面上的编辑器很少，每个编辑器都有不同的可用插件。在这种情况下，将加载所有插件，但不会在特定编辑器实例中使用所有插件。

在代码中定义插件内联

如果您编写了自己的插件，您可能希望直接在 JS 中定义它。您只需要注意在编辑器初始化之前进行定义。 https://codepen.io/msamsel/pen/NwGJYL

CKEDITOR.plugins.add( 'testplugin', {
  init: function( editor ) {
    console.log( 'plugin loaded' );
    // adding more logic
  }
} )

CKEDITOR.replace( 'editor', {
  extraPlugins: 'testplugin'
} );

从本地资源加载插件

如果您想加载您单独下载/创建的插件，您可以与 CKEditor 一起创建适当的文件夹结构。此类添加的插件将可用并且可以通过 extraPlugins 添加。

ckeditor root/
    plugins/
        <plugin name>/
            icons/
                <plugin name>.png
            dialogs/
                <dialog file>.js
            plugin.js

您可以在创建插件教程的开头找到更多内容:https://docs.ckeditor.com/ckeditor4/docs/#!/guide/plugin_sdk_sample_1

从外部资源加载插件

插件也可以通过此方法从外部源加载 https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.resourceManager-method-addExternal 例如

CKEDITOR.plugins.addExternal( 'timestamp', 'https://sdk.ckeditor.com/samples/assets/plugins/timestamp/', 'plugin.js' );

CKEDITOR.replace( 'editor1', {
    extraPlugins: 'timestamp'
} );