WYSIWYG Html Editor: Como implantar e configurar o FCK Editor para ASP.Net

Um dos editores html (WYSIWYG Html Editor) mais conhecidos é o FCK Editor, por sua versatilidade, sendo que ele pode ser integrado facilmente com qualquer linguagem para Web, porém existem componentes prontos para a integração com PHP e ASP.Net.

WYSIWYG é o acrônimo da expressão em inglês "What You See Is What You Get", cuja tradução remete a algo como "O que você vê é o que você obtem" (OQVVEOQVO). Significa a capacidade de um programa de computador de permitir que um documento, enquanto manipulado na tela, tenha a mesma aparência de sua utilização, usualmente sendo considerada final a forma impressa. O uso inicial do termo foi relacionado a editores de texto, agora porém é aplicado a qualquer tipo de programa.

Download de Arquivos

Para instalar o FCK Editor, você precisará baixar os seguintes pacotes de arquivos:

FCKeditor 2.6.6 (download)
FCKeditor.Net 2.6.3 (download)

Abertura do WebSite

Após feito o download, caso não esteja com o Visual Studio aberto, abra-o. Após aberto, abra seu web site, ou crie um para o nosso exemplo, no meu caso, criei um novo indo em File>New>Web Site.

Dê um nome ao seu web site e então estaremos prontos para começar.

Adicionar Controle ao Toolbox

Adicione um página em branco, ou então selecione a página na qual colocará o FCK Editor.
Vá na aba "Toolbox" e, no final dela, clique com o botão direito e selecione o item "Add Tab", Dê um nome ao novo item e então clique sobre ele com o botão direito e selecione a opção "Choose Items ...", vá em browse e localize a dll do componente dentro da pasta a qual você fez o download (FCKeditor.Net 2.6.3), o nome da DLL é FredCK.FCKeditorV2.dll, e clique em "OK".

Adicionando Bibliotecas do FCK Editor

Apesar da instalação do componente, as bibliotecas (javascripts, css, entre outros) utilizados pelo FCK Editor não se encontram dentro da dll do componente, é necessário então copiar para dentro do seu projeto. Extraia o conteúdodo arquivo do download FCKeditor 2.6.6 e copie a pasta "fckeditor" para dentro de uma pasta em seu projeto (no exemplo, estou considerando a pasta na raiz)

Adicionar controle a página

Clique no controle abaixo da aba que você criou, segure e arraste-o para a área da página. Vá para o code behind da página e digite o seguinte código, dentro do método Page_Load.

//Carrega a pasta com os sources para o FCK Editor

//Digite entre aspas o caminho que você definiu, 

//caso tenha definido a raiz, pode manter como abaixotxt_descricao.BasePath = "~/FCKEditor/";

O método Page_Load ficará como abaixo, caso não haja mais nada digitado

protected void Page_Load(object sender, EventArgs e)

{

//Carrega a pasta com os sources para o FCK Editor

//Digite entre aspas o caminho que você definiu, 

//caso tenha definido a raiz, pode manter como abaixo

txt_descricao.BasePath = ConfigurationManager.AppSettings["Info_FCKEditor"];

}

Pode apertar a tecla debug (ou F5, se prefirir) e conferir seu editor de htmls funcionando!

Um abraço!