extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能 15
首先要使用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上传图片功能。
如图：
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 : '选择文件',
name : 'userfile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
height : 25,
anchor : '90%'
}],
buttons : [{
text : '上传',
type : 'submit',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传',
url : 'Default.aspx',
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();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告',
action.result.errors.msg);
}
});
}
}, {
text : '关闭',
type : 'submit',
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);
02.
03. alias: 'widget.myeditor',
04.
05. extend: 'Ext.form.field.HtmlEditor',
06.
07. requires: ['Ext.form.field.HtmlEditor'],
08.
09. createToolbar: function(){
10. var me = this;
11. me.callParent(arguments);
12. me.toolbar.insert(17, {
13. xtype: 'button',
14. icon: '/admin/extjs/resources/images/picture.png',
15. handler: this.showImgUploader,
16. scope: this
17. });
18. return me.toolbar;
19. },
20.
21. showImgUploader: function(){
22. var editor = this;
23. var imgform = Ext.create('Ext.tab.Panel', {
24. region: 'left',
25. border: false,
26. activeTab: 0,
27. items: [{
28. title: '本地图片',
29. icon: 'extjs/resources/images/computer.png',
30. layout: 'fit',
31. items: [{
32. xtype: 'form',
33. border: false,
34. bodyPadding:10,
35. items: [{
36. xtype: 'filefield',
37. labelWidth: 70,
38. fieldLabel: '图片',
39. buttonText: '浏览',
40. name: 'pic',
41. allowBlank: false,
42. blankText: '文件不能为空',
43. anchor: '100%'
44. }, {
45. xtype: 'textfield',
46. labelWidth: 70,
47. fieldLabel: '标题',
48. name: 'title',
49. allowBlank: false,
50. blankText: '标题不能为空',
51. anchor: '100%'
52. }, {
53. layout: 'column',
54. border: false,
55. items: [{
56. layout: 'form',
57. columnWidth:.36,
58. xtype: 'numberfield',
59. labelWidth: 70,
60. fieldLabel: '尺寸(宽x高)',
61. name: 'width'
62. },{
63. columnWidth:.05,
64. xtype: 'label',
65. html: ' px'
66. },{
67. layout: 'form',
68. xtype: 'numberfield',
69. columnWidth:.15,
70. name: 'height'
71. },{
72. columnWidth:.05,
73. xtype: 'label',
74. html: ' px'
75. }]
76. }],
77. dockedItems: [{
78. xtype: 'toolbar',
79. dock: 'bottom',
80. layout: { pack: 'end' },
81. items: [{
82. text: '上传',
83. formBind: true,
84. handler: function(obj) {
85. var f = obj.up('form');
86. if (!f.getForm().isValid()) {
87. return;
88. }
89. var vals = f.getForm().getValues();
90. f.submit({
91. waitMsg: '图片上传中..',
92. waitTitle: '提示',
93. url: editor.url, //点击插入执行的方法,将图片保存到服务器上
94. success: function(form, action) {
95. var element = document.createElement('img');
96. element.src = action.result.message;
97. if(vals.width>0 && vals.height>0){
98. element.width = vals.width;
99. element.height = vals.height;
100. }
101. if (Ext.isIE) {
102. editor.insertAtCursor(element.outerHTML);
103. } else {
104. var selection = editor.win.getSelection();
105. if (!selection.isCollapsed) {
106. selection.deleteFromDocument();
107. }
108. selection.getRangeAt(0).insertNode(element);
109. }
110. win.hide();
111. },
112. failure: function(form, action) {
113. form.reset();
114. if (action.failureType == Ext.form.action.Action.SERVER_INVALID){
115. Ext.MessageBox.show({
116. title: '错误',
117. msg: action.result.msg,
118. icon: Ext.MessageBox.ERROR,
119. buttons: Ext.Msg.OK
120. });
121. }
122. }
123. });
124. }
125. }, {
126. text: '取消',
127. handler: function() {
128. win.hide();
129. }
130. }]
131. }]
132. }]
133. }, {
134. title: '远程图片',
135. icon: 'extjs/resources/images/link.png',
136. layout: 'fit',
137. items: [{
138. xtype: 'form',
139. border: false,
140. bodyPadding:10,
141. items: [{
142. xtype: 'textfield',
143. vtype: 'url',
144. labelWidth: 70,
145. fieldLabel: '图片URL',
146. anchor: '100%',
147. name: 'pic',
148. allowBlank: false,
149. blankText: '图片URL不能为空'
150. }, {
151. layout: 'column',
152. border: false,
153. items: [{
154. layout: 'form',
155. columnWidth:.36,
156. xtype: 'numberfield',
157. labelWidth: 70,
158. fieldLabel: '尺寸(宽x高)',
159. name: 'width'
160. },{
161. columnWidth:.05,
162. xtype: 'label',
163. html: ' px'
164. },{
165. layout: 'form',
166. xtype: 'numberfield',
167. columnWidth:.15,
168. name: 'height'
169. },{
170. columnWidth:.05,
171. xtype: 'label',
172. html: ' px'
173. }]
174. }],
175. dockedItems: [{
176. xtype: 'toolbar',
177. dock: 'bottom',
178. layout: { pack: 'end' },
179. border: false,
180. items: [{
181. text: '添加',
182. formBind: true,
183. handler: function(obj) {
184. var f = obj.up('form');
185. if (!f.getForm().isValid()) {
186. return;
187. }
188. var vals = f.getForm().getValues();
189. var pic = vals.pic;
190. var fileext = pic.substring(pic.lastIndexOf('.'), pic.length).toLowerCase();
191. if (fileext != '.jpg' && fileext != '.gif' && fileext != '.jpeg' && fileext != '.png' && fileext != '.bmp') {
192. f.items.items[0].setValue('');
193. Ext.Msg.show({
194. title: '提示',
195. icon: 'ext-mb-error',
196. width: 300,
197. msg: '对不起，系统仅支持标准格式的照片，请调整格式后重新上传，谢谢 ！',
198. buttons: Ext.MessageBox.OK
199. });
200. return;
201. }
202. var element = document.createElement('img');
203. element.src = pic;
204. if(vals.width>0 && vals.height>0){
205. element.width = vals.width;
206. element.height = vals.height;
207. }
208. if(Ext.isIE) {
209. editor.insertAtCursor(element.outerHTML);
210. }else{
211. var selection = editor.win.getSelection();
212. if(!selection.isCollapsed) {
213. selection.deleteFromDocument();
214. }
215. selection.getRangeAt(0).insertNode(element);
216. }
217. win.hide();
218. }
219. }, {
220. text: '取消',
221. handler: function() {
222. win.hide();
223. }
224. }]
225. }]
226. }],
227. }]
228. });
229. var win = Ext.create('Ext.Window', {
230. title: '插入图片',
231. icon: '/admin/extjs/resources/images/picture.png',
232. width: 400,
233. height: 175,
234. plain: true,
235. modal: true,
236. closeAction: 'hide',
237. resizable: false,
238. border: false,
239. layout: 'fit',
240. items: imgform
241. });
242. win.show(this);
243. }
244.
245.});
