用servlet提交 WangEditor3编辑的内容，找了很多资料没发现，大多用的框架，今天终于解决了，记录一下。

WangEditor3不支持放在textarea中，servlet是无法直接获取到编辑器中的内容的，有一下两种方法：

方法一：如果想用form表单提交需要加个textarea，此时的textarea应该隐藏起来，用js获取WangEditor3编辑的内容，再赋值给textarea，再form提交，隐藏textarea如下：

<textarea name="newscontent" id="content" style="width:100%; height:200px;display:none" ></textarea>

方法二：可以用ajax通过用js取出表单和富文本中的内容，通过json格式传输，在后台获取就可以了。

注明：以下演示以方法二为例，方法一在代码中注释掉了。

newseditor.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

 <%

String path = request.getContextPath();//获取webContent路径

//request.getScheme() 返回当前链接使用的协议；比如，一般应用返回http;SSL返回https;

//详解：https://www.cnblogs.com/qlqwjy/p/7498511.html

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

        + path + "/";

%>

<!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>

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="<%=basePath %>/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="<%=basePath %>/js/jquery-3.2.1.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="<%=basePath %>/js/bootstrap.min.js"></script>

<script type="text/javascript" src="<%=basePath%>/wangEditor/release/wangEditor.min.js"></script>

<script type="text/javascript">

</script>

 <style type="text/css">

    .toolbar {

        border: 1px solid #ccc;

    }

    .w-e-text-container{

        height: 600px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/

    }

</style>

</head>

<body>

<div>

  <div class="container">

        <h2 class="page-header">文章发布</h2>

        <form class="form-horizontal" id="form" action="contentpublish" method="post">

            <div class="form-group">

                <label for="newsMan" class="col-sm-1 control-label" >作者</label>

                <div  class="col-sm-2" >

                    <input  class="form-control " name="newsMan" id="newsMan" placeholder="请输入发布人"/>

                </div>

            </div>

            <div class="form-group">

                <label for="newsTitle" class="col-sm-1 control-label">标题</label>

                <div  class="col-sm-4">

                    <input  class="form-control" name="newsTitle" id="newsTitle" placeholder="请输入新闻标题"/>

                </div>

            </div>

            <div class="form-group">

                <label for="newstype" class="col-sm-1 control-label">地点</label>

                <div  class="col-sm-2">

                       <select class="form-control ">

                      <option>请选择</option>

                      <option value="PA">Pennsylvania</option>

                      <option value="CT">Connecticut</option>

                      <option value="NY">New York</option>

                      <option value="MD">Maryland</option>

                      <option value="VA">Virginia</option>

                    </select>

                </div>

            </div>

            <div class="form-group">

                <label for="newsContent" class="col-sm-1 control-label">内容</label>

                <div  class="col-sm-10">

                  <!-- <textarea id="div1" name="content" style="width: 800px; height: 400px;"></textarea> -->

                  <!--  <textarea name="newscontent" id="content" style="width:100%; height:200px;display:none" ></textarea> -->

                     <div id="div1" class="toolbar">

                        <!-- <p>欢迎使用 wangEditor 编辑器</p> -->

                    </div>

                </div>

            </div>

            <div class="form-group" >

                <div  class="col-sm-4 col-sm-offset-1">

                    <input type="button" onclick="submit_content()" value="发 布 文章 " class="btn btn-success btn-md"/>

                </div>

            </div>

        </form>

    </div>

    <button id="btn1">获取html</button>

    <button id="btn2">获取text</button>

</div>

<script type="text/javascript">

    var E = window.wangEditor

    var editor = new E('#div1')

    editor.customConfig.showLinkImg = false

    editor.customConfig.uploadImgServer = '/shoot/UploadServlet';

    editor.create()

    document.getElementById('btn1').addEventListener('click', function () {

        // 读取 html

        alert(editor.txt.html())

    }, false)

    document.getElementById('btn2').addEventListener('click', function () {

        // 读取 text

        alert(editor.txt.text())

    }, false)

     function submit_content(){

    alert("111");

    var newsMan=$("#newsMan").val();

    var newsTitle=$("#newsTitle").val();

    /* var introduce = document.getElementById("content");

    introduce.value = editor.txt.html(); */

    $.ajax({

        type:"post",

        url:"../contentpublish",

        data:{

            "newsMan":$("#newsMan").val(),

            "newsTitle":$("#newsTitle").val(),

            /* "introduce":$("#content").val(), */

            "introduce":editor.txt.html(),

        },

        success: function(result){

            alert("测试！");

        },

    });

}

</script>

</body>

</html>

新建Servlet     ContentPublish

package com.liu.Controller;

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 ContentPublish

 */

