wangEditor-基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费(2)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>wangEditor上传图片到服务器</title>
</head> <body> <div id="editor"></div> <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="script/wangEditor-3.1.1.js"></script>
<script type="text/javascript">
// 声明富文本编辑器
var E = window.wangEditor; // 初始化富文本编辑器
var editor = new E('#editor'); // 上传图片到服务器
editor.customConfig.uploadImgServer = '/upload'; // 其中/upload是上传图片的服务器端接口 // 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 默认为 10000 张（即不限制），需要限制可自己配置
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 5; // 上传图片时可自定义传递一些参数，例如传递验证的token等。参数会被添加到formdata中
editor.customConfig.uploadImgParams = {
// 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
// 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
token: 'abcdef12345'
} // 如果还需要将参数拼接到 url 中，可再加上如下配置
editor.customConfig.uploadImgParamsWithUrl = true; // 上传图片时，可自定义filename，即在使用formdata.append(name, file)添加图片文件时，自定义第一个参数。
editor.customConfig.uploadFileName = 'yourFileName'; // 上传图片时刻自定义设置 header
editor.customConfig.uploadImgHeaders = {
'Accept': 'text/x-json'
} // 跨域上传中如果需要传递 cookie 需设置 withCredentials
editor.customConfig.withCredentials = true; // 默认的 timeout 时间是 10 秒钟
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 3000; // 上传图片的错误提示默认使用alert弹出，你也可以自定义用户体验更好的提示方式
editor.customConfig.customAlert = function(info) {
// info 是需要提示的内容
alert('自定义提示：' + info);
} // 可使用监听函数在上传图片的不同阶段做相应处理
editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件 // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function(xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function(xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function(xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function(xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
}, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function(insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果 // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
var url = result.url
insertImg(url) // result 必须是一个 JSON 格式字符串！！！否则报错
}
} // 如果想完全自己控制图片上传的过程，可以使用如下代码
editor.customConfig.customUploadImg = function(files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法 // 上传代码返回结果之后，将图片插入到编辑器中
insert(imgUrl)
} // 创建编辑器1
editor.create();
</script>
</body> </html>
wangEditor-基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费(2)的更多相关文章
- 重构wangEditor（web富文本编辑器），欢迎指正！
提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...
- wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- Java-Swing中使用Web富文本编辑器
资料下载 (截取出了邮件发送的功能.) 2018/11/10 因为要 win7 电脑 IE 8 的原因,使用了 jxBrower 拓展,更容易使用,参考链接(推荐) 问题介绍 window客户端软件的 ...
- web富文本编辑器收集
1.UEditor 百度的. 优点:插件多,基本满足各种需求,类似贴吧中的回复界面. 缺点:不再维护,文档极少,使用并不普遍,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办, ...
- web 富文本编辑器总结
前言 富文本编辑器,就是除了能输入不同的文本之外,还可以之间粘贴图画等其他的多媒体信息.也可说是所见即所得的编辑器. 目前可以使用的编辑器有很多, 在网络上有找到这样一份比较表格: 编辑器 产地 稳定 ...
- wangEditor——轻量化web富文本框
wangEditor——轻量级web富文本编辑器 参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 交 ...
- 基于jeesite的cms系统（五）：wangEditor富文本编辑器
一.关于wangEditor: wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.ka ...
- 轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
随机推荐
- 精选！15个必备的VSCode插件
Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市 ...
- 761. Special Binary String
Special binary strings are binary strings with the following two properties: The number of 0's is eq ...
- 机器学习技法笔记：10 Random Forest
Roadmap Random Forest Algorithm Out-Of-Bag Estimate Feature Selection Random Forest in Action Summar ...
- VS发布 错误 未能将文件 复制到
在VS内部编译及试运行的时候并为出现错误一切正常 当将项目发布时提示XXX文件无法复制到对应的obj文件夹下 未能将文件 upfile\team\2013\0328\20130328112637296 ...
- [EXP]Drupal < 8.5.11 / < 8.6.10 - RESTful Web Services unserialize() Remote Command Execution (Metasploit)
## # This module requires Metasploit: https://metasploit.com/download # Current source: https://gith ...
- ubuntu 增加一个用户 并赋予权限
一.添加一个用户 sudo adduser tommy //添加一个tommyd的用户 sudo passwd tommy // 修改密码 回车后出现一下提示 输入密码即可Changing pass ...
- 最好用的lua编辑器--------emmylua使用汇总
最好的lua编辑器Emmylua,欢迎打脸 官方文档 https://emmylua.github.io/zh_CN/ github https://github.com/EmmyLua ...
- Consul常用命令
1.consul启动# consul agent -dev # -dev表示开发模式运行,另外还有-server表示服务模式运行 注意:-dev节点的启动不能用于生产环境,因为该模式下不会持久化任何状 ...
- HDFS集群数据不均衡处理
一.概述 公司使用是自己搭建的hadoop集群,版本2.7.3,最近发现出现了hdfs数据存储不均衡的现象,其中有一个datanode使用了65%,而有一个只使用了20%.hadoop集群使用的时间长 ...
- 【awesome-dotnet-core-learning】(1)-Sprache-解析器构建库
[awesome-dotnet-core-learning](1)-Sprache-解析器构建库 关于awesome-dotnet-core-learning .NET Core从2016年发布1.0 ...