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

Posted H5江湖上的小白,一个孤独的侠!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量简洁易用开源免费相关的知识,希望对你有一定的参考价值。

  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富文本编辑器, 轻量简洁易用开源免费的主要内容,如果未能解决你的问题,请参考以下文章

基于Spring+SpringMVC+MyBatis开发书评网(十三)后台管理之wangEditor图片上传

wangEditor 文本编辑器

wangeditor Demo

ThinkPHP6.0使用富文本编辑器wangEditor3

在线小说站点的设计与实现(附源代码)

如何使用wangEditor将数据存放到数据库中