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添加上传图片功能