Ext下的FCKeditor扩展完善

由于项目需要用到Extjs+FCKeditor，在Extjs官方坛论上找到了FCKeditor的扩展http://extjs.com/forum/showthread.php?t=17423，在使用过程中到了不少的问题，主要是同一个页面加载多个FCK instance及设置SetValue的问题。以下是修改过后的代码：

Ext.namespace('Ext.ux.form');

/**
 * FCKeditor 初始配置信息
 * 
 * @type {Object}
 */
var oFCKeditorOptions = {
	BasePath : 'js/fckeditor/',
	Config : {
		BaseHref : window.location,
		SkinPath : '../editor/skins/office2003/',
		ProcessHTMLEntities : true,
		ProcessNumericEntities : false,
		ToolbarStartExpanded : true,
		LinkBrowser : true,
		ImageBrowser : true,
		FlashBrowser : true,
		LinkUpload : true,
		ImageUpload : true,
		FlashUpload : true
	},
	ToolbarSet : 'Symbol'
};

/**
 * Ext FCKeditor
 * 
 * @param {Object}
 *            config 配置信息
 */
Ext.ux.form.FCKeditor = function(config) {
	this.config = config;
	Ext.ux.form.FCKeditor.superclass.constructor.call(this, config);
	/**
	 * 通知FCKeditor是否实例化 
	 * notice the component's FCKeditor instance inited
	 * @type Boolean
	 */
	this.instanceLoaded = false;
	/**
	 * 实例值
	 * the component's FCKeditor instance value
	 * @type String
	 */
	this.instanceValue = '';
	/**
	 * 组件的FCKeditor实例
	 * @type {FCKeditor}
	 */
	this.editorInstance = undefined;
};
/**
 * Ext FCKeditor
 * 
 * @class Ext.ux.form.FCKeditor
 * @extends Ext.form.TextArea
 */
Ext.extend(Ext.ux.form.FCKeditor, Ext.form.TextArea, {
			/**
			 * 初始化事件
			 */
			initEvents : function() {
				this.on('destroy', function() {
							if (typeof this.editorInstance != 'undefined') {
								delete this.editorInstance;
							}
						});
			},
			onRender : function(ct, position) {
				if (!this.el) {
					this.defaultAutoCreate = {
						tag : "textarea",
						style : "width:100px;height:60px;",
						autocomplete : "off"
					};
				}
				Ext.form.TextArea.superclass.onRender.call(this, ct, position);
				this.hideMode = "visibility";
				this.hidden = true;
				if (this.grow) {
					this.textSizeEl = Ext.DomHelper.append(document.body, {
								tag : "pre",
								cls : "x-form-grow-sizer"
							});
					if (this.preventScrollbars) {
						this.el.setStyle("overflow", "hidden");
					}
					this.el.setHeight(this.growMin);
				}
				setTimeout("loadFCKeditor('" + this.id + "'," + this.config.height + ");", 100); // Change
			},
			/**
			 * 设置是否已经加载过此控件
			 * set FCKeditor instance is inited
			 * @param {Boolean} v
			 */
			setIsLoaded : function(v) {
				this.instanceLoaded = v;
			},
			/**
			 * 获取是否已实例化过此控件
			 * get FCKeditor instance is inited
			 * @return {Boolean}
			 */
			getIsLoaded : function() {
				return this.instanceLoaded;
			},
			/**
			 * 
			 * @param {String} value
			 */
			setValue : function(value) {
				this.instanceValue = value;
				if (this.instanceLoaded) {
					this.FCKeditorSetValue(value); // Change this.name
				}
				Ext.form.TextArea.superclass.setValue.apply(this, [value]);
			},
			/**
			 * 
			 * @return {String}
			 */
			getValue : function() {
				if (this.instanceLoaded) {
					value = this.FCKeditorGetValue(); // Change this.name to this.id
					Ext.form.TextArea.superclass.setValue.apply(this, [value]);
					return Ext.form.TextArea.superclass.getValue.call(this); // Change getValue(this) to
				} else {
					return this.instanceValue;
				}
			},
			/**
			 * 
			 * @return {String}
			 */
			getRawValue : function() {
				if (this.instanceLoaded) {
					value = this.FCKeditorGetValue(); // Change this.name to this.id
					Ext.form.TextArea.superclass.setRawValue.apply(this, [value]);
					return Ext.form.TextArea.superclass.getRawValue.call(this); // Change getValue(this) to
				} else {
					return this.instanceValue;
				}
			},
			/**
			 * 设置FCKeditor实例的值
			 * @param {String} value
			 */
			FCKeditorSetValue : function(value) {
				if(this.instanceLoaded == false){
					return;
				}
				// fix IE No Permission Denied errors
				var runner = new Ext.util.TaskRunner();
				var task = {
					run : function() {
						try {
							var editor = this.editorInstance; // update var editor
							if (editor.EditorDocument.body) {
								editor.SetData(value);
								runner.stop(task);
							}
						} catch (ex) {
							//Ext.logf('调试信息(info)：{0}', ex);
						}
					},
					interval : 100,
					scope : this
				};
				runner.start(task); // end fix
			},
			/**
			 * 获取FCKeditor实例的值
			 * @return {String}
			 */
			FCKeditorGetValue : function() {
				var data = '';
				if(this.instanceLoaded == false){
					return data;
				}
				data = this.editorInstance.GetData();				
				return data;
			}
		});
