在选择之前和之后插入文本以满足要求

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