CKEditor配置 - 如何在使用Builder自动构建之后手动安装另外一个插件

Posted 2021-04-11

我使用Builder自动构建了一个CKEditor 4.7。我看到一个build-config.js，其内容如下：

var CKBUILDER_CONFIG = { ...

我现在想手动安装一个名为“bootstrapGrid”的插件。我把它添加到我的config.js：

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'panelbutton,floatpanel,bootstrapGrid';
    config.contentsCss = 
     'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css';
    config.mj_variables_bootstrap_css_path = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css';
    config.allowedContent = true;
    config.bootstrapGrid_container_large_desktop = 1170;
    config.bootstrapGrid_container_desktop = 970;
    config.bootstrapGrid_container_tablet = 750;
    config.bootstrapGrid_grid_columns = 12;

    config.toolbar = [
        { name: 'insert', items: [ 'BootstrapGrid', 'BootstrapGridAdd', 
         'BootstrapGridDelete', 'BootstrapGridSettings', 'Source' ] }
    ];
}; 

出于某种原因，仅显示bootstrapGrid插件的工具栏，并且所有其他工具栏都会消失。如何“添加额外的插件”而不是覆盖我的初始CKEditor插件？

答案

当您使用config.toolbar时，您将覆盖默认工具栏。因此，如果要修改工具栏，请转到CKEditor安装中的samples文件夹并打开index.html。然后，点击TOOLBAR CONFIGURATOR按钮，在视觉上重新排列您的工具栏，最后点击Advanced以获得您制作的config.toolbar。之后，您可以将其粘贴到您的网页中并根据需要进行更改（从其他插件中添加更多按钮等）

工具栏配置器的在线版本（目前适用于v4.8，但应该适用于v4.7）在这里：https://ckeditor.com/latest/samples/toolbarconfigurator/#basic

更多信息：https://docs.ckeditor.com/ckeditor4/docs/?mobile=/guide/dev_toolbar