soạn thảo văn bản contenteditable và vị trí con trỏ

Question

Làm thế nào tôi có thể (sử dụng jquery hoặc khác) chèn html vào vị trí con trỏ/caret của div contenteditable tôi:

<div contenteditable="true">Hello world</div> 

Ví dụ, nếu con trỏ/caret là giữa "hello "và" thế giới "và người dùng sau đó nhấp vào một nút, ví dụ như" chèn hình ảnh ", sau đó sử dụng javascript, một cái gì đó như <img src=etc etc> sẽ được chèn vào giữa" hello "và" world ". Tôi hy vọng tôi đã thực hiện điều này rõ ràng = S

Mã mẫu sẽ được đánh giá rất nhiều, cảm ơn rất nhiều!

Answer 1

Tôi muốn giới thiệu việc sử dụng các plugin jquery a-tools

Plugin này có bảy chức năng:

* getSelection – return start, end position, length of the selected text and the selected text. return start=end=caret position if text is not selected; 
* replaceSelection – replace selected text with a given string; 
* setSelection – select text in a given range (startPosition and endPosition); 
* countCharacters – count amount of all characters; 
* insertAtCaretPos – insert text at current caret position; 
* setCaretPos – set cursor at caret position (1 = beginning, -1 = end); 
* setMaxLength – set maximum length of input field. Also provides callback function if limit is reached. Note: The function has to have a number as input. Positive value for setting of limit and negative number for removing of limit. 

Người mà bạn cần là insertAtCaretPos: Có

$("#textarea").insertAtCaretPos("<img src=etc etc>"); 

thể là một sự rút lại: plugin này chỉ hoạt động với textarea en input: các phần tử văn bản, vì vậy có thể có mâu thuẫn với wit h có thể chỉnh sửa.

Answer 2

Chức năng sau đây sẽ chèn một nút DOM (yếu tố hoặc text node) tại vị trí con trỏ trong tất cả các trình duyệt máy tính để bàn chính:

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

Nếu bạn muốn chèn một chuỗi HTML:

function insertHtmlAtCursor(html) { 
    var sel, range, node; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = window.getSelection().getRangeAt(0); 
      node = range.createContextualFragment(html); 
      range.insertNode(node); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().pasteHTML(html); 
    } 
} 

tôi đã thích nghi này từ câu trả lời của tôi cho một câu hỏi tương tự: How to find cursor position in a contenteditable DIV?

Answer 3

với contenteditable bạn nên sử dụng execCommand .

Hãy thử document.execCommand('insertImage', false, 'image.jpg') hoặc document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />'). Thứ hai không hoạt động trong IE cũ hơn.