如何用contenteditable元素中的html替換選定的文本？

Question

有了contenteditable元素我怎樣才能用我自己的html替換選定的內容？

Answer 1

看到這裏的工作的jsfiddle：從Tim Down採取http://jsfiddle.net/dKaJ3/2/

function getSelectionHtml() { 
    var html = ""; 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var container = document.createElement("div"); 
      for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
       container.appendChild(sel.getRangeAt(i).cloneContents()); 
      } 
      html = container.innerHTML; 
     } 
    } else if (typeof document.selection != "undefined") { 
     if (document.selection.type == "Text") { 
      html = document.selection.createRange().htmlText; 
     } 
    } 
    alert(html); 
} 

代碼：Return HTML from a user-selected text

Answer 2

獲取所選的HTML，你可以使用我寫了this question功能。要用您自己的HTML替換選擇，您可以使用this function。下面是插入一個HTML字符串而不是DOM節點的替代品功能的版本：

function replaceSelectionWithHtml(html) { 
    var range; 
    if (window.getSelection && window.getSelection().getRangeAt) { 
     range = window.getSelection().getRangeAt(0); 
     range.deleteContents(); 
     var div = document.createElement("div"); 
     div.innerHTML = html; 
     var frag = document.createDocumentFragment(), child; 
     while ((child = div.firstChild)) { 
      frag.appendChild(child); 
     } 
     range.insertNode(frag); 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.pasteHTML(html); 
    } 
} 

replaceSelectionWithHtml("<b>REPLACEMENT HTML</b>");