您现在的位置是：首页 > 文章详情

wangEditor-基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费(2)

日期：2018-08-17点击：340收藏

 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>