Question

我有问题。我一直试图解决它一段时间，我准备爆炸了。这是我的要求：
我在编辑器上方有一个外部工具栏（不是YUI的一部分），我想用它来插入HTML标签。用户应该能够单击工具栏上的链接，之后可能会发生以下几种情况：

如果有任何选定的文本，则此文本将包装为HTML标记
如果没有选定的文本，则在编辑器中插入空的HTML标记
无论情况如何，光标必须放在新元素中，这样当用户输入更多文本时，它就会驻留在新元素中

该功能与在编辑器工具栏上按“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 = '&nbsp;'; // 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需要另一种方法。

YUI编辑器（RTE）：插入HTML元素并将光标放在里面

2 个答案: