Extjs4整合CKEditor富文本编辑器

项目中有个新闻管理模块，需要富文本编辑器，用的前端框架是Extjs mvc，网上搜了很多资料，尝试了很多方法，效果都不理想，最后自己参考ckeditor里面的示例达到了想要的效果，记录于此以便以后用到，也希望能够帮到需要的网友，有什么不恰当的地方望大家批评指正。

前端界面代码如下

/**
 * 新闻表单
 */
Ext.define('Redare.view.news.NewsFormView',{
    extend:'Ext.form.Panel',
    alias:'widget.NewsFormView',
    border:false,
    layout:'anchor',
    //显示formpanel type=0 添加 type=1 修改
    showFormPanel:function(title,type,typeId,newsId,url){
        this.typeId = typeId;
        this.newsId = newsId;
        this.url = url;
        Ext.create('Ext.window.Window', {
            title: title,
            height: 500,
            width: 800,
            layout: 'fit',
            modal:true,
            items:this
        }).show();
        this.addCkEditor(type);

    },
    //添加富文本编辑器ckeditor
    addCkEditor:function(type){
        var me = this;
       // CKEDITOR.appendTo('newsckeditor');
        CKEDITOR.replace( 'newsckeditor',{
            height: 280,
            width:760,
            //如果选择字体样式等的弹出窗口被当前window挡住，就设置这个为一个较大的值
            baseFloatZIndex: 99999,
            //图片和flash都上传到这里
            filebrowserUploadUrl: '/news/upload'
        });
        CKEDITOR.instances["newsckeditor"].on("instanceReady", function () {
            if(type == 1){
                //如果是修改新闻信息，则先加载数据
                me.loadNewsInfo();
            }
        });
    },
    loadNewsInfo:function(){
        this.getLoader().load({
            params:{
                newsId:this.newsId
            }
        });
    },

    initComponent: function() {
        var me = this;
        var loader=ExtJsonDataLoader({
            url:'/news/detail',
            autoLoad:false,
            maskTarget:me
        },function(data){
            //alert(data.content);
            me.query('textfield[name=title]')[0].setValue(data.title);
            CKEDITOR.instances.newsckeditor.setData(data.content);
            me.query('hidden[name=filePath]')[0].setValue(data.contentPath);
        });
        Ext.applyIf(me, {
            loader:loader,
            defaults:{
                margin:'10 10 10 10',
                anchor:'100%'
            },
            items: [
                {
                    xtype:'hidden',
                    name:'filePath'
                },
                {
                    xtype: 'textfield',
                    name: 'title',
                    fieldLabel: '标题',
                    allowBlank: false,
                    labelAlign: 'right',
                    anchor:'90%',
                    labelWidth: 60
                },{
                    xtype:'panel',
                    autoScroll:true,
                    height:350,
                    widht:800,
                    border:false,
                    html:'<div id="newsckeditor" name="newsckeditor"></div>',
                    items:[
                        /*{
                            xtype: 'ckeditor',
                            allowBlank: false,
                            //fieldLabel: '内容',
                            //labelAlign: 'left',
                            name: 'content',
                            id:'newsckeditor',
                            allowBlank: true,
                            CKConfig: {
                                height: 280,
                                width:760,
                                //如果选择字体样式等的弹出窗口被当前window挡住，就设置这个为一个较大的值
                                baseFloatZIndex: 99999,
                                //图片和flash都上传到这里
                                filebrowserUploadUrl: '/news/upload'
                            }
                        }*/
                    ]
                }
            ],
            buttons: [
                {
                    text: '保存',
                    name: 'newsSubmitBtn',
                    formBind: true
                }
            ]
        });
        me.callParent(arguments);
    }

});

效果如图

图片上传的后台代码如下：

@RequestMapping(value = "/upload",method = RequestMethod.POST)
@ResponseBody
public Object uploadFile(
        @RequestParam(value = "upload",required = true) MultipartFile file,
        @RequestParam(value = "CKEditorFuncNum",required = true) String CKEditorFuncNum,
        HttpServletResponse response,
        HttpSession session
){
    String fileName = System.currentTimeMillis()+file.getOriginalFilename();
    String httpImgPath = contentHttpPath + "/images/" + getLoginUserInfo(session).getUserName() + "/"+fileName;
    String filePath = contentRootPath + "/images/" + getLoginUserInfo(session).getUserName() + "/"+fileName;
    File fileReal = new File(filePath);
    if (!fileReal.getParentFile().exists()){
        fileReal.getParentFile().mkdirs();
    }
    try{
        file.transferTo(fileReal);
        OutputStream outputStream = response.getOutputStream();
        String s = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+", '"+httpImgPath+"');</script>";
        byte[] bt = s.getBytes();
        outputStream.write(bt);
        outputStream.close();
    }catch (IOException ex){
        logger.error("图片上传失败！",ex);
    }

    return null;
}

在后台代码中，主要看outputStream.write(bt)的内容就可以了，其他都是文件上传。