8

我有一个<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用自定义文本替换当前选择。但我只是无法先获取选择的内容，然后在替换之前去掉标签。我怎样才能做到这一点？

4

4 回答 4

4

我这样做的方法是遍历选择中的节点并删除内联节点（可能不理会<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);
            }
        }
    }
}
​
于 2012-12-14T15:07:04.323 回答
0

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>​

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

于 2012-12-14T13:52:09.397 回答
0

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

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

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

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

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

于 2012-12-14T14:02:33.827 回答
0

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

那是你要找的吗？

于 2012-12-14T14:03:43.557 回答