Extjs的HtmlEidtor富文本编辑器的使用和图片上传展示的实现
Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现
Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现
一.HtmlEditor增加上传图片的功能
因为Extjs的富文本编辑器默认没有上传图片的功能,所以我们这里写一个js文件,继承Extjs的HtmlEditor,给其增加上传图片的功能。
(在需要用的地方引入该js文件即可)
StarHtmleditor.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 : 'uploadFile', name : 'uploadFile', inputType : 'file', allowBlank : false, blankText : '文件不能为空', anchor : '90%' }], buttons : [{ text : '上传', handler : function() { if (!imgform.form.isValid()) {return;} imgform.form.submit({ waitMsg : '正在上传......', url : 'uploadImage.ftl?doType=uploadImage', success : function(form, action) { var element = document.createElement("img"); var fileURL = action.result.fileURL; element.src = 'showImg.ftl?doType=showImg&imgName=' + 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 : path + "/images/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 : path + "/images/picture.png", handler : this.addImage, scope : this }); } }); Ext.reg('StarHtmleditor', HTMLEditor);
(1).上传图片的URL:
(2).显示图片的URL:
图示:
二.使用该富文本编辑器上传图片:
1.引入js文件:
<script type="text/javascript" src="<%=request.getContextPath()%>/js/StarHtmleditor.js"></script>
2.FormPanel中使用:
var addNewsForm = new Ext.form.FormPanel({ id:"addNewsForm", frame:true, layout:"form", labelAlign:"right", labelWidth:"150", buttonAlign:"center", fileUpload : true, items:[{ id:"id", name:"id", xtype:"textfield", fieldLabel:"编号", hidden:true, hideLabel:true },{ id:"title", name:"title", xtype:"textfield", fieldLabel:"新闻标题", allowBlank:false, minLength:5, maxLength:50, width:750 },{ id:"tag", name:"tag", xtype:"textarea", fieldLabel:"新闻标签", allowBlank:false, maxLength:330, height:70, width:750 },{ name:"content", xtype:"StarHtmleditor", fieldLabel:"新闻内容", fontFamilies: ["宋体","隶书","黑体","楷体","幼圆"], width:750, height:230 },{ id:"ishot", name:"ishot", xtype:"checkbox", fieldLabel:"是否热点" },{ id:"uploadNews", name:"uploadNews", xtype:"textfield", inputType:"file", fieldLabel:"上传文件", buttonText: '' }], buttons:[{ text:"确定", handler:addNews },{ text:"取消", handler:function(){ location.href = "newsManagement.jsp"; } }] });注意:此时的xtype是StarHtmleditor。
3.上传图片的Servlet:
if ("uploadImage".equals(action)) { String imgDir = Configuration.getConfig().getString("imgDir");//读取配置文件 Map<String, String> map = UploadFileUtil.uploadImage(imgDir, request);//此处开始上传图片 response.setContentType("text/html;charset=UTF-8"); out=response.getWriter(); if (map.get("msg") != null) {//输出错误信息 out.print("{failure:\""+map.get("msg")+"\"}"); out.close(); return; } String imgName = map.get("imgName"); out.print("{success:'true',fileURL:'" + imgName + "'}"); return; }
4.上传图片的工具类:
import java.io.File; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileItemFactory; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; public class UploadFileUtil { /** * 获取ServletFileUpload * @return */ public static ServletFileUpload getServletFileUpload(){ FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8");//注意要设置编码 return upload; } /** * 上传图片 * @param fileDir * @param request * @return */ public static Map<String, String> uploadImage(String fileDir, HttpServletRequest request) { String imgName = null; long maxSize = 5*1024*1024; List<FileItem> fileItems; Map<String, String> map = new HashMap<String, String>(); try { //1.判断目录是否存在,不存在则创建目录 String[] paths; if (fileDir.contains("/")) { paths = fileDir.split("/"); } else { paths = fileDir.split("\\\\");//注意:此处“\\”是错误的,必须要“\\\\”才能分割字符串 } String dir = paths[0]; for (int i = 1; i < paths.length; i++) { dir = dir + File.separator + paths[i]; File file=new File(dir.toString()); if (!file.exists()) { file.mkdir(); } } //2.保存图片 fileItems = getServletFileUpload().parseRequest(request);//解析request获取上传的图片名称 for (int i = 0; i < fileItems.size(); i++) { FileItem fileItem = fileItems.get(i); if (fileItem.getFieldName().equals("uploadFile")) { imgName = fileItem.getName(); if (imgName == "" || imgName == null) { map.put("msg", "请先上传图片"); return map; } String suffix = imgName.substring(imgName.lastIndexOf(".") + 1); if (!("png".equalsIgnoreCase(suffix)||"jpg".equalsIgnoreCase(suffix)||"gif".equalsIgnoreCase(suffix))) { map.put("msg", "请上传png/jpg/gif等格式的图片"); return map; } long size = fileItem.getSize(); if (size > maxSize) { map.put("msg", "您上传的图片过大,请重新上传"); return map; } imgName = System.currentTimeMillis() + imgName.substring(imgName.lastIndexOf(".")); map.put("imgName", imgName); fileItem.write(new File(fileDir + File.separator +imgName)); } } } catch (FileUploadException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } return map; } }
5.显示图片的Servlet:
if ("showImg".equals(action)) { String imgDir = Configuration.getConfig().getString("imgDir"); String imgName = request.getParameter("imgName"); File file=new File(imgDir + File.separator + imgName); if(file.exists()&&!"".equals(imgDir)){ try { DataOutputStream dos=new DataOutputStream(response.getOutputStream()); DataInputStream dis=new DataInputStream(new FileInputStream(file.getAbsolutePath())); byte[] data=new byte[2048]; while((dis.read(data))!=-1){ dos.write(data); dos.flush(); } dis.close(); dos.close(); } catch (IOException e) { e.printStackTrace(); } } return; }
注意:显示图片需要通过输出流的方式实现!
图示:
源码:
富文本编辑器中内容的提交和FileItem上传文件/图片的使用方式请参考:
Extjs通过Apache的FileItem进行文件的上传下载
上传图片参考:
extjs的HTMLEditor添加上传图片功能