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

Question

我有一个<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

你明白了......

我发现这个有用的功能/sf/answers/279852751/用自定义文本替换当前选择.但我无法先获取选择内容并在替换之前剥离标签.我怎样才能做到这一点？

Answer 1

我执行此操作的方法是迭代选择范围内的节点并删除内联节点（可能<br>只保留元素）。这是一个示例，为了方便起见，使用了我的Rangy库。它适用于所有主要浏览器（包括 IE 6），但并不十分完美：例如，它不会拆分部分选定的格式元素，这意味着部分选定的格式元素将被完全删除，而不仅仅是选定的部分。要解决这个问题会更加棘手。

\n\n

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

\n\n

代码：

\n\n

var getComputedDisplay = (typeof window.getComputedStyle != "undefined") ?\n    function(el) {\n        return window.getComputedStyle(el, null).display;\n    } :\n    function(el) {\n        return el.currentStyle.display;\n    };\n\nfunction replaceWithOwnChildren(el) {\n    var parent = el.parentNode;\n    while (el.hasChildNodes()) {\n        parent.insertBefore(el.firstChild, el);\n    }\n    parent.removeChild(el);\n}\n\n\nfunction removeSelectionFormatting() {\n    var sel = rangy.getSelection();\n\n    if (!sel.isCollapsed) {\n        for (var i = 0, range; i < sel.rangeCount; ++i) {\n            range = sel.getRangeAt(i);\n\n            // Split partially selected nodes \n            range.splitBoundaries();\n\n            // Get formatting elements. For this example, we\'ll count any\n            // element with display: inline, except <br>s.\n            var formattingEls = range.getNodes([1], function(el) {\n                return el.tagName != "BR" && getComputedDisplay(el) == "inline";\n            });\n\n            // Remove the formatting elements\n            for (var i = 0, el; el = formattingEls[i++]; ) {\n                replaceWithOwnChildren(el);\n            }\n        }\n    }\n}\n\xe2\x80\x8b\n

\n