Ext中使用FCK

      Ext自己带了一个Html编辑器，但是这个编辑器中的功能有限，自己也给这个编辑器做了一下扩展，但是由于Ext自身的原因，始终存在一些小问题，所以在Ext中使用FCK编辑器也是一个不错的选择，结合自己的实践在这里总结一下Ext中使用FCK编辑器的方法，请高手们提提意见！

     首先在页面的前面导入js文件，这个就不用说了！

<script type="text/javascript" src="/resource/fckeditor.js"></script>

 然后用Ext代码建立一个FormPanel，这里就不写出全部代码，仅仅贴出需要加载FCK编辑器的地方，代码如下：

{
xtype:"textarea",
name:"content",
value:"",
width:720,
height:600,
fieldLabel:"新闻内容",
listeners:{
	 render":function(f){
	                   fckEditor = new FCKeditor("content") ;//初始化FCK
	                   fckEditor.Height=600;//设置FCK编辑器的高度
	                   fckEditor.Width=720;//设置FCK编辑器的宽度
	                   fckEditor.BasePath = "/resource/" ;//设定FCK的源文件路径，这里要注意相对和绝对路径
	                   fckEditor.ReplaceTextarea() ;//用FCK编辑器替换Ext中的textarea
	                 }
                   }	
}

 Ext的控件可以添加listeners,在listeners中渲染出一个FCK编辑器，个人认为这是最简单的也是最方便的方法，如上的代码，仅仅几行就给FCK编辑器添加到Ext中去了，使得EXT和FCK得到完美的结合！

评论

1 楼 yangyi 2009-04-07  

var fck = new FCKeditor('demo');

var form = new Ext.form.FormPanel({
xtype: 'form',
items:[{
hideLabel: true,
html: fck.CreateHtml()
}]
});