從選擇

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">格式。點擊按鈕後，文本必須仍然被選中。

例如：用戶選擇「with spoilers.sp」。他點擊「移除擾流板」。所需的輸出是：

<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"; 
} 

將點擊按鈕時隱藏擾流板跨度。