在JavaWeb中使用wangEditor3简单案例

96 阅读 0 评论 64 点赞

我是靠谱客的博主懦弱滑板，这篇文章主要介绍在JavaWeb中使用wangEditor3简单案例，现在分享给大家，希望可以做个参考。

介绍

wangEditor是一款基于javascript和css开发的 Web富文本编辑器，有轻量、简洁、易用、开源免费等优点。
官网：www.wangeditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor
下载链接：github.com/wangfupeng1988/wangEditor/releases

开始

1.新建项目（使用的是struts2，配置不再赘述），将下载好的wangEditor包解压放入项目根目录

这里写图片描述

2.新建index.jsp页面将工具包中 release 文件夹下的 wangEditor.min.js或 wangEditor.js 引入到jsp页面中。index.jsp如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
<script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="sys.action" method="post" id="form">
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<input type="hidden" name="text.value" id="txt"/>
<button>sss</button>
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/wangEditor-3.0.8/release/wangEditor.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('#editor') )
editor.create();
$("button").click(function(){
var html= editor.txt.html();
var text=editor.txt.text();
$("#txt").val(html);
$("#form").submit();
})
</script>
</body>
</html>

demo.jsp

复制代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'demo.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style type="text/css">
/* table 样式 */
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table td,
table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
}
table th {
border-bottom: 2px solid #ccc;
text-align: center;
}
/* blockquote 样式 */
blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
/* code 样式 */
code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
font-family: "Courier New", Courier, monospace;
}
pre code {
display: block;
}
/* ul ol 样式 */
ul, ol {
margin: 10px 0 10px 20px;
}
</style>
</head>
<body>
<div>
${text.value}
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'demo.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
/* table 样式 */
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table td,
table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
}
table th {
border-bottom: 2px solid #ccc;
text-align: center;
}
/* blockquote 样式 */
blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
/* code 样式 */
code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
font-family: "Courier New", Courier, monospace;
}
pre code {
display: block;
}
/* ul ol 样式 */
ul, ol {
margin: 10px 0 10px 20px;
}
</style>
</head>
<body>
<div>
${text.value}
</div>
</body>
</html>

在action中将编辑器中的值传入demo.jsp中

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package base;
import vo.Text;
public class TextAction {
private Text text;
public String sys(){
System.out.println(text.getValue());
return "success";
}
public Text getText() {
return text;
}
public void setText(Text text) {
this.text = text;
}
}