Adobe Flex, FCKEditor and DHTML

OK, I have a unique question and it has not been one I have had any luck finding on the web. I have found several partial suggestions but in most cases I have confirmed that they are not functional in a way to present a good user experience no matter what the users do (resize, etc) the display.

What I am trying to do is offer a pure WYSIWYG editor to help compensate for the weak editor that is part of Adobe Flex. Most of the time the built in one from Flex will do the job but every now and again we will have a need to do some advanced management such as image handling, etc. In comes FCKEditor.

Now, the first thing I did, to prove my concept was to create the page I was looking for with only HTML, DHTML and Javascript. I was able to see with no effort at all that I could hide or display the FCKEditor at will. So far so good.

<script type="text/javascript" src="fckeditor/fckeditor.js"></script> 

<input type="button" value="Show FCK" onClick="javascript:showWysiwyg()">
<input type="button" value="Hide FCK" onClick="javascript:hideWysiwyg()">


<div id="wysiwyg" style="z-index:2; visibility: hidden; background-color:white; position:absolute; left: 20px; right: 20px; top: 100px; border-style: solid; border-width: thin;">

<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.Create();

   function showWysiwyg() {
      document.getElementById("wysiwyg").style.visibility = 'visible';
   }

   function hideWysiwyg() {
      document.getElementById("wysiwyg").style.visibility = "hidden";
   }


</script>

</div>

Now the next step was to move this code into the HTML page used to wrap around my Flex SWF file and then from within Flex make the calls. Inside my Flex HTML wrapper page I have the following code added.

<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
<script language="JavaScript" type="text/javascript">
function hideIFrame(){
   document.getElementById("wysiwyg").style.visibility = 'hidden';
}
   
function showIFrame(){
   document.getElementById("wysiwyg").style.visibility = 'visible';
}
</script>

<div id="wysiwyg" style="z-index:40; visibility: hidden; background-color:white; position:absolute; left: 20px; right: 20px; top: 20px; border-style: solid; border-width: thin;">
Testing
<script language="JavaScript" type="text/javascript">
    var oFCKeditor = new FCKeditor('message');
    oFCKeditor.BasePath = "/fckeditor/";
    oFCKeditor.ToolbarSet = "Basic";
    oFCKeditor.Height = "300";
    oFCKeditor.Width = "100%";
    oFCKeditor.Value = "<p>This is the initial text in the editor</p>";
    oFCKeditor.Create();
</script>
</div>

Then inside the Flex Application itself I have the following page for a test case, to see if it will all work.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
   xmlns="*"
   xmlns:mx="http://www.adobe.com/2006/mxml" 
   layout="absolute">

<mx:Script>
   <![CDATA[

      import mx.controls.Alert;

      private function FCKON():void
      {
         var urlRequest:URLRequest = new URLRequest("javascript:showIFrame()");
         navigateToURL(urlRequest,"_self");
      }

      private function FCKOFF():void
      {
         var urlRequest:URLRequest = new URLRequest("javascript:hideIFrame()");
         navigateToURL(urlRequest,"_self");
      }
   ]]>
</mx:Script>


<mx:RichTextEditor id="rt" width="400" height="400" x="28" y="53"/>
   <mx:ComboBox x="28" y="23"></mx:ComboBox>
   <mx:DateField x="287" y="23"/>
   <mx:Button x="28" y="477" click="FCKON()" label="FCK ON"/>
   <mx:Button x="123" y="477" click="FCKOFF()" label="FCK OFF"/>
   <mx:Button x="212" y="477" label="Button"/>
</mx:Application>

All looks good and compiles correctly. When I click on the FCKON button the DIV area is displayed in the correct size as indicated in the oFCKeditor creation in the HTML wrapper page. However the DIV is completely blank.....no FCKEditor is displayed. If I change the size, for example, or add in standard HTML text then that will display but still no FCKEditor. It appears as it is reading the javascript and building the work area but not displaying it in a visual way. Anyone have any ideas on what I am missing as I am sure this is a very simple approach, far less complex than the few others I have seen.

Tue, 07/21/2009 - 16:12

btate

Joined: 15/07/2009

Posts: 54

Re: Adobe Flex, FCKEditor and DHTML

OK, so I am guessing no one else has experienced this issue or have a need to work in a like situation. Gotta love to be the first to try something . OK, here is what I know so far. I have it narrowed down to a local host issue with IE6,7,8. FF works fine now on local host. If I move the code to a website all browsers are working correctly. So it is something to do with how IE is seeing the files being used in a non-website view.

Should anyone have any ideas I am all ears but so far everything I have searched on over the past many days/weeks have proved useless to my situation.

Here is the list of Javascript errors that are only appearing in IE while used in my local computer via the code above in Flex. This same code on a server will generate no errors. Firefox has no issue viewing the code locally or remotely.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2)
Timestamp: Tue, 21 Jul 2009 14:47:09 UTC

Message: Object doesn't support this property or method
Line: 42
Char: 3
Code: 0
URI: file:///C:/FlexProjects/fcktest/bin-debug/fckeditor/editor/fckeditor.html?InstanceName=message&Toolbar=Basic

