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

Question

J'ai un problème. J'ai essayé de l'aborder pendant un certain temps maintenant 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 qui peut se produire quelques petites choses:

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 HTML vide 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 la touche « B » ou boutons « U » sur la barre d'outils de l'éditeur (maintenant que je suis à l'aide de cet éditeur, il fait aussi bien :-)). Il conserve tout bien. Jusqu'à présent, je suis capable de faire 1 ou 2, mais pas 3. Étape 3 est très important, parce que sans elle, l'expérience utilisateur souffre grandement. J'ai vraiment besoin de votre aide pour la mettre en œuvre. Ci-dessous est une version simplifiée de la méthode qui effectue l'insertion (juste d'insérer DIV dans un souci 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-il même possible? De plus, s'il y a une meilleure façon de mettre en œuvre, je suis pour. Merci!

Answer 1

Voici la solution complète:

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 des méthodes différentes pour les différents navigateurs. Avec IE vous voulez créer un objet TextRange , dans Mozilla vous pouvez utiliser window.find () ou un objet de sélection, WebKit / Safari / chrome nécessitent encore une autre méthode.