在Javascript中插入文本contenteditable div

我有一個問題，我需要插入一個文本（字符串，可能有或沒有html標籤）到一個div。它必須是一個div而不是textarea。在Javascript中插入文本contenteditable div

有沒有辦法做到這一點？首先，我需要獲取光標位置，然後在該位置插入文本。

它與函數insertAdjacentText類似，但它只能在標籤之前或之後插入，並且只能在IE中使用。

請參考此網址：http://yart.com.au/test/iframe.aspx。請注意如何將光標放在div中，我們需要在光標位置添加文本。

來源

2008-10-30 Restless Wanderer

範圍和選擇對象

使用selection和range objects。它們包含有關當前選擇的各種信息，以及它在節點樹中的位置。

公平的警告： 這不是完全不可能做到你所描述的東西，但如果你很花哨，你會在瀏覽器怪癖和不兼容性相當深的水。你將不得不做很多對象檢測，檢查以確保你有一致的值和方法。在開發過程中逐步檢查所有瀏覽器。祝你好運！

來源

2008-10-31 00:10:04 keparo

如果您只需要在當前選擇/插入點插入HTML，那是可行的。關閉我的頭（爲了讓你開始）：

在IE中，使用document.selection.createRange（）。pasteHTML（theNewHTML）。

在其他瀏覽器中，您應該可以使用document.execCommand（「InsertHTML」，...）。

我已經使用這些技術只能在可編輯的iframes /文件，而不是divs，但這些調用應該工作，如果div是專注，我相信。正如另一個回答所警告的，如果你想要更細緻的控制，比如在其他地方插入文本，它會變得很難看。

來源

2008-10-31 14:36:57

您還可以使用使用insertImage的四捨五入方法。您使用execCommand「insertImage」插入假圖像（或小圖像），然後使用Javascript替換innerHTML以添加文本。

例如：

iFrame.focus() 
iFrame.document.execCommand("insertImage", "", "fakeimage.jpg") 
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace("<img src=\"fakeimage.jpg\">", "MY CUSTOM <b>HTML</b> HERE!")

然而的iFrame是等於預定的iFrame的id。或者，您可以使用document.getElementById（「IDofDIVlayer」）來使用DIV圖層。innerHTML

請務必在調用execCommand之前進行關注，否則可能無法在IE中使用。

此方法也適用於IE。測試。

來源

2013-11-01 10:02:17 SyntaxLAMP

這是一個跨瀏覽器的示例，改編自this answer以使用iframe。

function pasteHtmlAtCaret(html, selectPastedContent, iframe) { 
    var sel, range; 
    var win = iframe ? iframe.contentWindow : window; 
    var doc = win.document; 
    if (win.getSelection) { 
     // IE9 and non-IE 
     sel = win.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 

      // Range.createContextualFragment() would be useful here but is 
      // only relatively recently standardized and is not supported in 
      // some browsers (IE9, for one) 
      var el = doc.createElement("div"); 
      el.innerHTML = html; 
      var frag = doc.createDocumentFragment(), node, lastNode; 
      while ((node = el.firstChild)) { 
       lastNode = frag.appendChild(node); 
      } 
      var firstNode = frag.firstChild; 
      range.insertNode(frag); 

      // Preserve the selection 
      if (lastNode) { 
       range = range.cloneRange(); 
       range.setStartAfter(lastNode); 
       if (selectPastedContent) { 
        range.setStartBefore(firstNode); 
       } else { 
        range.collapse(true); 
       } 
       sel.removeAllRanges(); 
       sel.addRange(range); 
      } 
     } 
    } else if ((sel = doc.selection) && sel.type != "Control") { 
     // IE < 9 
     var originalRange = sel.createRange(); 
     originalRange.collapse(true); 
     sel.createRange().pasteHTML(html); 
     if (selectPastedContent) { 
      range = sel.createRange(); 
      range.setEndPoint("StartToStart", originalRange); 
      range.select(); 
     } 
    } 
}

來源

2013-11-01 11:18:29

在Javascript中插入文本contenteditable div

回答

相關問題