扩展ExtJs 4.2.1 htmleditor 添加图片功能

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

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

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

感谢一个人：

马平川，cr10210206@163.com

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356

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);     } });

　　像这样引用：

?

1 2 3 4 5 6 7 8 9 10

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

　　

总结：

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

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