WangEditor富文本編輯器的簡單使用，並將文本數據發往后台

本文轉載自查看原文 2019-12-05 09:43 868 Java Web

wangEditor是Web端使用的一種編輯器，功能還挺齊全的

記錄下wangEditor的簡單用法

wangEditor相關jar包的下載及搭建
將wangEditor中輸入的內容以html的形式發送給Servlet

wangEditor的搭建

第一步：下載相關jar包

使用wangEditor需要用到兩個jar包，一個是“wangEditor.min.js”這是用於引用wangEditor，另外還需要下載一個jq文件“jquery-3.3.1.min.js”

第二步：引用這兩個下載好的jar包

    <script src="${pageContext.request.contextPath}/js/wangEditor.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

第三步：編寫內容輸入界面，這里一般是由控件div和控件textarea組成的，其中textarea的屬性設置為隱藏不顯示出來，主要是用來存放wangEditor的內容以及方便后台獲取內容，因為div控件是設置不了'name'屬性的。

　　　　我這里為了方便等下方便向后台發送內容數據將這兩個控件放在表單控件里了

<form method="post" action="MyServlet">
    <div>
        <%--文本編輯框--%>
        <div id="intro" class="TextContent"></div>
        <textarea style="display: none" name="mytxtIntro" id="txtIntro"></textarea>
        <%--提交按鈕--%>
        <input class="btn btn-primary" type="submit" value="確認提交">
    </div>
</form>

第四步：js代碼實現

<%--文本編輯器插件js--%>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#intro');

    //    獲取隱藏控件<textarea>的id，用於顯示內容，也方便后台獲取內容
    var $text1 = $('#txtIntro');

    // 監控wangEditor中的內容變化，並將html內容同步更新到 textarea
    editor.customConfig.onchange = function (html) {
        $text1.val(html);
    }

    //    設置上傳本地圖片到服務器
    editor.customConfig.uploadImgServer = '/upload';
    editor.create();
    $text1.val(editor.txt.html());// 初始化 textarea 的值


</script>

看下整體的代碼：

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <script src="${pageContext.request.contextPath}/js/wangEditor.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>


</head>
<body>

<form method="post" action="MyServlet">
    <div>
        <%--文本編輯框--%>
        <div id="intro" class="TextContent"></div>
        <textarea style="display: none" name="mytxtIntro" id="txtIntro"></textarea>
        <%--提交按鈕--%>
        <input class="btn btn-primary" type="submit" value="確認提交">
    </div>
</form>

</body>


<%--文本編輯器插件js--%>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#intro');

    //    獲取隱藏控件<textarea>的id，用於顯示內容，也方便后台獲取內容
    var $text1 = $('#txtIntro');

    // 監控wangEditor中的內容變化，並將html內容同步更新到 textarea
    editor.customConfig.onchange = function (html) {
        $text1.val(html);
    }

    //    設置上傳本地圖片到服務器
    editor.customConfig.uploadImgServer = '/upload';
    editor.create();
    $text1.val(editor.txt.html());// 初始化 textarea 的值


</script>


</html>

到這里就能看到已經實現的效果了

向后台發送內容數據也很方便實現，在Servlet類中接收隱藏的textarea控件里的內容就行了，下面是Servlet里的代碼

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

@WebServlet(name = "MyServlet", urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String s = request.getParameter("mytxtIntro");
        System.out.println(s);
    }
}