forked from Tencent/cherry-markdown
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathimg.html
142 lines (136 loc) · 5.14 KB
/
img.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片所见即所得编辑</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#markdown {
margin-top: 5%;
width: 70%;
margin-left: auto;
margin-right: auto;
}
</style>
<link rel="stylesheet" type="text/css" href="../dist/cherry-markdown.css">
<link rel="Shortcut Icon" href="./logo/favicon.ico">
<link rel="Shortcut Icon" href="../logo/favicon.ico">
<link rel="Bookmark" href="../logo/favicon.ico">
</head>
<body>
<div id="dom_mask" style="position: absolute; top: 40px; height: 20px; width: 100%;"></div>
<div id="markdown"></div>
<script>
markdownSample = `## 点击预览区的图片来修改图片尺寸
标准图片 
**效果**
标准图片 
设置图片大小(相对大小&绝对大小) 
设置图片对齐方式：
**左对齐**
**居中**
**右对齐**
**浮动左对齐**
开心也是一天，不开心也是一天
这样就过了两天，汪
**效果**
标准图片 
设置图片大小(相对大小&绝对大小) 
设置图片对齐方式：
**左对齐**
**居中**
**右对齐**
**浮动左对齐**
开心也是一天，不开心也是一天
这样就过了两天，汪
**效果**
标准图片 
设置图片大小(相对大小&绝对大小) 
设置图片对齐方式：
**左对齐**
**居中**
**右对齐**
**浮动左对齐**
开心也是一天，不开心也是一天
这样就过了两天，汪
# 例子
> [Github 地址](https://github.com/Tencent/cherry-markdown){target=_blank}
- [basic](index.html){target=_blank}
- [H5](h5.html){target=_blank}
- [多实例](multiple.html){target=_blank}
- [无 toolbar](notoolbar.html){target=_blank}
- [纯预览模式](preview_only.html){target=_blank}
- [注入](xss.html){target=_blank}
- [API](api.html){target=_blank}
- [图片所见即所得编辑尺寸](img.html){target=_blank}
- [标题自动序号](head_num.html){target=_blank}
`;
</script>
<script src="../dist/cherry-markdown.js"></script>
<script>
var cherry = new Cherry({
id: 'markdown',
toolbars: {
toolbar: ['bold', 'italic', 'strikethrough', '|', 'header', 'list', 'graph']
},
editor: {
height: '70%'
},
previewer: {
lazyLoadImg: {
// 加载图片时如果需要展示loading图，则配置loading图的地址
loadingImgPath: '',
// 同一时间最多有几个图片请求，最大同时加载6张图片
maxNumPerTime: 2,
// 不进行懒加载处理的图片数量，如果为0，即所有图片都进行懒加载处理， 如果设置为-1，则所有图片都不进行懒加载处理
noLoadImgNum: 3,
// 首次自动加载几张图片（不论图片是否滚动到视野内），autoLoadImgNum = -1 表示会自动加载完所有图片
autoLoadImgNum: 2,
// 针对加载失败的图片 或 beforeLoadOneImgCallback 返回false 的图片，最多尝试加载几次，为了防止死循环，最多5次。以图片的src为纬度统计重试次数
maxTryTimesPerSrc: 2,
// 加载一张图片之前的回调函数，函数return false 会终止加载操作
beforeLoadOneImgCallback: (img) => {return true;},
// 加载一张图片失败之后的回调函数
failLoadOneImgCallback: (img) => {},
// 加载一张图片之后的回调函数，如果图片加载失败，则不会回调该函数
afterLoadOneImgCallback: (img) => {},
// 加载完所有图片后调用的回调函数
afterLoadAllImgCallback: () => {alert('all img lond done')},
},
},
value: markdownSample,
});
</script>
</body>
</html>