WangleEditor3提交数据（servlet-jsp）
用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）的更多相关文章
- servlet自动获取前端页面提交数据
servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- ajax提交数据到java后台，并且返回json格式数据前台接收处理值
1.前台html页面.有一段代码如下: 账 户: <input type="text" name="userName" id="userN& ...
- Android 采用get方式提交数据到服务器
首先搭建模拟web 服务器,新建动态web项目,servlet代码如下: package com.wuyudong.web; import java.io.IOException; import ja ...
- javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- Servlet+Jsp实现图片或文件的上传功能
首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在WebR ...
- Servlet&jsp基础：第五部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Android（java）学习笔记210：采用post请求提交数据到服务器（qq登录案例）
1.POST请求: 数据是以流的方式写给服务器 优点:(1)比较安全 (2)长度不限制 缺点:编写代码比较麻烦 2.我们首先在电脑模拟下POST请求访问服务器的场景: 我们修改之前编写的logi ...
- Android（java）学习笔记209：采用get请求提交数据到服务器（qq登录案例）
1.GET请求: 组拼url的路径,把提交的数据拼装url的后面,提交给服务器. 缺点:(1)安全性(Android下提交数据组拼隐藏在代码中,不存在安全问题) (2)长度有限不能超过4K(h ...
随机推荐
- JWT(Json web token)简介
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(S ...
- Spring lazy-init 原理分析
普通的bean的初始化是在容器启动初始化阶段执行的,而被lazy-init修饰的bean 则是在从容器里第一次进行context.getBean(“”)时进行触发.Spring 启动的时候会把所有be ...
- 使用Redis中间件解决商品秒杀活动中出现的超卖问题（使用Java多线程模拟高并发环境）
一.引入Jedis依赖 可以新建Spring或Maven工程,在pom文件中引入Jedis依赖: <dependency> <groupId>redis.clients< ...
- 使用 Kubeadm 安装部署 Kubernetes 1.12.1 集群
手工搭建 Kubernetes 集群是一件很繁琐的事情,为了简化这些操作,就产生了很多安装配置工具,如 Kubeadm ,Kubespray,RKE 等组件,我最终选择了官方的 Kubeadm 主要是 ...
- 13 Tensorflow机制（翻译）
代码: tensorflow/examples/tutorials/mnist/ 本文的目的是来展示如何使用Tensorflow训练和评估手写数字识别问题.本文的观众是那些对使用Tensorflow进 ...
- SpringMVC跨域问题排查以及源码实现
SpringMVC跨域问题排查以及源码实现 最近一次项目中,将SpringMVC版本从4.1.1升级到4.3.10,出现跨域失败的情况.关于同源策略和跨域解决方案,网上有很多资料. 项目采用的方式是通 ...
- 解决Linux下Jexus验证码无法显示
1:安装mono相关字体 yum install -y dejavu-fonts-common dejavu-lgc-sans-mono-fonts 2:重启jexus /usr/jexus/jws ...
- 流式大数据计算实践（1）----Hadoop单机模式
一.前言 1.从今天开始进行流式大数据计算的实践之路,需要完成一个车辆实时热力图 2.技术选型:HBase作为数据仓库,Storm作为流式计算框架,ECharts作为热力图的展示 3.计划使用两台虚拟 ...
- You must reset your password using ALTER USER statement before executing this statement.
MySQL 5.7之后,刚初始化的MySQL实例要求先修改密码.否则会报错: mysql> create database test; ERROR 1820 (HY000): You must ...
- 翻译：delete语句(已提交到MariaDB官方手册)
本文为mariadb官方手册:DELETE语句的译文. 原文:https://mariadb.com/kb/en/delete/ 我提交到MariaDB官方手册的译文:https://mariadb. ...