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();
            }
        }
    });

});