Extjs4整合CKEditor富文本编辑器

来源：互联网发布：中央财政转移支付数据编辑：程序博客网时间：2024/06/14 02:42

项目中有个新闻管理模块，需要富文本编辑器，用的前端框架是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)@ResponseBodypublic 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)的内容就可以了，其他都是文件上传。

0 0