如何在不重建的情况下在 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'
} );