在contenteditable中選擇文本前後插入文本

有什麼方法可以在contenteditable div中的選定文本之前和之後插入與bbcode相似的文本？我已經看到了許多textarea的答案，但代碼不適用於一個可以滿足需求的div。 IE支持是不需要的。在contenteditable中選擇文本前後插入文本

來源

2013-07-05 Flaxbeard

的方法我建議是：

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

下面的演示將在所有主要瀏覽器中運行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-05 22:51:46

謝謝！如果需要的話，有沒有辦法使用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);

來源

2014-02-04 18:57:59

在contenteditable中選擇文本前後插入文本

回答

相關問題