在 contenteditable 中选择前后插入文本答案

【问题标题】：Insert text before and after selection in a contenteditable在 contenteditable 中选择前后插入文本
【发布时间】：2013-07-04 01:47:59
【问题描述】：

有没有办法在 contenteditable div 中的选定文本前后插入类似于 bbcode 的文本？我已经看到很多关于 textarea 的答案，但代码不适用于 contenteditable div。不需要 IE 支持。

【问题讨论】：

标签： javascript contenteditable

【解决方案1】：

我建议的方法是：

从选择中获取范围
在范围末尾插入一个文本节点
在范围的开头插入另一个文本节点
重新选择原文

以下演示将适用于除 IE

演示：http://jsfiddle.net/8WEru/

代码：

function surroundSelection(textBefore, textAfter) {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            var startNode = range.startContainer, startOffset = range.startOffset;

            var startTextNode = document.createTextNode(textBefore);
            var endTextNode = document.createTextNode(textAfter);

            var boundaryRange = range.cloneRange();
            boundaryRange.collapse(false);
            boundaryRange.insertNode(endTextNode);
            boundaryRange.setStart(startNode, startOffset);
            boundaryRange.collapse(true);
            boundaryRange.insertNode(startTextNode);

            // Reselect the original text
            range.setStartAfter(startTextNode);
            range.setEndBefore(endTextNode);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

【讨论】：

谢谢！如果需要，有没有办法使用 html 元素来显示粗体而不是 [b] 标签？像富文本编辑器一样？
@Flaxbeard：如果大胆比控制精确标记更重要，我会使用document.execCommand("bold", false, null)。否则，你可以适应this answer。
我宁愿不使用 execcommand，因为它是无法控制的跨浏览器，并且仅适用于某些标签。我只使用 createElement("strong");并将innerhtml设置为选定的文本？另外，我如何向这个元素添加样式/类/id？
我又开始从事这个项目，我想知道如何在不使用 execcommand 的情况下插入 html 元素而不是文本。
@Anthony：不。如果您知道选择完全包含在单个文本节点中，但通常情况下没有针对此特定任务的特定本机 API，您可以采取捷径所以你必须使用现有的。

【解决方案2】：

如果我从您的 cmets 中了解了新目标，则您有一个选择并希望用一个元素将其包围。那么范围的 surroundContents 方法应该可以工作：

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var strong = document.createElement('strong');
range.surroundContents(strong);

【讨论】：

注意，这仅适用于添加元素 - 不适用于文本节点。