Удалить теги выбора

Question

У меня есть следующий код:

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

Пользователь может выбрать текст и после этого нажмите на кнопку, чтобы удалить <span class="spoiler"> форматирование. После нажатия кнопки текст должен быть выбран.

Например: Пользователь выбирает «со спойлерами. Он нажимает «удалить спойлер». Желаемый результат:

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

jsFiddle моей попытки (я действительно не знаю, куда идти оттуда): http://jsfiddle.net/632cr/

Answer 1

Самый быстрый и простой способ сделать это - использовать каркас rangy и его модуль CSSClassApplier.

Это просто и ваш код может выглядеть следующим образом:

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()); 
} 

Смотрите результат демо here.

Answer 2

Не уверен, что вы после здесь, но:

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

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

будет скрывать промежутки спойлера при нажатии кнопки.