YUI Editor (RTE): Inserir HTML elemento e lugar cursor dentro
-
16-09-2019 - |
Pergunta
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:
- Se houver qualquer texto selecionado, este texto é envolvida em uma tag HTML
- Se houver nenhum está selecionado texto, uma tag HTML vazia é inserida no editor
- 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!
Solução
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();
}