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>

我的尝试的一个小问题（我真的不知道从那里去哪里）：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";
}

单击按钮时，

将隐藏扰流板范围。

从选择中删除标签

2 个答案: