Remove tags from selection

Question

I have the following code:

<div contenteditable="true" id="editor"> <p>This is example text with <span class="spoiler">spoiler<strong>s</strong></span></p> <p>The <span class="spoiler">spoiler</span> exists in multiple paragraphs</p> </div> <button onclick="removeSpoiler();">remove spoiler</button> 

The user can select the text and then click the button to remove the formatting <span class="spoiler"> . After clicking the button, the text should be selected.

For example: the user selects "with spoilers. Sp". He clicks “remove spoiler”. Desired Result:

 <div contenteditable="true" id="editor"> <p>This is example text with spoiler<strong>s</strong></p> <p>The sp<span class="spoiler">oiler</span> exists in multiple paragraphs</p> </div> <button onclick="removeSpoiler();">remove spoiler</button> 

A jsFiddle of my attempt (I really don't know where to go from there): http://jsfiddle.net/632cr/

Answer 1

The fastest and easiest way to do this is to use the rangy framework and CSSClassApplier .

This is easy, and your code might look like this:

 rangy.init(); var cssClassApplierModule = rangy.modules.CssClassApplier; var classApplier = rangy.createCssClassApplier('spoiler'); function removeSpoiler(){ classApplier.undoToSelection(editor); // it some preview div $('#preview').text( $(editor).html() ); } 

See the demo here .

Answer 2

Not sure if you are here, but:

 function removeSpoiler() { var e=document.getElementsByClassName("spoiler"); for(var n=0;n<e.length;n++) e[n].style.display="none"; } 

will hide the spoiler gaps when the button is pressed.