富文本编辑器（UEditor）的使用

程序员文章站 2022-06-11 20:43:08

...

富文本编辑器（UEditor）

在平时开发Java Web项目的时候，往往会使用第三方插件来帮助我们更快的实现功能。

此文来自: 马开东云搜索转载请注明出处网址： http://makaidong.com

此文原标题: javaweb 集成UEditor 来源网址： http://makaidong.com/yrxperfect/7206_7923932.html

这里教大家使用百度开源的富文本编辑器（UEditor）来帮助我们更好的编写文本。

官网下载地址

http://ueditor.baidu.com/website/download.html

这里下载最新版的就可以了

富文本编辑器（UEditor）的使用

解压出来是这样的

富文本编辑器（UEditor）的使用

打开index.html的效果

富文本编辑器（UEditor）的使用

好了，废话不多说，开始我们的正题。

1、配置编辑器环境

创建一个动态web工程

富文本编辑器（UEditor）的使用

将解压出来的编辑器文件夹整个拷贝到WebContent目录下

富文本编辑器（UEditor）的使用

此时工程会报错，因为我们没有引用所需的jar包。

将utf8-jsp -> jsp->lib目录下中的所有jar包拷贝到WEB-INF目录下的lib文件夹中

富文本编辑器（UEditor）的使用

在WebContent下创建一个index.jsp的文件。

将utf8-jsp中的index.html文件内容拷贝到index.jsp

注：使用插件时必须引入以下3个文件

<script type="text/javascript" charset="utf-8" src=" ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src=" ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src=" lang/zh-cn/zh-cn.js"></script>

调用编辑器：

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

富文本编辑器（UEditor）的使用

将引用js文件的相对路径补全

富文本编辑器（UEditor）的使用

完成之后运行index.jsp或者右键工程运行

富文本编辑器（UEditor）的使用

这样基本的配置就搭建好了。

2、获取编辑框的内容

我们来使用富文本编辑器随便写一些内容,然后点击获取内容

富文本编辑器（UEditor）的使用

我们发现，在JavaScript中可以使用 editor.getContent()获得整个p标签的内容，那我们怎么在java web中拿到内容呢？

富文本编辑器（UEditor）的使用

回到index.jsp中

使用form表单将整个编辑器包涵，并且加上用于提交表单的按钮

<body>
<div>
<form action="UeditorServlet">
<h1>完整demo</h1>
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
<input type="submit" value="提交"/>
</form>
</div>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
</script>
</body>

将多余的按钮以及js脚本都删除，保留一个实例化编辑器的方法

var ue = UE.getEditor('editor');

富文本编辑器（UEditor）的使用

运行之后编辑一段内容然后点击提交

http://localhost:8080/ueditor/index.jspeditorValue=%3Cp%3E%E6%88%91%E6%98%AF%E5%86%85%E5%AE%B9%3C%2Fp%3E

富文本编辑器（UEditor）的使用

我们可以发现，在提交表单的时候数据是保存在editorValue下的，知道原理之后我们就可以创建一个servlet来接收这个字段了

富文本编辑器（UEditor）的使用

创建Servlet之后还需修改form表单中的action值

<form action="UeditorServlet" method="post">

UeditorServlet .Java中的doGet()方法

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String content = request.getParameter("editorValue");
if(content != null){
request.setAttribute("content",content);
request.getRequestDispatcher("content.jsp").forward(request, response);
}else{
response.getWriter().append("内容为空!");
}
}

Content.jsp页面就简单使用EL表达式接收数据即可

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>">
<title>My JSP 'content.jsp' starting page</title>
</head>
<body>
<%
out.print(request.getRealPath(""));
%>
<div> ${content } </div>
</body>
</html>