YUI 编辑器 (RTE):插入 HTML 元素并将光标置于其中

2024-02-02

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

我必须做什么才能将光标置于正确的位置?有可能吗?另外,如果有更好的方法来实现这一点,我完全支持。谢谢你!


这是完整的解决方案:

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(); 
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

YUI 编辑器 (RTE):插入 HTML 元素并将光标置于其中 的相关文章

随机推荐