index.html
5.93 KB
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<title>内容编辑器-Content Editor</title>
<meta charset="utf-8">
<base href="./">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link href="lib/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="lib/jquery/jquery-2.2.3.min.js"></script>
<script src="lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="lib/summernote/summernote.css" rel="stylesheet">
<script src="lib/summernote/summernote.js"></script>
<!-- include summernote-ko-KR -->
<script src="lib/summernote/lang/summernote-zh-CN.js"></script>
</head>
<body>
<div id="summernote"></div>
<div id="preview" style="padding:1em">
</div>
<script src="lib/lrz/lrz.bundle.js"></script>
<script>
$(document).ready(function() {
function Publisher(options) {
if (!(this instanceof Publisher)) {
return new Publisher();
}
var $editor;
function init(editor) {
$editor = $(editor);
var ImageGallery = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-image fa-inverse" style="color: #f02020"></i>',
tooltip: '图库',
click: function () {
// invoke insertText method with 'hello' on editor module.
context.invoke('editor.insertText', '来源自图库...');
context.invoke('editor.insertNode', document.createElement('p'));
context.invoke('editor.insertImage', 'http://domino.chuangcheng.co/appimg/000151418f2f4b82b924649fccd47eb5_1vuy5a.jpg', 'food');
}
});
return button.render(); // return button as jquery object
};
var Publish = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-send-o" style="color: #2020f0"></i>',
tooltip: '发布',
click: function () {
// invoke insertText method with 'hello' on editor module.
$('#preview').html($editor.summernote('code'));
}
});
return button.render(); // return button as jquery object
};
$editor.summernote({
height: 500, // set editor height
minHeight: 300, // set minimum height of editor
//maxHeight: 760, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
lang: 'zh-CN',
placeholder: '写点什么...',
toolbar: [
['font', ['fontname', 'fontsize', 'color']],
['font-style', ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript']],
['para', ['style', 'paragraph', 'height']],
['media', ['gallery', 'picture', 'link', 'video']],
['insert', ['table', 'hr', 'ol', 'ul']],
['misc', ['clear', 'undo', 'redo']],
['send', ['publish']],
['tools', ['fullscreen', 'codeview', 'help']]
],
fontNames: ['微软雅黑', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
'Tahoma', 'Times New Roman'],
fontNamesIgnoreCheck: ['微软雅黑'],
buttons: {
gallery: ImageGallery,
publish: Publish
},
callbacks: {
onImageUpload: function(files) {
//upload image to server and create imgNode...
var image = files[0];
if (image.size <= 102400) {
$editor.summernote('insertImages', [image]);
} else {
lrz(image, {
width: 1024
})
.then(function (rst) {
rst.formData.append('fileLen', rst.fileLen);
rst.formData.append('xxx', '我是其他参数');
$.ajax({
data: rst.formData,
type: "POST",
url: "/upload",
cache: false,
contentType: false,
processData: false,
success: function(result) {
var file = result.content.files[0]||{};
console.log(file);
if (file.size) {
setTimeout(function () {
$editor.summernote('insertImage', file.url, function ($image) {
$image.css('width', $image.width() / 3);
$image.attr('data-filename', file.name);
});
}, 1000); //等待上传处理图片
}
}
});
});
}
}
},
onImageUploadError: function(e) {
console.log(e);
}
});
$editor.summernote('fontSize', '24');
$editor.summernote('fontName', '微软雅黑');
}
this.init = init;
}
var publisher = new Publisher();
publisher.init($('#summernote'));
});
</script>
</body>
</html>