在選擇之前和之后插入文本以滿足要求

Question

有沒有辦法在一個contenteditable div中的所選文本之前和之后插入類似於bbcode的文本？ 我已經看到了textarea的許多答案，但代碼不適用於contenteditable div。 不需要IE支持。

Answer 1

我建議的方法是：

• 從選擇中獲取范圍
• 在范圍的末尾插入文本節點
• 在范圍的開頭插入另一個文本節點
• 重新選擇原始文本

以下演示適用於除IE <= 8之外的所有主流瀏覽器。

演示： 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);
        }
    }
}

Answer 2

如果我從你的評論中理解新的目標，你就有了一個選擇，並希望用一個元素包圍它。 那么rangeContents范圍的方法應該工作：

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