FCKEDITOR: um poderoso editor WYSIWYG
Sabemos que diversas áreas estão convergindo no uso da web. Por isso a necessidade de ferramentas que auxiliem este público para a execução de seus trabalhos. O FCKEDITOR pode ser implementado em diversas linguagens, como por exemplo ASP.Net, ASP, ColdFusion, PHP, Java etc., e visto também em alguns SGC’s Drupal e Joomla. Neste artigo utilizarei a linguagem ASP, dando assim um foco melhor.
No primeiro passo vamos baixar os códigos fontes em http://www.fckeditor.net/download. Escolha a versão FCKeditor_2.6.4.zip, extraia em uma pasta especifica, por exemplo “fckeditor”, assim seus arquivos irão ficar melhor organizados.
Os arquivos principais que utilizaremos serão fckconfig.js e fckeditor.asp.
fckconfig.js
Esta parte do código representa a barra de ações da caixa de texto formada pela ferramenta.
FCKConfig.ToolbarSets["Default"] = [<br /> ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],<br /> ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],<br /> ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],<br /> ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],<br /> '/',<br /> ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],<br /> ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],<br /> ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],<br /> ['Link','Unlink','Anchor'],<br /> ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],<br /> '/',<br /> ['Style','FontFormat','FontName','FontSize'],<br /> ['TextColor','BGColor'],<br /> ['FitWindow','ShowBlocks','-','About'] // No comma for the last row.<br />] ;<br /><br />FCKConfig.ToolbarSets["Basic"] = [<br /> ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']<br />] ;fckeditor.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()<br /> sBasePath = ""<br /> sWidth = "800"<br /> sHeight = "400"<br /> sToolbarSet = "Default"<br /> sValue = ""Na segunda alteração do arquivo fckeditor.asp iremos mudar a linha 98 para o caminho fckeditor/editor/
Public Function CreateHtml( instanceName )<br /> dim html<br /><br /> If IsCompatible() Then<br /><br /> Dim sFile, sLink<br /> If Request.QueryString( "fcksource" ) = "true" Then<br /> sFile = "fckeditor.original.html"<br /> Else<br /> sFile = "fckeditor.html"<br /> End If<br /><br /> sLink = sBasePath & "fckeditor/editor/" & sFile & "?InstanceName=" + instanceName<br /><br /> If (sToolbarSet & "") <> "" Then<br /> sLink = sLink + "&Toolbar=" & sToolbarSet<br /> End IfIremos agora fazer a chamada deste arquivo fckeditor.asp em uma página asp com formulário simples.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><%@ codepage="1252" language="VBScript" %><br /><!-- #include file="fckeditor/fckeditor.asp" --><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><br /><title>Untitled Document</title><br /></head><br /><br /><body><br /><form action="recebe.asp" method="post"><br />Título: <br /><input name="titulo" type="text" size="40" /><br /><br /><br />Notícia: <br /><br /> <%<br /> Dim oFCKeditor<br /> Set oFCKeditor = New FCKeditor<br /> oFCKeditor.BasePath = ""<br /> oFCKeditor.Value = ""<br /> oFCKeditor.Create "TX_Noticia"<br /> %> <br /><br /><br /><br /><input name="enviar" type="submit" value="Enviar" /><br /></form><br /></body><br /></html>O seguinte código <%@ codepage=”1252″ language=”VBScript” %> serve para retirar os erros de acento dentro do campo do editor.
Vimos que o editor tem diversas configurações e recursos diversificados, facilitando assim a edição de texto mais ricos e com bom código html formatado.
Desenvolvedor de sistemas desde 2004. Atualmente trabalha na Urban Store trabalhou na Agênciadot com projetos de e-commerce e sites de conteúdo com formação técnica em processamento de dados e Bacharel em Ciência da Computação, focado em Ecommerce, ASP, ASP.NET, Java, Javascript, Jquery, Facebook ADS e Google Adwords.
