YUI Editor (RTE): Insertar elemento HTML y el lugar en el interior del cursor

Question

Tengo un problema. He estado tratando de hacer frente a ella durante un tiempo y ahora estoy a punto de explotar. Aquí está mi requisito:
Tengo una barra de herramientas externas (no forma parte de YUI) por encima del editor que quiero usar para insertar etiquetas HTML. El usuario debe ser capaz de hacer clic en un enlace en la barra de herramientas después de lo cual algunas cosas pueden suceder:

1. Si no hay ningún texto seleccionado, este texto se envuelve en una etiqueta HTML
2. Si no hay texto seleccionado, una etiqueta HTML vacío se inserta en el editor
3. Independientemente del escenario, cursor debe ser colocado en el interior del nuevo elemento, de manera que cuando el usuario introduce más texto, que reside en el nuevo elemento

La funcionalidad es muy similar a la de presionar los botones "U" en la barra de herramientas del editor de "B" o (ahora que estoy usando este editor, sino que también lo hace bien :-)). Conserva todo muy bien. Hasta ahora no soy capaz de hacer 1 o 2, pero no 3. Paso 3 es muy importante, ya que sin ella, la experiencia del usuario sufre grandemente. Realmente necesito su ayuda para ponerlo en práctica. A continuación se muestra una versión simplificada del método que realiza la inserción (simplemente insertando DIV en aras de la simplicidad). this._oEditor - instancia local de YUI Editor:

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é es lo que debo hacer para colocar el cursor en la posición correcta? ¿Es posible? Además, si hay una mejor forma de implementar esto, yo soy todo para él. Gracias!

Answer 1

Aquí está la solución completa:

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

Al colocar el cursor requiere diferentes métodos para diferentes navegadores. Con IE usted desea crear un objeto TextRange , en Mozilla se puede hacer uso de window.find () o una rel="nofollow Selección objeto, WebKit / Safari / cromo requiere otro método.