Editable Div插入位置

我有一個可編輯的div，我正在使用一個按鈕將圖像插入div。現在，我只是在做document.getElementById（'elementid'）。innerHTML。 + =;以便將圖像添加到div的末尾。我想輸入插入的地方。我會如何去做這件事？Editable Div插入位置

感謝

來源

2010-12-02 intl

要在插入符號中插入元素並不難。下面的函數插入一個節點在光標（或選擇的結束時，如果被選擇的內容）的所有主要瀏覽器：

function insertNodeAfterSelection(node) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.collapse(false); 
      range.insertNode(node); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.collapse(false); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
}

來源

2010-12-03 10:39:09

這是否幫助：http://jsfiddle.net/8akDr/

來源

2010-12-02 20:46:18

我明白你只是更換插入的字符/字符集，但我將如何去將字符插入插入位置。它必須是模擬鍵盤輸入還是其他方式？ – intl 2010-12-02 21:18:25

哇......我很慚愧地說，我以爲你的意思是一個脫口而來，就像文字中的脫字符......我爲我的誤解道歉：（ – 2010-12-02 21:32:05

我恨聽起來負，但是這太難了這是荒謬的。你必須處理IE和其他，並且實現是非常不同的。但是，如果你點擊一個按鈕來插入圖像，你會失去焦點和插入位置，所以你需要記住一些onblur書籤功能（同樣，IE不同）。如果您的editablecontent位於iframe並保持自己的焦點，那麼焦點就不是問題了。（注意：在這裏不要停止使用IE，我實際上更喜歡將它們實現爲W3C標準drek。）

您可以查看一些開源文本編輯器的線索和提示。但是你會發現大量的代碼來處理這些簡單的任務。

來源

2010-12-02 21:08:04 mwilcox

）你提到了一些困難，但他們不是我的Rangy圖書館（http://code.google.com/p/rangy）可以幫助大多數人：它提供了一個單一的API和保存和恢復選擇的方法，我很大程度上不同意你關於IE的選擇/ TextRange比DOM標準更好：除了移動邊界以包含單詞並移動到文檔中的相鄰文本外，`Range`在大多數方面都大大優於`TextRange`。選擇對象沒有標準（WHATWG正在工作）但IE瀏覽器的選擇對其他瀏覽器沒有任何影響 – 2010-12-03 10:26:37

Editable Div插入位置

回答

相關問題