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

Question

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

我知道如何通过更改editor.css中的 width参数使它们变宽：

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

有什么提示吗？

UPDATE

好的，可以说我想加宽此插件的图标：

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

无论我选择什么整数，在检查时都不会看到像您提到的任何整数。 我在IPBoard中构建了CKEditor，也许就是这个问题？

我应该添加什么？ 对不起，我是菜鸟

UPDATE

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

UPDATE

#cke_61 .cke_icon { width:32px; }

这段代码完成了这项工作，感谢一百万！

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

我使用以下方法在ips_config.js中添加了垂直的：

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

但是水平我不知道

Answer 1

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

#cke_11 { width: 120px; }

#cke_11是演示页面上的第一个按钮（剪切）。

所有按钮均包含标签。 此标签是文本字符串，用.cke_button_label { display: none; }隐藏.cke_button_label { display: none; } .cke_button_label { display: none; } 。 如果删除此行CSS或将值设置为inline 。 您将获得：

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

如果只想显示一个标签：

#cke_11_label { display: inline; }

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