在CKEditor中，如何添加“文本”标签到一个按钮？ [英] In CKEditor, how can I add a "text" label to a button?

问题描述

  editor.ui.addButton（'ImageUpload'，{
 label：'上传图片'，
命令：'popup_image_uploader'，
图标： this.path +'images / icon.png'
}）; 
  

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

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

解决方案

CKeditor工具栏按钮的标签有一个类 .cke_label ，默认情况下 display：none ，所以按钮仅用于图标：

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

类似于 Source em>按钮，您必须使用CSS来显示您的标签。

$ b 通常情况下在创建按钮CKeditor时添加类如 .cke_button_CMDNAMEHERE 其中 CMDNAMEHERE 是您的命令的名称。因此，您将拥有：

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

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

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.

解决方案

The label for CKeditor toolbar buttons have a class .cke_label which has by default display:none so the buttons are icon-only:

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

Like for the Source button, you have to use CSS to show your label.

Normally when creating the button CKeditor add a class like .cke_button_CMDNAMEHERE where CMDNAMEHERE being the name of your command. So you'll have:

.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.

这篇关于在CKEditor中，如何添加“文本”标签到一个按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！