Rich:editor - Contar caracteres

9 respostas
M

Como fazer a contagem de caracteres (e informar ao usuário) de um rich:editor ao editá-lo?
Lembrando que este campo não permite a propriedade onkeyup!

Com uma textarea comum, objeto renderizado pelo rich:editor, bastava lançar uma função javascript no onkeyup fazendo a contagem de caracteres até o momento.
E agora?

9 Respostas

N

Bom acho que se tu quer usar com onkeyup terá que usar o jQuery.

Mas na realidade ficará meio furado esta contagem.

Porque o usuário pode estar clicando em delete ou backspace e estará contando como digitação.

Ai tu terá que validar as teclas também.

Se eu pensar em algo aqui te posto em seguida.

M

Não não, acho que não expliquei direito.
Eu quero contar o número de caracteres ali dentro da caixa de texto!
Isto porque o campo no banco vai ter um limite de 500 caracteres, por exemplo.

Neste caso ele vai digitar a mensagem e será exibido quantos caracteres ele já utilizou.
Estou ciente de que quando ele utilizar negrito, italico, etc, ele estará perdendo caracteres, já que a tag html irá para o banco.

É um formulário simples onde o usuário irá postar sua mensagem, mas podendo utilizar recursos simples do html, por isso estou utilizando o rich:editor ao invés de um textarea.
Quando o usuário posta a mensagem maior do que o limite então eu já retorno uma facesmessages, porém o usuário fica meio no escuro sem saber quantos caracteres ele deve apagar. Por isso quero exibir o número de caracteres utilizados até aquele momento.
Grato!

M

Anteriormente estava utilizando assim:
<textarea onkeyup=“this.value = this.value.substring(0, 500);” …
Quando o usuário atingia o limite, automaticamente o texto que ultrapassava era excluído.

Depois resolvi melhorar e fiz a chamada de uma funcao que exibia em tempo de execução o número de caracteres digitados, obtendo através do onkeyup do textarea o value.length do campo via javascript e mandando para uma div ou input edit, informando ao usuário ali na própria edição.

Veja que em ambas as situações eu utilizava a propriedade onkeyup do textarea. Que é quando o usuário está digitando.
Agora me deparo com o rich:editor que não permite esta propriedade. :cry:
E agora?

N

Entãoooo…

Pera ai huahuahuauha… Acho que isto da certo.

Faz assim… usa o rich:editor ai tu coloca o id dele de por exemplo texto. Ai usa jQuery assim:

<script type="text/javascript" src="jquery-1.4.min.js"></script> 
<script>
//Aqui é o id do seu campo textarea.
$('#texto).keyup(function() {
//Alert coloquei  pra ver se funciona !
alert('Teste KeyUp !');
});
</script>

Anexei o jquery-1.4.min.js

Abraço e me diz se deu certo !

M

Será que tem outra saída além desta, tendo que adicionar plugin à aplicação?

N

JQuery é algo hoje que é utilizado em tudo.

Melhora os códigos tals.

O RichFaces ja incorpora jQuery.

Acho que vale a pena. Testa ai e me fala o resultado !

Abraço

M

Então, é isso mesmo, o RichFaces já incorpora o jQuery. Só não sei a versão e nem os plugins.
Sei que o <rich:editor é tinyMCE.
Bom, ao chamar o arquivo que você anexou e abrir a página é exibido o erro:


Detalhes dos erros da página da Web
Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
Carimbo de data/hora: Fri, 5 Feb 2010 15:54:03 UTC
Mensagem: O objeto não dá suporte para a propriedade ou método
Linha: 265
Caractere: 107
Código: 0
URI: http://localhost:8080/nomedosistema/a4j/g/3_3_1.GAorg.ajax4jsf.javascript.PrototypeScript.jsf

E o onkeyup não funciona.
Eu tentei também um document.getElementById(“idDoRichEditor”); para exibir o conteúdo e nada, nem chamou.
O RichFaces pode ter tirado o evento onkeyup justamente por saber que daria conflito com o TinyMCE. Não seria a toa a indisponibilidade desta função.

Enfim, agora não sei o que fazer…
:cry:

M

:cry:

S

Cara esse erro aconteceu comigo!!!

o possivel problema é que você esta importando o jquery por meio de tag html

como richfaces incorpara o o jquery não percisa declara-lo como foi feito em codigo

apenas apague então esta linha e seja feliz…

Criado 4 de fevereiro de 2010
Ultima resposta 13 de ago. de 2010
Respostas 9
Participantes 3