删除contenteditable中所有选中的HTML标签

我有一个<div />是contenteditable ，可以包含几种类型的HTML元素，比如<span /> ， <a /> ， <b /> ， <u />等等。

现在，当我在contenteditable选择文本时，我想要一个按钮来删除所选内容中的所有样式。

例1：

选择：

Hello <b>there</b>. I am <u>a selection</u>

会成为：

Hello there. I am a selection

例2：

选择：

<a href="#">I am a link</a>

会成为：

I am a link

你明白了...

我发现这个有用的函数https://stackoverflow.com/a/3997896/1503476用自定义文本替换当前选择。 但我无法首先获取选择内容，并在替换之前将标签剥离。 我怎样才能做到这一点？

---

我会做到这一点的方法是迭代选择中的节点和删除内联节点（也许离开<br>单独元素）。 下面是一个例子，为了方便起见，我使用了Rangy图书馆。 它适用于所有主流浏览器（包括IE 6），但并不完美：例如，它不会分割部分选定的格式化元素，这意味着部分选定的格式化元素将被完全删除，而不仅仅是选定的部分。 解决这个问题会更棘手。

演示：http://jsfiddle.net/fQCZT/4/

码：

var getComputedDisplay = (typeof window.getComputedStyle != "undefined") ?
    function(el) {
        return window.getComputedStyle(el, null).display;
    } :
    function(el) {
        return el.currentStyle.display;
    };

function replaceWithOwnChildren(el) {
    var parent = el.parentNode;
    while (el.hasChildNodes()) {
        parent.insertBefore(el.firstChild, el);
    }
    parent.removeChild(el);
}


function removeSelectionFormatting() {
    var sel = rangy.getSelection();

    if (!sel.isCollapsed) {
        for (var i = 0, range; i < sel.rangeCount; ++i) {
            range = sel.getRangeAt(i);

            // Split partially selected nodes 
            range.splitBoundaries();

            // Get formatting elements. For this example, we'll count any
            // element with display: inline, except <br>s.
            var formattingEls = range.getNodes([1], function(el) {
                return el.tagName != "BR" && getComputedDisplay(el) == "inline";
            });

            // Remove the formatting elements
            for (var i = 0, el; el = formattingEls[i++]; ) {
                replaceWithOwnChildren(el);
            }
        }
    }
}
​

---

根据你的建议功能，在控制台上进行一些实验后，我想出了这个简洁的小脚本。 虽然没有测试这个跨浏览器兼容性！

var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.cloneContents().childNodes[0]; // This is your selected text.

现在，您可以从selectedText中去除HTML标签，并使用您在问题中已经提供的功能替换它。

例如，您可以使用php.js项目中的strip_tags()

我希望这回答了你的问题。

---

http://jsfiddle.net/tnyWD/

HTML：

<div class="test">
    Hello <b>there </b><a href="#">I am a link</a>
</div>
<button class="remove">Remove HTML</button>​

JS：

$(document).ready(function(){
    jQuery.fn.stripTags = function() { return this.replaceWith(this.html().replace(/</?[^>]+>/gi, '') ); };
$('.remove').click(function(){
    $('.test').stripTags();
});
});​

那是你在找什么？

链接地址: http://www.djcxy.com/p/67201.html

上一篇: Remove all HTML tags inside of selection in contenteditable

下一篇: Does framework have dedicated api to detect reentrancy?