Editor de texto online ou wysiwg html
Um amigo questionou sobre os editores de texto online, mais conhecidos como wysiwg html.
Pesquisei e testei alguns editores feitos em JavaScript e o que mais me agradou foi o NicEdit.
O diferencial desse editor é o tamanho. Na versão que tenho aqui deu 34Kb.
A facilidade de utilização também foi um ponto crucial.
Veja exemplo:
Primeiro você inclui o script na sua página.
<script src=”nicEdit/nicEdit.js” type=”text/javascript”></script>
Depois você cria uma instância do editor, referente ao seu textarea, neste caso o id do meu textarea é “teste”.
<script type=”text/javascript”>
bkLib.onDomLoaded(function() {
new nicEditor().panelInstance(’teste’);
});
</script>
Segue os códigos para download.
Utilizei o PHP mas poderia utilizar qualquer outra linguagem Web.
UPDATE
Modifiquei os arquivos online e para download, agora temos um botão para ver o conteúdo digitado no editor, espero que ajude as pessoas!
Neres on 15 jul 2009 at 13:38 #
Bacaninha ele, mas temos coisa mais completa como o richedit. Com ese você pode por até imagens e redimensionar.
pra texto simples esse que você encontrou ta bom.
até mais
Marcio Nakano on 16 jul 2009 at 10:01 #
Olá Neres, obrigado pelo comentário!
Este é realmente um recurso que esqueci de informar no post, mas o NicEdit tem essa capacidade.
Para demosntrar isso, fiz um update no exemplo online, você pode arrastar a imagem pra dentro do editor e trabalhar da forma que achar necessário!
Um grande abraço!
Adalberto Gonzaga on 21 jul 2009 at 14:17 #
Grande Márcio!
Há um tempo atrás precisei de uma ferramenta que fizesse isso para integra-la com um sistema web, e encontrei o TinyMCE.
Muito bom, e se nao me engano é utilizado em diversos softwares opensource….
Caso queira experimentar:
http://tinymce.moxiecode.com/
Abraços,
Marcio Nakano on 21 jul 2009 at 15:00 #
Adalberto, gostei muito do editor que foi indicado, principalmente pelos skins que ele disponibiliza e vasta documentação presente no site.
DOMINGOS MARIA on 23 jul 2009 at 18:21 #
AGRADEÇO QUE ME ESPLIQUEM COMO FUNCIONA O PROCESSADOR DE TEXTO HTML
OBRIGADO
DOMINGOS MARIA
23/7/2008
Marcos on 24 set 2009 at 3:52 #
Olá Marcio,
Parabéns pelo Post.
Conseguir instalar o sistema em meu site, mais tem um porém, quando eu escrevo algum caratcer “brasileiro” como “é, ç, etc…” aparece bugado na página, por exemplo, o meu “é” aparece assim: “é”, poderia me ajudar a consertar este erro?
Marcio Nakano on 24 set 2009 at 13:42 #
Marcos, esse erro pode ser do banco de dados ou na codificação da página, dá uma olhada nisso.
Para os caracteres PT-BR use sempre charset=iso-8859-1.
Verifica a meta das suas páginas, padronize para:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Como falei, já tive problema semelhantes com o MySQL também.
t+ e Boa sorte!
rafael on 29 set 2009 at 0:35 #
como solucionou o problema do charset? quero que o nicedit e mysql interpretem iso-8859-1 mas nao ta dando.. no mysql uso o latin1_swedish_ci e as meta das minhas paginas ja contem o iso-8859-1. no entanto fica tudo em utf-8 e nao os acentos aparecem codificados.. por favor, me ajude!
obrigado, abraço
Naomi on 22 out 2009 at 12:18 #
Olá Márcio!
Excelente, simples e eficaz! Adorei.
Para tratar os erros de acentuação, no php a solução é usar utf8_encode ou decode. Exemplo: echo utf8_encode($texto) ou echo utf8_decode($texto)!
Obrigada pelo script.
Jennifer-Tool on 26 out 2009 at 8:30 #
o que eu estava procurando, obrigado
Silva on 15 dez 2009 at 2:12 #
Testei e funciona. Mas tem um problema. Entre os parágrafos ficam espaços duplos. Fui ver nos códigos e vi que ele imprime p e br simultaneamente. O que pode ser feito?
Altamiro on 14 jul 2011 at 10:16 #
Bom dia!
Preciso pegar o valor digitado dentro do nicedit, estou usando document.getElementById(’teste’).value, mas não funcionou.
Marcio Nakano on 14 jul 2011 at 11:03 #
Altamiro, fiz as modificações nos meus arquivos para que você consiga buscar o conteúdo do editor no nicEdit. Faça o download novamente dos arquivos e veja como buscar o valor digitado no editor
Abraço
Altamiro on 14 jul 2011 at 11:17 #
Obrigado!!! Tenho outra dúvida, na hora de imprimir o conteúdo do editor em uma outra tela, ele aparece com as tags ex: \b ababbtrwbtr. Gostaria que essa outra tela mostra se “ababbtrwbtr”.
Altamiro on 14 jul 2011 at 11:22 #
Marcio, muito obrigado, consegui resolver usando a seguinte tag , o filter resolveu o problema.
Altamiro on 15 jul 2011 at 18:32 #
Es tou com problemas novamente, peguei o texto digitado dentro do nicedit e passaei para outra tela e ficou assim “Texto Exclusão”, já utilizei a tag “meta” e não funcionou.
obs: Sistema em strutus e jsp.