Olá, desbravadores do desenvolvimento web! Neste artigo, veremos o FCKEditor, isso mesmo, quem desenvolve em
php, ou em outra linguagem, já deve ter usado essa ferramenta em suas
aplicações. O que vamos fazer é usar essa ferramenta dentro de uma aplicação feita
em flex e nos beneficiar das varias opções que ela contém e que daria
um certo trabalho desenvolver no flex, como o upload de imagens por
exemplo.
Para executar nossa proposta, será necessária a seguinte estrutura:
- Servidor Apache com PHP 5 e servidor MySQL. Eu estou usando o Appserv 2.5.10 que já vem com Apache 2.2.8, PHP 5.2.6, MySQL 5.0.51b e phpMyAdmin-2.10.3.
- Adobe Flex Builder 3 instalado. Clique aqui para baixar a versão trial.
- A biblioteca FCKEditor já configurada para ser usada no flex que você pode baixar clicando aqui.
Com essa estrutura podemos iniciar as configurações.
Crie um novo projeto no flex, no meu caso eu chamei de Fckeditor, mas você pode chamar como quiser.
Descompacte a biblioteca do FCKEditor onde você quiser, copie a
pasta assets e cole na pasta bin-debug na pasta onde foi criado o seu
projeto. Na pasta onde você descompactou o FCKEditor copie o arquivo
FCKEditor.swc e cole na pasta libs do seu projeto flex.
Agora vamos para o código mxml. No arquivo criado pelo flex faça as seguintes alterações:
<?xml version="1.0" encoding="utf-8"?>
<!--Alteramos aqui Adicionando xmlns:fckeditor="be.happybanana.fckeditor.*"-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:fckeditor="be.happybanana.fckeditor.*">
<mx:Script>
<![CDATA[
//Função que recupera o texto html e carrega no TextArea
private function carregaTexto():void{
resultFckeditor.text = fckEditor.htmlText;
}
]]>
</mx:Script>
<!--
Componente do FCKEditor
um paramêtro importante é o toolbarSet com ele vc pode definir qual
toobar do FCKEditor vai ser carregado no nosso caso eu carreguei
o Basic caso vc nao declare será carregado o Default que possui
todas as funções
-->
<fckeditor:FCKEditor left="5" top="5"
toolbarSet="Basic" id="fckEditor" width="400" height="150"
htmlText="Teste">
</fckeditor:fckeditor>
<mx:Button label="Carrega Html" click="carregaTexto()"
left="5" top="160"></mx:button>
<!--
TextArea que vai receber o codigo html digitado no fckEditor
-->
<mx:TextArea id="resultFckeditor" width="400" height="100"
left="5" top="190" />
</mx:Application>
Após configurar, o Fckeditor.mxml já deve funcionar no navegador
Internet Explorer, porém pode haver um erro de renderização, e com
certeza ocorrerá no Firefox. Isso acontece porque o flex, ao gerar o
código HTML que irá exibir o arquivo swf, gera um javascript com
parâmetros de configuração para o flash player, mas para que o
FCKEditor possa ser exibido sem problemas, um parâmetro deve ser
colocado é o wmode, que deve receber o valor “opaque”. O flex não
adiciona esse parâmetro, então você deverá colocar na mão mesmo, veja como:
Ha! Não se assuste com o código, ele é gerado pelo próprio flex!
Fiz alterações colocando o parâmetro wmode no código abaixo nas linhas: 29, 47, 68 e 75
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);
// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if ( hasProductInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "Fckeditor",
"quality", "high",
"bgcolor", "#869ca7",
"name", "Fckeditor",
"allowScriptAccess","sameDomain",
//Adicione essa linha
"wmode", "opaque",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "Fckeditor",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "Fckeditor",
"quality", "high",
"bgcolor", "#869ca7",
"name", "Fckeditor",
"allowScriptAccess","sameDomain",
//Adicione essa linha
"wmode", "opaque",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="Fckeditor" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="Fckeditor.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<!--Adicione essa linha-->
<param name="wmode" value="opaque" />
<embed src="Fckeditor.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="Fckeditor" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
wmode="opaque"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</noscript>
Outra coisa que eu fiz foi adicionar mais elementos no toolBar do
FCKEditor; eu adicionei “Desfazer” e o “Refazer”. Para isso você deve
ir na pasta bin-debug\assets\fckeditor do seu projeto e abrir o arquivo
fckconfig.js neste arquivo altere a seguinte linha:
FCKConfig.ToolbarSets["Basic"] = [
['Undo','Redo,'-',Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;
Pronto, agora é só testar a aplicação.
Se quiser o código, clique aqui!



