Question

I needed to add the h1, h2, h3 tags to key bindings for ckeditor and I found this simple function to do this.
This function works fine and as expected, But I can only use it once, If I copy the same function to another directory and try to include it, it doesnt work. What am i doing wrong?

Location: plugins/button-h1/plugin.js

 var a= {
    exec:function(editor){
    var format = {
    element : "h1"
    };
    var style = new CKEDITOR.style(format);
        style.apply(editor.document);
    }
},

// Add the plugin
b="button-h1";
CKEDITOR.plugins.add(b,{
    init:function(editor){
    editor.addCommand(b,a);
    editor.ui.addButton("button-h1",{
    label:"Button H1",
    icon: this.path + "button-h1.png",
    command:b
    });
}
});

But When I create another plugin inside another folder named ‘button-h2’, With the same code but different names and tags, It doesnt work.

Location: plugins/button-h2/plugin.js

// Exactly the same as above, but with "h2" tags.
var a= {
    exec:function(editor){
    var format = {
    element : "h2"
    };
    var style = new CKEDITOR.style(format);
        style.apply(editor.document);
    }
},

// Add the plugin
b="button-h2";
CKEDITOR.plugins.add(b,{
    init:function(editor){
    editor.addCommand(b,a);
    editor.ui.addButton("button-h2",{
    label:"Button H2",
    icon: this.path + "button-h2.png",
    command:b
    });
}
});

Basically, I need a user to be able to use “CTRL + 1” to add heading tags around selected text.
This method works, except I can only use it for one of the headings only, either H1 or H2, not both or more.

In my config.js, I have the following to set everything up.

config.extraPlugins = "button-h1,button-h2";
config.keystrokes =
[
    [ CKEDITOR.CTRL + 49 /*1*/, 'button-h1' ],
    [ CKEDITOR.CTRL + 50 /*2*/, 'button-h2' ]

];

So,
– The Plugin Works, but I can only use it on H1 or H2, NOT BOTH, WHY?
Do I need to put this within a function or something so it can be executed more then once at the same time?

Answer 1

I found the answer for this. I needed to wrap this in a anonymous function.

(function(){
var a= 
{
    exec:function(editor){
        var format = {
        element : "h1"
        };
    var style = new CKEDITOR.style(format);
    style.apply(editor.document);
    }
},

b="tags-h1";
CKEDITOR.plugins.add(b,{
    init:function(editor){
    editor.addCommand(b,a);
    editor.ui.addButton(b,{
    label:"Heading 1",
    icon: this.path + "heading-1.png",
    command:b
    });
    }
});
})();