Ext.reg('fckeditor', Ext.ux.form.FCKeditor);

/**
 * 实例化FCKeditor
 * 
 * @param {String}
 *            element el id
 * @param {Number}
 *            height
 */
function loadFCKeditor(element, height) {
	var oFCKeditor = new FCKeditor(element);
	oFCKeditor.BasePath = oFCKeditorOptions.BasePath;
	oFCKeditor.ToolbarSet = oFCKeditorOptions.ToolbarSet;
	oFCKeditor.Config = oFCKeditorOptions.Config;
	oFCKeditor.Height = height;
	oFCKeditor.ReplaceTextarea();
}
/**
 * FCKeditor API: 当FCKeditor实例化完成时执行
 * 
 * @param {FCKeditor} editorInstance
 */
function FCKeditor_OnComplete(editorInstance) {
	/**
	 * @type {Ext.ux.form.FCKeditor}
	 */
	var activeEditor = Ext.getCmp(editorInstance.Name);
	activeEditor.editorInstance = editorInstance;
	activeEditor.instanceLoaded = true;
	activeEditor.FCKeditorSetValue(activeEditor.instanceValue);
	editorInstance.Events.AttachEvent('OnBlur', FCKeditor_OnBlur);
	editorInstance.Events.AttachEvent('OnFocus', FCKeditor_OnFocus);
}

function FCKeditor_OnBlur(editorInstance) {
	editorInstance.ToolbarSet.Collapse();
}

function FCKeditor_OnFocus(editorInstance) {
	editorInstance.ToolbarSet.Expand();
}

示例：

<html>
 <head>
  <title> New Document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript" src="../lib/fckeditor/fckeditor.js"></script>
    <script type="text/javascript" src="Ext.ux.form.FCKeditor.js"></script>
 </head>

 <body>
  <script language="JavaScript">
  <!--
	Ext.onReady(function() {
		var win_cxpz = new Ext.Window({
			layout : 'fit',
			width : 800,
			title :'FCKeditor 示例',
			height : 400,
			closeAction :'hide',
			plain : true,
			item :[{
				xtype : 'fckeditor'
			}],
			buttonAlign :'center',
			buttons: [{
				text : '返回',
				handler : function(){
					win_cxpz.hide();
				}
			}]
		});
		win_cxpz.show();      

	});	
  //-->
  </script>
 </body>
</html>

评论

5 楼 javaAlpha 2009-11-09  

FCKeditor 这个东西没大研究过，看多很多人用。 最近在学习使用ext。

4 楼 fengbingji 2009-05-27  

在fckconfig.js里面设置
FCKConfig.ToolbarSets["Ext"]
似乎没效

3 楼 songyinghao 2009-04-06  

不知道怎么回事，我调试时出现了问题

2 楼 nanasy 2009-02-18  

用了 可是在某些浏览器下不会出现滚动条 不知道怎么解决

1 楼 Oscar558 2008-12-22  

楼主能不能打包一下，再给个例子看啊？