UEditor在JavaWeb中的应用

快来打我* 2022-05-27 06:55 237阅读 0赞

## 本文是转载文章，文章的来源：csdn博客   博主：Lingdu丶   文章：UEditor在JavaWeb中的应用   博文地址：https://blog.csdn.net/gfd54gd5f46/article/details/60887313    ##

## 富文本编辑器（UEditor） ##

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

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

**官网下载地址**

> [http://ueditor.baidu.com/website/download.html][http_ueditor.baidu.com_website_download.html]

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

![1][]

--------------------

**解压出来是这样的**

![2][]

--------------------

**打开index.html的效果**

![3][]

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

--------------------

## 1、配置编辑器环境 ##

**创建一个动态web工程**

![4][]

--------------------

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

![5][]

--------------------

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

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

![6][]

--------------------

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

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

--------------------

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

**调用编辑器：**

**初始化编辑器：**

![7][]

--------------------

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

![8][]

--------------------

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

![9][]

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

--------------------

## 2、获取编辑框的内容 ##

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

![10][]

--------------------

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

![11][]

--------------------

回到index.jsp中

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

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

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

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

*  ![12][]

--------------------

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

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

![13][]

--------------------

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

![14][]

--------------------

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

--------------------

**UeditorServlet .java中的`doGet()`方法**

/** * 用于接收form表单中的editorValue值 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //设置请求和响应的编码统一为UTF-8
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("UTF-8");
            //拿到编辑器的内容
            String content = request.getParameter("editorValue");
            //如果不为空
            if(content != null){
                //将内容设置进属性
                request.setAttribute("content",content);
                //转发到content.jsp
                request.getRequestDispatcher("content.jsp").forward(request, response);
            }else{
                response.getWriter().append("内容为空!");
            }
        }

--------------------

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

<%@ 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>
        <div>
            ${content }
        </div>
    </body>
    </html>

--------------------

**运行index.jsp ,随便编辑一段文字提交**

这时内容就已经传过来了。

![15][]

--------------------

## 3、配置图片路径 ##

**在没有配置图片上传路径的时候，添加一张图片时是显示不出来的**

![16][]

--------------------

**编辑`utf8-jsp -> jsp -> lib -> 下的config.json`文件**

![17][]

--------------------

**修改图片上传的路径**

![18][]

--------------------

**编辑utf8-jsp目录下的`ueditor.config.js`**

![19][]

--------------------

**在配置中加入编辑器的路径地址**

![20][]

--------------------

**配置完成之后重启toncat服务器并且运行`index.jsp`，编写一条图文信息提交**

![21][]

--------------------

**提交之后的结果：**

![22][]

--------------------

**查看图片保存路径可以在jsp中使用以下代码，即可得到工程编译后的路径**

<%
        //图片保存的路径,可以到这个路径下查看
        out.println(request.getRealPath(""));
    %>

*  ![23][]

--------------------

**获取到了根目录位置**

![24][]

--------------------

![25][]

--------------------

**简单的配置以及使用就介绍到这里吧。**

**相关的编辑器配置信息可到 `utf8-jsp目录下的ueditor.config.js`文件中修改**

[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html
[1]: /images/20220527/204affab99aa4595869038c48252c35e.png
[2]: /images/20220527/35dea2a2fad444bdba7d1a433085b517.png
[3]: /images/20220527/4def05489c2b44918b0e5d1ca2d407cb.png
[4]: /images/20220527/186828487db64747bfabb27140150e72.png
[5]: /images/20220527/b2be17a69d064988b43e7fd6c782cd67.png
[6]: /images/20220527/15e40d8b8579426490a858b717cbe385.png
[7]: /images/20220527/3282e60d10d044fc99db51ef3284365b.png
[8]: /images/20220527/c4805823b4484cfa870bd7d66877b853.png
[9]: /images/20220527/02e0333bba5d41b5a3ce9f82cc85d7b3.png
[10]: /images/20220527/281a6ca5ca01472da95c0f24aa3a7aef.png
[11]: /images/20220527/61a4e49fceff4173a830af0d8f18bc66.png
[12]: /images/20220527/7cf20b7119c2478aa2fbe1701dba7c92.png
[13]: /images/20220527/7554ce95f1c9443780ae14a929dd2a8c.png
[14]: /images/20220527/5bbb3634b0c445fc8d522a9e4f53fcf3.png
[15]: /images/20220527/541f48637925438789fcf8cc6d39888e.png
[16]: /images/20220527/54e9e00207e04f14a4a509878b0b2452.png
[17]: /images/20220527/b9dad8147b114acf974aa6f847be9e38.png
[18]: /images/20220527/34c0ced4fe82416d902d55b71c2af1f0.png
[19]: /images/20220527/91e1f0f33bf1408daec4b48725efabc3.png
[20]: /images/20220527/ea6defa442a7472b9512961b60dd2e04.png
[21]: /images/20220527/749db2ff850d4d9f8bbd274bc42d68aa.png
[22]: /images/20220527/76223a14f9cd4386b2ee6fd2858dcf0e.png
[23]: /images/20220527/67c151aed65b4123a476d6c440dc1327.png
[24]: /images/20220527/e407f48d69124e459bdb6d9f8a72f5a4.png
[25]: /images/20220527/ffeed53b848f44a9ab2d8f729075fbfc.png