javascript - Creating TinyMCE toggle button to wrap text in multiple tags but it duplicates content on removal -

javascript - Creating TinyMCE toggle button to wrap text in multiple tags but it duplicates content on removal -

i'm attempting create toggle button in tinymce wrap selected text in 2 tags <aside class="extra"> , <blockquote class="extra">. if had next line:

hello, test. select bit. rest not selected.

and highlighted line "i select bit." result be:

<p>hello, test.</p> <aside class="extra"> <blockquote class="extra">i select bit.</blockquote> </aside> <p>the rest not selected.</p>

to this, have created button so:

ed.addbutton('extraquote', { text: false, icon: 'blockquote', onclick: function () { if (ed.selection.getnode().nodename == "blockquote") { ed.selection.setcontent(""+$(ed.selection.getnode()).unwrap().html()+""); }else{ ed.selection.setcontent('<aside class="extra"><blockquote class="extra">' + ed.selection.getcontent() + '</blockquote></aside>'); } } });

this works fine when adding tags, when trying remove them, adds text tags removed, keeps text within tags there well. this:

<p>hello, test. select bit.</p> <blockquote class="extra">i select bit.</blockquote> <p>the rest not selected.</p>

here jsfiddle: http://jsfiddle.net/ed9dhhvv/1/

any ideas on how prepare this. or there improve way, looking @ adding custom formats, far can tell works single tags.

any help appreciated. many thanks.

javascript jquery tinymce-4