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.
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
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>Re: Adobe Flex, FCKEditor and DHTML
Re: Adobe Flex, FCKEditor and DHTML