ueditor精简和实现上传图片文件等

浏览数：48 / 时间：2015年06月09日

最近项目要求需要用到文本编辑器，之前用的的是FCKeditor，发现在IE下不兼容，而且有比较多漏洞，果断放弃FCK，转投国产百度怀抱。百度的ueditor还是比较强大的音乐、视频、代码模式都有。

首先说精简

我的项目其实并不需要那么多牛逼的功能，只需要简单的文本编辑，所以把这些功能精简一下：

这是dialogs下面的文件

技术分享

接下来

技术分享

还有一些css文件，都留default就行差不多就可以了，删完之后好像还有4点多兆，等以后有时间在试。

图片上传

但是如果你用的是struts框架，struts2会把所有的路径给拦截掉，所以你需要需要自定义一个拦截器来防止struts2拦截编辑器的图片或者文件上传，所以要自定义拦截器，因为是上传都交给了controller.jsp，所以要让路径有controller的通过

public void doFilter(ServletRequest req, ServletResponse res,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) req;		   
        HttpServletResponse response = (HttpServletResponse) res;        
       // HttpSession session = request.getSession();      
        String url=request.getServletPath(); 
        String contextPath=request.getContextPath();    
        if(url.equals("")) url+="/";    
      if((url.startsWith("/")&&url.startsWith("/fckeditor")||url.startsWith("/VerifyCodeServlet")||url.contains("/controller"))){   
        	/*User user =  (User) session.getAttribute("backUser");    
             if(user==null){//转入管理员登陆页面    
                  response.sendRedirect(contextPath+"/homeAction_backStage");   
                  return;    
             }    */
    	  chain.doFilter(req, res);
        } else {
			super.doFilter(req, res, chain);

		}

	
	}

接着在ueditor.config.js里面改url

window.UEDITOR_HOME_URL = "/ShareResource/ueditor1/";//这里改成自己项目路径
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        , serverUrl: URL + "jsp/controller.jsp"

在config.json文件里面这样改url

 "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "/ShareResource", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor1/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */

上传图片就可以了。

接着在页面上初始化：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>论坛页面</title>

    <script type="text/javascript" charset="utf-8" src="ueditor1/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor1/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="ueditor1/lang/zh-cn/zh-cn.js"></script>
	<link rel="stylesheet" type="text/css" href="ueditor1/themes/default/css/ueditor.min.css">
</head>

<body>

              

                    <div class="input-area">
                    <script id="editor" type="text/plain"></script>
  
             	
                    </div>
                   
<script type="text/javascript">
     window.onload=function(){
      /*初始化ueditor*/
     var ue = UE.getEditor('editor', {
    initialFrameWidth:582,
    initialFrameHeight:100,
    autoHeightEnabled: false,
    
});
    }
    
 
</script>
  </body>
</html>

结束。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

ueditor精简和实现上传图片文件等