ASP – Editor FCKeditor

• Tweet
• Sharebar

• Tweet

O FCKEditor é um editor WYSIWYG online gratuíto e open-source, multiproposital, feito em JavaScript que cria páginas visualmente, gerando um código de saída HTML estilizado.
O FCKEditor é o editor bem popular devido ao seu uso nativo em vários SGC’s como o Drupal, o PHP-Nuke, Joomla! e mais diversos outros aplicativos que o integram em sua estrutura.
Seu uso é extremamente fácil e ele está disponivel para praticamente todas as linguagens web disponíveis. Você pode baixar o FCKeditor, através do link http://ckeditor.com/download. Caso queira ver como funciona o editor, clique aqui e veja o demo. Descompacte em uma pasta especifica, por exemplo “fckeditor”, assim seus arquivos irão ficar melhor organizados. Será criada um diretório com o nome de /fckeditor/, todo este artigo só funcionará se os arquivos estiverem dentro de um diretório com este nome, pois se você preferir utilizar um diretório com outro nome, terá que mudar o nome no código também. A primeira coisa a fazer é deletar o diretório com o nome samples. (/fckeditor/samples/), dentro deste diretório estão alguns exemplos de como utilizar o editor, mas estes exemplos podem ser utilizados por usuários não autorizados para invadir o seu sistema.

Ainda dentro do diretório /fckeditor/, apague todos os arquivos de outra linguagem de programação, (PHP, CFM, LASSO, PL, PY) mantenha apenas os XML, HTML , JS e ASP.

Os arquivos principais que utilizaremos serão fckconfig.js e fckeditor.asp.
fckconfig.js

FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
‘/’,
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
‘/’,
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

ckeditor.asp

Definimos o trecho abaixo de código com estes novos dados. Aqui é definido o diretório base, tamanho da área do editor e também o tipo de barra formada, podendo variar entre Default ou Basic mostrado anteriormente no arquivo fckconfig.js.

Private Sub Class_Initialize()
sBasePath = “/fckeditor/”
sWidth = “100%” ‘Aqui é a largura, aconselho a manter 1005
sHeight = “400″ ‘Aqui é altura
sToolbarSet = “Default”
sValue

Na segunda alteração do arquivo fckeditor.asp iremos mudar para o caminho fckeditor/editor/
Public Function CreateHtml( instanceName )
dim html

If IsCompatible() Then

Dim sFile, sLink
If Request.QueryString( “fcksource” ) = “true” Then
sFile = “fckeditor.original.html”
Else
sFile = “fckeditor.html”
End If

sLink = sBasePath & “fckeditor/editor/” & sFile & “?InstanceName=” + instanceName

If (sToolbarSet & “”) “” Then
sLink = sLink + “&Toolbar=” & sToolbarSet
End If

Iremos agora fazer a chamada deste arquivo fckeditor.asp em uma página asp com formulário simples.

Na página onde você quer que apareça o editor, exatamente no local, coloque o seguinte código, iremos utilizar um include chamando o arquivo fckeditor.asp. Esta página também precisa estar dentro do diretório /fckeditor/

Os caracteres especiais, palavras acentuadas e outros use a metatag:

A acentuação, pode ser resolvida, apenas mudando no inicio das páginas de alteração e inserção de dados no banco de dados, faça as seguintes mudanças:

altera para:

Recuperando os dados dentro do editor. iremos utilizar um include chamando o arquivo fckeditor.asp.

Vamos mudar o FCK Editor 2.6.4 , que vem habilitado para PHP por padrão, para nossa linguagem ASP, entre no arquivo fckconfig.js, dentro do diretório /fckeditor/ e altere as linhas:
var _FileBrowserLanguage = ‘asp’; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘asp’; // asp | aspx | cfm | lasso | perl | php | py

Você pode mudar o visual (skin) do editor, iremos usar a do office 2003, para isso iremos alterar no arquivo fckconfig.js, dentro do diretório /fckeditor/ a seguinte linha:
FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/office2003/’;

você indica o caminho da skin que você quer que apareça, é só copiar e subistituir, é só escolher um dos tres:

FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/default/’ ;
FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/office2003/’ ;
FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/silver/’ ;

você pode baixar mais skins acessando aqui: http://www.midiaville.com.br/docs/arquivos/skins/index.php
Você também pode mudar o visual do meu editor, alterando os ícones da barra. Apenas no arquivo fckconfig.js, onde citamos acima. Mudando o parâmetro ToolbarSets

Para fazer upload de fotos, banner flash, arquivos para links e etc.

