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

Question

У меня проблема. Я пытался это заняться какое-то время, и я готов взорваться. Вот мое требование:
У меня есть внешняя панель инструментов (не часть YUI) над редактором, которую я хочу использовать для вставки тегов HTML. Пользователь должен иметь возможность щелкнуть ссылку на панели инструментов, после чего нескольких вещей, которые могут случиться:

1. Если есть выделенный текст, этот текст получает завернутую в HTML-тег
2. Если нет выделенного текста, пустой HTML тег вставляется в редакторе
3. Независимо от сценария, курсор должен быть помещен внутрь нового элемента, так что, когда пользователь вводит больше текста, он находится в новом элементе

функциональность очень аналогично нажатию кнопок «B» или «U» на инструменте редактора bar (теперь, когда я использую этот редактор, он также хорошо работает :-)). Он прекрасно сохраняет все. Пока я могу сделать 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 вы захотите создать объект TextRange, в Mozilla вы можете использовать объект window.find() или Selection, webkit/safari/chrome требуют еще одного метода.