wangEditor富文本编辑器上传文件方法
2018-12-27 本文已影响150人
你的代码写得很烂
引入JS
<script type="text/javascript" src="/we/wangEditor/wangEditor.min.js"></script>
<body>
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
</body>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
// 配置服务器端地址
editor.customConfig.uploadImgServer = '//file.xxxx.com/upload'
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 5;
editor.customConfig.uploadFileName = 'file[]';
editor.customConfig.uploadImgParams = {
type: 'image'
};
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor2) {
uploadResult(result);
var url = fileUrl+result.data.success[0].url;
insertImg(url);
}
}
function uploadResult(res){
if(res.code==200){
layer.msg("上传图片成功",{icon:1,time:1000});//使用layui的弹窗提示
}else{
layer.msg("上传图片失败",{icon:1,time:1000});
}
}
// 进行下文提到的其他配置
// ……
// ……
// ……
editor.create()
</script>
上传提示：
请求
由于wangEditor上传文件跨域使用OPTIONS请求，被服务器拒绝，需要在服务器开启options方法并允许跨域上传，可在该路由下设置返回允许跨域头部：
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
