Layui 表单使用富文本编辑器

简单记录项目开发技巧,方便以后查看。

目标

效果:富文本编辑器

官网简介

summernote 官网

快速使用

  1. 需要HTML 5文档类型

    1
    2
    3
    4
    <!DOCTYPE html>
    <html lang="en">
    ...
    </html>
  2. 导入js/css

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    <!-- include summernote css/js -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
  3. 嵌入

    1
    <div id="summernote">Hello Summernote</div>
  4. 运行

    1
    2
    3
    $(document).ready(function() {
    $('#summernote').summernote();
    });

完整例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>修改公告信息</title>
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/css/ray-ui.css}">

<!-- summernote start -->
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
<link rel="stylesheet" th:href="@{/summernote/summernote.css}">
<link rel="stylesheet" th:href="@{/summernote/summernote-bs3.css}">
<!-- summernote end -->
</head>
<body>

<div class="layui-container">

<form class="layui-form" id="fm" th:object="${notice}">
<div class="layui-form-item">
<input type="text" th:value="*{noticeId}" name="noticeId" hidden="hidden" />
</div>

<div class="layui-form-item">
<label class="layui-form-label" style="width: 100px;">公告标题</label>
<div class="layui-input-block">
<input type="text" class="layui-input" th:value="*{noticeTitle}" name="noticeTitle" lay-verify="required" placeholder="请输入公告标题" autocomplete="off" />
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label" style="width: 100px;">公告类型</label>
<div class="layui-input-block">
<select name="noticeType">
<option value=""></option>
<option value="1" th:selected="*{noticeType eq '1'}">通知</option>
<option value="2" th:selected="*{noticeType eq '2'}">公告</option>
</select>
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label" style="width: 100px;">公告状态</label>
<div class="layui-input-block">
<input type="checkbox" th:checked="*{status eq '0'}" value="0" name="status" lay-skin="switch" lay-text="正常|关闭">
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label" style="width: 100px;">公告内容</label>
<div class="layui-input-block">
<input id="noticeContent" name="noticeContent" th:value="*{noticeContent}" type="hidden">
<!--嵌入summernote-->
<div id="editor" class="summernote"></div>
</div>
</div>

<div class="layui-form-item layui-layout-admin">
<div class="layui-input-block">
<div class="layui-footer" style="left: 0;padding: 0;">
<button class="layui-btn" lay-submit lay-filter="edit">修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
</div>


<script th:src="@{/js/ray-ui.js}"></script>
<!--<script th:src="@{/webjars/jquery/jquery.min.js}"></script>-->
<script th:src="@{/layuiadmin/layui/layui.js}"></script>

<!-- summernote start -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/summernote/summernote.min.js}"></script>
<script th:src="@{/summernote/summernote-zh-CN.js}"></script>
<!-- summernote end -->

<script th:inline="none">
$(function () {
$('.summernote').summernote({
height: 250, // 高度
lang: 'zh-CN' // 需要中文包
});

// 赋值(不是必须的,只是我的项目需要)
var content = $('#noticeContent').val();
$('#editor').code(content);
});
</script>

<script>
layui.use(['form'], function () {
var form = layui.form;

form.on('submit(edit)', function (data) {

// 赋值(不是必须的,只是我的项目需要,其实就是转换回来,带标签)
var sHTML = $('.summernote').code();
$('#noticeContent').val(sHTML);

$.ajax({
url: "/sysNotice/notice/edit",
type: "put",
data: $(data.form).serialize(),
success: function (result) {
if (result.code == web_status.SUCCESS) {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.msg(result.msg, {
icon: 1,
time: 2000
}, function () {
window.parent.location.reload();
parent.layer.close(index);
});
} else {
parent.layer.msg(result.msg, {
icon: 2
})
}
}
})
return false;
})
});
</script>
</body>
</html>

写入数据库

页面展示

这里使用thymeleaf模板

注意:th:utext="*{noticeContent}" 支持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
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>公告视图展示</title>
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/css/ray-ui.css}">
<style>
pre{font-size: 14px; font-family: "微软雅黑";}
</style>
</head>
<body>

<div class="layui-fluid" th:object="${notice}">
<div class="layui-card" style="padding: 15px;">
<div class="layui-card-header">
<h1 th:text="*{noticeTitle}">标题</h1>
<!--<h4 th:text="'发布人: ' + *{noticeAuthor}" style="padding-left: 35px;">发布人</h4>-->
</div>
<div class="layui-card-body layui-text" style="padding: 35px;">
<div class="layuiadmin-text" th:utext="*{noticeContent}">
内容
</div>
</div>

<blockquote class="layui-elem-quote">
<h4 th:text="'发布人: ' + *{noticeAuthor}" style="padding-left: 35px;">发布人</h4>
<!--<h4 th:text="'发布时间: ' + *{createTime}" style="padding-left: 35px;">发布时间</h4>-->
</blockquote>
</div>
</div>


<script th:src="@{/js/ray-ui.js}"></script>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
</body>
</html>