首页 文章

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

提问于
浏览
1

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

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

我可能想稍后使用几个插件,所以我只是想弄清楚我现在是否需要包含它们,或者我可以稍后添加它们而不用麻烦?

1 回答

  • 2

    删除插件

    删除非常简单 . 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 . 这里的情况有点复杂,因为插件需要可供编辑器使用 . 当你想加载插件时,你需要做两件事:

    • 加载插件(更多详细说明如下)

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

相关问题