FCKEditor and Adobe Flex 3

I have been struggling for weeks now trying to integrate the FCKEditor into my Flex project with marginal success but nothing that I can use yet.   Let me backup and try to explain what it is I need, what I know and what I have discovered.   Maybe after all of that someone will have something fresh for me to try where I clearly have failed.

The project I am on has a requirement to be able to edit and display HTML type content.   Now Flex addresses this with the basics in their RichTextEditor buy handling basic font manipulation (size, color, bold, etc.).  If you know HTML you can even add other simple basic tags like <IMG>.   And it is in the Image tag where my problem gets expanded.

Clearly a user with decent HTML knowledge can manage by simple adding all the features needed for the image such as width, height, source, etc.  and the Flex TextArea would display it.  But this is hardly a user friendly way to manage images.  There is no simple drag/drop methods, for example, in the RTE of Flex.  This is mostly because of the limitations of the Flash Player and the fact that it does not talk to the browser directly.  

Now, Flex does offer a way to get to the browser by way of the ExternalInterface so that you can talk back and forth to Javascript.  A handy little feature for "punching" a hole into the Flash Player to talk to the browser underneath.

OK, so that is Flex.   I have also been using the FCKEditor for a number of years and is simple, IMO, one of the better ones out there for providing a true and lightweight WYSIWYG.  Knowing what I know about the FCKEditor and Flex it only seems natural to be able to put the two together.   FCKEditor is, after all, Javascript (with the exception of a few server side parts that I will not be needing) (File Upload, etc).

By putting these two great applications together I can offer the Flex application with a true WYSIWYG editor and from the users view point it all looks like one program, which is the look I am going for.   Not trying to have them do everything but the editing in one program and then go to another program for the editing.   All in one place to provide for a good user experience.  Simple right?   Or so I thought.

I have found out a lot of how this works but have yet to make it work the way that I am looking for.   Right now, in Flex, I have the main canvas page.   When the Admin selects the message screen to manage their messages a Flex TitleWindow using the PopUpManager is displayed with a listing if existing messages.   From there they can either Add or Edit a message.   Doing either will display another Titlewindow, also using the PopUpManager and display the details of the message.   Who posted it, when, who it was addressed/targeted for to read, subject, message body, etc.  

I have replaced the default RTE of Flex with an external call to a Javascript in the main HTML page that in turn, makes the DIV holding the FCKEditor visible.   All works great except for one thing.   The FCKEditor never displays.   A white box in the shape of the Editor appears but no editor.  I have added other code, both static text and simple javascript statements like document.write before and after where the FCKEditor code is and they display correctly so I know the Java is working.    I am using Internet Explorer and this is the browser that will be used by my internal customer so changing browsers is not an option.  Although I did test it in Firefox and it never even shows the white box even.

I know there is nothing wrong with FCKEditor as I can do the same features as the code below without Flex/Flash (normal HTML) and it all works correctly.   I know that Flex is working as ExternalInterface calls are referencing the JavaScript.  I know it is not IE as in a simple proof of concept using Flex, I was able to do it with a single flex popup.  However, this only worked if I did it on a remote server. as IE produced security sandbox type warnings from local filesystem.  Another issue as that is part of the development environment for the project with many developers on it.

It is basically a combination of each of these when this problem appears.   I know this was a tad wordy but I felt it was need to show where I have been and what I am trying to accomplish.   I now come to the Experts for advise.    In the words of Princess Leia, Star Wars #4......."help me obi wan kenobi you're my only hope".

Bob

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:

<script language="JavaScript" type="text/javascript">
 
function hideFCK(){
	document.getElementById("wysiwyg").style.visibility = 'hidden';
}
 
function moveFCK(x,y){
    document.getElementById("wysiwyg").style.left = x;
    document.getElementById("wysiwyg").style.top = y;
}
 
function showFCK(msg,w,h){
	document.getElementById("wysiwyg").style.visibility = 'visible';
    document.getElementById("wysiwyg").style.width = w;
    document.getElementById("wysiwyg").style.height = h;
    var myEditor = FCKeditorAPI.GetInstance('message');
    myEditor.SetHTML(msg);
}
 
 
</script>
 
<div id="wysiwyg" style="visibility: hidden; background-color:white; position:absolute; border-style: solid; border-width: thin;">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script language="JavaScript" type="text/javascript">
    var oFCKeditor = new FCKeditor('message');
    oFCKeditor.BasePath = "fckeditor/";
    oFCKeditor.ToolbarSet = "Default";
    oFCKeditor.Height = "300";
    oFCKeditor.Width = "100%";
    oFCKeditor.Value = "<p>This is the initial text in the editor</p>";
    oFCKeditor.Create();
</script>
</div>