.Extjs HtmlEditor扩展插入图片功能

2009年开始接触Extjs的时候，就发现其HtmlEditor少了一个插入图片功能，于是同事在网上找了个扩展了的代码使用了起来！当时刚刚接触的时候，直接就拿来用的，也没仔细看代码！  后来经常更新Exjts类库的版本，有天竟然把改ux代码给丢了，昨天客户还找我们说，怎么在通知通告功能中发送消息插入不了图片！才恍然大悟，原来把以前扩展的功能丢了,不知道现在Extjs的新版本是否还有这个功能，但是已经使用过低版本的，如果没有改功能，扩展一下也是需要的！

还是先看效果吧：

 

以下是扩展代码：

 

/*

* ExtendBy:xuzhihong

* CreateDate:2011-01-28

* Description: HTMLEditor

* 增加插入图片功能

*/

 

 

HTMLEditor = Ext.extend(Ext.form.HtmlEditor,

{

    addImage: function() {

        var editor = this;

        var imgform = new Ext.FormPanel(

        {

            region: 'center',

            labelWidth: 55,

            bodyStyle: 'padding:20px 5px 0',

            autoScroll: true,

            border: false,

            buttonAlign: 'center',

            fileUpload: true,

            items: [

            {

                xtype: 'textfield',

                fieldLabel: '选择文件',

                name: 'Pic',

                inputType: 'file',

                allowBlank: false,

                blankText: '文件不能为空',

                height: 25,

                anchor: '90%'

}],

                buttons: [

            {

                text: '插入',

                type: 'submit',

                handler: function() {

                    if (!imgform.form.isValid()) {

                        return;

                    }

                    var photo = imgform.form.items.items[0].getValue();

                    var fileext = photo.substring(photo.lastIndexOf("."), photo.length).toLowerCase();

                    if (fileext != '.jpg' && fileext != '.gif' && fileext != '.jpeg' && fileext != '.png' && fileext != '.bmp') {

                        imgform.form.items.items[0].setValue('');

                        Ext.Msg.show(

                        {

                            title: '提示',

                            icon: 'ext-mb-error ',

                            width: 300,

                            msg: '对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢！',

                            buttons: Ext.MessageBox.OK

                        });

                        return;

                    }

                    imgform.form.submit(

                    {

                        waitMsg: '图片正在插入..',

                        url: editor.url + "?sign=HTMLEditor", //点击插入执行的方法,将图片保存到服务器上

                        success: function(form, action) {

                            var element = document.createElement("img");

                            element.src = action.result.data; //action.result.data "\HtmlEditorPics\abc.jpg （gsr.data）

                            if (Ext.isIE) {

                                editor.insertAtCursor(element.outerHTML);

                            }

                            else {

                                var selection = editor.win.getSelection();

                                if (!selection.isCollapsed) {

                                    selection.deleteFromDocument();

                                }

                                selection.getRangeAt(0).insertNode(element);

                            } //element <img src="\HtmlEditorPics\abc.jpg"/>

                            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.hide();

                }

}]

            });

            var win = new Ext.Window(

        {

            title: "插入图片",

            width: 400,

            height: 150,

            plain: true,

            modal: true,

            closeAction: 'hide',

            border: false,

            layout: "fit",

            items: imgform

        });

            win.show(this);

        },

        createToolbar: function(editor) {

            HTMLEditor.superclass.createToolbar.call(this, editor);

            this.tb.insertButton(16,

        {

            cls: "x-btn-icon",

            iconCls: "ico_insertPicture",

            handler: this.addImage,

            scope: this

        });

        }

    });

    Ext.reg('EditorEx', HTMLEditor);

 

 

 

 

在js代码中使用：

 

{

             xtype: "EditorEx",

             anchor: "98%",

             name: 'FContent',

             fieldLabel: "内容",

             height: 320,

             width: 300,

             url: '/PicUpLoad.aspx'

   }

 

其中xtype: "EditorEx",url: '/PicUpLoad.aspx' 其中xtype就是我们扩展的，url为Ajax 请求路径：

PicUpLoad.aspx.cs后台方法返回一个图片路径（存储在gsr.data中）

        ///<summary>

        /// HTMLEditor插入图片

        ///</summary>

        privatevoidHTMLEditor()

        {

            HttpPostedFilehpf = Request.Files["Pic"];

            GSReturngsr = newGSReturn();

            if (hpf.ContentLength > 0)

            {

                stringfileName = ReportCommon.AddDateDateTimeAfter("", "") + System.IO.Path.GetExtension(hpf.FileName);

                stringfileSavePath = "/HtmlEditorPics/" + fileName;

                fileSavePath = System.Web.HttpContext.Current.Server.MapPath(fileSavePath);

                //保存文件

                hpf.SaveAs(fileSavePath);

                gsr.success = true;

                gsr.data = "/HtmlEditorPics/" + fileName;

            }

            stringstr = JSSerialize.Serialize(gsr);

            Response.Write(str);

            Response.End();

        }

 

 

 

 扩展原理很简单，自己看代码吧！