ext学习之fckeditor的使用

1.下载fckeditor的包。http://ckeditor.com 官网.
我就直接进入下载与java关联的一个项目.
https://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/

 
直接将其一个demo下载下来..

2.打开fckeditor-java-demo-2.6.war.zip这个包.使用eclipse建立一个项目叫做fckeditordemo.然后将其文件夹下的所有数据都复制到WebContent下面 
 

3.将项目部署入tomcat访问..http://localhost:8080/fckeditordemo/index.jsp
将会出现一个demo。你可以点击图片上传进行图片的管理.. 
 

4.确认了fckeditor可以使用了之后.我们就要使用到ext来调用了.首先在eclipse下面建立一个js文件.把ext2或者3存放到下面.然后建立KnowledgeManager文件夹.下面就是建立自己的js
KnowlegeForm.js。使用晚上的demo修改的.下面也是网上搜到最多的例子.个人觉得有点麻烦.

Java代码
var KnowledgeForm = function(_title) {   
    return this.setup();   
};   
  
KnowledgeForm.prototype.setup = function() {//内容初始化.   
var fckeditorFormPanel = new Ext.FormPanel({   
        labelWidth: 75,    
        url:'',   
        frame:true,   
        title: 'fckeditorForm',   
        bodyStyle:'padding:5px 5px 0',   
        width: 950,   
        height:450,   
          defaultType: 'textfield',   
            items:[   
                {   
                    fieldLabel:'知识标题',   
                    name:'knowledgeTitle',   
                    blankText: '知识标题为必填!',   
                    id:'knowledgeTitle'  
                },   
                {   
                    fieldLabel:'知识内容',   
                    xtype:'textarea',   
                    name:'knowledgeContent',   
                    blankText: '知识内容为必填!',   
                    id:'knowledgeContent'  
                }   
                ],   
        buttons: [{   
            text: 'Save',   
            type:'submit',   
            handler: function() {   
                Ext.get('knowledgeContent').dom.value=editorInstance.GetXHTML( true );//获取fckeditor内容赋给textarea   
                alert(Ext.get('knowledgeContent').dom.value);   
                if(fckeditorFormPanel.form.isValid()){//验证通过   
                    fckeditorFormPanel.form.doAction('submit',{   
                          url:'submit.do',   
                          method:'post',   
                          waitMsg:'正在提交,请稍等...',   
                          success:function(form,action){//成功返回     
                                   
                          },   
                          failure:function(form,action){//失败返回   
                                 
                          }   
                    });   
                }   
            }   
        },{   
            text: 'Cancel'  
        }]   
    });     
    fckeditorFormPanel.render(document.body);   
    /**  
         * 以下创建在线编辑器  
         */  
  //knowledgeContent为你要取代的textarea的id名字   
    var oFCKeditor = new FCKeditor( 'knowledgeContent',810,350 ) ;    
    oFCKeditor.BasePath = "/fckeditordemo/fckeditor/" ; //:项目的名字/fckeditor存放的路径   
    oFCKeditor.ToolbarSet = 'Default';//使用默认的工具栏   
    oFCKeditor.ReplaceTextarea() ;//取代textarea   
}   
var editorInstance;   
/**  
 * FCKEditor初始化完成将调用此方法  
 * @param {Object} editorInstance  
 */  
function FCKeditor_OnComplete( instance ) {   
    editorInstance=instance;   
};  
 
demo.jsp

Java代码
   <link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" />   
<script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script>   
   <script type="text/javascript" src="js/ext2/ext-all.js"></script>    
   <script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script>   
<!--   
<link rel="stylesheet" type="text/css" href="styles.css">   
-->   
<script type="text/javascript" src="fckeditor/fckeditor.js"></script><!-- 上线编辑工具 -->   
   <script type="text/javascript" src="js/KnowledgeManager/KnowlegeForm.js"></script>   
    <script type="text/javascript">   
    Ext.onReady(function(){   
     new KnowledgeForm("部门添加");   
     });   
    </script>  
 

下面是一个在ext官网的一个例子
http://www.extjs.com/forum/showthread.php?t=17423
他封装了一个ext.FCKeditor.js.

