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

How do I add or remove plugins in CKEditor without rebuilding?

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

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

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

删除插件

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

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

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

插件选项

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

从本地资源加载插件

如果您希望单独加载您download/create 的插件，您可以与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'
} );