entfernen Tags aus der Auswahl

Question

ich den folgenden Code haben:

<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> 

Der Benutzer Text auswählen und danach klicken Sie auf die Schaltfläche, um die <span class="spoiler"> Formatierung zu entfernen. Nach einem Klick auf den Button muss der Text noch ausgewählt sein.

Zum Beispiel: Der Benutzer wählt "mit Spoiler. Die SP". Er klickt auf "Spoiler entfernen". Die gewünschte Ausgabe ist:

<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> 

Ein jsFiddle meines Versuch (ich weiß wirklich nicht, wo von dort aus gehen): http://jsfiddle.net/632cr/

Answer 1

Der schnellste und einfachste Weg, dies zu tun ist, rangy Rahmen und seine CSSClassApplier Modul zu verwenden.

Es ist einfach, und Ihr Code könnte wie folgt aussehen:

rangy.init(); 

var cssClassApplierModule = rangy.modules.CssClassApplier; 
var classApplier = rangy.createCssClassApplier('spoiler'); 

function removeSpoiler(){ 
    classApplier.undoToSelection(editor); 

    // it's some preview div 
    $('#preview').text($(editor).html()); 
} 

Sehen Sie das Ergebnis Demo here.

Answer 2

nicht sicher, was Sie nach hier sind, aber:

function removeSpoiler() 
{ 
    var e=document.getElementsByClassName("spoiler"); 

    for(var n=0;n<e.length;n++) 
     e[n].style.display="none"; 
} 

werden die Spoilerspannen ausgeblendet, wenn auf die Schaltfläche geklickt wird.