Java代码
Ext.form.FCKeditor = function(config){   
    Ext.form.FCKeditor.superclass.constructor.call(this, config);   
    this.FCKid=0;   
    this.MyisLoaded=false;   
    this.MyValue='';   
};   
  
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);   
        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);   
        }   
        if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()   
        setTimeout("loadFCKeditor('"+this.name+"');",100);   
    },   
    setValue : function(value){   
        this.MyValue=value;   
        if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()   
        FCKeditorSetValue(this.FCKid,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(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(this);   
        }else{   
            return this.MyValue;   
        }   
    }   
});   
Ext.reg('fckeditor', Ext.form.FCKeditor);   
  
  
function loadFCKeditor(element){   
    oFCKeditor = new FCKeditor( element ) ;   
    oFCKeditor.ToolbarSet = sFCKeditorToolbar ;   
    oFCKeditor.Config['SkinPath'] = sFCKeditorSkinPath ;   
    oFCKeditor.Config['PreloadImages'] = sFCKeditorSkinPath + 'images/toolbar.start.gif' + ';' +   
                sFCKeditorSkinPath + 'images/toolbar.end.gif' + ';' +   
                sFCKeditorSkinPath + 'images/toolbar.bg.gif' + ';' +   
                sFCKeditorSkinPath + 'images/toolbar.buttonarrow.gif' ;   
    oFCKeditor.BasePath = sFCKeditorBasePath ;   
    oFCKeditor.Config['BaseHref']   = sFCKeditorBaseHref ;   
    oFCKeditor.Height = 260 ;   
    oFCKeditor.ReplaceTextarea() ;   
  
}   
function FCKeditor_OnComplete(editorInstance){   
  
    Ext.getCmp(editorInstance.Name).MyisLoaded=true;   
  
    editorInstance.Events.AttachEvent('OnStatusChange', function(){   
        Ext.getCmp(editorInstance.Name).setValue();   
    })   
}   
var FCKeditor_value=new Array();   
function FCKeditorSetValue(id,name,value){   
    if ((id!=undefined)&&(name!=undefined)){   
        if (value!=undefined) FCKeditor_value[id]=value;   
        else if (FCKeditor_value[id]==undefined) FCKeditor_value[id]='';   
        var oEditor = FCKeditorAPI.GetInstance(name) ;   
           
        if(oEditor!=undefined) oEditor.SetData(FCKeditor_value[id])   
    }   
}   
function FCKeditorGetValue(name){   
    if ((id!=undefined)&&(name!=undefined)){   
        var oEditor = FCKeditorAPI.GetInstance(name) ;   
        data='';   
        if(oEditor!=undefined) data=oEditor.GetData()   
        return data;   
    }   
}   
var FCKeditor_id_value;   
function get_FCKeditor_id_value(){   
    if (!FCKeditor_id_value){   
        FCKeditor_id_value=0;   
    }   
    FCKeditor_id_value=FCKeditor_id_value+1;   
    return FCKeditor_id_value;  

可以直接使用

Java代码
{   
    xtype:'fckeditor',   
    name:'content_1',   
    id:'content_1',   
    fieldLabel:'Content',   
    height:270  
 
KnowlegeForm2.js

Java代码
var KnowledgeForm = function(_title) {   
    return this.setup();   
};   
  
KnowledgeForm.prototype.setup = function() {//内容初始化.   
var fckeditorFormPanel = new Ext.FormPanel({   
        labelWidth: 75,    
        url:'',   
        frame:true,   
        title: 'fckeditorForm',   
        bodyStyle:'padding:5px 5px 0',   
        width: 950,   
        height:450,   
          defaultType: 'textfield',   
            reader: new Ext.data.JsonReader(   
                    {   
                    root:'data'  
                    },   
                    [   
                         {name:'knowledgeId',mapping:'knowledgeId'}   
                        ,{name:'knowledgeTitle',mapping:'knowledgeTitle'}   
                        ,{name:'knowledgeContent',mapping:'knowledgeContent'}   
                    ]   
                    ),   
               
            defaults: {   
                anchor: '95%,95%',   
                allowBlank: false,   
                selectOnFocus: true,   
                msgTarget: 'side',   
                width: 150  
            },   
            items:[{   
                    xtype:'hidden'  
                    ,name:'knowledgeId'  
                    ,id:'knowledgeId'  
                },   
                {   
                    fieldLabel:'知识标题',   
                    name:'knowledgeTitle',   
                    blankText: '知识标题为必填!',   
                    id:'knowledgeTitle'  
                },   
                {   
                    fieldLabel:'知识内容',   
                    xtype:'fckeditor',   
                    name:'knowledgeContent',   
                    blankText: '知识内容为必填!',   
                    id:'knowledgeContent'  
                }   
                ],   
        buttons: [{   
            text: 'Save',   
            type:'submit',   
            handler: function() {   
                alert(Ext.get('knowledgeContent').dom.value);   
                if(fckeditorFormPanel.form.isValid()){//验证通过   
                    fckeditorFormPanel.form.doAction('submit',{   
                          url:'submit.do',   
                          method:'post',   
                          waitMsg:'正在提交,请稍等...',   
                          success:function(form,action){//成功返回     
                                   
                          },   
                          failure:function(form,action){//失败返回   
                                 
                          }   
                    });   
                }   
            }   
        },{   
            text: 'Cancel'  
        }]   
    });    
    return fckeditorFormPanel;    
} 

demo2.jsp

Java代码
   <link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" />   
<script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script>   
   <script type="text/javascript" src="js/ext2/ext-all.js"></script>    
   <script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script>   
<!--   
<link rel="stylesheet" type="text/css" href="styles.css">   
-->   
<script type="text/javascript" src="fckeditor/fckeditor.js"></script><!-- 上线编辑工具 -->   
   <script type="text/javascript" src="js/KnowledgeManager/ext.FCKeditor.js"></script>   
   <script type="text/javascript" src="js/KnowledgeManager/KnowlegeForm2.js"></script>   
    <script type="text/javascript">   
    Ext.onReady(function(){   
     new KnowledgeForm("部门添加");   
     });   
    </script>  
 
如果想使用的fckeditor比较符合ext风格.可以修改feckeditor里面的fckconfig.js.
将FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;该我为FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;.这里它显示将是office2003的风格
转自：http://dtfy56924.javaeye.com/blog/581749