我有以下代码:
<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.the 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/
最佳答案
最快最简单的方法是使用 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 .
关于javascript - 从选择中删除标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21210190/