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.

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.

• javascript
• html
• css
• ckeditor

Share Improve this question Follow edited Dec 13, 2011 at 10:08 Some Guy 16.2k1010 gold badges6060 silver badges6767 bronze badges asked Dec 13, 2011 at 8:21 user847495user847495 10.2k1717 gold badges4747 silver badges4848 bronze badges 1

• I html you'd put the text in between the button tags <button>Button text</button>. Not sure about how to do that in CKEditor though. – Kyle Commented Dec 13, 2011 at 8:24

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 26

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.

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

.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

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.