Flex CKEditor （支持FireFox）的初步探索

在我的印象里，CKEditor还是叫FckEditor，去官网一看原来改名了。

以前碰到过这个问题，Flex中嵌入CKEditor，当时没有解决，今天突然想试试Flex里面CKEditor怎么用。

能够搜索到的解决方案基本上都是利用Flex-IFrame控件去访问CKEditor。经过测试（本地文件系统方式）：

ckeditor.HTML 文件（主要就是注意：ckeditor.JS 路径问题）

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>   
<title>CKEditor</title>   
<meta content="text/html; charset=utf-8" http-equiv="content-type" />   
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>   
<script type="text/javascript"> 
function SetContents(value) 
{   
var oEditor = CKEDITOR.instances.editor1;   
oEditor.setData(value.toString()); 
} 
function GetContents() {   
// Get the editor instance that we want to interact with.   
var oEditor = CKEDITOR.instances.editor1;   
// Get the editor contents   
return oEditor.getData(); 
}   
</script> 
</head> 
<body>     
<textarea id="editor1" name="editor1"></textarea>     
<script type="text/javascript"> 
if ( typeof CKEDITOR == 'undefined' ) 
{   
document.write('初始化CKEditor失败！') ; 
} else 
{   
var editor = CKEDITOR.replace( 'editor1' ); 
}     
</script> 
</body> 
</html>

1，Flash BUilder内部浏览器中查看才可以看到效果，运行时无效果。

通过服务器访问（我这里用到了java的工程，新建java工程，引入servlet的jar包，基本上就是个java空工程，就写了个web.XML内容如下）：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
      PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
      "http://java.sun.com/dtd/web-app_2_4.dtd">

<web-app>
    
    <welcome-file-list>
        <welcome-file>/index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

配置完毕后，启动tomcat，运行结果：

1，FireFox 无效果

2，IE9 出现效果，不能点

3，搜狗浏览器居然正常。

第二种方式，不会上传附件。。就不写了，直接发高手传送门：

http://blog.aboutme.be/2009/10/25/ckeditor-running-in-flex-and-air/

经测试（服务器方式）：

1，FireFox正常

2，IE9 正常

3，搜狗兼容模式不正常，高速模式正常。

总结：

需要注意的地方：

其实作者都指出了，第一个地方就是修改html-template 文件夹下的index.template.html

将模式改成：opaque。然后就是，需要服务器才能显示出来。

<script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
            var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "${expressInstallSwf}";
            var flashvars = {};
            var params = {};
            params.wmode="opaque";
            params.quality = "high";
            params.bgcolor = "${bgcolor}";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "${application}";
            attributes.name = "${application}";
            attributes.align = "middle";
            swfobject.embedSWF(
                "${swf}.swf", "flashContent", 
                "${width}", "${height}", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
            <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>

本文只是初步的显示实验，具体的应用还没有测试。

posted on 2012-04-25 18:03 Rush_Sykes 阅读(758) 评论(0) 编辑收藏举报