在CKEditor中，如何添加“文本”按钮上的标签？

Question

editor.ui.addButton( 'ImageUpload',{
                label: 'Upload Image',
                command: 'popup_image_uploader',
                icon: this.path + 'images/icon.png'
            });

这就是我现在的代码。当您加载页面时，您只能看到该图标。

但如果您访问此处的演示，您会看到“Source”是一个文本。我想在图标旁边添加“上传图像”一词。

Answer 1

CKeditor 工具栏按钮的标签有一个类 .cke_label，默认情况下具有 display:none，因此按钮仅是图标：

.cke_skin_kama .cke_button .cke_label {
    ...
    display: none;
    ...
}

就像 Source 按钮，你必须使用 CSS 来显示你的标签。

通常在创建按钮CKeditor时添加一个类似.cke_button_CMDNAMEHERE的类，其中CMDNAMEHERE是命令的名称。因此，您将：

.cke_skin_kama .cke_button_CMDNAMEHERE .cke_label {
   display: inline;
}

检查 html 源代码以查看添加的类的确切名称，并相应地制定 CSS 规则。

Answer 2

另一种解决方案是仅使用 css ":before" 或 ":after" 伪类在按钮之前/之后添加一些自定义内容。

例如，自定义“链接”按钮：

创建一些空间（取决于内容的长度）：

.cke_button_icon.cke_button__link_icon {
padding-right: 25px;
}

添加内容：

.cke_button_icon.cke_button__link_icon:after {
content: "Link";
position: relative;
left: 15px;
}

Answer 3

.cke_button_label.cke_button__CMDNAMEHERE{
   display: inline;
}

将适用于所有皮肤，与上面的答案不同（请注意按钮和 CMDNAME 之间的双下划线），

您可以将其放置在您自己的 css 中的任何位置

Answer 4

在当前的ckeditor（4.6.x）中，上面的答案对我不起作用。

我在 ckeditor/skins/moono-list/editor.css 中进行了挖掘，并搜索了“源”以查找他们如何执行带有文本的“源”按钮。我发现了这一点：

.cke_button__source_label,
.cke_button__sourcedialog_label
{
    display:inline
}

请注意，自定义按钮名称之前有两个下划线。当我尝试只使用一个下划线时，它不起作用。

无论如何，您可以将上面的“source”或“sourcedialog”替换为您想要的任何内容，并将其添加到您自己的css文件中。

此外，它似乎只适用于完全小写的按钮名称。