Contenteditable текстовый редактор и позиции курсора

Question

Как я могу (с помощью JQuery или другой) вставить HTML в позицию курсора/каретки моего contenteditable DIV:

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

Например, если курсор/каретка был между «привет »и« мир », а затем пользователь нажал кнопку, например« вставить изображение », а затем используя javascript, между« привет »и« миром »будет вставлено что-то вроде <img src=etc etc>. Я надеюсь, что я сделал это ясно = S

Пример кода был бы очень благодарен, спасибо большое!

Answer 1

Я рекомендовал бы использовать JQuery плагин a-tools

Этот плагин имеет семь функций:

* 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. 

Тот, что вам нужно, это insertAtCaretPos:

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

Там может быть обратным: эти плагины работают только с textarea en input: текстовыми элементами, поэтому могут быть конфликты с wit h удовлетворительным.

Answer 2

Следующая функция будет вставить узел DOM (элемент или текстовый узел) в позиции курсора во всех основных настольных браузерах:

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

Если вы предпочитаете вставить 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); 
    } 
} 

Я адаптированный это от моего ответа на подобный вопрос: How to find cursor position in a contenteditable DIV?

Answer 3

с contenteditable вы должны использовать execCommand ,

Пробег: document.execCommand('insertImage', false, 'image.jpg') или document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />'). Второй не работает в более старом IE.