éditeur de texte contentEditable et la position du curseur

Question

Comment puis-je (en utilisant jquery ou autre) insérer html au niveau du curseur/position caret de mon contenteditable div:

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

Par exemple, si le curseur/caret était entre « bonjour "et" monde "et l'utilisateur a ensuite cliqué sur un bouton, par exemple" insérer une image ", puis en utilisant javascript, quelque chose comme <img src=etc etc> serait inséré entre" bonjour "et" monde ". J'espère avoir été clair = S

Exemple de code serait grandement apprécié, merci beaucoup!

Answer 1

Je recommande l'utilisation du plugin jquery a-tools

Ce plugin a sept fonctions:

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

celui que vous avez besoin est insertAtCaretPos:

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

Il pourrait être un inconvénient: ce plugin fonctionne uniquement avec textarea en input: éléments de texte, donc il peut y avoir des conflits avec wit h contenteditable.

Answer 2

La fonction suivante insérera un nœud DOM (élément ou nœud de texte) à la position du curseur dans tous les navigateurs de bureau traditionnels:

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

Si vous préférez insérer une chaîne 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); 
    } 
} 

J'ai adapté ceci de ma réponse à une question similaire: How to find cursor position in a contenteditable DIV?

Answer 3

Avec contenteditable, vous devez utiliser execCommand .

Essayez document.execCommand('insertImage', false, 'image.jpg') ou document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />'). La seconde ne fonctionne pas dans IE plus ancien.