Question

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

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

但如果您转到演示here，您会看到“来源”是一个文字。我想在图标旁添加“上传图片”一词。

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

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

你可以将它放在你自己的CSS中的任何地方

Answer 4

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

我在ckeditor / skins / moono-list / editor.css中挖掘并搜索了＆＃34; source＆＃34;找到他们如何处理具有文本的Source按钮。我发现了这个：

.cke_button__source_label,
.cke_button__sourcedialog_label
{
    display:inline
}

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

无论如何，你会替换＆＃34; source＆＃34;或＆＃34; sourcedialog＆＃34;上面你想要的任何东西，并将其添加到你自己的CSS文件。

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

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

4 个答案: