/
summernote网页编辑器.html
68 lines (66 loc) · 2.52 KB
/
summernote网页编辑器.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="./source/summernote/summernote.css" rel="stylesheet">
<link rel="stylesheet" href="./source/bootstrap/css/bootstrap.min.css">
<script src="./source/jquery-3.1.0.js"></script>
<script src="./source/bootstrap/js/tether.min.js"></script>
<script src="./source/bootstrap/js/bootstrap.min.js"></script>
<script src="./source/summernote/summernote.js"></script>
<script src="./source/summernote/summernote-zh-CN.js"></script>
</head>
<body>
<p>试试在输入框按 ctry + y </p>
<div id="summernote">Hello Summernote</div>
<input type="button" value="查看值" onclick="show_value()">
<input type="button" value="摧毁" onclick="destroy()">
<input type="button" value="重置" onclick="create()">
<input type="text" placeholder="输入你要添加的数据" id="text">
<input type="button" value="添加数据" onclick="add()"><br>
<a href="http://summernote.org/">官网</a><br>
<a href="http://summernote.org/deep-dive/#onkeyup-onkeydown">回调事件</a><br>
<div id="summernote2">Hello Summernote</div>
<script>
$(document).ready(function() {
$('#summernote').summernote({
lang: 'zh-CN',
height: 300,
minHeight: null,
maxHeight: null,
focus: true,
callbacks: {
onKeydown: function(e) {
var select = window.getSelection()
node = select.focusNode
if (e.ctrlKey && e.keyCode==89) {
offset = select.focusOffset
node.textContent = node.textContent.slice(0, offset) + "你按了ctrl+y" + node.textContent.slice(offset)
}
code = $("#summernote").summernote("code");
$("#summernote2").summernote("destroy");
$("#summernote2").summernote("code", code)
}
}
});
});
function show_value() {
var code = $("#summernote").summernote('code');
alert(code);
};
function destroy() {
$("#summernote").summernote("destroy");
};
function create() {
$("#summernote").summernote("code", 'Hello Summernote<span style="background-color: rgb(255, 0, 0);">ewwewe</span>')
}
function add() {
var code = $("#summernote").summernote('code');
value = document.getElementById("text").value
$("#summernote").summernote("destroy");
$("#summernote").summernote("code", code+value)
}
</script>
</body>
</html>