Jul 16
在这次用flex开发网站管理台项目中，开始是用tourdeflex中adobe提供的高级TLF editor，解决了汉化，上传文件等问题后，死在了无法插入html的table表格这问题上。
最后还是使用JS编辑器，找到了aboutme的文章，可他提供的方案，在IE下都有些问题，ckeditor版在IE下直接无法使用，他也没有更新，自己研究了下他的代码，太复杂了。放弃。
只好用iframe外调了，找到了flex-iframe项目。因为自己用的wordpress是用tinyMCE，所以心血来潮放弃ckeditor。把tinyMCE都部署好后，才发现他的上传插件是要收费的，找了些免费的都不满意，有好的也只有PHP平台的。
只好用回ckeditor，虽然他也有跟tinyMCE学习的趋势，分离出上传功能，做成插件ckfinder，并且也收费，庆幸的是还有免费的用，而且有多个平台版本。
下面给出我的整合好的代码，就一个主MXML和ckeditor的html，flex-iframe，ckeditor，ckfinder的部署，自己去看官方文档吧。因为我最终数据都是通过flex提交服务器，所以必须有get和set编辑器内容的方法，还好flex-iframe已经提供了flex和iframe页面通信的方法，而ckeditor也提供了获取和设置内容的方法，请参考他们给的实例。下面演示代码中的两个按钮，在我实际项目中不需要。
iframe.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
minWidth="1000" minHeight="1000">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
private function button1_clickHandler(event:MouseEvent):void
{
ckeditorIFrame.callIFrameFunction('GetContents',null,getContentsResultHandler);
}
private function getContentsResultHandler(result:Object):void
{
Alert.show(result.toString());
}
protected function button2_clickHandler(event:MouseEvent):void
{
var test:String = '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>"Browse Server"</b>.</p>';
ckeditorIFrame.callIFrameFunction('SetContents', [test]);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup>
<flexiframe:IFrame id="ckeditorIFrame"
label="ckeditor"
source="ckeditor/ckeditor.html"
width="500"
height="450"
overlayDetection="true" />
<s:Button click="button1_clickHandler(event)"
label="call 'GetContents()'"
width="200"/>
<s:Button click="button2_clickHandler(event)"
label="call 'SetContents()'"
width="200"/>
</s:VGroup>
</s:Application>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
minWidth="1000" minHeight="1000">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
private function button1_clickHandler(event:MouseEvent):void
{
ckeditorIFrame.callIFrameFunction('GetContents',null,getContentsResultHandler);
}
private function getContentsResultHandler(result:Object):void
{
Alert.show(result.toString());
}
protected function button2_clickHandler(event:MouseEvent):void
{
var test:String = '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>"Browse Server"</b>.</p>';
ckeditorIFrame.callIFrameFunction('SetContents', [test]);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup>
<flexiframe:IFrame id="ckeditorIFrame"
label="ckeditor"
source="ckeditor/ckeditor.html"
width="500"
height="450"
overlayDetection="true" />
<s:Button click="button1_clickHandler(event)"
label="call 'GetContents()'"
width="200"/>
<s:Button click="button2_clickHandler(event)"
label="call 'SetContents()'"
width="200"/>
</s:VGroup>
</s:Application>
ckeditor.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<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" src="ckfinder/ckfinder.js"></script>
<script src="ckeditor.js" type="text/javascript"></script>
<link href="ckeditor.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
// The instanceReady event is fired when an instance of CKEditor has finished
// its initialization.
document.SetContents = function (_value)
{
var oEditor = CKEDITOR.instances.editor1;
var plainArea = document.getElementById('plainArea');
plainArea.value = _value;
var value = plainArea.value;
// Set the editor contents (replace the actual one).
oEditor.setData(value);
}
document.GetContents = function ()
{
// 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>
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
<form action="#" method="post">
<textarea id="editor1" name="editor1"></textarea>
<script type="text/javascript">
// This is a check for the CKEditor class. If not defined, the paths must be checked.
if ( typeof CKEDITOR == 'undefined' )
{
document.write('加载CKEditor失败') ;
}
else
{
var editor = CKEDITOR.replace( 'editor1' );
// Just call CKFinder.SetupCKEditor and pass the CKEditor instance as the first argument.
// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
CKFinder.setupCKEditor( editor, 'ckfinder' ) ;
// It is also possible to pass an object with selected CKFinder properties as a second argument.
// CKFinder.SetupCKEditor( editor, { BasePath : '../../', RememberLastFolder : false } ) ;
}
</script>
<textarea id="plainArea" style="visibility:hidden; display:none;"></textarea>
</form>
</body>
</html>
<!--
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<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" src="ckfinder/ckfinder.js"></script>
<script src="ckeditor.js" type="text/javascript"></script>
<link href="ckeditor.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
// The instanceReady event is fired when an instance of CKEditor has finished
// its initialization.
document.SetContents = function (_value)
{
var oEditor = CKEDITOR.instances.editor1;
var plainArea = document.getElementById('plainArea');
plainArea.value = _value;
var value = plainArea.value;
// Set the editor contents (replace the actual one).
oEditor.setData(value);
}
document.GetContents = function ()
{
// 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>
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
<form action="#" method="post">
<textarea id="editor1" name="editor1"></textarea>
<script type="text/javascript">
// This is a check for the CKEditor class. If not defined, the paths must be checked.
if ( typeof CKEDITOR == 'undefined' )
{
document.write('加载CKEditor失败') ;
}
else
{
var editor = CKEDITOR.replace( 'editor1' );
// Just call CKFinder.SetupCKEditor and pass the CKEditor instance as the first argument.
// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
CKFinder.setupCKEditor( editor, 'ckfinder' ) ;
// It is also possible to pass an object with selected CKFinder properties as a second argument.
// CKFinder.SetupCKEditor( editor, { BasePath : '../../', RememberLastFolder : false } ) ;
}
</script>
<textarea id="plainArea" style="visibility:hidden; display:none;"></textarea>
</form>
</body>
</html>
©panhezeng for 阿潘道, 2006-2012. 原文地址：http://apsay.com/?p=925
本文遵循署名-非商业性使用共享协议，转载请注明。谢谢观看，下次再来。
subscribe to
本文遵循署名-非商业性使用共享协议，转载请注明。谢谢观看，下次再来。
subscribe to
August 22nd, 2011 at 4:35 pm
你好， 请问你这个方案尝试过在AIR上使用吗？
[Reply]
panhezeng Reply:
September 6th, 2011 at 11:18 am
没在AIR上用过，AIR不是直接支持HTML，JS嘛？
[Reply]