Skip to content

Commit e1c9b88

Browse files
wangfupeng1988wangfupeng1988
committed
更新usage文档
1 parent c00f88f commit e1c9b88

14 files changed

Lines changed: 214 additions & 6 deletions

‎docs/usage/04-uploadimg/01-show-tab.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# 隐藏/显示 tab
2+
3+
## 显示“上传图片”tab
4+
5+
默认情况下，编辑器不会显示“上传图片”的tab，因为你还没有配置上传图片的信息。
6+
7+
![](http://images2015.cnblogs.com/blog/138012/201706/138012-20170601204308039-691571074.png)
8+
9+
参考一下示例显示“上传图片”tab
10+
11+
```html
12+
<div id="div1">
13+
<p>欢迎使用 wangEditor 富文本编辑器</p>
14+
</div>
15+
16+
<script type="text/javascript" src="/wangEditor.min.js"></script>
17+
<script type="text/javascript">
18+
var E = window.wangEditor
19+
var editor = new E('#div1')
20+
21+
// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
22+
// editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
23+
// editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
24+
25+
editor.create()
26+
</script>
27+
```
28+
29+
显示效果
30+
31+
![](http://images2015.cnblogs.com/blog/138012/201706/138012-20170601204504524-830243744.png)
32+
33+
## 隐藏“网络图片”tab
34+
35+
默认情况下，“网络图片”tab是一直存在的。如果不需要，可以参考一下示例来隐藏它。
36+
37+
```html
38+
<div id="div1">
39+
<p>欢迎使用 wangEditor 富文本编辑器</p>
40+
</div>
41+
42+
<script type="text/javascript" src="/wangEditor.min.js"></script>
43+
<script type="text/javascript">
44+
var E = window.wangEditor
45+
var editor = new E('#div1')
46+
47+
// 隐藏“网络图片”tab
48+
editor.customConfig.showLinkImg = false
49+
50+
editor.create()
51+
</script>
52+
```

‎docs/usage/04-uploadimg/02-base64.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# 使用 base64 保存图片
2+
3+
如果需要使用 base64 编码直接将图片插入到内容中，可参考一下示例配置
4+
5+
```html
6+
<div id="div1">
7+
<p>欢迎使用 wangEditor 富文本编辑器</p>
8+
</div>
9+
10+
<script type="text/javascript" src="/wangEditor.min.js"></script>
11+
<script type="text/javascript">
12+
var E = window.wangEditor
13+
var editor = new E('#div1')
14+
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
15+
editor.create()
16+
</script>
17+
```
18+
19+
示例效果如下
20+
21+
![](http://images2015.cnblogs.com/blog/138012/201706/138012-20170601204759258-1412289899.png)
22+
23+

‎docs/usage/04-uploadimg/03-upload-config.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# 上传图片 & 配置
2+
3+
将图片上传到服务器上的配置方式
4+
5+
## 上传图片
6+
7+
参考如下代码
8+
9+
```html
10+
<div id="div1">
11+
<p>欢迎使用 wangEditor 富文本编辑器</p>
12+
</div>
13+
14+
<script type="text/javascript" src="/wangEditor.min.js"></script>
15+
<script type="text/javascript">
16+
var E = window.wangEditor
17+
var editor = new E('#div1')
18+
19+
// 配置服务器端地址
20+
editor.customConfig.uploadImgServer = '/upload'
21+
22+
// 进行下文提到的其他配置
23+
// ……
24+
// ……
25+
// ……
26+
27+
editor.create()
28+
</script>
29+
```
30+
31+
其中`/upload`是上传图片的服务器端接口，接口返回的**数据格式**如下
32+
33+
```json
34+
{
35+
// errno 即错误代码，0 表示没有错误。
36+
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
37+
errno: 0,
38+
39+
// data 是一个数组，返回若干图片的线上地址
40+
data: [
41+
'图片1地址',
42+
'图片2地址',
43+
'……'
44+
]
45+
}
46+
```
47+
48+
## 限制图片大小
49+
50+
默认限制图片大小是 5M
51+
52+
```javascript
53+
// 将图片大小限制为 3M
54+
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
55+
```
56+
57+
## 自定义上传参数
58+
59+
上传图片时可自定义传递一些参数，例如传递验证的`token`等
60+
61+
```javascript
62+
editor.customConfig.uploadImgParams = {
63+
token: 'abcdef12345'
64+
}
65+
```
66+
67+
## 自定义 header
68+
69+
上传图片时刻自定义设置 header
70+
71+
```javascript
72+
editor.customConfig.uploadImgHeaders = {
73+
'Accept': 'text/x-json'
74+
}
75+
```
76+
77+
## withCredentials（跨域传递 cookie）
78+
79+
跨域上传中如果需要传递 cookie 需设置 withCredentials
80+
81+
```javascript
82+
editor.customConfig.withCredentials = true
83+
```
84+
85+
## 自定义 timeout 时间
86+
87+
默认的 timeout 时间是 5 秒钟
88+
89+
```javascript
90+
// 将 timeout 时间改为 3s
91+
editor.customConfig.uploadImgTimeout = 3000
92+
```
93+
94+
## 监听函数
95+
96+
可使用监听函数在上传图片的不同阶段做相应处理
97+
98+
```javascript
99+
editor.customConfig.uploadImgHooks = {
100+
before: function (xhr, editor, files) {
101+
// 请求发送之前
102+
},
103+
success: function (xhr, editor, result) {
104+
// 上传成功之后
105+
// result 是服务器端返回的结果
106+
},
107+
fail: function (xhr, editor, result) {
108+
// 上传失败之后
109+
// result 是服务器端返回的结果
110+
},
111+
error: function (xhr, editor) {
112+
// 请求发生错误
113+
},
114+
timeout: function (xhr, editor) {
115+
// 请求超时
116+
}
117+
}
118+
```

‎docs/usage/05-other/01-全屏-预览-查看源码.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# 全屏 & 预览 & 查看源码
2+
3+
## 全屏
4+
5+
## 预览
6+
7+
## 查看源码
8+

‎docs/usage/05-other/02-上传附件.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# 关于上传附件
2+

‎docs/usage/05-other/03-markdown.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 关于 markdown

‎docs/usage/05-other/04-xss.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 预防 XSS 攻击

‎docs/usage/05-other/05-插入视频.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 如何插入视频

‎docs/usage/05-other/06-react.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 用于 React

‎docs/usage/05-other/07-vue.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 用于 Vue

0 commit comments

Comments
 (0)