Procurei um tempão por isso e não encontrei um fonte curto e simples. Decidí então estudar e fazer o meu próprio HTMLEditor.
Bom, este é um esboço do meu HtmlEditor:
Massa demais!
Parabéns!
[quote=kicolobo]Massa demais!
Parabéns![/quote]
valeu kicolobo!
no momento em que altualizo os textnodes, isso modifica a seleção. no momento em que executo o metodo “setProperty”, a seleção se reposiciona em locais diferentes. por isso fui obrigado usar os métodos “getSelectionPosition(rec)” e “setSelectionPosition(rec, obj[0], obj[1] )” para pegar a seleção incial e recoloca-la no final, respectivamente.
parece gambiarra… mas não consigo fazer de outra forma sem precisar dos metodos getSelectionPosition e setSelectionPosition
muito bacana,
eu só achei estranho ele criar uma SPAN dentro de outra SPAN ao invés de ficar do lado.
ex:
<span style="color: blue;">b</span>
<span>
<span>
<span></span>
<span style="font-weight: bold;">c</span>
<span>defghij 1234567890a 1234567890</span>
</span>
</span>
sendo que:
<span style="color: blue;">b</span>
<span style="font-weight: bold;">c</span>
<span>defghij 1234567890a 1234567890</span>
da o mesmo resultado
[quote=Luiz Augusto Prado][quote=kicolobo]Massa demais!
Parabéns![/quote]
valeu kicolobo!
no momento em que altualizo os textnodes, isso modifica a seleção. no momento em que executo o metodo “setProperty”, a seleção se reposiciona em locais diferentes. por isso fui obrigado usar os métodos “getSelectionPosition(rec)” e “setSelectionPosition(rec, obj[0], obj[1] )” para pegar a seleção incial e recoloca-la no final, respectivamente.
parece gambiarra… mas não consigo fazer de outra forma sem precisar dos metodos getSelectionPosition e setSelectionPosition[/quote]
Pois é: o que achei mais legal é que sempre quis saber como é que este recurso é implementado, mas nunca tive paciência de ler o código fonte dos componentes pré-existentes.
Com o seu código, como ainda está bem simples ainda, deu pra dar uma noção.
Posso dar uma sugestão? Escreva um post em blog sobre como este componente funciona!
É o tipo de conhecimento bacanérrimo que o pessoal ignora e que agrega pra kcte.
[quote=douglaskd]muito bacana,
eu só achei estranho ele criar uma SPAN dentro de outra SPAN ao invés de ficar do lado.
ex:
<span style="color: blue;">b</span>
<span>
<span>
<span></span>
<span style="font-weight: bold;">c</span>
<span>defghij 1234567890a 1234567890</span>
</span>
</span>
sendo que:
<span style="color: blue;">b</span>
<span style="font-weight: bold;">c</span>
<span>defghij 1234567890a 1234567890</span>
da o mesmo resultado[/quote]
Eu achei que ficaria mais fácil assim. O método setProperty pode conter todos os tipos de DOM tais como, div, span, p, b, font…
sem contar que as propriedades do componente pai, onde fica o textnode, também pode ser das mais variadas.
exemplo: a tag “font” tem uma propriedade chamada “color”, fora do style.
O fonte ficaria gigantesco se eu fosse analisar as propriedades das tags pais. Nesse caso, o mais fácil é pegar o conteúdo selecionado do textnode e simplesmente inseri-lo dentro de outro span, já com a propriedade definida pela gente.
Olha esse exemplo:
<span style="color: blue;">a b c </span> se quisermos marcar “b” com vermelho poderiamos ter algo assim:
<span style="color: blue;">a <span style="font-weight: bold;">b</span> c </span> b é azul, mas não é bol. c é azul e bold.
Como não achei encntrei uma forma mais simples de fazer uma análise sobre as propriedades do componente pai (“color: blue;”), a forma mais fácil seria inserir um novo span com uma nova propriedade. Algo com o resultado:
<span style="color: blue;"><span>a</span> <span style="font-weight: bold;">b</span><span>c</span> </span> estou com uma idéia pra testar agora: normalize
[quote=kicolobo]
Pois é: o que achei mais legal é que sempre quis saber como é que este recurso é implementado, mas nunca tive paciência de ler o código fonte dos componentes pré-existentes.
Com o seu código, como ainda está bem simples ainda, deu pra dar uma noção.
Posso dar uma sugestão? Escreva um post em blog sobre como este componente funciona!
É o tipo de conhecimento bacanérrimo que o pessoal ignora e que agrega pra kcte.[/quote]
Eu tenho o péssimo hábito de não comentar meus fontes para testes. Hehehehe
eu também tava curioso quanto a esse componente. Vi um monte de código e queimei a pestana pra tentar fazer funcionar no chrome e firefox. tem muito site ai falando só de IE. A gente meio que se perde.
vou fazer como sugeriu sim. assim que tiver um tempinho vou melhorando o post.
Mas não tem nada muito complicado. O mais chato é ter que caminhar entre os doms.
vou colocar os outros macetes importantes tbm.