YUI Editor (RTE): вставьте элемент HTML и поместите курсор внутрь - PullRequest
Новая
       42

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

3 голосов
/ 25 апреля 2009

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

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

Ответы [ 2 ]

3 голосов
/ 28 апреля 2009

Вот полное решение: 

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(); 
}
1 голос
/ 28 апреля 2009

Для размещения курсора требуются разные методы для разных браузеров. В IE вы захотите создать TextRange объект, в Mozilla вы можете использовать window.find () или Selection объект, webkit / safari / chrome требует еще один метод ,

...