In CKEditor, how can I add a “text” label to a button?

Question

editor.ui.addButton( \'ImageUpload\',{
                label: \'Upload Image\',
                command: \'popup_image_uploader\',
                icon: this.path + \'im         


        

Answer 1

In the current ckeditor (4.6.x) the answers above do not work for me.

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:

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

Additionally, it seems to only work for button names that are entirely lowercase.

Answer 2

another solution would be to just use the css ":before" or ":after" pseudo class to add some custom content before / after the buttons.

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

Answer 3

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.

Answer 4

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

you can place it anywhere in your own css