首先要使用extjs自带的HTMLEditor，然后在原有的工具条上添加一个图片按钮，点击这个图片按钮要弹出窗口，这个窗口负责实现上传功能，实现上传后，要将上传的图片路径添加到 HTMLEditor 的光标处，并且要以<IMG></IMG>的方式，这样 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上传图片功能。
如图：
Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸，用原生js开发的，轻量级，包含html跟css，不到8kb。点此链接体验： https://teojs.github.io/clipic/
https://github.com/teojs/clipic
参数说明
width:Number (默认：500) – 裁剪宽度
height:Number (默认：500) – 裁剪高度
ratio:Number (可选) – 裁剪的比例，当传入ratio时width/height将无效
src:String (必传) – 需要裁剪的图片，可以是图片链接，或者 base64
type:String (默认：jpeg) – 裁剪后图片的类型，仅支持 jpeg/png 两种
quality:Number (默认：0.9) – 压缩质量
buttonText:Array (默认：[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本
http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0
