YUI编辑器（RTE）：插入HTML元素并将光标放置在内部

Question

我有一个问题。我一直在尝试解决它，但是现在我已经准备好爆炸了。这是我的要求：
我有一个外部工具栏（不是YUI的一部分），位于编辑器上方，我想用它来插入HTML标记。用户应该能够单击工具栏上的链接，然后可能会发生以下几件事情：

1. 如果存在任何选定的文本，则将此文本包装到HTML标记中
2. 如果没有选定文本，则在编辑器中插入空的HTML标记
3. 无论情况如何，光标必须放置在新元素内部，以便当用户输入更多文本时，它驻留在新元素中

该功能与在编辑器工具栏上按“B”或“U”按钮非常相似（现在我正在使用此编辑器，它也做得很好:-)）。它可以很好地保留所有内容。到目前为止，我能够完成1或2，但不能完成3。步骤3非常重要，因为没有它，用户体验会大大降低。我真的需要你的帮助来实现它。下面是执行插入的方法的简化版本（仅出于简单起见插入DIV）。this._oEditor - 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!
}

我应该怎么做才能把光标放在正确的位置？这是否可能？如果有更好的实现方法，我非常支持。谢谢！

- MK_Dev

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(); 
}

- Jose Basilio

---

@MK_Dev - 你有机会试过这个吗？如果它能满足你的需求，请告诉我。 - Jose Basilio

José，它在FF 3、Safari 4和Opera上运行得非常好。稍后我会尝试在IE上使用它，但我相当确定它会工作。有趣的是，我之前遇到过非常类似的东西，但没有保存它。非常感谢！ - MK_Dev

Answer 2

在编程中，放置光标需要使用不同的方法来适应不同的浏览器。在IE中，您需要创建一个TextRange对象，在Mozilla中，您可以使用window.find()或Selection对象，而webkit/safari/chrome则需要另一种方法。

- Bjorn