CKEditor: Hide some toolbar buttons on a per page basis

In my project we had CKEditor with a common toolbar used on many pages and we needed to be able to hide some of the buttons on some pages (e.g. email editor didn't support some functionality/content). It took me a long time to figure a way to do it for CKEditor has no methods for simply removing/hiding buttons from a toolbar. My solution uses the fact that the configuration file can see variables defined in the including page and that it can contain functions - namely there is a function which takes the default toolbar definition and removes from it all the buttons mentioned in a variable, which is expected to be defined in the page.



The page:

...
<script type="text/javascript">
   // This must be defined before including ckeditor.js:
   var removeButtons = "Link,Preview";
</script>
<script type="text/javascript" src="/mywebapproot/myckeditor/editor/ckeditor.js"></script>
...

My custom CKEditor configuration .js:

function removeUnwantedTools( toolbar )
{
    if (typeof(removeButtons) == "undefined") { return toolbar; }

    var filteredTools = new Array();
    for(var i = 0, len = toolbar.length; i < len; i++)
    {
        var element = toolbar[i];
        if (element instanceof Array)
        {
            filteredTools.push(
                removeUnwantedTools(element)); //perhaps don't add if empty
        }
        else if (removeButtons.indexOf(element) == -1)
        {
            filteredTools.push(element);
        }
        // else just ignore the element present on the removeButtons list
    }
    return filteredTools;
}

CKEDITOR.editorConfig = function( config ) {
   ...
    config.toolbar_Default = removeUnwantedTools([
        ['Preview', 'Source','Link'],['MyPlugin', 'AnotherCustomPlugin']
    ]);
   ...
}

The result will be that this plugin will only have the buttons [['Source'],['MyPlugin', 'AnotherCustomPlugin']].

It is not completely fool-proof but worked well for me.

Tags: library