layui获取富文本编辑器中的值，并传递给jsp或Servlet

本文链接：https://blog.csdn.net/qq_40948862/article/details/103762327

最近在看layui，之前从来也没有接触过前端的框架。关于富文本编辑器，网上很多帖子，但是绝大多数都是cp官网上的，没有实用价值，走了很多弯路，最后终于简单的写出来了。下面两个jsp的页面很容易理解，你先不要分析代码，在自己的机器上运行一下再看代码，这样思路更清晰。

1.第一个JSP页面

<%@ 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">
<link rel="stylesheet" href="resources/layui/css/layui.css">
//layui.css的路径改成自己本地的

<title>富文本编辑器</title>
</head>
<body>
	<textarea class="layui-textarea" id="LAY_demo1" style="display: none">  
  把编辑器的初始内容放在这textarea即可
</textarea>
	<div class="site-demo-button" style="margin-top: 20px;">
		<form action="show.jsp">
			<button class="layui-btn site-demo-layedit" data-type="content">获取编辑器内容</button>
			<input type="hidden" id="input" name="input">
		</form>
	</div>
	<script src="resources/layui/layui.js"></script>
	//layui.js的路径改成自己本地的
	<script>
		layui.use('layedit', function() {
			var layedit = layui.layedit, $ = layui.jquery;

			//构建一个默认的编辑器
			var index = layedit.build('LAY_demo1', {
				tool : [ 'face', 'link', 'unlink', '|', 'left', 'center',
						'right' ],
				height : 100
			});

			//编辑器外部操作
			var active = {
				content : function() {
					alert(layedit.getContent(index)); //获取编辑器内容
					document.getElementById("input").innerText = layedit
							.getContent(index); //给hidden赋值
				}
			};

			$('.site-demo-layedit').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
	</script>
</body>
</html>

2. 第二个jsp

<%@ 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>显示</title>
</head>
<body>
<% out.println(request.getParameter("input"));%>
</body>
</html>