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

是否可以向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_11 {
    width: 32px ;
}

无论我选择什么整数，我都看不到你在检查时提到的任何整数。我有CKEditor内置IPBoard可能就是这个问题

我应该补充什么？对不起，我是诺布

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

更新 这个代码完成了任务，非常感谢

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

我在ips_config.js中添加了一个垂直的：

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

---

但我不知道每个按钮都有一个唯一的id。调整按钮宽度只需要一行CSS：

#cke_11 { width: 120px; }

#cke_11

是屏幕上的第一个按钮（剪切）

所有按钮都包含一个标签。此标签是一个文本字符串，用

.cke\u按钮\u标签{display:none；}

隐藏。如果删除这行CSS或将值设置为

inline

。您将得到以下结果：

这就是源按钮更宽的原因。源按钮有一个class

cke\u按钮\uuu源\u标签

。此类将

display

设置为

inline

如果只想显示单个标签：

#cke_11_label { display: inline; }

---

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

非常感谢。我想从16px更改为32px宽度，并添加了以下内容：.cke_button_mybutton{width:32px！important；}它最终起作用，但只是更改了按钮的背景。我的图标被切断并显示为16像素。我该怎么做？你选择了错误的元素。我猜您选择了父元素。当然，您应该提供一个工作示例。选择器错误。使用

#cke\u？？？

where？？是一个整数。请使用开发人员工具检查CKeditor的html结构，并查看哪些类和ID应用于您的按钮。我猜你的

.cke\u按钮\u insertTimestamp

就快到了。我认为您需要子元素。不要将代码作为图片放置。把它加到你的问题上。您可以使用

#cke_61.cke_图标{width:32px；}

选择此

cke_图标。这是基本的CSS。搜索并阅读有关“css选择器”的信息。
#cke_11 { width: 120px; }

#cke_11_label { display: inline; }