使用彈出窗口在「contenteditable」div中插入圖像

我有一個調用彈出窗口的「插入圖像」按鈕。我這個彈出窗口，用戶可以使用PHP發送圖像到服務器。當發送成功時，我得到一個帶有輸入文本的頁面。這個INPUT的值是發送文件的名稱（例如：image.jpg）。使用彈出窗口在「contenteditable」div中插入圖像

這是我的問題。我想在我的contentEditable div（母窗口）上插入image.jpg。

我想保持圖像鼠標光標所在的位置。

我在這裏找到一個例子..但是當我的圖像代碼包含在div中時，它顯示爲文本..而不是html標籤...所以我只獲取文本，而不是圖像！

這裏是我得到了..

SCRIPT：

function isOrContainsNode(ancestor, descendant) { 
    var node = descendant; 
    while (node) { 
     if (node === ancestor) { 
      return true; 
     } 
     node = node.parentNode; 
    } 
    return false; 
} 

function insertNodeOverSelection(node, containerNode) { 
    var sel, range, html, str; 


    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      if (isOrContainsNode(containerNode, range.commonAncestorContainer)) { 
       range.deleteContents(); 
       range.insertNode(node); 
      } else { 
       containerNode.appendChild(node); 
      } 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     if (isOrContainsNode(containerNode, range.parentElement())) { 
      html = (node.nodeType == 3) ? node.data : node.outerHTML; 
      range.pasteHTML(html); 
     } else { 
      containerNode.appendChild(node); 
     } 
    } 
}

風格

#editable { width:100%; height:100px; border:1px solid black; } 
#oculta { width:100%; height:30px; border:1px solid black; display:none; }

HTML

<div contenteditable="true" id="editable"> 
</div> 

<div id="oculta"> 
<form name="form"> 
&nbsp;<textarea name="area" rows="2" name="S1" cols="20"></textarea> 
<input type="button" onmousedown="insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable'));" value="insert"></form> 
</div> 
<input type="button" onmousedown="document.getElementById('oculta').style.display='block';" value="test">

非常感謝！

來源

2012-02-12 Flávio Alencar

哈！你的_問題包含我正在尋找的_answer_;如何在插入位置插入內容，編輯內容。非常感謝！ OMG！ – stafffan 2013-06-26 21:25:20

你能夠得到正確的圖像的文本/文件名？你能否讓PATH返回上傳的文件？如果是這樣，你需要做的就是動態創建一個img標籤並將它的「src」屬性改爲文件路徑。

變化 - >insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable'));到

var x=document.createElement('img'); 
x.src=form.area.value; 
insertNodeOverSelection(x, document.getElementById('editable'));

來源

2012-02-12 12:29:45 Akshay

它工作得很好！我很感激！！！非常感謝！！！ – 2012-02-12 13:37:07

YW。 :)。如果這有幫助，請「接受」答案。謝謝 – Akshay 2012-02-12 13:41:34

接受！再次感謝！！！ – 2012-03-03 03:39:14

使用彈出窗口在「contenteditable」div中插入圖像

回答

相關問題