样式和订购CKEdtior自定义工具栏插件按钮

Question

我有一个带有很多自定义插件的CKEditor实例。我现在的问题是，我想在工具栏上正确设置这些按钮的样式。在下图中，我的“自定义插件组”一直向右（它们可能看起来像保存，最大化和退出的默认图标，但它们是，并且必须是自定义插件）。

然而，这看起来很傻。最重要的是，我希望[X]图标向右浮动，并且是一个非分组按钮。我的配置如下所示：

CKEDITOR.editorConfig = function( config ) {
    config.toolbarGroups = [
        { <the standard toolbar button declarations> },
        { name: 'others', groups: [ 'others' ] }
      ]
    config.extraPlugins = 'save_btn,custom_max, close_btn';
 });

所以我可以使用'额外的插件'来订购插件，但是我不能将它们取消组合。我尝试使用toolbarGroups来改变它们，但是无论如何，extraPlugins似乎总是被抛入“其他”。 我也尝试在单独的config.extraPlugins实例中添加它们......但这只会添加第一个调用。

我也尝试在css声明中设置它：

var active_editor = element.ckeditor(function(){ 
    $('.cke_button__close_btn').css({'margin-left':'10px'})
   });

但设置此边距/填充不起作用。样式被应用...但只是填充元素，并没有实际分开它们。

我错过了什么吗？任何帮助，将不胜感激。

Answer 1

您可以使用工具栏配置（在下载中：/samples/toolbarconfigurator/index.html）更改项目的分组和排序方式。

要将自定义样式应用于元素，您必须启动开发工具并检查如何根据需要调整元素的样式，然后在加载CKEditor后使用javascript修改这些元素