Navegue até o diretório: /fckeditor/editor/ filemanager/ connectors/
Apague tudo que tiver lá dentro, deixe só o diretório /asp/ dentro dele, edite o arquivo config.asp

Na linha

ConfigIsEnabled = False ‘mude de False para true, isso habilita o upload
ConfigUserFilesPath = “/userfiles/”

Coloque no lugar de userfiles o nome do seu diretório onde será feito o upload a barra no inicio quer dizer que este diretório está na raiz do site. Caso o diretório que você listou aqui não exista o fckeditor vai cria-lo.
Algumas soluções para alguns erros apresentados pelo Editor.
Dentro do diretório FCKeditor/_samples/asp/ existem vários exemplos, iremos utilizar o sample04.asp.

Deste arquivo copie:

e cole no início de sua página de inserção e alteração de dados, no local onde está seu textarea, cole a outra parte do código

<%
Dim sBasePath
sBasePath = Request.ServerVariables(“PATH_INFO”)
sBasePath = Left( sBasePath, InStrRev( sBasePath, “/_samples” ) )
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = sBasePath
If Request.QueryString(“Skin”) “” Then
oFCKeditor.Config(“SkinPath”) = sBasePath + “editor/skins/” & Server.HTMLEncode( Request.QueryString(“Skin”) ) + “/”
End If
oFCKeditor.Value = ” ”
oFCKeditor.Create “FCKeditor1″
%>

Note-se que apaguei todos os comentários.
Atenção! – A página de inserção e alteração de dados deve estar na pasta raiz do FCKeditor, no meu caso eu uso o diretório config.

Localizar os arquivos no servidor

Agora é a vez de localizarmos os arquivos no servidor, para não dar erros, localize:
FCKeditor/editor/filemanager/browser/default/connectors/asp/config.asp
Faça as mudanças, altere o trecho abaixo:

Dim ConfigIsEnabled
ConfigIsEnabled = true ‘aqui estará false, muda para true

Para:

Dim ConfigUserFilesPath
ConfigUserFilesPath = “/fotos/” ‘aqui coloca em qual diretório ele deve buscar os arquivos

Fazer o upload dos arquivos

Para fazer o upload dos arquivos, evite os erros, ache o arquivo:

FCKeditor/editor/filemanager/upload/asp/config.asp

Faça as seguintes mudanças:

Dim ConfigIsEnabled
ConfigIsEnabled = true] ‘aqui estava false, você muda para true

Nesse trecho:

Dim ConfigUserFilesPath
ConfigUserFilesPath = “/fotos/” ‘aqui você mostra o diretório onde serão upados os arquivos

Estamos usando o diretório fotos, verifique sempre se o diretório que você está setando em seus arquivos config. está criado, preferencialmente que seja um diretório no diretório raiz do site. Não esqueça das permissões de escrita no diretório indicado.

Sempre que for mudar o diretório, use a / no final, exemplo /fotos/, /banco/, não esqueça a barra no final pois ela será necessária na função de FSO do FCKeditor para ciriar subdiretórios,como é o caso de imagens, flash e outros, pois para cada extensão de arquivo, o fckeditor usa um subdiretório.

O parent path conhecido como “..”, não está disponível, isso se deve por resolução da Microsoft que o desabilitou por padrão na versão 6 do IIS. Então não use ../../../fotos/
O Server.MapPath sempre aponta para a raiz de seu site, ou seja, se estiver na pasta “/includes/libs/” e quiser apontar para o arquivo “/db/meu.mdb”, use Server.MapPath (“/db/meu.mdb”);
Alterando a Largura e Altura do Textarea

Agora vamos para o arquivo FCKeditor/ FCKeditor.asp

Encontre o trecho:

Private Sub Class_Initialize()
sBasePath = “/config/”
sWidth = “465″
sHeight = “450″
sToolbarSet = “Default”
sValue = “”

Nas linhas

sWidth = “465″
sHeight = “450″

Vvocê pode mudar para a largura ou altura que quiser, se for em pixels, não é necessário usar o px, use apenas os números.

Diretório base

Na linha do arquivo /FCKeditor.asp:
sBasePath = “/config/”
Altere para config, o seu pode estar como /FCKeditor/, aqui é necessário você mudar para o nome do diretório onde estão os arquivos, para não acontecer os erros de xlm que geralmente acontecem.
Alterar os dados do bd com o FCKeditor
Para alterar os dados do banco de dados com o FCKeditor , você pode recuperar os dados do campo dentro do textarea, proceda da seguinte forma:

Na página altere os dados:

Para:

Escrito por X@nBuRzUm on maio 23, 2010. Arquivado em ASP.net, Banco de Dados, CSS, Geral, Usabilidade. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo