Question

我的<div />是contenteditable，可以包含多种类型的HTML元素，例如<span />，<a />，<b />，{{1}等等。

现在，当我在<u />中选择文字时，我希望有一个按钮，可以删除所选内容中的所有样式。

示例1：

选择：

contenteditable

会变成：

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

示例2：

选择：

Hello there. I am a selection

会变成：

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

你明白了......

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

Answer 1

我这样做的方法是迭代选择中的节点并删除内联节点（可能只留下<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);
            }
        }
    }
}

Answer 2

http://jsfiddle.net/fQCZT/2/

<div contenteditable="true">
    <p>
        Here is some <b>formatted text</b>. Please select some and watch the formatting
        <i>magically disappear</i>.
        <br>
        Look, some more <u>formatted</u> content.
    </p>
    <p>And <i>another</i> paragraph of it</p>
</div>
<button onmousedown="removeSelectionFormatting()">Change</button>

它与上述答案之一重复，但有一个更改文字的按钮！

Answer 3

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

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

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

例如，您可以使用the php.js project

中的strip_tags()

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

Answer 4

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

这就是你要找的东西吗？

删除contenteditable中选择内的所有HTML标记

4 个答案: