ASP.NET e FCKeditor v2.x

A alguns dias átras passei por um problema em que tive que correr e pesquisar bastante por uma resposta. Só dando o contexto do problema  para vocês:  Estava envolvido em um projeto onde em uma das partes o usuário poderia postar e comentar determinadas notícias.  Só que ai me veio as seguintes dúvidas: o usuário vai escrever a sua notícia em um textbox comum? mas e se ele quiser adicionar uma imagem no mesmo?  E se ele quiser adicionar estilos ao textos ou apenas à algumas palavras do mesmo? O usuário terá que saber tags HTML para poder fazer esse tipo de coisa?

Então foi ai que cheguei aos editores WYSIWYG (“WHAT YOU SEE IS WHAT YOU GET” que é o mesmo de “O que você vê é o que você têm”) para web, que é, por exemplo, a idéia de ter o usuário escrevendo um documento como se estivesse escrevendo no world, sem se importa com html, pois quem vai gerar o html é a aplicação por debaixo dos panos. Foi ai que comecei a procurar por varias soluções prontas pela net, tendo em vista que o prazo para entregar o projeto era curto. Em uma dessas consultas achei uma lista de editores no blog http://www.misfitgeek.com/CategoryView,category,ASPNET.aspx onde ele traz.

Testei muito desses, outros não por serem pagos. Gostei bastante de dois o FreeTextBox e o FCKeditor, ambos free. Mas optei pelo FCKeditor que já é utilizado em várias aplicações existentes, como PHP-nuke e outras.

O que me incenticou a escrever esse artigo é que vi muita gente com dúvida de como se utilizava o mesmo. Então vou fazer um passo à passo de como utilizar o FCK em aplicações ASP.NET.

1ª etapa:

Baixar o FCK no seguinte link: http://www.fckeditor.net/download

Baixe tanto o FCKeditor.NET como o FCKeditor mais recente (na época em que esse artigo foi escrito estava na versão 2.6.3).

2ª etapa:

Agora no Visual Studio, vá na toolbox e adicione referencia à dll que se encontra dentro da pasta FCKeditor.NET, no meu caso o caminho é: C:\Users\xx.xx\Downloads\FCKeditor.Net_2.6.3\bin\Release\2.0\FredCK.FCKeditorV2.dll

Agora você já pode arrastar e soltar o controle para a sua tela.

3ª etapa:

Adicione ao seu projeto o arquivo que possui o seguinte nome  ‘fckeditor’ .

No meu caso, adicionei na propria raiz da aplicação. Tendo a seguinte estrutura agora: ‘~/fckeditor’

4ª  etapa:

Modifique a propriedade ‘BasePath’ do seu controle para: ‘~/fckeditor’ (No meu caso)

Bem, é apenas isso. Simples não é? Espero em posts futuros estar postando algumas maneiras de personalizar este controle.

Para maiores detalhes do editor, acessar os seguintes links:

http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide

http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide

Anúncios