contentEditable Texteditor und Cursorposition

Question

Wie kann ich (mit Jquery oder anderen) html an der Cursor/Caretposition meiner contenteditable div einfügen:

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

Zum Beispiel, wenn der Cursor/caret war zwischen „Hallo "and" world "und der Benutzer hat dann auf eine Schaltfläche geklickt, zB" Bild einfügen ", dann wird mit Javascript, etwa <img src=etc etc> zwischen" Hallo "und" Welt "eingefügt. Ich hoffe, ich habe dies klar gemacht = S

Beispiel Code würde sehr geschätzt werden, vielen Dank!

Answer 1

Ich würde die Verwendung der jQuery-Plugin empfehlen a-tools

Dieses Plugin hat sieben Funktionen:

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

Die eine, die Sie brauchen, ist insertAtCaretPos:

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

Es könnte ein Nachteil sein: dieses Plugins funktioniert nur mit textarea en Eingabe: Textelemente, so kann es Konflikte geben wit h zufrieden stellend.

Answer 2

Die folgende Funktion wird ein DOM-Knoten (Element oder Textknoten) an der Cursorposition in allen Mainstream-Desktop-Browser einfügen:

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

:

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

Wenn Sie lieber eine HTML-Zeichenfolge einfügen würde

ich habe dies aus meiner Antwort auf eine ähnliche Frage angepasst: How to find cursor position in a contenteditable DIV?

Answer 3

Mit contenteditable Sie execCommand verwenden sollten .

Versuchen Sie document.execCommand('insertImage', false, 'image.jpg') oder document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />'). Die zweite funktioniert nicht in älteren IE.