How to create button without icon in CKEditor

Question

When I create toolbar button in CKEditor 3.0 with following code I need to uncomment icon property to get button visible. Otherwise space is occupied but no label is shown. When I hover over it I get caption popping up.

        editor.ui.addButton('customButton', {
            label: 'Custom Action',
            //icon: this.path + 'images/anchor.gif',
            command: commandName
        });

Do you know how to create toolbar button without icon? Just a pure text.

Answer 1

An easier way is that CKEditor creates a CSS class on your custom label automatically called: cke_button_<command>

For example, if your command for the button was called 'myCommand', and you set 'label: 'My Command', then CK would render something like:

<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>

Therefore (assuming you are using the 'kama' skin - substitute for your skin if not), you can use the following CSS to override the cke_label ==> display:none

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

Voila.

Answer 2

This is how I did it. A button looks like this:

<span class="cke_button">
    <a id="cke_..." class="cke_off cke_button_cmd" ...>
        <span class="cke_icon"/>
        <span class="cke_label">Label</span>
    </a>
</span>

.cke_label is styled "display:none" by default. This would do exactly what we want:

<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>

So the selectors are a bit tricky, put this in the Style Tag on the page with the editor:

<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>

The ckeditor authors applied css to get the label on the source button (presets.css):

/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
 display: inline;
}