YUI Editor (RTE): Legen Sie HTML-Element und Platz Cursor innerhalb

Question

Ich habe ein Problem. Ich habe versucht, es für eine Weile in Angriff zu nehmen jetzt und ich bin bereit, zu explodieren. Hier ist meine Forderung:
Ich habe eine externe Werkzeugleiste (nicht Bestandteil der YUI) über dem Editor, der ich HTML-Tags einfügen verwenden möchten. Der Benutzer sollte in der Lage sein, einen Link auf der Symbolleiste zu klicken, nach der ein paar Dinge passieren können:

1. Wenn es irgendein ausgewählter Text, dieser Text in einen HTML-Tag eingewickelt wird
2. Wenn es keinen markierten Text ist, wird ein leerer HTML-Tag wird im Editor eingefügt
3. Unabhängig von der Szenario muss Cursor in das neue Element platziert werden, so dass, wenn der Benutzer mehr Text eingibt, es befindet sich in dem neuen Element

Die Funktionalität ist sehr ähnlich die von „B“ oder „U“ auf den Editor in der Symbolleiste drücken (jetzt, dass ich diesen Editor bin mit, es tut es auch gut :-)). Es bewahrt schön alles. Bisher bin ich in der Lage 1 oder 2 zu tun, aber nicht 3. Schritt 3 ist sehr wichtig, denn ohne sie stark Benutzererfahrung leidet. Ich brauche Ihre Hilfe wirklich, um es umzusetzen. Im Folgenden finden Sie eine vereinfachte Version des Verfahrens, die das Einfügen (aus Gründen der Einfachheit nur Einfügen DIV) führt. 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 tun muss, um den Cursor in die richtige Position zu bringen? Ist es überhaupt möglich? Auch wenn es ein besserer Weg, dies umzusetzen, ich bin für sie. 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

Sie den Cursor erfordert verschiedene Methoden für verschiedene Browser. Mit IE wollen Sie ein Textrange-Objekt, in Mozilla erstellen Sie können von window.find () oder einer Auswahl Objekt, webKit / Safari machen / Chrom erfordert noch ein anderes Verfahren.