Extjs4.2 Html编辑器扩展
目的：
扩展Extjs4.2的htmleditor，添加 “上传图片”，”上传附件”等功能。
效果图：
调用方法：
{
            xtype : 'htmleditor',
            name : 'content',
            fieldLabel : '公告内容',
            height : 350,
            plugins : [
                ate('form.HtmlEditorImage'),
                ate('form.HtmlEditorAttachment')
            ]
}
具体实现：
HtmlEditorImage.js
/**
* @Description    Html编辑器 插入图片控件
* @author        张川(cr10210206@163)
*/
Ext.define('form.HtmlEditorImage', {
    extend: 'Ext.util.Observable',
    alias: '_form_HtmlEditorImage',
    langTitle : '插入图片',
    langIconCls : 'heditImgIcon',
    init : function(view) {
        var scope = this;
        ('render', function(){
            Render(view);
        });
    },
   
    /**
    * 添加"插入图片"按钮
    * */
    onRender : function(view) {
        var scope = this;
        Toolbar().add({
            iconCls : scope.langIconCls,
            tooltip : {
                title : scope.langTitle,
                width : 60
            },
            handler : function(){
                scope.showImgWindow(view);
            }
        });
    },
   
    /**
    * 显示"插入图片"窗体
    * */
    showImgWindow : function(view){
        var scope = this;
        ate('Ext.window.Window',{
            width : 400,
            height : 280,
            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 : 60,
                            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',
                            iconCls : 'saveIcon',
                            handler : function(btn){
                                scope.saveUploadImg(btn,view);
                            }
                        },{
                            text : '取消',
                            iconCls : 'cancelIcon',
                            handler : function(btn){
                                btn.up('window').close();
                            }
                        }]
                    }]
                },{
                    title : '链接网络图片',
                    items : [{
                        xtype : 'form',
                        layout : 'column',
                        autoScroll : true,
                        border : false,
                        defaults : {
                            columnWidth : 1,
                            labelWidth : 60,
                            labelAlign : 'right',
                            padding: '5 5 5 5',
                            allowBlank : false
                        },
                        items : [{
                            xtype : 'textfield',editor bar
                            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 : '简短的图片说明'
                        }],
                        buttons : [{
                            text : '保存',
                            action : 'btn_save',
                            iconCls : 'saveIcon',
                            handler : function(btn){
                                scope.saveRemoteImg(btn,view);
                            }
                        },{
                            text : '取消',
                            iconCls : 'cancelIcon',
                            handler : function(btn){
                                btn.up('window').close();
                            }
                        }]
                    }]
                }]
            }]
        });
    },
    /**
    * 上传图片验证
    **/
    uploadImgCheck : function(fileObj,fileName){
        var scope = this;
        //图片类型验证
        if(!(ImgHZ(fileName)))){
            Ext.MessageBox.alert('温馨提示','上传图片类型有误');
            set();//清空上传内容
            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() + '/bdata_Thtmleditor_getUploadImage.action',
                method : 'POST',
                submitEmptyText : false,
                waitMsg : '正在上传图片,请稍候...',
                timeout : 60000, // 60s
                success : function(response, options){
                    var result = sult;
                    if(!result.success){
                        Ext.MessageBox.alert('温馨提示',result.msg);
                        return;
                    }
                    scope.insertImg(view,result.data);
                    windowObj.close();//关闭窗体
                },
                failure : function(response, options){
                    Ext.MessageBox.alert('温馨提示',sult.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 = Values();//获取Form表单的值
            scope.insertImg(view,values);
            windowObj.close();//关闭窗体
        }
    },
   
    /**
    * 插入图片
    * */
    insertImg : function(view,data){
        var url = data.url;
        var content = t;
        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);
    }
});
HtmlEditorAttachment.js
/**
* @Description    Html编辑器 插入附件控件
* @author        张川(cr10210206@163)
*/
Ext.define('form.HtmlEditorAttachment', {
    extend: 'Ext.util.Observable',
    alias: '_form_HtmlEditorAttachment',
    langTitle : '插入附件',
    langIconCls : 'attachmentIcon',
    init : function(view) {
        var scope = this;
        ('render', function(){
            Render(view);
        });
    },
   
    /**
    * 添加"插入附件"按钮
    * */
    onRender : function(view) {
        var scope = this;
        Toolbar().add({
            iconCls : scope.langIconCls,
            tooltip : {
                title : scope.langTitle,
                width : 60
            },
            handler : function(){
                scope.showAttachmentWindow(view);
            }
        });
    },
   
    /**
    * 显示"插入附件"窗体
    * */
    showAttachmentWindow : function(view){
        var scope = this;
        ate('Ext.window.Window',{
            width : 400,
            height : 315,
            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 : 'panel',
                bodyPadding : '1 1 1 1',
                items : [{
                    xtype : 'form',
                    layout : 'column',
                    autoScroll : true,
                    border : false,
                    defaults : {
                        columnWidth : 1,
                        labelWidth : 60,
                        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.uploadAttachmentCheck(view,value);
                            }
                        }
                    },{
                        xtype : 'textfield',
                        fieldLabel : '附件名称',
                        name : 'fileName',
                        id : 'zc_form_HtmlEditorAttachment_form_fileName',
                        maxLength : 50,
                        emptyText : '请输入附件名称',
                        blankText : '附件名称不能为空'
                    },{
                        xtype : 'textfield',
                        fieldLabel : '附件说明',
                        name : 'content',
                        id : 'zc_form_HtmlEditorAttachment_form_content',
                        allowBlank : true,
                        maxLength : 100,
                        emptyText : '简短的附件说明'
                    },{
                        columnWidth : 1,
                        xtype:'fieldset',
                        title: '上传须知',
                        layout: {
                            type: 'table',
                            columns: 3
                        },
                        collapsible: false,//是否可折叠
                        defaultType : 'label',//默认的Form表单组件
                        items : [{
                            html: '1.上传文档不超过100KB',
                            colspan: 3
                        },{
                            html : '2.为了保证文档能正常使用，我们支持以下格式的文档上传',
                            colspan: 3
                        },{
                            html : '   ',
                            rowspan: 5
                        },{
                            html : 'MS Office文档：',
                            colspan: 1,
                            tdAttrs : {
                                align : 'right'
                            }
                        },{
                            html : 'doc,docx,ppt,pptx,xls,xlsx,vsd,pot,pps,rtf',
                            colspan: 1
                        },{
                            html : 'WPS office系列：',
                            colspan: 1,
                            tdAttrs : {
                                align : 'right'
                            }
                        },{
                            html : 'wps,et,dps',
                            colspan: 1
                        },{
                            html : 'PDF：',
                            colspan: 1,
                            tdAttrs : {
                                align : 'right'
                            }
                        },{
                            html : 'pdf',
                            colspan: 1
                        },{
                            html : '纯文本：',
                            colspan: 1,
                            tdAttrs : {
                                align : 'right'
                            }
                        },{
                            html : 'txt',
                            colspan: 1
                        },{
                            html : 'EPUB：',
                            colspan: 1,
                            tdAttrs : {
                                align : 'right'
                            }
                        },{
                            html : 'epub',
                            colspan: 1
                        }]
                    }],
                    buttons : [{
                        text : '保存',
                        action : 'btn_save',
                        iconCls : 'saveIcon',
                        handler : function(btn){
                            scope.saveUploadAttachment(btn,view);
                        }
                    },{
                        text : '取消',
                        iconCls : 'cancelIcon',
                        handler : function(btn){
                            btn.up('window').close();
                        }
                    }]
                }]
            }]
        });
    },
    /**
    * 插入附件验证
    **/
    uploadAttachmentCheck : function(fileObj,fileName){
        var scope = this;
        var fileNameObj = Cmp('zc_form_HtmlEditorAttachment_form_fileName');
        var contentObj = Cmp('zc_form_HtmlEditorAttachment_form_content');
        //附件类型验证
        if(!(AttachmentHZ(fileName)))){
            Ext.MessageBox.alert('温馨提示','上传附件类型有误');
            //清空插入内容
            set();
            fileNameObj.setValue('');
            contentObj.setValue('');
            return;
        }
        //设置默认的文件名称
        var defaultFileName = fileName.substr(0,fileName.lastIndexOf('.'));
        fileNameObj.setValue(defaultFileName);
        contentObj.setValue(defaultFileName);
    },
   
    /**
    * 获取附件后缀(小写)
    *
    * 例如：txt
    * */
    getAttachmentHZ : function(AttachmentName){
        //后缀
        var hz = '';
        //附件名称中最后一个.的位置
        var index = AttachmentName.lastIndexOf('.');
        if(index != -1){
            //后缀转成小写
            hz = AttachmentName.substr(index+1).toLowerCase();
        }
        return hz;
    },
   
    /**
    * 附件类型验证
    * */
    getAttachmentTypeCheck : function(hz){
        var typestr = 'doc,docx,ppt,pptx,xls,xlsx,vsd,pot,pps,rtf,wps,et,dps,pdf,txt,epub';
        var types = typestr.split(',');//附件类型
        for(var i = 0; i < types.length; i++){
            if(hz == types[i]){
                return true;
            }
        }
        return false;
    },
   
    /**
    * 插入附件
    * */
    saveUploadAttachment : 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() + '/bdata_Thtmleditor_getUploadAttachment.action',
                method : 'POST',
                submitEmptyText : false,
                waitMsg : '正在上传附件,请稍候...',
                timeout : 60000, // 60s
                success : function(response, options){
                    var result = sult;
                    if(!result.success){
                        Ext.MessageBox.alert('温馨提示',result.msg);
                        return;
                    }
                    scope.insertAttachment(view,result.data);
                    windowObj.close();//关闭窗体
                },
                failure : function(response, options){
                    Ext.MessageBox.alert('温馨提示',sult.msg);
                }
            });
        }
    },
   
    /**
    * 插入附件
    * */
    insertAttachment : function(view,data){
        var url = data.url;
        var fileName = data.fileName;
        var content = t;
        var str = ' <a  target="_blank" href="' + url + '" ';
        if(content != undefined && content != null && content != ''){
            str += ' title="'+content+'" ';
        }
        str += ' >'+fileName+'</a> ';
        view.insertAtCursor(str);
    }
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。