使用Baidu的Ueditor

为自己的博客网站找一款富文本编辑器，最后选择了百度的Ueditor，感觉还行吧。

一、说明：

本人使用ueditor作为jsp项目的富文本编辑器，所以这里都是针对jsp版本使用的说明

版本：ueditor1.4.3 JSP版本

二、具体使用过程

1、下载Ueditor，然后解压，解压后端目录如下

jsp文件夹为需要的后端jsp文件和相应的配置文件。

2、在项目里建立ueditor目录，将所有的文件拷贝进去（可以不拷贝jsp中的lib文件夹内容，准备将这些jar文件放到项目的lib文件夹下进行管理）

3、在项目中建立上传文件存储文件夹

在项目中建立upload文件夹，又在其中建立了一个image文件夹又来存储图片

4、拷贝所需要的库文件至项目lib目录

在WEB-INF目录中建立一个lib目录，然后将ueditor中的jsp目录下的所有jar文件拷贝至WEB-INF的lib目录下。

5、进行配置

主要需要对两个文件进行配置。

（1）前端的配置文件：

ueditor.config.js

（2）后台配置文件

jsp目录下的config.json

修改如下：

（1）ueditor.config.js的修改

（2）config.json配置

设置完以上这些就可以使用了，当然，前端还需要对相应javascript文件进行引用以及用javascript生成ueditor实例才行，这个放到第6个步骤中讲。所有的处理都将会送至jsp/controller.jsp进行处理。

6、增加test文件

为了测试ueditor的功能，建立如下文件进行测试

ArticleEdit.jsp内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>












	

		
文章类别：

		
文章标题：

				
		
	
	
    
    

说明：必须对ueditor.all.js以及ueditor.config.js进行引用，一个是核心文件，一个是配置文件。同时，必须定义一个form元素进行上传，这里定义的是textarea,id为"myEditor"，name为“content”，为了让ueditor的内容放入这个容器中，可以在生成ueditor实例的时候传入其id。var ue = UE.getEditor('id')方法就是生成ueditor实例的，它会在界面上渲染出一个ueditor界面，同时会将内容传入id这个容器中，并置其display为none。

这时候调用这个jsp页面就可以看到ueditor编辑页面了，如下图：

为了测试上传，我们建立一个servlet以及一个展示文章用的jsp文件。servlet的目的就是将request转发到jsp页面上，添加这个servlet是走一个流程，以后肯定会涉及到验证等过程，这个放到servlet中比较好，所以就添加了这个暂时没用的servlet了。

ArticleSave.java代码如下：

package com.tianyuan;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ArticleSave
 */
@WebServlet("/ArticleSave")
public class ArticleSave extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private String title;
	private String content;
	private int category;
	
    /**
     * Default constructor. 
     */
    public ArticleSave() {
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		//request.getRequestDispatcher("ArticleShow.jsp").forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		request.getRequestDispatcher("ArticleShow.jsp").forward(request, response);
		//就是这一句进行转发
		
	}

}

转发之后就要进行展示，如下：

ArticleShow.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>







<%-- 声明全局参数 --%>
<%!
private String title;
private String content;
private int category;

%>
<%-- 初始化参数 --%>
<%
	request.setCharacterEncoding("utf-8");//这一句非常重要，设置编码，否则中文会有乱码。

	//title = "博客文章";
	//content = "hello world!";
	title = (String) request.getParameter("title");
	content = (String) request.getParameter("content");
	//category = (int) request.getAttribute("category");
%>
文章输出

<%-- 执行渲染操作 --%>
<%=title%>


<%=content%>

看一下展示的页面吧：

总结：整体来说ueditor还算可以，百度的前端团队挺不错的！加油！！！