在CKEditor中添加具有不同宽度和水平分隔符的按钮

Question

是否可以在CKEditor工具栏中添加几个更宽的按钮？

我知道如何通过更改 editor.css 中的width参数来扩大所有这些范围：

但我只需要几个按钮，类似于“源按钮”样式：

任何提示？

更新

好吧，我想说我想扩大这个插件的图标：

CKEDITOR.plugins.add( 'timestamp',
    {
        init: function( editor )
        {
            editor.addCommand( 'insertTimestamp',
                {
                    exec : function( editor )
                    {    
                        var timestamp = new Date();
                        editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
                    }
                });
            editor.ui.addButton( 'Timestamp',
            {
                label: 'Insert Timestamp',
                command: 'insertTimestamp',
                icon: this.path + 'images/timestamp.png'
            } );
        }
    } );

以前我得到的结果是：

.cke_button_insertTimestamp { width: 32px !important; }

这不会改变任何事情：

#cke_11 {
    width: 32px ;
}

无论我选择什么整数，我都没有看到你在检查时提到的任何整数。我有CKEditor构建在IPBoard可能这是问题吗？

我应该添加什么？抱歉我是菜鸟

更新

好的，我终于得到了这个并且有相同的结果 - 半个图标。它是关于这个定义16px宽度的.cke_icon类吗？许多图标共享此类。不知道如何绕过或删除它

更新

#cke_61 .cke_icon { width:32px; }

这个代码完成了一百万的工作！

最后一个问题，如何在我的新图标行下面添加水平分隔符，就像其他行一样：

我在 ips_config.js 中添加的垂直版本：

['Timestamp'],['-'],

但水平我不知道

Answer 1

每个按钮都有唯一的ID。只需一行CSS就可以调整按钮的宽度：

#cke_11 { width: 120px; }

#cke_11是demo page上的第一个按钮（剪切）。

所有按钮都包含标签。此标签是一串文字，隐藏着.cke_button_label { display: none; }。如果删除此行CSS或将值设置为inline。你会得到这个：

这就是Source按钮更宽的原因。 “源”按钮具有类cke_button__source_label。此课程将display设置为inline。

如果您只想显示单个标签：

#cke_11_label { display: inline; }

使用浏览器附带的开发人员工具检查元素并摆弄css。