-
Notifications
You must be signed in to change notification settings - Fork 0
/
medium-editor.html
140 lines (136 loc) · 8.75 KB
/
medium-editor.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
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页编辑器</title>
<!-- Bootstrap -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css">
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>网页编辑器</h1>
<div class="row">
<div class="editable" style="height: 600px; border:1px solid #ccc;">
编辑内容……
</div>
</div>
</div>
<link href="http://cdn.bootcss.com/medium-editor/5.0.0-alpha.0/css/medium-editor.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/medium-editor/5.0.0-alpha.0/css/themes/default.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/medium-editor/5.0.0-alpha.0/js/medium-editor.min.js"></script>
<!-- The plugin itself -->
<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">
<!-- JS -->
<script src="http://cdn.bootcss.com/handlebars.js/3.0.3/handlebars.runtime.min.js"></script>
<script src="bower_components/jquery-sortable/source/js/jquery-sortable-min.js"></script>
<!-- Unfortunately, jQuery File Upload Plugin has a few more dependencies itself -->
<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="http://cdn.bootcss.com/blueimp-file-upload/9.5.7/jquery.iframe-transport.js"></script>
<script src="http://cdn.bootcss.com/blueimp-file-upload/9.5.7/jquery.fileupload.js"></script>
<!-- The plugin itself -->
<script src="bower_components/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.min.js"></script>
<script type="text/javascript">
var editor = new MediumEditor('.editable');
$(function () {
$('.editable').mediumInsert({
editor: null,
enabled: true, // (boolean) If the plugin is enabled
addons: { // (object) Addons configuration
images: { // (object) Image addon configuration
label: '<span class="fa fa-camera"></span>', // (string) A label for an image addon
uploadScript: null, // DEPRECATED: Use fileUploadOptions instead
deleteScript: 'delete.php', // (string) A relative path to a delete script
preview: true, // (boolean) Show an image before it is uploaded (only in browsers that support this feature)
captions: true, // (boolean) Enable captions
captionPlaceholder: 'Type caption for image (optional)', // (string) Caption placeholder
autoGrid: 3, // (integer) Min number of images that automatically form a grid
formData: {}, // DEPRECATED: Use fileUploadOptions instead
fileUploadOptions: { // (object) File upload configuration. See https://github.com/blueimp/jQuery-File-Upload/wiki/Options
url: 'upload.php', // (string) A relative path to an upload script
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i // (regexp) Regexp of accepted file types
},
styles: { // (object) Available image styles configuration
wide: { // (object) Image style configuration. Key is used as a class name added to an image, when the style is selected (.medium-insert-images-wide)
label: '<span class="fa fa-align-justify"></span>', // (string) A label for a style
added: function ($el) {}, // (function) Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
removed: function ($el) {} // (function) Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
},
left: {
label: '<span class="fa fa-align-left"></span>'
},
right: {
label: '<span class="fa fa-align-right"></span>'
},
grid: {
label: '<span class="fa fa-th"></span>'
}
},
actions: { // (object) Actions for an optional second toolbar
remove: { // (object) Remove action configuration
label: '<span class="fa fa-times"></span>', // (string) Label for an action
clicked: function ($el) { // (function) Callback function called when an action is selected
var $event = $.Event('keydown');
$event.which = 8;
$(document).trigger($event);
}
}
},
messages: {
acceptFileTypesError: 'This file is not in a supported format: ',
maxFileSizeError: 'This file is too big: '
},
uploadCompleted: function ($el, data) {} // (function) Callback function called when upload is completed
},
embeds: { // (object) Embeds addon configuration
label: '<span class="fa fa-youtube-play"></span>', // (string) A label for an embeds addon
placeholder: 'Paste a YouTube, Vimeo, Facebook, Twitter or Instagram link and press Enter', // (string) Placeholder displayed when entering URL to embed
captions: true, // (boolean) Enable captions
captionPlaceholder: 'Type caption (optional)', // (string) Caption placeholder
oembedProxy: 'http://medium.iframe.ly/api/oembed?iframe=1', // (string/null) URL to oEmbed proxy endpoint, such as Iframely, Embedly or your own. You are welcome to use "http://medium.iframe.ly/api/oembed?iframe=1" for your dev and testing needs, courtesy of Iframely. *Null* will make the plugin use pre-defined set of embed rules without making server calls.
styles: { // (object) Available embeds styles configuration
wide: { // (object) Embed style configuration. Key is used as a class name added to an embed, when the style is selected (.medium-insert-embeds-wide)
label: '<span class="fa fa-align-justify"></span>', // (string) A label for a style
added: function ($el) {}, // (function) Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
removed: function ($el) {} // (function) Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
},
left: {
label: '<span class="fa fa-align-left"></span>'
},
right: {
label: '<span class="fa fa-align-right"></span>'
}
},
actions: { // (object) Actions for an optional second toolbar
remove: { // (object) Remove action configuration
label: '<span class="fa fa-times"></span>', // (string) Label for an action
clicked: function ($el) { // (function) Callback function called when an action is selected
var $event = $.Event('keydown');
$event.which = 8;
$(document).trigger($event);
}
}
}
}
}
});
});
</script>
<!-- Scripts -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>