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?
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!
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.
E agora?
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 só pra ver se funciona !
alert('Teste KeyUp !');
});
</script>
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.