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

[vijendra]

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.

[Jakub Ś]

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

That is not true.

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

Replacing selection works only with phrasing/inline elements (E.g. B, I).
Element PRE as you probably know is in HTML5 flow element (referred in HTML4 as Block-level element) which replaces whole block/flow element, not just selection.
Editor works like that by design.

Please read #9753.

[vijendra]

I think you didn't understood this, let me clarify.

The formatted option works well and it applies <PRE> to the selected lines and not the entire bunch of lines.

However the custom "button-pre" applies <PRE> to the entire bunch of lines and not just to the selected lines. And I need someones help to make it work like how the "formatted option works.

Try this.

Use the "Button-pre" plugin from the attachment. Add following 4 lines in ckeditor and select 2,3 line and hit PRE button, you will see that not just the selected but the entire set of lines get wrapped inside pre

"line 1: test
line 2: test
line 3: test
line 4: test"

When you do the same test but if you hit 'formatted" option, it will wrap only the selected lines into PRE.

So my question is what should I need to do to mimic the "formatted" functionality which the ckeditor provides. How can I create a button on the toolbar which behaves like the "formatted" option. The "button-pre" plugin ( ​https://phpacademy.org/forum/topic/ckeditor-help-pre-tag-18347 ) doesn't work well like the "formatted" option when EnterLineMode = BR

[Jakub Ś]

Ok, you are right your problem is not the same as the one mentioned in #9753 but this issue is still invalid.

This is bug tracker (page for reporting bugs and feature requests) not support site.

To copy this behaviour, simply check CKEditor code. You can either download source version from builder or clone git repository.

Code for format plugin has the following line: editor[ style.checkActive( elementPath ) ? 'removeStyle' : 'applyStyle' ]( style );. I believe this is where you should start your search.

[vijendra]

Thank you j.swiderski, I updated my button-pre plugin as what you mentioned.

Its working now.