YUI Editor (RTE): Insérer un élément HTML et placer le curseur à l'intérieur

Question

J'ai un problème. J'essaie de m'y attaquer depuis un moment et je suis prêt à exploser. Voici mon exigence:
J'ai une barre d'outils externe (ne fait pas partie de YUI) au-dessus de l'éditeur que je veux utiliser pour insérer des balises HTML. L'utilisateur doit être en mesure de cliquer sur un lien dans la barre d'outils, après quoi un certain nombre de choses peuvent se produire:

1. S'il y a un texte sélectionné, ce texte est enveloppé dans une balise HTML
2. S'il n'y a pas de texte sélectionné, une balise vide HTML est inséré dans l'éditeur
3. Quel que soit le scénario, le curseur DOIT être placé à l'intérieur du nouvel élément, de sorte que lorsque l'utilisateur entre plus de texte, il réside dans le nouvel élément

la fonctionnalité est très similaire à celle de l'appui sur les boutons "B" ou "U" sur l'outil de l'éditeur bar (maintenant que j'utilise cet éditeur, il le fait aussi bien :-)). Il préserve tout bien. Jusqu'à présent, je suis capable de faire 1 ou 2, mais pas 3. Étape 3 est très important, car sans cela, l'expérience utilisateur souffre grandement. J'ai vraiment besoin de votre aide pour l'implémenter. Voici une version simplifiée de la méthode qui effectue l'insertion (il suffit d'insérer DIV pour des raisons de simplicité). this._oEditor - instance locale de YUI Editeur:

this._insertElement = function() { 
var sSelection = this._oEditor._getSelection(); // Attempt to get selected text from the editor 
if (sSelection == '') sSelection = ' '; // If nothing was selected, insert a non-breaking space 

var sNewElt = '<div>' + sSelection + '</div>'; 

this._oEditor.execCommand('inserthtml', sNewElt); 

this._oEditor.focus(); // This gives the editor focus, but places cursor in the beginning! 
} 

Qu'est-ce que je dois faire pour placer le curseur dans la bonne position? Est-ce même possible? De plus, s'il y a une meilleure façon de mettre cela en œuvre, je suis tout à fait d'accord. Je vous remercie!

Answer 1

est ici complète la solution:

this._insertElement = function() { 
    var sSelection = this._oEditor._getSelection(); 
    if (sSelection == '') sSelection = ' '; 

    var sNewElt = '<div>' + sSelection + '</div>'; 

    this._oEditor.execCommand('inserthtml', sNewElt); 

    var pos = 1000; //pos determines where to place the cursor. if greater than the length of characters, it will place at the end. 
    if(this._oEditor.createTextRange) { //IE Specific code 
     var range = this._oEditor.createTextRange(); 
     range.move("character", pos); 
     range.select(); 
    } else if(this._oEditor.selectionStart) { //Works with Firefox and other browsers 

     this._oEditor.focus(); 
     this._oEditor.setSelectionRange(pos, pos); 
    } 
    this._oEditor.focus(); 
} 

Answer 2

Placer le curseur nécessite différentes méthodes pour différents navigateurs. Avec IE vous aurez envie de créer un objet TextRange, dans Mozilla vous pouvez utiliser window.find() ou un objet Selection, webkit/safari/chrome nécessitent encore une autre méthode.