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

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

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