@WebServlet("/contentpublish")

public class ContentPublish extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public ContentPublish() {

        super();

        // 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

        response.getWriter().append("Served at: ").append(request.getContextPath());

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        System.out.println("post");

        String newsMan=request.getParameter("newsMan");

        String newsTitle=request.getParameter("newsTitle");

        String introduce=request.getParameter("introduce");

        System.out.println(newsMan);

        System.out.println(newsTitle);

        System.out.println(introduce);

    }

}

效果如下：

控制台输出：

WangleEditor3提交数据（servlet-jsp）的更多相关文章

  1. servlet自动获取前端页面提交数据

    servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...

  2. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  3. ajax提交数据到java后台，并且返回json格式数据前台接收处理值

    1.前台html页面.有一段代码如下: 账  户:  <input type="text" name="userName" id="userN& ...

  4. Android 采用get方式提交数据到服务器

    首先搭建模拟web 服务器,新建动态web项目,servlet代码如下: package com.wuyudong.web; import java.io.IOException; import ja ...

  5. javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册

    一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...

  6. Servlet+Jsp实现图片或文件的上传功能

    首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在WebR ...

  7. Servlet&jsp基础：第五部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. Android（java）学习笔记210：采用post请求提交数据到服务器（qq登录案例）

    1.POST请求:  数据是以流的方式写给服务器 优点:(1)比较安全 (2)长度不限制 缺点:编写代码比较麻烦   2.我们首先在电脑模拟下POST请求访问服务器的场景: 我们修改之前编写的logi ...

  9. Android（java）学习笔记209：采用get请求提交数据到服务器（qq登录案例）

    1.GET请求:    组拼url的路径,把提交的数据拼装url的后面,提交给服务器. 缺点:(1)安全性(Android下提交数据组拼隐藏在代码中,不存在安全问题)  (2)长度有限不能超过4K(h ...

随机推荐

  1. JS日期相减得到天数

    废话不多说直奔主题,解决思路核心是时间戳相减  灵感来自于我经常用到一个工具方法:格式化时间,也是用时间戳 function GetNumberOfDays(date1,date2){//获得天数 / ...

  2. 在C语言中不使用任何中间变量如何将a、b的值进行交换（三种方法）——来自一小萌新工程师的复习

    今天面试嵌入式,突然遇到这么一道题目,虽然简单,但鉴于我答得不是很好,所以还是分析一下为好. 第一种方法: 通过加减法. #include"stdio.h" int main(vo ...

  3. [P5162] WD与积木

    每种堆法(理解成名次序列,举例3,3,8,2和7,7,100,2都对应2,2,1,3这个名次序列)等概率出现:题目中"两种堆法不同当且仅当某个积木在两种堆法中处于不同的层中"可见这 ...

  4. Mac eos 环境搭建

    最近EOS官网出了文档,说可以跑通一个独立测试的节点了.这周尝试自行搭建了一下,由于自己不完全做mac下的开发,且这玩意是C写的,所以make起来遇到不少坑,记录下来.附完整踩坑.填坑记录. 1. 搭 ...

  5. 实现quartz定时器及quartz定时器原理介绍

    今天研究定时器,在网上看了一篇不错的文章,推荐给大家! 实现quartz定时器及quartz定时器原理介绍

  6. 运维笔记--ubuntu rm删除文件后 恢复

    待补充 特别注意:umount分区,尝试恢复文件,文件夹(目录),全部文件 https://www.cnblogs.com/wangxiaoqiangs/p/5630288.html https:// ...

  7. 【原创】uC/OS 中LES BX,DWORD PTR DS:_OSTCBCur的作用及原理

    LES BX, DWORD PTR DS:_OSTCBCur ;OSTCBCur->OSTCBStkPtr = SS:SP!!! ], SS ;将当前SS(栈的基地址)寄存器值存放至当前任务控制 ...

  8. TensorFlow中的通信机制——Rendezvous（一）本地传输

    背景 [作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 在TensorFlow源码中我们经常能看到一个奇怪的词——Rendezvous ...

  9. μC/OS-II 任务堆栈的初始化

    任务堆栈的作用 应用程序在创建一个新任务的时候,必须把在系统启动这个任务时 CPU 各寄存器所需要的初始数据(任务指针.任务堆栈指针.程序状态字等等),事先存放在任务的堆栈中,以备任务切换等操作时调用 ...

  10. iOS面试准备之思维导图

    以思维导图的方式对iOS常见的面试题知识点进行梳理复习,文章xmind点这下载,文章图片太大查看不了也点这下载 你可以在公众号 五分钟学算法 获取数据结构与算法相关的内容,准备算法面试 公众号回复 g ...