Ext 中使用FCKEditor html编辑器

在Ext中使用FCKEditor html编辑器的方法如下：

1.在html文件中导入fckeditor的js文件

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="lib/fckeditor/fckeditor.js"></script>

2. 在ext表单定义中，使用textarea预先定义文本输入处的类型。然后再表单输入后用下面的语句作替换：

var oFCKeditor = new FCKeditor( "info",810,350 ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ToolbarSet = 'Default';
oFCKeditor.ReplaceTextarea() ;

完整代码如下：

Ext.onReady(function(){
Ext.QuickTips.init();

var fs = new Ext.FormPanel({
frame: true,
title:'文件添加',
labelAlign: 'right',
labelWidth: 85,
width:1000,
layout:"form",
waitMsgTarget: true,
items: [{
layout:"column",
items:[{
columnWidth:.6,
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"文章标题",
allowBlank:false,
blankText:"不能为空，请填写",
width:320
}]
},{
columnWidth:.4,
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"文章标题",
width:220
}]
}]
},{
layout:"column",
items:[{
columnWidth:.4,
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"文章来源",
width:220
}]
},{
columnWidth:.4,
layout:"form",
items:[{
xtype:"textfield",
fieldLabel:"作者",
width:220
}]
}]
},{
layout:"column",
items:[{
columnWidth:.6,
layout:"form",
items:[
new Ext.form.ComboBox({
fieldLabel: '文章栏目',
hiddenName:"type",
store:store ,
valueField:'cid',
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择文章类型 ...',
selectOnFocus:true,
width:290
})
]
}]
},{
layout:"column",
items:[{
columnWidth:.8,
layout:"form",
items:[
new Ext.form.TextField({
name:"picture",
inputType:"file",
fieldLabel:"文章图片：",
width:290
})
]
}]
},{
layout:"column",
items:[{
columnWidth:1,
layout:"form",
items:[{
xtype:'textarea',
fieldLabel: "文章内容",
name: "info",
width: 800,
height: 400}]
}]
}]
});

// explicit add
var submit = fs.addButton({
text: 'Submit',
disabled:true,
handler: function(){
fs.getForm().submit({url:'xml-errors.xml', waitMsg:'Saving Data...', submitEmptyText: false});
}
});

fs.render('article_add');
var oFCKeditor = new FCKeditor( "info",810,350 ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ToolbarSet = 'Default';
oFCKeditor.ReplaceTextarea() ;
fs.on({
actioncomplete: function(form, action){
if(action.type == 'load'){
submit.enable();
}
}
});

});