YUI Editor (RTE): Inserir HTML elemento e lugar cursor dentro

Question

Eu tenho um problema. Eu tenho tentado lidar com ele por um tempo agora e eu estou pronto para explodir. Aqui está a minha exigência:
Eu tenho uma barra de ferramentas externo (não parte do YUI) acima do editor que eu quero usar para inserir tags HTML. O usuário deve ser capaz de clicar em um link na barra de ferramentas depois que algumas coisas podem acontecer:

1. Se houver qualquer texto selecionado, este texto é envolvida em uma tag HTML
2. Se houver nenhum está selecionado texto, uma tag HTML vazia é inserida no editor
3. Independentemente do cenário, cursor deve ser colocado dentro do novo elemento, para que quando o usuário digita mais texto, ele reside no novo elemento

A funcionalidade é muito semelhante ao de pressionar "B" ou botões de "U" na barra de ferramentas do editor (agora que eu estou usando esse editor, ele também faz bem :-)). Ele preserva tudo bem. Até agora eu sou capaz de fazer 1 ou 2, mas não 3. Passo 3 é muito importante, porque sem ele, a experiência do usuário muito sofre. Eu realmente preciso de sua ajuda para implementá-lo. Abaixo é uma versão simplificada do método que executa a inserção (apenas inserir DIV por uma questão de simplicidade). this._oEditor - instância local do Editor de 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!
}

O que é que devo fazer para colocar o cursor na posição correta? Será que é mesmo possível? Além disso, se há uma maneira melhor de implementar isso, eu sou todo para ele. Obrigado!

Answer 1

Aqui está completa a solução:

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

Colocar o cursor requer métodos diferentes para diferentes navegadores. Com IE você vai querer criar um objeto TextRange , no Mozilla você pode fazer uso de window.find () ou objeto de um Seleção , webkit / safari / cromo exigem ainda um outro método.