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

Answer 1

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

.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