javascript 在 CKEditor 中，如何向按钮添加“文本”标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8486145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In CKEditor, how can I add a "text" label to a button?
提问by user847495
editor.ui.addButton( 'ImageUpload',{
label: 'Upload Image',
command: 'popup_image_uploader',
icon: this.path + 'images/icon.png'
});
That's my current code right now. When you load the page, you only see the icon.
这是我现在的当前代码。加载页面时，您只会看到图标。
But if you go to the demo here, you'll see that "Source" is a text. I want to add the word "Upload Image" next to the icon.
但是，如果您转到此处的演示，您会看到“源”是一个文本。我想在图标旁边添加“上传图片”这个词。
回答by Didier Ghys
The label for CKeditor toolbar buttons have a class .cke_labelwhich has by default display:noneso the buttons are icon-only:
CKeditor 工具栏按钮的标签有一个.cke_label类，默认情况下display:none，按钮只有图标：
.cke_skin_kama .cke_button .cke_label {
...
display: none;
...
}
Like for the Sourcebutton, you have to use CSS to show your label.
与Source按钮一样，您必须使用 CSS 来显示您的标签。
Normallywhen creating the button CKeditor add a class like .cke_button_CMDNAMEHEREwhere CMDNAMEHEREbeing the name of your command. So you'll have:
通常在创建按钮 CKeditor 时添加一个类.cke_button_CMDNAMEHERE，其中CMDNAMEHERE是您的命令的名称。所以你会有：
.cke_skin_kama .cke_button_CMDNAMEHERE .cke_label {
display: inline;
}
Check the html source to see the exact name of the added class and make your CSS rule accordingly.
检查 html 源以查看添加类的确切名称并相应地制定 CSS 规则。
回答by mario
another solution would be to just use the css ":before" or ":after" pseudo class to add some custom content before / after the buttons.
另一种解决方案是仅使用 css ":before" 或 ":after" 伪类在按钮之前/之后添加一些自定义内容。
for example, customizing the "link" button:
例如，自定义“链接”按钮：
create some space (depends on length of content):
创建一些空间（取决于内容的长度）：
.cke_button_icon.cke_button__link_icon {
padding-right: 25px;
}
add content:
添加内容：
.cke_button_icon.cke_button__link_icon:after {
content: "Link";
position: relative;
left: 15px;
}
回答by mordy
.cke_button_label.cke_button__CMDNAMEHERE{
display: inline;
}
will work for all skins, unlike the answer above(note the double underscore between buttons and CMDNAMEHERE)
将适用于所有皮肤，与上面的答案不同（注意按钮和 CMDNAMEHERE 之间的双下划线）
you can place it anywhere in your own css
你可以把它放在你自己的css中的任何地方
回答by Vern Jensen
In the current ckeditor (4.6.x) the answers above do not work for me.
在当前的 ckeditor (4.6.x) 中，上述答案对我不起作用。
I dug around in ckeditor/skins/moono-list/editor.css and did a search for "source" to find how they did the Source button which has text. I found this:
我在 ckeditor/skins/moono-list/editor.css 中搜索并搜索“源”以查找他们如何处理带有文本的“源”按钮。我找到了这个：
.cke_button__source_label,
.cke_button__sourcedialog_label
{
display:inline
}
Notice that there are TWO underscores here before the name of your custom button. When I tried with only one underscore it did not work.
请注意，此处在您的自定义按钮名称之前有两个下划线。当我尝试只使用一个下划线时，它不起作用。
Anyway you would replace "source" or "sourcedialog" above with whatever you want and add that to your own css file.
无论如何，您可以用您想要的任何内容替换上面的“源”或“源对话框”，并将其添加到您自己的 css 文件中。
Additionally, it seems to only work for button names that are entirely lowercase.
此外，它似乎只适用于完全小写的按钮名称。
