extjs 的htmleditor 实现上传图片

最近用Extjs做项目，用到htmleditor控件，唯一的缺陷是不可以上传图片，为了以后方便，在基于htmleditor控件上写了一个支持上传图片的。

控件StarHtmleditor

 

/**
 * 重载EXTJS-HTML编辑器
 * 
 * @class HTMLEditor
 * @extends Ext.form.HtmlEditor
 * @author wuliangbo
 */
HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
    addImage : function() {
        var editor = this;
        var imgform = new Ext.FormPanel({
            region : 'center',
            labelWidth : 55,
            frame : true,
            bodyStyle : 'padding:5px 5px 0',
            autoScroll : true,
            border : false,
            fileUpload : true,
            items : [{
                        xtype : 'textfield',
                        fieldLabel : '选择文件',
                        name : 'userfile',
                        inputType : 'file',
                        allowBlank : false,
                        blankText : '文件不能为空',
                        height : 25,
                        anchor : '90%'
                    }],
            buttons : [{
                text : '上传',
                type : 'submit',
                handler : function() {
                    if (!imgform.form.isValid()) {return;}
                    imgform.form.submit({
                        waitMsg : '正在上传',
                        url : 'Default.aspx',
                        success : function(form, action) {
                            var element = document.createElement("img");
                            element.src = action.result.fileURL;
                            if (Ext.isIE) {
                                editor.insertAtCursor(element.outerHTML);
                            } else {
                                var selection = editor.win.getSelection();
                                if (!selection.isCollapsed) {
                                    selection.deleteFromDocument();
                                }
                                selection.getRangeAt(0).insertNode(element);
                            }
                            win.hide();
                        },
                        failure : function(form, action) {
                            form.reset();
                            if (action.failureType == Ext.form.Action.SERVER_INVALID)
                                Ext.MessageBox.alert('警告',
                                        action.result.errors.msg);
                        }
                    });
                }
            }, {
                text : '关闭',
                type : 'submit',
                handler : function() {
                    win.close(this);
                }
            }]
        })

        var win = new Ext.Window({
                    title : "上传图片",
                    width : 300,
                    height : 200,
                    modal : true,
                    border : false,
                    iconCls : "picture.png",
                    layout : "fit",
                    items : imgform

                });
        win.show();
    },
    createToolbar : function(editor) {
        HTMLEditor.superclass.createToolbar.call(this, editor);
        this.tb.insertButton(16, {
                    cls : "x-btn-icon",
                    icon : "picture.png",
                    handler : this.addImage,
                    scope : this
                });
    }
});
Ext.reg('StarHtmleditor', HTMLEditor);

 

页面js代码

Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    var ff = new Ext.FormPanel({
                title : "文件上传",
                renderTo : document.body,
                width : 600,
                height : 480,
                labelWidth : 55,
                frame : true,
                items : [{
                            xtype : "textfield",
                            name : "title",
                            fieldLabel : "标题",
                            anchor : "98%"
                        }, {
                            xtype : "combo",
                            name : "topic_id",
                            fieldLabel : "所属栏目",
                            anchor : "98%"
                        }, {
                            xtype : "textfield",
                            name : "keywords",
                            fieldLabel : "关键字",
                            anchor : "98%"
                        }, {
                            xtype : "StarHtmleditor",
                            name : "content",
                            fieldLabel : "内容",
                            anchor : "98%"
                        }]
    });

});

 

 

 后台代码简单实现了一下

 protected void Page_Load(object sender, EventArgs e)
        {
            string fileName = string.Empty;
            string fileURL = string.Empty;
            string rt = string.Empty;
            try
            {
                HttpPostedFile file = Request.Files[0];
                fileName = GetFileName(file.FileName);
                file.SaveAs(Server.MapPath("upload\\") + fileName);
                fileURL = "upload/" + fileName;
                rt = "{success:'true',fileURL:'" + fileURL + "'}";
            }
            catch
            {
                rt = "{success:'false',fileURL:'" + fileURL + "'}";
            } 
             
            Response.Write(rt);

        }
        
        private string GetFileName(string FullName)
        {
            string fileName = string.Empty;
            int last = FullName.LastIndexOf(@"\");
            fileName = FullName.Substring(last + 1, FullName.Length - last - 1);
            return fileName;
        }

 

实现效果如下 

 项目文件下载