在 CKEditor 中，如何向按钮添加“文本”标签？答案

【问题标题】：In CKEditor, how can I add a "text" label to a button?在 CKEditor 中，如何向按钮添加“文本”标签？
【发布时间】：2012-01-19 03:29:07
【问题描述】：

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

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

但是如果你去演示here，你会看到“Source”是一个文本。我想在图标旁边添加“上传图片”一词。

【问题讨论】：

我把文本放在按钮标签<button>Button text</button>之间。虽然不确定如何在 CKEditor 中执行此操作。

标签： javascript html css ckeditor

【解决方案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 规则。

【讨论】：

我猜在 ckeditor 文件夹中。但是您不应该编辑此文件，否则如果您更新 ckeditor 安装并忘记再次更改 css，它将不再工作。在您网站的 css 中覆盖它。
我找到了位于 ckeditor/skin/kama/editor.css 的文件。编辑文件后，它的工作。但我同意添加我自己的 css，哈哈。顺便说一句，非常感谢迪迪埃。 ^^
如果你只想要图片按钮的标签，你可以使用.cke_skin_kama .cke_button .cke_button_image .cke_label { display: inline-block; }
请注意，对于 CKEditor 4，您需要删除类之间的空格，对于我使用的 Mono 主题/图像按钮：.cke_button_label.cke_button__image_label { display:inline-block !important; }
正如 Echt Einfach TV 的评论和此处的其他答案一样，对于 CKEditor 4，您实际上需要在 CMDNAMEHERE 之前添加 两个下划线。所以cke_button__source，而不是cke_button_source。

【解决方案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;
}

【讨论】：

【解决方案3】：

.cke_button_label.cke_button__CMDNAMEHERE{
   display: inline;
}

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

你可以把它放在你自己的css中的任何地方

【讨论】：

对于ckeditor 4，你必须使用：.cke_button_label.cke_button__CMDNAMEHERE_label{ display: inline; }

【解决方案4】：

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

我在 ckeditor/skins/moono-list/editor.css 中进行了搜索，并搜索了“源”以了解他们如何使用包含文本的“源”按钮。我发现了这个：

.cke_button__source_label,
.cke_button__sourcedialog_label
{
    display:inline
}

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

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

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

【讨论】：