2

CKEditor: Hide some toolbar buttons on a per page basis

 2 years ago
source link: https://blog.jakubholy.net/2011/04/04/ckeditor-hide-some-toolbar-buttons-on-a-per-page-basis/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

CKEditor: Hide some toolbar buttons on a per page basis

April 4, 2011
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

Are you benefitting from my writing? Consider buying me a coffee or supporting my work via GitHub Sponsors. Thank you! You can also book me for a mentoring / pair-programming session via Codementor or (cheaper) email.

Allow me to write to you!

Let's get in touch! I will occasionally send you a short email with a few links to interesting stuff I found and with summaries of my new blog posts. Max 1-2 emails per month. I read and answer to all replies.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK