Need help to create custom toolbar button, which executes CKEditor format options

HI,

I want to create custom toolbar buttons, which mimic some of the functionality CKEditor provide. For example, if i need to create custom button for "<B>,<I>,<PRE>,<H1>,<H2>" etc. tags, then how can i achive this?

I tried creating custom button for <PRE> tag, (the CKEditor "formatted" option), but it doesnt worked really well with EnterMode=BR

here is the plugin,

(function () {
    /*http://blog.lystor.org.ua/2010/11/ckeditor-plugin-and-toolbar-button-for.html*/
    var a = {
        exec: function (editor) {
            var format = {
                element: "pre"
            };
            var style = new CKEDITOR.style(format);
            style.apply(editor.document);    
        }
    },

 b = "button-pre";
    CKEDITOR.plugins.add(b, {
        init: function (editor) {
            editor.addCommand(b, a);
            editor.ui.addButton("button-pre", {
                label: "PRE tag",
                icon: this.path + "pre_btn.gif",
                command: b
            });
        }
    });
})();

the problem is that, it applies the <PRE> to not just selected but to the entire text, when used with EnterMode=BR.

The CKEditor "formatted" option works well, it applies <PRE> tag to the selected text only and not to entire text.

Can anyone help me.