javascript-YUI编辑器(RTE):插入HTML元素并将光标放在其中
作者:互联网
我有个问题.我已经尝试解决了一段时间了,我已经准备好爆炸了.这是我的要求:
在编辑器上方有一个外部工具栏(不是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 = ' '; // 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();
}
标签:editor,javascript,yui,yui-editor 来源: https://codeday.me/bug/20191107/2004013.html