YUI编辑器（RTE）：插入HTML元素并将光标放在里面 [英] YUI Editor (RTE): Insert HTML element and place cursor inside

问题描述

我有问题。我一直试图解决它一段时间，我准备爆炸了。这是我的要求：

我在编辑器上方有一个外部工具栏（不是YUI的一部分），我想用它来插入HTML标签。用户应该可以单击工具栏上的链接，之后可能会发生以下几种情况：

I have a problem. I've been trying to tackle it for a while now and I'm ready to explode. Here's my requirement:
I have an external toolbar (not part of YUI) above the editor that I want to use to insert HTML tags. The user should be able to click a link on the toolbar after which a few things may happen:

1. 如果有任何选定的文本，则此文本包装成HTML标签


2. 如果没有选定文本，则在编辑器中插入空HTML标签


3. 无论情况如何，光标必须放在新元素中，这样当用户输入更多文本时，它就会驻留在新元素中

功能非常相似在编辑器的工具栏上按下B或U按钮（现在我正在使用这个编辑器，它也做得很好:-)）。它很好地保留了一切。到目前为止，我能够做1或2，但不能做3.步骤3非常重要，因为没有它，用户体验会大大受损。我真的需要你的帮助才能实现它。下面是执行插入的方法的简化版本（为简单起见，只插入DIV）。 this._oEditor - YUI编辑器的本地实例：

The functionality is very similar to that of pressing "B" or "U" buttons on the editor's toolbar (now that I'm using this editor, it also does it well :-)). It preserves everything nicely. So far I'm able to do 1 or 2, but not 3. Step 3 is VERY important, because without it, user experience greatly suffers. I really need your assistance to implement it. Below is a simplified version of the method that performs the insertion (just inserting DIV for the sake of simplicity). this._oEditor - local instance of 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!
}

将光标放在正确的位置我必须做什么？它甚至可能吗？此外，如果有更好的方法来实现这一点，我会全力以赴。谢谢！

What is it that I must do to place the cursor in the right position? Is it even possible? Also, if there's a better way of implementing this, I'm all for it. Thank you!

推荐答案

以下是完整的解决方案：

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

这篇关于YUI编辑器（RTE）：插入HTML元素并将光标放在里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！