开发者社区> prosperlee> 正文

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

简介: 1 DOCTYPE html> 2 3 4 5 6 wangEditor上传图片到服务器 7 8 9 10 11 12 13 14 15 16...
+关注继续查看
  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>

 

GitHub:Fuck me on GitHub Fuck me on GitHub

留下你的足迹求推荐呦

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
升级 | Java开源诊断工具 Arthas 发布v3.1.0
Arthas 自2018年9月份上线以来「传送门」,已收获近万个star,感谢开发者们的认可。此次Arthas 3.1.0版本的发布,不仅带来大家投票出来的新LOGO,还带来强大的新功能和更好的易用性,下面一一介绍。
8299 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27728 0
给微赞程序富文本编辑器加上传附件功能
微赞程序中,新闻编辑中,使用的ueditor,做了定制,去掉了一些按钮,但是一些情况下需要上传附件 如果给ueditor加上上传附件的图标,富文本编辑的调用是使用了以下函数的 function tpl_ueditor($id, $value = '', $options = array()) { 函数所在位置在/web/common/tpl.func.php这个文件中约985
2154 0
自己开发一个Java ORM框架(5)-CRUD操作源码
本文目录 1. 整体思路介绍 2. 注解设计与实现 3. 实体类结构解析器DataTable的实现 4. 通过表结构类DataTable生成sql语句 5. 通过EntityOperation封装数据库实体操作 6. 总结和展望
50 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19980 0
+关注
51
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载