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:[sourcecode language="html"]
[/sourcecode]
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.
[sourcecode language="html"]
[/sourcecode]
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:
[sourcecode language="html"]
$(’textarea#fckExemplo’).fck({
height:220,
width:455,
toolbar:’TextoSimples’
});
[/sourcecode]
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.
Danilo é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)
March 3rd, 2009 at 12:45 pm
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?
March 10th, 2009 at 12:59 pm
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
March 11th, 2009 at 8:20 am
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
March 12th, 2009 at 12:06 am
Junior, ele salva o conteudo automaticamente num textarea… aí é só dar post
March 12th, 2009 at 8:42 am
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
March 15th, 2009 at 11:32 am
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.
July 26th, 2009 at 11:55 am
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”.
July 29th, 2009 at 4:42 pm
Olha voce ensinou algo que me serviu bastante parabens.. pelo post..
September 3rd, 2009 at 5:19 pm
Valeu Danilo,
Me quebrou um galhão!
Funciona perfitamente e o melhor de tudo.. Totalmente editável!
September 14th, 2009 at 1:16 am
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???
October 6th, 2009 at 8:58 am
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!
November 18th, 2009 at 2:49 pm
Cara, salvou minha vida.
Valeu mesmo!!!
Abraços.
December 9th, 2009 at 11:08 am
estou usando o jquery para carregar as páginas, como faço para mostra o que foi digitado?
January 28th, 2010 at 4:34 pm
Muito BOM !!
February 23rd, 2010 at 8:43 am
Como eu faço para carregar as imagens