<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>wangEditor上传图片到服务器</title>
</head> <body> <div id="editor"></div> <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="script/wangEditor-3.1.1.js"></script>
<script type="text/javascript">
// 声明富文本编辑器
var E = window.wangEditor; // 初始化富文本编辑器
var editor = new E('#editor'); // 上传图片到服务器
editor.customConfig.uploadImgServer = '/upload'; // 其中/upload是上传图片的服务器端接口 // 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 默认为 10000 张（即不限制），需要限制可自己配置
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 5; // 上传图片时可自定义传递一些参数，例如传递验证的token等。参数会被添加到formdata中
editor.customConfig.uploadImgParams = {
// 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
// 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
token: 'abcdef12345'
} // 如果还需要将参数拼接到 url 中，可再加上如下配置
editor.customConfig.uploadImgParamsWithUrl = true; // 上传图片时，可自定义filename，即在使用formdata.append(name, file)添加图片文件时，自定义第一个参数。
editor.customConfig.uploadFileName = 'yourFileName'; // 上传图片时刻自定义设置 header
editor.customConfig.uploadImgHeaders = {
'Accept': 'text/x-json'
} // 跨域上传中如果需要传递 cookie 需设置 withCredentials
editor.customConfig.withCredentials = true; // 默认的 timeout 时间是 10 秒钟
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 3000; // 上传图片的错误提示默认使用alert弹出，你也可以自定义用户体验更好的提示方式
editor.customConfig.customAlert = function(info) {
// info 是需要提示的内容
alert('自定义提示：' + info);
} // 可使用监听函数在上传图片的不同阶段做相应处理
editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件 // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function(xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function(xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function(xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function(xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
}, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function(insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果 // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
var url = result.url
insertImg(url) // result 必须是一个 JSON 格式字符串！！！否则报错
}
} // 如果想完全自己控制图片上传的过程，可以使用如下代码
editor.customConfig.customUploadImg = function(files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法 // 上传代码返回结果之后，将图片插入到编辑器中
insert(imgUrl)
} // 创建编辑器1
editor.create();
</script>
</body> </html>