4

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

4

2 回答 2

16

我建议的方法是：

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

以下演示适用于除 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);
        }
    }
}
于 2013-07-05T22:51:46.347 回答
3

如果我从您的评论中理解了新目标，那么您有一个选择并希望用一个元素包围它。然后 range 的环绕内容方法应该可以工作：

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var strong = document.createElement('strong');
range.surroundContents(strong);
于 2014-02-04T18:57:59.523 回答