Редактор YUI (RTE):Вставьте HTML-элемент и поместите курсор внутрь

Question

У меня проблема.Я уже некоторое время пытаюсь справиться с этим и готов взорваться.Вот мое требование:
У меня есть внешняя панель инструментов (не часть 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!
}

Что я должен сделать, чтобы установить курсор в нужное положение?Возможно ли это вообще?Кроме того, если есть лучший способ реализовать это, я полностью за.Спасибо!

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 вы захотите создать Текстовый диапазон объект, в Mozilla вы можете использовать window.find() или Выбор объект, webkit / safari / chrome требуют еще одного метода.