Search code examples
javascriptjquerypluginsckeditorckeditor4.x

Remove "Source" from CKEditor UI Source Dialog plugin

I'm using CKEditor (v4.7.0 - custom build) and I have added the Source Dialog plugin (http://ckeditor.com/addon/sourcedialog).

What is the best way remove the word "Source" from the toolbar UI?

e.g. from this:

enter image description here

To this:

enter image description here

I'm using the jQuery adaptor and initialising the editor like this:

$(el).ckeditor({
    removePlugins: 'maximize,floatingspace,resize',
    extraPlugins: 'autogrow,sharedspace,sourcedialog',
    autoGrow_onStartup: true,
    toolbarGroups: { name: 'main', groups: [ 'mode', 'document', 'doctools', 'find', 'selection', 'spellchecker', 'editing', 'clipboard', 'undo', 'forms', 'links', 'insert', 'basicstyles', 'cleanup', 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph', 'styles', 'tools', 'colors' ] },
    autoGrow_maxHeight: 800,
    sharedSpaces: {
        top: 'editorActions',
        bottom: 'editorFooter'
    },
    on: {
        blur: function(evt) {
            // blur functions
        },
        instanceReady: function (evt) {
            // initial functions
        },
        change: function(evt) {
            // save functions
        }
    }
});

Currently I am simply deleting the text by targeting the element on load.

$('#cke_[id]_label').html(' ');

But this feels somewhat hacktastic and I'd like to not load it rather than removing it.

Solution

  • You can hide the label and leave only the icon with CSS:

    .cke_button__source_label {
    display: none !important;
}

    or

    .cke_button_label.cke_button__source_label {
    display: none;
}

    See also this answer: https://stackoverflow.com/a/8487229/4708866