Chèn văn bản vào nội dung Javascript có thể chỉnh sửa div

Question

Tôi gặp sự cố khi tôi cần chèn văn bản (chuỗi, có thể hoặc không thể có thẻ html) vào div. Nó phải là một div và không phải là một textarea.

Có cách nào để thực hiện việc đó không? Trước hết, tôi cần lấy vị trí con trỏ, sau đó chèn văn bản vào vị trí đó.

Nó tương tự như hàm insertAdjacentText, nhưng nó chỉ có thể chèn trước hoặc sau thẻ, và chỉ hoạt động trong IE.

Tham khảo URL này: http://yart.com.au/test/iframe.aspx. Lưu ý cách bạn có thể định vị con trỏ trong div, chúng ta cần thêm văn bản tại vị trí con trỏ.

Answer 1

Range và lựa chọn Objects

Sử dụng selection và range objects. Chúng chứa tất cả các loại thông tin về vùng chọn hiện tại và nó nằm trong cây nút.

Cảnh báo Fair: Đó không phải là hoàn toàn không thể làm những gì bạn đang mô tả, nhưng nếu bạn nhận được rất ưa thích, bạn sẽ có trong nước khá sâu sắc về quirks trình duyệt không tương thích và. Bạn sẽ phải thực hiện rất nhiều việc phát hiện đối tượng , kiểm tra để đảm bảo bạn có các giá trị và phương pháp nhất quán. Tăng dần kiểm tra tất cả các trình duyệt của bạn khi bạn phát triển. Chúc may mắn!

Answer 2

Nếu tất cả những gì bạn cần làm là chèn HTML tại điểm chọn/chèn hiện tại, có thể thực hiện được. Tắt đầu của tôi (để giúp bạn bắt đầu):

Trong IE, hãy sử dụng document.selection.createRange(). PasteHTML (theNewHTML).

Trong các trình duyệt khác, bạn sẽ có thể sử dụng document.execCommand ("InsertHTML", ...).

Tôi đã sử dụng các loại kỹ thuật này chỉ trong các iframe/tài liệu có thể chỉnh sửa, chứ không phải div, nhưng các cuộc gọi này sẽ hoạt động nếu div được tập trung, tôi tin.

Như một câu trả lời khác được cảnh báo, nó trở nên xấu xí nếu bạn muốn kiểm soát chi tiết hơn, như chèn văn bản ở những nơi khác.

Answer 3

Bạn cũng có thể sử dụng phương pháp vòng quanh bằng cách sử dụng insertImage. Bạn chèn một hình ảnh giả (hoặc một hình ảnh nhỏ) bằng cách sử dụng execCommand "insertImage", sau đó bạn sử dụng Javascript để thay thế innerHTML để thêm văn bản.

Ví dụ:

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!") 

Trong khi iFrame bằng id của iFrame dự định. Hoặc, bạn có thể sử dụng lớp DIV bằng cách sử dụng document.getElementById ("IDofDIVlayer"). InnerHTML

Hãy chắc chắn tập trung trước khi gọi execCommand, nếu không nó có thể không hoạt động trong IE.

Phương thức này cũng hoạt động trong IE. Thử nghiệm.

Answer 4

Đây là ví dụ về trình duyệt chéo, được điều chỉnh từ this answer để hoạt động với 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(); 
     } 
    } 
}