代码之家 › 专栏 › 技术社区 › Sharon

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

ckeditor4.x ckeditor

Sharon · 技术社区 · 7 年前

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

如果我想在将来添加或删除一个特定的插件,会发生什么?我必须使用构建工具构建一个全新的CKEditor,然后下载它来替换现有的,然后重新配置我的工具栏吗?我真的不想每次都重新配置工具栏。

1 回复 | 直到 7 年前

Mateusz 7 年前

删除插件

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

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

您需要记住,删除插件可能会打破依赖关系。E、 g.您希望删除 clipboard pastefromword 插件。从Word粘贴需要剪贴板才能正常工作,删除剪贴板将中断加载此插件。控制台中将抛出足够的错误。

插件选项

plugin https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-plugins . 这将只加载定义的插件及其依赖项。E、 g.在上述情况下,当您定义 pastefromword 要加载的插件,这也将加载 剪贴板 插件。

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

加载插件(更多详细说明见下文)
为编辑器实例添加插件,带有 extraPlugins

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

在代码中内联定义插件

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一起创建合适的文件夹结构。这样添加的插件将可用,并且可以通过 外部插件 .

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'
} );