fckeditor 与ext 集成使用
弹出一个编辑window，效果如图，
具体代码如下：
Ext.form.FCKeditor.js
/**var oFCKeditorOptions = { BasePath: 'fckeditor/', Config: { BaseHref: 'http://localhost:8080/hrcis/', SkinPath: '../../fckeditor/editor/skins/office2003/', CustomConfigurationsPath: '../../fckeditor/fckconfig.js', ProcessHTMLEntities: true, ProcessNumericEntities: false }, AllowQueryStringDebu: false, ToolbarSet: 'XXX'};*/Ext.form.FCKeditor = function(config){ this.config = config; Ext.form.FCKeditor.superclass.constructor.call(this, config); this.MyisLoaded = false; this.MyValue = ''; this.fckInstance= undefined; // to avoid using FCKAPI, this is a reference to instance created on FCKeditor_OnComplete};Ext.extend(Ext.form.FCKeditor, Ext.form.TextArea, { 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); //Hide textarea to stop flashing up before FCKEditor renders. this.hideMode = "visibility"; // set hideMode to visibility, to retain height. this.hidden = true; // hide textarea 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.name+"',"+ this.config.height +");",100); }, setValue : function(value){ this.MyValue = value; if (this.MyisLoaded){ FCKeditorSetValue(this.name,value); } Ext.form.TextArea.superclass.setValue.apply(this,[value]); }, getValue : function(){ if (this.MyisLoaded){ value = FCKeditorGetValue(this.name); Ext.form.TextArea.superclass.setValue.apply(this,[value]); return Ext.form.TextArea.superclass.getValue.call(this); } else { return this.MyValue; } }, getRawValue : function(){ if (this.MyisLoaded){ value=FCKeditorGetValue(this.name); Ext.form.TextArea.superclass.setRawValue.apply(this,[value]); return Ext.form.TextArea.superclass.getRawValue.call(this); } else { return this.MyValue; } }});Ext.reg('fckeditor', Ext.form.FCKeditor);function loadFCKeditor(element, height){ oFCKeditor = new FCKeditor(element); oFCKeditor.Height = height; Ext.apply(oFCKeditor,oFCKeditorOptions) oFCKeditor.ReplaceTextarea();}function FCKeditor_OnComplete(editorInstance){ Ext.getCmp(editorInstance.Name).MyisLoaded = true; Ext.getCmp(editorInstance.Name).fckInstance = editorInstance;}function FCKeditorSetValue(name,value){ if (name != undefined){ var extCmp = Ext.getCmp(name); if (extCmp != undefined) { extCmp.fckInstance.SetData(value); } }}function FCKeditorGetValue(name){ if (name != undefined){ var data = ''; var extCmp = Ext.getCmp(name); if (extCmp != undefined) { data = extCmp.fckInstance.GetData(); } return data; }}?
?主页面代码如下main.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>编辑页面</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/ext33/resources/css/ext-all.css"><script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/adapter/ext/ext-base.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/ext-all.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/ext-lang-zh_CN.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/plugin/Ext.form.FCKeditor.js"></script><!----><script type="text/javascript" src="${pageContext.request.contextPath}/jslib/fckeditor/fckeditor.js"></script> </head> <body> </body> <script type="text/javascript"> var oFCKeditorOptions = { BasePath: '${pageContext.request.contextPath}/jslib/fckeditor/', Config: { BaseHref: '${pageContext.request.contextPath}', SkinPath: '${pageContext.request.contextPath}/jslib/fckeditor/editor/skins/office2003/', CustomConfigurationsPath: '${pageContext.request.contextPath}/jslib/fckeditor/fckconfig.js', ProcessHTMLEntities: true, ProcessNumericEntities: false }, AllowQueryStringDebu: false, ToolbarSet: 'Default'}; Ext.onReady(function(){ var tabs = new Ext.TabPanel({ minTabWidth: 115, tabWidth:135, enableTabScroll:true, width:600, activeItem:0, items:[ { xtype:'panel', title:'编辑页面', items:[{ name: 'body', fieldLabel: '正文', height: 430, xtype:'fckeditor', id:'body' }] } ], defaults: {autoScroll:true} }); win = new Ext.Window({ layout:'fit', width:500, height:300, closeAction:'close', plain: true,items:[tabs], buttons: [{ text:'Submit', disabled:true },{ text: 'Close', handler: function(){ win.close(); } },{ text: '确定', handler: function(){ var editor = Ext.getCmp("body"); var v = editor.getValue(); alert(v); } }] }); win.show(this); }) </script></html>?
引用的Fckeditor 为FCKeditor_2.5b.zip，在附件中可以下载