Editor web WYSIWYG simples – Plugin de FCKEditor pra jQuery

O FCKEditor é um editor WYSIWYG (What You See Is What You Get) muito completo, e bem simples de ser implementado.

Como funciona?
Você escreve uma textarea comum e chama o FCK que esconde a textarea e coloca um editor web. E toda vez que o texto é alterado, ele coloca o texto formatado (com tags html) dentro do textarea. Sendo assim, um técnica pura de javascript, funciona em qualquer navegador e qualquer linguagem de programação: php, asp, .net, java, etc.

Com o plugin jQuery FCKEditor Plugin v1.3 fica mais fácil ainda pra quem já trabalha com jQuery. Além disso o FCK Editor para jQuery consegue trabalhar com o jQuery Validate e com o jQuery Form Plugin.

Tutorial de como implementar o editor web.

Baixe os arquivos jQuery, o FCK Editor e o Plugin dele pra jQuery .

Adicione o código dentro da tag da sua página:

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.FCKEditor.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$.fck.config = {path: '_scripts/fckeditor/'};
		$('textarea#fckExemplo').fck({height:220, width:455});
	});
</script>

Sendo que o path, é o caminho da pasta de onde vc deixou a pasta do fck editor.

Depois é só escrever o textarea no seu html.

<textarea name="fckExemplo" id="fckExemplo"> 
	Teste de <strong>conteúdo</strong> 
</textarea>

Sendo que, o que vier dentro do textarea, será interpretado dentro do editor.

Como personalizar a barra de ferramentas

Se você seguiu o tutorial, viu que por padrão, o FCK tem centenas de botões (tem mais botões que o word, sem exagero), então, é necessário configurar a criar uma barra de ferramentas personalizada.

Para fazer isso, entre na pasta do fckeditor e abra o arquivo fckconfig.js
Na linha 101 e 118, existem duas toolbars, siga a mesma estrutura e crie a sua com os botões que desejar, coloque um nome pra ela, como “TextoSimples” por exemplo.
Depois disso, para invocá-la, você adiciona um parâmetro na hora de chamar o fck:

 $('textarea#fckExemplo').fck({
	height:220, 
	width:455,
	toolbar:'TextoSimples'
});

Vejam o exemplo, como ficou:

Um detalhe bem importante: por questões de segurança o FCK não funciona se você quiser rodar em um ambiente local. É necessário que esteja num servidor (pode ser um apache / iis / tomcat na sua máquina) só para acessar por http://

Visitem a página do plugin e o site do FCK Editor para obter mais informações.

20 thoughts on “Editor web WYSIWYG simples – Plugin de FCKEditor pra jQuery

  1. Eu quero carregar um conteúdo do bd certo e colocar dentro do textearea como mostrado no exemplo

    Teste de conteúdo

    Mas se o meu conteúdo interno tiver um outro código ele fecha a minha textarea original e acaba nao carregando tudo que era pra estar dentro do textarea… Existe alguma solução pra isso?

  2. Boa dia eu gostaria de uma ajuda de vcs eu estou usando o fckeditor
    no meu caso ele esta ok mais quando eu tento colocar um conteudo em php ele nao grava no meu banco como <?…
    ele grava <–
    vcs poderia me fala como que eu faço para gravar no banco o comando em php ex:

    algume pode me ajudar

  3. Boa dia gostaria de saber como que eu faço para na hora de eu criar um conteudo com o fckeditor como que eu faço para ele gravar comando do php no banco de dados

  4. Bom dia o meu problema e o seguinte eu consigo gravar no banco de dados numa boa mais quando eu tento criar alguma documento tem tenha codigos php ele nao reconhece vc poder me fala como que eu faço para ele reconhecer os codigo php

  5. Olá Danilo,
    eu gostaria de fazer um botão com um evento que quando o usuário desse um click, seria inserido dentro da área de texto do Fckeditor um input text com uma máscara qualquer. Será que é possível? Abraços.

  6. Parabéns pelo tutorial, bem didático e me ajudou muito ontem. Apenas um detalhe que talvez responda a dúvida de outros. Fui enviar os dados do campo “textarea” com FCKEditor via ajax (usando “$.post”) para receber num script Php e gravar no banco de dados, mas apenas o valor do “textarea” não estava sendo gravado. Pelo que pesquisei na internet, parece que este campo apenas é atualizado pelo FCKEditor quando ocorre o “submit” do form e isso não acontece no método “$.post”. A solução, nesse caso, é usar “$.fck.update();” antes de “$.post()”, para que o FCKEditor atualize o valor da “textarea”.

  7. Valeu Danilo,
    Me quebrou um galhão!
    Funciona perfitamente e o melhor de tudo.. Totalmente editável!

  8. Alguem da um help ae…

    Quando eu personalizo a minha barra de ferramentas, não da certo…

    Fala que a barra ferramenta “TextoSimples” não existe, como resolvo isso???

  9. Intão….
    Mas tem um problema…
    Como todos sabem o conteudo gerado pelo fckeditor é html.
    como fazer para enviar por post, ou até mesmo por get, sabendo que no codigo gerado tem caracteres especiais contendo ‘&’, como por exemplo um simples espaço, que ficaria assim no código…’ ‘
    Se alhuém puder ajudar, pois não consegui fazer o fckeditor trabalhar em UTF-8.
    Um abraço!

  10. Como faço para validar o campo preciso que esse campo seje obrigatorio, mas não estou conseguindo fazer isso, alguem poderia me ajudar?

  11. cara estou com dificuldades de interagir o fckeditor com o bd eu ja consegui fazer ele aparecer porem nao consigo fazer ele enviar o q eu escrevo para o bd.

  12. A utilização desse componente depende de alguma configuração do browser ou de ambiente? Funciona ok nas máquinas aqui da empresa, porém o cliente não está conseguindo abrir a caixa de localizar arquivos. O que pode ser?

  13. como tem gente tirando dúvidas… eles deviam ler a página do plugin, oras!

    Muito boa a sua dica, melhor do que o plugin que eu estava usando.

Leave a Reply

Your email address will not be published. Required fields are marked *