CKeditor and Thickbox with Flex 3 Tutorial

Submitted by matthew on December 2, 2009 - 1:10pm

So I have always hated the built in rich text editor that comes with flex and have always looked for alternatives. With drupal websites I am a fan of FCKeditor but a while back I took some time to try their new CKeditor and found it to be quite amazing.

So, I decided that for now on, I wanted to use it as kind of a pop out text editor for my flex applications using ckeditor and thickbox.

First thing I had to do is include the ckeditor library, functions, and container for the editor in the html file where the flex application lives:


<html>
<head>
<link rel="stylesheet" href="scripts/thickbox/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/thickbox/thickbox-compressed.js"></script>
<script type="text/javascript" src="scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#save').click(function(){
var data = CKEDITOR.instances.ckeditor.getData();
flexApp.returnEditorData(data);
tb_remove();
});
$('#cancel').click(function(){
flexApp.cancel();
tb_remove();
});

});

function launchEditor(data) {
if(CKEDITOR.instances.ckeditor){
CKEDITOR.instances.ckeditor.destroy();
}
if(data == null) data = "";
CKEDITOR.replace('ckeditor',{ customConfig:'/js/ckeditor_config.js', toolbar:'sitemanager', height:($("#flexApp").height()-250)});
CKEDITOR.instances.ckeditor.setData(data);
tb_show('','TB_inline?height='+($("#flexApp").height()-100)+'&width='+($("#flexApp").width()-100)+'&inlineId=editor;modal=true');
$("#flexApp").blur();
CKEDITOR.instances.ckeditor.focus();
}
</script>
</head>
<body>
<embed width="100%" height="100%" align="middle" type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer"
allowscriptaccess="sameDomain" wmode="opaque" name="flexApp" id="flexApp" src="flexApp.swf"/>
<div id="editor" style="display:none;">
<textarea class="ckeditor" name="ckeditor">Enter text here...</textarea>
<div id="actions"><a id="save" href="#">Save</a> | <a id="cancel" href="#">Cancel</a></div>
</div>
</body>
</html>

The $('#save').click(function(){ will pull the data from the editor and call a method we will create later in the flex application to accept the data back and then it closes the window.

The $('#cancel').click(function(){ will call a flex method cancel and close the window.

The function launchEditor(data){ is the method that the flex application will call to open the editor. It will accept one variable which will return data to the editor to be modified.

Now in the flex application we will create an editor component which will use the ExternalInterface class to communicate with the javascript we just created.


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Button;
import flash.external.*;

private function init():void {
editor.verticalScrollPolicy = "off";
editor.enabled = false;
}

private function launchEditor(event:MouseEvent):void {
ExternalInterface.call("launchEditor", editor.text);
ExternalInterface.addCallback("returnEditorData",returnEditorData);
ExternalInterface.addCallback("cancel",cancel)
}

private function returnEditorData(data:String):void {
ExternalInterface.addCallback("returnEditorData", null);
editor.text = data;
}
private function cancel():void {
ExternalInterface.addCallback("cancel", null);
}

]]>
</mx:Script>
<mx:TextArea id="editor" verticalCenter="0" horizontalCenter="0" width="100%" height="100%"/>
<mx:Button id="button" label="Click Here To Launch Text Editor" horizontalCenter="0" verticalCenter="0" click="launchEditor(event)" />
</mx:Canvas>

Now when a user clicks on the "Launch Editor" button, it will call the javascript launchEditor method and pass the editor.text as its data variable.

private function returnEditorData(data:String):void { is what the javascript calls to put that nice html data back into the textarea we have in component.

And that's pretty much it. I hope you can use this as a stepping stone in your flex applications to make use of a great wysiwyg editor!

What is Drupal?

Drupal - a completely free, open source content management system that many organizations are using today to provide for their needs. Drupal's many features and add-ons allow it to be used for a variety of website needs. Drupal is a good choice for today's organizations of any size because it is free, easy, and incredibly flexible.

Copyright © mrconnerton.com, 2008-2010. All Rights Reserved Drupal theme by Kiwi Themes.