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

问题描述：

有什么方法可以在contenteditable div中的选定文本之前和之后插入与bbcode相似的文本？我已经看到了许多textarea的答案，但代码不适用于一个可以满足需求的div。 IE支持是不需要的。在contenteditable中选择文本前后插入文本

答

的方法我建议是：

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

下面的演示将在所有主要浏览器中运行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); 
     } 
    } 
}

谢谢！如果需要的话，有没有办法使用html元素来显示大胆而不是[b]标签？像一个富文本编辑器？ – Flaxbeard

@Flaxbeard：如果气魄比控制精确加价更重要的是，我会用'document.execCommand（“大胆”，假，空）'。否则，你可以适应[这个答案]（http://stackoverflow.com/a/6691294/96100）。 –

我宁愿不使用execcommand，因为它是无法控制的跨浏览器，只适用于某些标签。我只使用createElement（“strong”）;并将innerhtml设置为选定的文本？此外，如何将我的样式/班/ ID添加到这个元素？ – Flaxbeard

答

，有如果我从您的意见了解新的目标，你的选择，并希望通过一个元素将其包围。随后的范围surroundContents方法应该工作：

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

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

相关推荐