jakub holý

building the right thing, building it right, fast

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 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.