YUI Editor (RTE): HTML-Element einfügen und Cursor innerhalb

Question

setzen

Ich habe ein Problem. Ich habe es schon eine Weile versucht, und ich bin bereit zu explodieren. Hier ist meine Anforderung:
Ich habe eine externe Symbolleiste (nicht Teil von YUI) über dem Editor, den ich zum Einfügen von HTML-Tags verwenden möchte. Der Benutzer sollte in der Lage sein, einen Link auf der Symbolleiste klicken, nach der ein paar Dinge passieren können:

1. Wenn es ein markierter Text ist, wird dieser Text in einen HTML-Tag
2. gewickelt wird Wenn kein ausgewählter Text ist, ein leerer HTML-Tag im Editor
3. Unabhängig von dem Szenario eingesetzt ist, muss Cursor innerhalb des neuen Elements platziert werden, so dass, wenn der Benutzer mehr Text eingibt, ist es in dem neuen Elemente befindet

die Funktionalität sehr ist ähnlich wie beim Drücken der Tasten "B" oder "U" im Editor-Tool bar (jetzt, wo ich diesen Editor benutze, macht es das auch gut :-)). Es bewahrt alles schön auf. Bis jetzt bin ich in der Lage, 1 oder 2 zu machen, aber nicht 3. Schritt 3 ist SEHR wichtig, weil ohne es die Benutzererfahrung stark leidet. Ich brauche deine Hilfe wirklich, um es umzusetzen. Im Folgenden finden Sie eine vereinfachte Version der Methode, die das Einfügen durchführt (einfach DIV aus Gründen der Einfachheit einfügen). this._oEditor - lokale Instanz von 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! 
} 

Was ist es, dass ich muss den Cursor in die richtige Position zu bringen, zu tun? Ist es überhaupt möglich? Wenn es einen besseren Weg gibt, dies zu implementieren, bin ich auch dafür. Vielen Dank!

Answer 1

Hier ist vollständig die Lösung:

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

Das Platzieren des Cursors erfordert unterschiedliche Methoden für verschiedene Browser. Mit IE wollen Sie ein TextRange Objekt erstellen, in Mozilla können Sie window.find() oder ein Selection Objekt verwenden, webkit/safari/chrome benötigen noch eine andere Methode.