CKEDITOR - Toolbar button with text

Question

I have a plugin to save the editor contents via Ajax. Right now the button on the toolbar has an image. I wanted to change that to have bold text spelling out 'SAVE'. Is this possible?

This is button currently in my plugin.

    editor.ui.addButton('ajax-save', {
      label: I18n.t('js.save'),
      command: ajax-save,
      className : 'cke_ajax_save'
    });

Reinmar Reinmar · Accepted Answer · 2015-02-25T13:43:10

Add this to your stylesheet:

.cke_button__[[lowercased button name]]_label {
    display: inline !important
}

For example, CKEditor by default contains the following rule to show text in the Source button:

.cke_button__source_label {
    display: inline
}

(Note: there is no important flag in the editors styles, because this style is set after the default display: none rule. In your case I recommend using the important flag for simplicity.)

CKEDITOR - Toolbar button with text

1 Answers