CODEWITHSUNDEEP
javascriptckeditor
Jana
Jana

Reputation: 430

ckeditor convert selection to specified tag

i have just follow the reference to add a folder in ckeditor/plugins and named it button-pre

and here's the source

(function(){
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:'Button PRE', 
            icon:this.path+'button-pre.png', 
            command:b
        });
    }
});
})();

here is my question

when i roll the mouse to select couple lines and wanna convert it to tag PRE, but it always converts all the document.

i realize it may be setup by style.apply(editor.document) stuff.

so i have tried some way to resolve that ( for ex style.apply(editor.getSelection().getNative())

but i cant find any solution. it wont work at all, please help!

Upvotes: 2

Views: 448

Answers (1)

oleq
oleq

Reputation: 15895

This is not as easy as it seems to be. Please take a look on the source code of the div plugin which wraps selection into a DIV element. This might be an inspiration for you. However, note that you'll need a lot of skill in DOM hacking to avoid some pathological cases like tag overlapping:

<p>First [paragraph</p><p>Second]^ paragraph</p>

The above cannot be converted into this:

<p>First <pre>paragraph</p><p>Second</pre> paragraph</p>

as it's a wrong markup.

Good luck, anyway!

Upvotes: 1

Related Questions