网站内容编辑器(Web端使用的一种编辑器，功能还挺齐全的记录下wangEditor的简单用法 )

　　网站内容编辑器(Web端使用的一种编辑器，功能还挺齐全的记录下wangEditor的简单用法

)

　　wangEditor 是一种网络编辑器，功能比较齐全

　　记录wangEditor的简单使用

　　下载并构建wangEditor相关jar包将wangEditor中输入的内容以html的形式发送到Servlet

　　wangEditor的搭建

　　第一步：下载相关的jar包

　　使用wangEditor需要两个jar包，一个是“wangEditor.min.js”，用来引用wangEditor，一个jq文件“jquery-3.3.1.min.js”

　　第2步：引用这两个下载的jar包

　　第三步：编写内容输入界面。这一般由控件div和控件textarea组成。 textarea的属性设置为隐藏不显示。主要用于存放wangEditor的内容，方便后台访问内容，因为div控件不能设置'name'属性。

　　为了方便等待和后台发送内容数据，我把这两个控件放在了表单控件中。

　　第四步：js代码实现

var E = window.wangEditor;

var editor = new E('#intro');

// 获取隐藏控件的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 的值

　　看整体代码：

var E = window.wangEditor;

var editor = new E('#intro');

// 获取隐藏控件的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 的值

　　这里可以看到已经实现的效果

　　向后台发送内容数据也很容易实现。只需接收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);

}

}

　　以下是后台接收到数据输出后的内容效果。我写了两种输出效果，一种是页面中的输出效果，一种是控制台中的输出效果编辑器效果：

　　网页输出效果：

　　控制台输出效果：