UEditor编辑器

2017/02/16 16:45 分类：技术交流浏览：190

咱们在开发的时候经常会用到一些所见即所得的编辑器，今天给大家介绍一款由百度开发的UEditor，这个编辑器效果不错，用得起来也很方便简单，大家在开发的时候可以用到这款编辑器。

首先，咱们需要在网上下载这款编辑器：下载地址

我这里下载的是支持jsp的最新版本，它还有支持php,.net的其它版本。

一完成基本配置：

1.将下载的文件解压到咱们的JavaWeb项目中(如下图)：

2.把相应的jar包导入到项目中(如下)

这几个jar包可以在/ueditor/jsp/lib中找到

3.新建一个demo.jsp，在页面上完成下面的代码，就可以看到效果

<body>
<!-- 这里就是用来显示HTML的内容 -->
 <script id="container" name="content" type="text/plain">
        初始化显示
    </script>
 
 <!-- 引入配置文件 -->
 <script type="text/javascript" src="/js/ueditor/ueditor.config.js"></script>
 <!-- 引入编辑器源码文件 -->
 <script type="text/javascript" src="/js/ueditor/ueditor.all.js"></script>
 <!-- 
 	实例化编辑器 (注意，这里拿的是上面显示HTML内容的script的id)
 -->
 <script type="text/javascript">
    	UE.getEditor('container');
 </script>
</body>

最后展示的效果如下：

大家可以看到，这里可以完成各种设置(包含字体，表格，表情，图片等东西)，整体看来，效果还是非常不错的。

二参数配置效果

完成基本的配置之，咱们又要学习一下，看怎么来进行一些常用参数的配置。

下面我做了一个只有很基本的功能，然后单独设计了编辑器的高度与宽度

UE.getEditor('container',{
	toolbars: [
	           [
	            'fullscreen',  //全屏功能
	            'source', 	//查看源码
	            'undo',    //撤销
	            'redo',    //重做
	            'bold'     //加粗
	           ]
	       ],  
	initialFrameWidth : 600,   //初始代编辑器的宽度
	initialFrameheight: 700	   //初始代编辑器的高度
});

效果如下：

三上传图片功能

接下来咱们简单说一下插件的上传图片功能，上传功能是自带的，如果你是jsp+servlet非常简单，直接使用就可以了，但是我们可以去设计上传的路径与名称。大家可以在config.json文件中找到这个配置：文件的位置：

文件中修改的位置(设置到自己需要的位置)：

下面是上传了图片后的效果：

四 Struts2的上传功能

下面做一个扩展，如果咱们的项目是使用的Struts2，那么Struts2的核心过滤器会导致咱们的上传失效。

新建一个过滤器

package cn.itsources.web.filter;

import java.io.IOException;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;

/**
 * 新创建一个过滤器,继承struts2的过滤器
 * @author Administrator
 *
 */
public class UeditorStrutsFilter extends StrutsPrepareAndExecuteFilter {

	public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {    
		HttpServletRequest request = (HttpServletRequest) req;     
		String url = request.getRequestURI();
		 //这里把上传的controller.jsp 过滤出去，不让Struts2来管理
		if ("/js/ueditor/jsp/controller.jsp".equals(url)) {    
			System.out.println("不经过Sturts2...");
			chain.doFilter(req, res);    
		}else{      
			super.doFilter(req, res, chain);    
		}    
	}    
}

web.xml使用新的过滤器即可

<!-- 配置核心过滤器 -->
 <filter>
       <filter-name>struts2</filter-name>
       <filter-class>cn.itsources.web.filter.UeditorStrutsFilter</filter-class>
 </filter>
  <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
  </filter-mapping>

#标签：UEditor,编辑器,所见即所得,源码时代