YUI編輯器（RTE）：插入HTML元素並將光標放置在內部

Question

我遇到問題。我一直試圖解決它一段時間，我準備好爆炸。這是我的要求：
我有一個外部工具欄（不是YUI的一部分），在我想用來插入HTML標籤的編輯器上方。用戶應該能夠單擊工具欄上的鏈接之後，一些事情可能會發生：

1. 如果有任何選定的文本，該文本被包裹成一個HTML標記
2. 如果沒有選中文本，空的HTML標籤插入到編輯器
3. 不管場景，光標必須放在新的元素的內部，以使得當用戶輸入更多的文本，它駐留在新元素

的功能是非常類似於在編輯器工具上按下「B」或「U」按鈕酒吧（現在我正在使用這個編輯器，它也做得很好:-)）。它很好地保存了一切。到目前爲止，我可以做1或2，但不是3.步驟3非常重要，因爲如果沒有它，用戶體驗會受到很大影響。我真的需要你的幫助來實現它。下面是執行插入的方法的簡化版本（爲了簡單起見只插入了DIV）。 this._oEditor - YUI編輯器的本地實例：

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! 
} 

它是什麼，我必須做將光標放在正確的位置？它甚至有可能嗎？另外，如果有更好的方法來實現這一點，我完全贊成。謝謝！

Answer 1

下面是完整的解決方案：

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

放置光標需要不同的瀏覽器的方法。使用IE，你需要創建一個TextRange對象，在Mozilla中你可以使用window.find（）或Selection對象，webkit/safari/chrome需要另一種方法。