最近在看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>