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”] = [
[‘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’]
] ;

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()
sBasePath = “”
sWidth = “800”
sHeight = “400”
sToolbarSet = “Default”
sValue = “”

Na segunda alteração do arquivo fckeditor.asp iremos mudar a linha 98 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.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<%@ codepage=”1252″ language=”VBScript” %>
<!– #include file=”fckeditor/fckeditor.asp” –>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>

<title>Untitled Document</title>
</head>

<body>
<form action=”recebe.asp” method=”post”>
Título:
<input name=”titulo” type=”text” size=”40″ />
<br />
Notícia: <br />
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = “”
oFCKeditor.Value = “”
oFCKeditor.Create “TX_Noticia”
%>
<br /><br />
<input name=”enviar” type=”submit” value=”Enviar” />
</form>
</body>
</html>

O seguinte código <%@ codepage=”1252″ language=”VBScript” %> serve para retirar os erros de acento dentro do campo do editor.

Veja também em
http://imasters.uol.com.br/artigo/12084/desenvolvimento/fckeditor_um_poderoso_editor_wysiwyg/

fckeditor

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']
] ;

fckconfig.js

fckeditor.asp

Deixe um comentário