Chèn hình ảnh vào div "có thể chỉnh sửa được" bằng cách sử dụng cửa sổ bật lên

Question

Tôi có nút "chèn hình ảnh" gọi là cửa sổ bật lên. Tôi bật lên này, người dùng có thể gửi hình ảnh đến máy chủ bằng cách sử dụng PHP. Khi gửi thành công, tôi nhận được một trang với một INPUT TEXT. Giá trị os INPUT này là tên của tệp được gửi (ví dụ: image.jpg).

Đây là vấn đề của tôi. Tôi muốn chèn image.jpg này vào div contentEditable của tôi (cửa sổ mẹ).

Và tôi muốn giữ cùng một nơi với hình ảnh con trỏ chuột.

Tôi tìm thấy một ví dụ ở đây .. Nhưng khi mã hình ảnh của tôi được đưa vào div, nó xuất hiện dưới dạng văn bản .. Không phải là thẻ html ... Vì vậy, tôi chỉ nhận được văn bản chứ không phải hình ảnh!

Đây là những gì tôi đã nhận ..

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); 
     } 
    } 
} 

STYLE

#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"> 

Cảm ơn rất nhiều!

Answer 1

Bạn có thể nhận được văn bản/tên tệp của hình ảnh ngay? Bạn có thể biến nó trở lại PATH thành tệp được tải lên không? Nếu vậy, tất cả những gì bạn cần làm là tự động tạo thẻ img và thay đổi thuộc tính "src" thành đường dẫn tệp.

thay đổi ->insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable')); để

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