使用Baidu的Ueditor

最新推荐文章于 2024-08-22 17:44:20 发布

AdolfTianYuan

最新推荐文章于 2024-08-22 17:44:20 发布

阅读量766

点赞数

分类专栏： J2EE开发文章标签：文本编辑 java

本文链接：https://blog.csdn.net/AdolfTianYuan/article/details/45013395

版权

J2EE开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为自己的博客网站找一款富文本编辑器，最后选择了百度的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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>天元的博客</title>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
</head>
<body>

	<form method="post" action="http://localhost:8080/UeditorModelTest/save">
		<div>文章类别：</div><input name="category">
		<div>文章标题：</div><input name="title">
		<textarea id="myEditor" name="content">
		</textarea>
		<input type="submit" value="保存文章">
	</form>
	<!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('myEditor');
    </script>
    
</body>
</html>

说明：必须对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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%-- 声明全局参数 --%>
<%!
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");
%>
<h1>文章输出</h1>

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

<div>
<%=content%>
</div>


</body>
</html>

看一下展示的页面吧：