contentEditable div remplace innerHTML à la volée

Question

Existe-t-il un moyen (à l'exception de la bibliothèque Rangy) de modifier à la volée contentEditable Div InnerHTML, comme sur le clavier, sans perdre la position/focus du curseur? Je voudrais utiliser du code javascript pur, aussi simple que possible.

par exemple:

<div id="divId" contentEditable="true" onkeyup="change(this)"></div> 

puis javascript:

function change(element) 
{ 
    element.innerHTML = element.innerHTML.replace(/.../, '...'); 
} 

Merci.

Answer 1

Si vous remplacez le code HTML, vous aurez besoin d'un moyen de sauvegarder et de restaurer votre sélection. Les options sont:

1. Insérez les éléments avec ID au début et à la fin de la sélection avant le remplacement HTML, récupérez-les par ID après et déplacez les limites de sélection à l'aide de ces éléments. C'est la méthode la plus robuste et c'est ce que fait Rangy.
2. Stockez une sorte de décalage basé sur les caractères pour le début et la fin de la sélection avant le remplacement du code HTML et recréer la sélection par la suite. Cela a toutes sortes de problèmes dans le cas général mais peut être assez bon, selon vos besoins. J'ai posted functions on SO to do this before qui dépend de Rangy, mais vous pouvez facilement retirer les trucs de Rangy si cela ne vous dérange pas de perdre le support de IE < 9.
3. Stockez et restaurez les limites de sélection par coordonnées de pixels. La prise en charge du navigateur n'est pas bonne et ne sera pas adaptée si votre remplacement HTML modifie la disposition.

Answer 2

Ceci n'utilise pas l'événement keyup mais peut-être suffira-t-il? Notez que cela s'applique au corps que vous pouvez évidemment cibler juste un certain élément.

document.body.contentEditable='true'; 
document.designMode='on'; 
void 0;