Message: 'FCKBrowserInfo' is undefined
Line: 125
Char: 1
Code: 0
URI: file:///C:/FlexProjects/fcktest/bin-debug/fckeditor/editor/fckeditor.html?InstanceName=message&Toolbar=Basic

Message: Object expected
Line: 164
Char: 1
Code: 0
URI: file:///C:/FlexProjects/fcktest/bin-debug/fckeditor/editor/fckeditor.html?InstanceName=message&Toolbar=Basic

Message: 'FCKTools' is undefined
Line: 176
Char: 1
Code: 0
URI: file:///C:/FlexProjects/fcktest/bin-debug/fckeditor/editor/fckeditor.html?InstanceName=message&Toolbar=Basic

Message: Object expected
Line: 195
Char: 1
Code: 0
URI: file:///C:/FlexProjects/fcktest/bin-debug/fckeditor/editor/fckeditor.html?InstanceName=message&Toolbar=Basic

Message: 'FCKLang' is undefined
Line: 203
Char: 1
Code: 0
URI: file:///C:/FlexProjects/fcktest/bin-debug/fckeditor/editor/fckeditor.html?InstanceName=message&Toolbar=Basic

Message: 'FCKBrowserInfo' is undefined
Line: 270
Char: 1
Code: 0
URI: file:///C:/FlexProjects/fcktest/bin-debug/fckeditor/editor/fckeditor.html?InstanceName=message&Toolbar=Basic

Message: Object expected
Line: 210
Char: 2
Code: 0
URI: file:///C:/FlexProjects/fcktest/bin-debug/fckeditor/editor/fckeditor.html?InstanceName=message&Toolbar=Basic

Tue, 07/21/2009 - 16:51

btate

Joined: 15/07/2009

Posts: 54

Re: Adobe Flex, FCKEditor and DHTML

Here is my current index.html template from within Flex.

<!-- saved from url=(0014)about:internet -->
<html lang="en">
 
<!-- 
Smart developers always View Source. 

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--  BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--  END Browser History required section -->

<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>

<!--  BEGIN Browser History required section -->
<script src="history/history.js" language="javascript"></script>
<!--  END Browser History required section -->

<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = ${version_major};
// Minor version of Flash required
var requiredMinorVersion = ${version_minor};
// Minor version of Flash required
var requiredRevision = ${version_revision};
// -----------------------------------------------------------------------------
// -->
</script>
</head>

<body scroll="no">
<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", "${width}",
      "height", "${height}",
      "align", "middle",
      "id", "${application}",
      "quality", "high",
      "bgcolor", "${bgcolor}",
      "wmode", "opaque", 
      "name", "${application}",
      "allowScriptAccess","sameDomain",
      "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", "${swf}",
         "width", "${width}",
         "height", "${height}",
         "align", "middle",
         "id", "${application}",
         "quality", "high",
         "bgcolor", "${bgcolor}",
         "wmode", "opaque", 
         "name", "${application}",
         "allowScriptAccess","sameDomain",
         "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="${application}" width="${width}" height="${height}"
         codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
         <param name="movie" value="${swf}.swf" />
         <param name="quality" value="high" />
         <param name="bgcolor" value="${bgcolor}" />
         <param name="allowScriptAccess" value="sameDomain" />
         <param name="wmode" value="opaque" /> 
         <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
            width="${width}" height="${height}" name="${application}" align="middle"
            play="true"
            loop="false"
            quality="high"
            allowScriptAccess="sameDomain"
            type="application/x-shockwave-flash"
            pluginspage="http://www.adobe.com/go/getflashplayer">
         </embed>
   </object>
</noscript>
   
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script language="JavaScript" type="text/javascript">
function hideIFrame(){
   document.getElementById("wysiwyg").style.visibility = 'hidden';
}
   
function showIFrame(){
   document.getElementById("wysiwyg").style.visibility = 'visible';
}
</script>

<div id="wysiwyg" style="z-index:40; visibility: hidden; background-color:white; position:absolute; left: 20px; right: 20px; top: 20px; border-style: solid; border-width: thin;">

<script language="JavaScript" type="text/javascript">
    var oFCKeditor = new FCKeditor('message');
    oFCKeditor.BasePath = "fckeditor/";
    oFCKeditor.ToolbarSet = "Basic";
    oFCKeditor.Height = "300";
    oFCKeditor.Width = "100%";
    oFCKeditor.Value = "<p>This is the initial text in the editor</p>";
    oFCKeditor.Create();
</script>
</div>

</body>
</html>

Thu, 08/06/2009 - 20:54

btate

Joined: 15/07/2009

Posts: 54

Re: Adobe Flex, FCKEditor and DHTML

/bump

Tue, 09/01/2009 - 21:47

btate

Joined: 15/07/2009

Posts: 54

Re: Adobe Flex, FCKEditor and DHTML

Never did get anyone to respond to this making me think that I am the only one ever needing such a request. Hard to beleive, I know. However, it would appear that my prays have been answered in version 3.0. So far, and I am not done yet, it is doing all of the functions and the methods I needed them to be done in without any issues. IE, under Flash using Flex on a local computer works now making it possible for me to truly support what I design.