extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能

首先要使用extjs自带的HTMLEditor，然后在原有的工具条上添加一个图片按钮，点击这个图片按钮要弹出窗口，这个窗口负责实现上传功能，实现上传后，要将上传的图片路径添加到 HTMLEditor 的光标处，并且要以的方式，这样 HTMLEditor 才能解析出来。实现代码如下：

前台JSP页面

fieldLabel : '商品特性',
id : 'shopSp.spTxms', 

name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'

这其中引用了StarHtmleditor，StarHtmleditor.js的代码如下，直接将代码复制下来，然后新建个JS，全复制进去就行了。

var 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 : '选择文件',
                       id : 'UserFile',
                       name : 'UserFile',
                       inputType : 'file',
                       allowBlank : false,
                       blankText : '文件不能为空',
                       anchor : '90%'
                   }],
           buttons : [{
               text : '上传',
               handler : function() {
                   if (!imgform.form.isValid()) {return;}
                   imgform.form.submit({
                       waitMsg : '正在上传......',
                       url : 'HTMLEditorAddImgCommonAction.action',
                       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();//原始方法，但只能传一个图片
                           //更新后的方法
                           form.reset();
        win.close();
                       },
                       failure : function(form, action) {
                           form.reset();
                           if (action.failureType == Ext.form.Action.SERVER_INVALID)
                               Ext.MessageBox.alert('警告','上传失败',action.result.errors.msg);
                       }
                   });
               }
           }, {
               text : '关闭',
               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的第一句 var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 网上是没有var的，不用var不知道为什么总是报错，另外JS一定要与JSP的编码方式一致，要不然报莫名其妙的错误，而且错误都没有显示。

后台java代码

/****
* HTMLEditor增加上传图片功能：
* 1、上传图片后，需要将图片的位置及图片的名称返回给前台HTMLEditor
* 2、前台HTMLEditor根据返回的值将图片显示出来
* 3、进行统一保存
* @param 上传图片功能
* @return JSON结果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\\\", "/").substring(path.toString().replaceAll("\\\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}

特别要注意的是路径问题，路径问题主要有2点需要注意：

1、前台页面引用 StarHtmleditor.js 的路径一定要正确；

2、 Htmleditor上传的图片路径一定要改，因为上传之后图片路径变为http://localhost:8080/，在正常使用中图片不显示，要将该地址替换为服务器的IP地址；替换方法如下：

//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题，需要将路径替换为本机IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));

这样基本就完成了这个HTMLEditor上传图片功能。

如图：