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

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

这是我现在的代码。当你加载页面时，你只能看到图标。在CKEditor中，如何添加一个“文本”标签到按钮？

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

来源

2011-12-13 user847495

我的HTML你会把文本中的按钮标签''。不知道如何在CKEditor中做到这一点。 – Kyle

为CKEDITOR工具栏按钮的标签有一个类.cke_label具有默认display:none所以按钮图标只：

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

喜欢的来源按钮，你必须使用CSS展示您的标签。

创建按钮CKEDITOR添加一个类像.cke_button_CMDNAMEHERE其中CMDNAMEHERE是你的命令的名称时，通常。所以你将有：

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

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

来源

2011-12-13 09:58:57

css文件在哪里编辑这样的类？ –

我猜在ckeditor文件夹中。但是你不应该编辑这个文件，否则它不会再工作了，如果你更新你的ckeditor安装并忘记再次更改css。在你的网站的CSS中覆盖这个。 –

我发现位于ckeditor/skin/kama/editor.css中的文件。编辑完文件之后，它就起作用了。但我同意加入我自己的CSS，哈哈。顺便谢谢迪迪埃。 ^^ –

.cke_button_label.cke_button__CMDNAMEHERE{ 
    display: inline; 
}

会为所有的皮肤工作，不像上面的答案（注意按钮和CMDNAMEHERE之间的双下划线）

，你可以在任何地方把它放在自己的CSS

来源

2012-09-10 15:19:39 mordy

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

另一种解决方案是只使用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; 
}

来源

2013-03-08 18:30:33 mario

在当前的CKEditor （4.6.x）上面的答案不适用于我。

我在ckeditor/skins/moono-list/editor.css中搜索并搜索“source”，以查找他们如何执行包含文本的Source按钮。我发现这个：

.cke_button__source_label, 
.cke_button__sourcedialog_label 
{ 
    display:inline 
}

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

无论如何，你会用任何你想要的替换上面的“source”或“sourcedialog”，并将其添加到你自己的css文件中。

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

来源

2017-06-05 20:55:21

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

回答

相关问题