3

我有个问题。我已经尝试解决它一段时间了，我已经准备好爆发了。这是我的要求：
我在编辑器上方有一个外部工具栏（不是 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!
}

我必须做什么才能将光标放在正确的位置？甚至可能吗？另外，如果有更好的方法来实现这一点，我完全赞成。谢谢！

4

2 回答 2

3

这是完整的解决方案：

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(); 
}
于 2009-04-28T02:22:00.593 回答
1

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

于 2009-04-28T01:33:04.657 回答