扩展ExtJs 4.2.1 htmleditor 添加图片功能

　　做项目的时候遇到这样一个问题，因为我是用ExtJs做的后台管理框架，所以当我使用ExtJs htmleditor 控件

的时候，发现没有图片上传的功能，于是我打算在网上找找有关的文章，居然真有人写过，不过可惜的是，不支持

ExtJs 4.2.1版本，所以我再搜索，终于被我找到了,现在将代码贴出，本着开源精神，我将代码开源，最后我想

感谢一个人：

马平川，cr10210206@163.com

正是他的奉献所以才完成这个功能的，非常感谢！

Ext.ns('zc');
/**
* 获取项目根路径
* */
zc.bp = function () {
    var curWwwPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    var localhostPath = curWwwPath.substring(0, pos);
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPath + projectName);
};
/**
* 获取小星星
* */
zc.getStar = function () {
    return '<span style="color:#FF0000;">*</span>';
};
/**
* @Description	Html编辑器 插入图片控件
* @author		张川(cr10210206@163.com)
*/
Ext.define('Ext.zc.form.HtmlEditorImage', {
    extend: 'Ext.util.Observable',
    alias: 'widget.zc_form_HtmlEditorImage',
    langTitle: '插入图片',
    langIconCls: 'heditImgIcon',
    init: function (view) {
        var scope = this;
        view.on('render', function () {
            scope.onRender(view);
        });
    },

    /**
    * 添加"插入图片"按钮
    * */
    onRender: function (view) {
        var scope = this;
        view.getToolbar().add({
            iconCls: scope.langIconCls,
            tooltip: {
                title: scope.langTitle,
                width: 60
            },
            handler: function () {
                scope.showImgWindow(view);
            }
        });
    },

    /**
    * 显示"插入图片"窗体
    * */
    showImgWindow: function (view) {
        var scope = this;
        Ext.create('Ext.window.Window', {
            width: 400,
            height: 305,
            title: scope.langTitle,
            layout: 'fit',
            autoShow: true,
            modal: true,
            resizable: false,
            maximizable: false,
            constrain: true,
            plain: true,
            enableTabScroll: true,
            //bodyPadding: '1 1 1 1',
            border: false,
            items: [{
                xtype: 'tabpanel',
                enableTabScroll: true,
                bodyPadding: '1 1 1 1',
                items: [{
                    title: '上传本地图片',
                    items: [{
                        xtype: 'form',
                        layout: 'column',
                        autoScroll: true,
                        border: false,
                        defaults: {
                            columnWidth: 1,
                            labelWidth: 70,
                            labelAlign: 'right',
                            padding: '5 5 5 5',
                            allowBlank: false
                        },
                        items: [{
                            xtype: 'fileuploadfield',
                            fieldLabel: '选择文件',
                            beforeLabelTextTpl: zc.getStar(),
                            buttonText: '请选择...',
                            name: 'upload',
                            emptyText: '请选择图片',
                            blankText: '图片不能为空',
                            listeners: {
                                change: function (view, value, eOpts) {
                                    scope.uploadImgCheck(view, value);
                                }
                            }
                        }, {
                            xtype: 'fieldcontainer',
                            fieldLabel: '图片大小',
                            layout: 'hbox',
                            defaultType: 'numberfield',
                            defaults: {
                                flex: 1,
                                labelWidth: 20,
                                labelAlign: 'right',
                                allowBlank: true
                            },
                            items: [{
                                fieldLabel: '宽',
                                name: 'width',
                                minValue: 1
                            }, {
                                fieldLabel: '高',
                                name: 'height',
                                minValue: 1
                            }]
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '图片说明',
                            name: 'content',
                            allowBlank: true,
                            maxLength: 100,
                            emptyText: '简短的图片说明'
                        }, {
                            columnWidth: 1,
                            xtype: 'fieldset',
                            title: '上传须知',
                            layout: {
                                type: 'table',
                                columns: 1
                            },
                            collapsible: false, //是否可折叠
                            defaultType: 'label', //默认的Form表单组件
                            items: [{
                                html: '1.上传图片不超过100KB'
                            }, {
                                html: '2.为了保证图片能正常使用，我们支持以下格式的图片上传'
                            }, {
                                html: '   jpg,jpeg,png,gif'
                            }]
                        }],
                        buttons: [{
                            text: '保存',
                            action: 'btn_save',
                            icon: '../../../Images/extjs/disk.png',
                            handler: function (btn) {
                                scope.saveUploadImg(btn, view);
                            }
                        }, {
                            text: '取消',
                            icon: '../../../Images/extjs/cross.png',
                            handler: function (btn) {
                                btn.up('window').close();
                            }
                        }]
                    }]
                }, {
                    title: '链接网络图片',
                    items: [{
                        xtype: 'form',
                        layout: 'column',
                        autoScroll: true,
                        border: false,
                        defaults: {
                            columnWidth: 1,
                            labelWidth: 70,
                            labelAlign: 'right',
                            padding: '5 5 5 5',
                            allowBlank: false
                        },
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: '图片地址',
                            beforeLabelTextTpl: zc.getStar(),
                            name: 'url',
                            emptyText: '请填入支持外链的长期有效的图片URL',
                            blankText: '图片地址不能为空',
                            vtype: 'remoteUrl'
                        }, {
                            xtype: 'fieldcontainer',
                            fieldLabel: '图片大小',
                            layout: 'hbox',
                            defaultType: 'numberfield',
                            defaults: {
                                flex: 1,
                                labelWidth: 20,
                                labelAlign: 'right',
                                allowBlank: true
                            },
                            items: [{
                                fieldLabel: '宽',
                                name: 'width',
                                minValue: 1
                            }, {
                                fieldLabel: '高',
                                name: 'height',
                                minValue: 1
                            }]
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '图片说明',
                            name: 'content',
                            allowBlank: true,
                            maxLength: 100,
                            emptyText: '简短的图片说明'
                        }, {
                            columnWidth: 1,
                            xtype: 'fieldset',
                            title: '上传须知',
                            layout: {
                                type: 'table',
                                columns: 1
                            },
                            collapsible: false, //是否可折叠
                            defaultType: 'label', //默认的Form表单组件
                            items: [{
                                html: '1.上传图片不超过100KB'
                            }, {
                                html: '2.为了保证图片能正常使用，我们支持以下格式的图片上传'
                            }, {
                                html: '   jpg,jpeg,png,gif'
                            }]
                        }],
                        buttons: [{
                            text: '保存',
                            action: 'btn_save',
                            icon: '../../../Images/extjs/disk.png',
                            handler: function (btn) {
                                scope.saveRemoteImg(btn, view);
                            }
                        }, {
                            text: '取消',
                            icon: '../../../Images/extjs/cross.png',
                            handler: function (btn) {
                                btn.up('window').close();
                            }
                        }]
                    }]
                }]
            }]
        });
    },

    /**
    * 上传图片验证
    **/
    uploadImgCheck: function (fileObj, fileName) {
        var scope = this;
        //图片类型验证
        if (!(scope.getImgTypeCheck(scope.getImgHZ(fileName)))) {
            Ext.MessageBox.alert('温馨提示', '上传图片类型有误');
            fileObj.reset(); //清空上传内容
            return;
        }
    },

    /**
    * 获取图片后缀(小写)
    * */
    getImgHZ: function (imgName) {
        //后缀
        var hz = '';
        //图片名称中最后一个.的位置
        var index = imgName.lastIndexOf('.');
        if (index != -1) {
            //后缀转成小写
            hz = imgName.substr(index + 1).toLowerCase();
        }
        return hz;
    },

    /**
    * 图片类型验证
    * */
    getImgTypeCheck: function (hz) {
        var typestr = 'jpg,jpeg,png,gif';
        var types = typestr.split(','); //图片类型
        for (var i = 0; i < types.length; i++) {
            if (hz == types[i]) {
                return true;
            }
        }
        return false;
    },

    /**
    * 上传图片
    * */
    saveUploadImg: function (btn, view) {
        var scope = this;
        var windowObj = btn.up('window'); //获取Window对象
        var formObj = btn.up('form'); //获取Form对象
        if (formObj.isValid()) { //验证Form表单
            formObj.form.doAction('submit', {
                url: zc.bp() + '/',
                method: 'POST',
                submitEmptyText: false,
                waitMsg: '正在上传图片,请稍候...',
                timeout: 60000, // 60s
                success: function (response, options) {
                    var result = options.result;
                    if (!result.success) {
                        Ext.MessageBox.alert('温馨提示', result.msg);
                        return;
                    }
                    scope.insertImg(view, result.data);
                    windowObj.close(); //关闭窗体
                },
                failure: function (response, options) {
                    Ext.MessageBox.alert('温馨提示', options.result.msg);
                }
            });
        }
    },

    /**
    * 保存远程的图片
    * */
    saveRemoteImg: function (btn, view) {
        var scope = this;
        var windowObj = btn.up('window'); //获取Window对象
        var formObj = btn.up('form'); //获取Form对象
        if (formObj.isValid()) {//验证Form表单
            var values = formObj.getValues(); //获取Form表单的值
            scope.insertImg(view, values);
            windowObj.close(); //关闭窗体
        }
    },

    /**
    * 插入图片
    * */
    insertImg: function (view, data) {
        var url = data.url;
        var content = data.content;
        var width = data.width;
        var height = data.height;
        var str = '<img src="' + url + '" border="0" ';
        if (content != undefined && content != null && content != '') {
            str += ' title="' + content + '" ';
        }
        if (width != undefined && width != null && width != 0) {
            str += ' width="' + width + '" ';
        }
        if (height != undefined && height != null && height != 0) {
            str += ' height="' + height + '" ';
        }
        str += ' />';
        view.insertAtCursor(str);
    }
});

　　像这样引用：

 {
                xtype: 'htmleditor',
                border: true,
                id: 'context',
                plugins: [
	        	    Ext.create('Ext.zc.form.HtmlEditorImage')
	            ],
                height: 400,
                anchor: '100%'
            }

　　

总结：

最后，就是将你上传的图片保存在服务器上，所以在“saveRemoteImg()”方法里的ajax提交的url

你们可以自行发挥想保存在哪，这个我就不多说了。