YUI Editor (RTE): Inserire HTML elemento e luogo cursore all'interno

Question

Ho un problema. Ho cercato di affrontare il problema da un po 'e io sono pronto ad esplodere. Ecco il mio requisito:
Ho una barra degli strumenti esterni (non fa parte di YUI) sopra l'editor che voglio usare per inserire i tag HTML. L'utente deve essere in grado di fare clic su un link sulla barra degli strumenti, dopo che alcune cose possono accadere:

1. Se c'è qualche testo selezionato, questo testo viene avvolto in un tag HTML
2. Se non c'è nessun testo selezionato, un tag HTML vuoto viene inserito nell'editor
3. Indipendentemente scenario, cursore deve essere posizionato all'interno del nuovo elemento, in modo che quando l'utente immette più testo, risiede nel nuovo elemento

L'funzionalità è molto simile a quello di premere i pulsanti "U" sulla barra degli strumenti dell'editor "B" o (ora che sto usando questo editor, lo fa anche bene :-)). Conserva tutto bene. Finora sono in grado di fare 1 o 2, ma non 3. Fase 3 è molto importante, perché senza di essa, l'esperienza degli utenti soffre molto. Ho davvero bisogno del vostro aiuto per la sua attuazione. Qui di seguito è una versione semplificata del metodo che esegue l'inserimento (solo inserendo DIV per semplicità). this._oEditor - un'istanza locale di 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!
}

Che cosa è che devo fare per posizionare il cursore nella giusta posizione? E 'anche possibile? Inoltre, se c'è un modo migliore di attuazione del presente, sono tutti per esso. Grazie!

Answer 1

Ecco la soluzione 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

Posizionando il cursore richiede metodi diversi per differenti browser. Con IE ti consigliamo di creare un oggetto TextRange , in Mozilla si può fare uso di window.find () o un rel="nofollow Selezione oggetto, webkit / safari / cromo richiede ancora un altro metodo.