-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (148 loc) · 6.19 KB
/
index.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=0, initial-scale=1.0,user-scalable='no"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> LittleEditor </title>
<link rel="stylesheet" href="./common.css">
<script src="./common.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.js"></script>
<script src="./image.js"></script>
<script src="https://cdn.bootcss.com/plupload/3.1.1/plupload.full.min.js"></script>
<script src="./qiniu.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link href="./quill.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<script src="./util.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="header-title">
<div class="titleDiv">
<div class="pageTitle">写文章</div>
<div class="pageSubTitle"></div>
</div>
</div>
<div class="view">
<img class="phoneView" src="./img/iPhoneX.png" alt="手机预览" title="手机预览">
<img class="computerView" src="./img/computer.png" alt="电脑预览" title="电脑预览">
</div>
</div>
<div class="wrap">
<div class="pagephoto">
<input class="fileInput " style="" type="file" accept=".jpeg, .jpg, .png" onchange='imgPreview(this)'></input>
<img id="preview" src="" alt="">
<img class="camera" id="camera" src="./img/photo.png" alt="">
<span class="phototitle">添加题图</span>
<span class="deleteImg">
<img class="reUpImg" src="./img/reUpImg.png" alt="重新上传">
</span>
</div>
<br />
<div id="contain">
<input class="inputBox" type="text" value='' placeholder="请输入标题" minlength="1" maxlength="32">
<div id="toolbarContainer">
<div id="toolbar">
<select class="ql-header">
<option selected>正文</option>
<option value="2">小标题</option>
<option value="1">大标题</option>
</select>
<embed class="undo" title="撤销" src="./img/undo.png" alt="撤销">
<embed class="redo" title="重做" src="./img/redo.png" alt="重做">
<button class="ql-image" title="添加图片"></button>
<button type="button" class="ql-link">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="7" x2="11" y1="7" y2="11"></line>
<path class="ql-even ql-stroke" title="sd sa" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z">222</path>
<path class="ql-even ql-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z">333</path>
</svg>
</button>
<button type="button" class="ql-code-block">
<svg viewBox="0 0 18 18">
<polyline class="ql-even ql-stroke" points="5 7 3 9 5 11"></polyline>
<polyline class="ql-even ql-stroke" points="13 7 15 9 13 11"></polyline>
<line class="ql-stroke" x1="10" x2="8" y1="5" y2="13"></line>
</svg>
</button>
</div>
</div>
<div id="editor" tabindex="">
</div>
</div>
</div>
</div>
</body>
<style>
@media screen and (max-width: 500px) {
editor img{
width:100% !important;
height: auto !important;
}
}
</style>
<script>
function imgPreview(fileDom) {
//判断是否支持FileReader
if (window.FileReader) {
var readerfile = new FileReader();
} else {
alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
}
//获取文件
var file = fileDom.files[0];
console.log();
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片！");
return;
}
//读取完成
readerfile.onload = function (e) {
console.log("1111");
console.log(e);
//获取图片dom
var img = document.getElementById("preview");
//图片路径设置为读取的图片
console.log("2222");
img.src = e.target.result;
console.log(img.src);
console.log('---------------------');
console.log(e.target.width);
$('.pagephoto').css({"background-color":"#ffffff"});
$('.fileInput').css({
'display': 'none',
'width': '0px',
'height': '0px'
});
$('.camera').css({
'display': 'none',
'width': '0px',
'height': '0px'
});
$('.phototitle').css({
'display': 'none'
});
document.getElementById('preview').setAttribute('src', img.src);
};
readerfile.readAsDataURL(file);
}
$(document).ready(function () {
console.log('ready');
var quill = new Quill('#editor', {
modules: {
'toolbar': ' #toolbar'
},
placeholder: '请输入正文',
theme: 'snow'
});
view(quill);
})
</script>
<style>
</style>
</html>