1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>wangEditor上传图片到服务器</title>
7 </head>
8
9 <body>
10
11 <div id="editor"></div>
12
13 <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
14 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
15 <script type="text/javascript" src="script/wangEditor-3.1.1.js"></script>
16 <script type="text/javascript">
17 // 声明富文本编辑器
18 var E = window.wangEditor;
19
20 // 初始化富文本编辑器
21 var editor = new E('#editor');
22
23 // 上传图片到服务器
24 editor.customConfig.uploadImgServer = '/upload'; // 其中/upload是上传图片的服务器端接口
25
26 // 将图片大小限制为 3M
27 editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
28
29 // 默认为 10000 张(即不限制),需要限制可自己配置
30 // 限制一次最多上传 5 张图片
31 editor.customConfig.uploadImgMaxLength = 5;
32
33 // 上传图片时可自定义传递一些参数,例如传递验证的token等。参数会被添加到formdata中
34 editor.customConfig.uploadImgParams = {
35 // 如果版本 <=v3.1.0 ,属性值会自动进行 encode ,此处无需 encode
36 // 如果版本 >=v3.1.1 ,属性值不会自动 encode ,如有需要自己手动 encode
37 token: 'abcdef12345'
38 }
39
40 // 如果还需要将参数拼接到 url 中,可再加上如下配置
41 editor.customConfig.uploadImgParamsWithUrl = true;
42
43 // 上传图片时,可自定义filename,即在使用formdata.append(name, file)添加图片文件时,自定义第一个参数。
44 editor.customConfig.uploadFileName = 'yourFileName';
45
46 // 上传图片时刻自定义设置 header
47 editor.customConfig.uploadImgHeaders = {
48 'Accept': 'text/x-json'
49 }
50
51 // 跨域上传中如果需要传递 cookie 需设置 withCredentials
52 editor.customConfig.withCredentials = true;
53
54 // 默认的 timeout 时间是 10 秒钟
55 // 将 timeout 时间改为 3s
56 editor.customConfig.uploadImgTimeout = 3000;
57
58 // 上传图片的错误提示默认使用alert弹出,你也可以自定义用户体验更好的提示方式
59 editor.customConfig.customAlert = function(info) {
60 // info 是需要提示的内容
61 alert('自定义提示:' + info);
62 }
63
64 // 可使用监听函数在上传图片的不同阶段做相应处理
65 editor.customConfig.uploadImgHooks = {
66 before: function(xhr, editor, files) {
67 // 图片上传之前触发
68 // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
69
70 // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
71 // return {
72 // prevent: true,
73 // msg: '放弃上传'
74 // }
75 },
76 success: function(xhr, editor, result) {
77 // 图片上传并返回结果,图片插入成功之后触发
78 // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
79 },
80 fail: function(xhr, editor, result) {
81 // 图片上传并返回结果,但图片插入错误时触发
82 // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
83 },
84 error: function(xhr, editor) {
85 // 图片上传出错时触发
86 // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
87 },
88 timeout: function(xhr, editor) {
89 // 图片上传超时时触发
90 // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
91 },
92
93 // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
94 // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
95 customInsert: function(insertImg, result, editor) {
96 // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
97 // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
98
99 // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
100 var url = result.url
101 insertImg(url)
102
103 // result 必须是一个 JSON 格式字符串!!!否则报错
104 }
105 }
106
107 // 如果想完全自己控制图片上传的过程,可以使用如下代码
108 editor.customConfig.customUploadImg = function(files, insert) {
109 // files 是 input 中选中的文件列表
110 // insert 是获取图片 url 后,插入到编辑器的方法
111
112 // 上传代码返回结果之后,将图片插入到编辑器中
113 insert(imgUrl)
114 }
115
116 // 创建编辑器1
117 editor.create();
118 </script>
119 </body>
120
121 </html>