Editable Div Caret Position

Question

J'ai un div éditable et j'utilise un bouton pour insérer une image dans la div. En ce moment, je ne fais que document.getElementById ('elementid'). InnerHTML. + =; afin d'obtenir l'image ajoutée à la fin de la div. Je voudrais entrer dans l'image où se trouve le curseur. Comment ferais-je cela?

Merci

Answer 1

Pour insérer un élément au caret n'est pas trop dur. La fonction suivante insère un nœud au caret (ou à la fin de la sélection, si le contenu est sélectionné) dans tous les principaux navigateurs:

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

Answer 2

cette aide: http://jsfiddle.net/8akDr/

Answer 3

Je déteste paraître négatif, mais cela est tellement dur qu'il est ridicule. Vous devez traiter avec IE et d'autres, et les implémentations sont très différentes. Mais quand il devient trop dur, c'est que si vous cliquez sur un bouton pour insérer l'image, vous perdez le focus et la position du curseur, donc vous devez vous souvenir de la position avec une capacité de bookmarking onblur (encore, IE différent). Le point de focalisation n'est pas vraiment un problème si votre contenu editable est dans un iframe et maintient son propre focus. (Note: pas dissing IE ici, je préfère réellement leur implémentation à la norme DREK W3C.)

Vous pouvez regarder quelques éditeurs de texte open source pour des indices et des conseils. Mais vous trouverez une énorme quantité de code pour gérer ces tâches simples.