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 ...
随机推荐
- ESB结合门户Portlet实现数据分析
1 背景概述 笔者在公司做集成项目时,通常会涉及ESB与Portal结合实现图表数据分析功能.通过ESB获取数据库信息,然后在门户上采用Portlet接收ESB中的数据URL最后展现到门户上.本文为项 ...
- php安装扩展的几种方法
转自:http://doc3.workerman.net/appendices/install-extension.html 安装扩展 注意 与Apache+PHP或者Nginx+PHP的运行模式不同 ...
- git checkout tags with the same name as a branch
显式指定某个 tag git checkout refs/tags/ git checkout refs/tags/v0.1 显式指定某个 branch git checkout refs/heads ...
- 在虚拟机上安装redis集群，redis使用版本为4.0.5,本机通过命令客户端可以连接访问，外部主机一直访问不了
在虚拟机上安装了redis 4 ,启动后本机客户端可以连接访问,但是外部主机一直访问不了,在使用java代码连接redis集群时报:no reachable node in cluster,原因:在r ...
- LabVIEW（十五）：右键菜单添加创建VI模版
如果在项目研究中使用到的某一个模版文件次数较多,可以单独为某一个模版文件新建右键选项.以文本格式打开注册表,添加的右键内容即为Data后面的内容.Reg内容不可手动修改,可以通过LabVIEW的编程实 ...
- docker配置仓储库时出错：无法安全地用该源进行更新，所以默认禁用该源
在Ubuntu上安装docker,配置仓储库时第一次使用了阿里去的镜像,如下 sudo add-apt-repository "deb [arch=amd64] http://mirrors ...
- ArrayList源码解读笔记
简介: ArrayList是我们开发中非常常用的数据存储容器之一,其底层是数组实现的,我们可以在集合中存储任意类型的数据,ArrayList是线程不安全的,非常适合用于对元素进行查找,效率非常高. 线 ...
- UFLDL 教程学习笔记（三）自编码与稀疏性
UFLDL(Unsupervised Feature Learning and Deep Learning)Tutorial 是由 Stanford 大学的 Andrew Ng 教授及其团队编写的一套 ...
- 【Java基本功】一文读懂final关键字的用法
本文主要介绍了final关键字的基本使用方法及原理 final关键字可以修饰类.方法和引用. 修饰类,该类不能被继承.并且这个类的对象在堆中分配内存后地址不可变. 修饰方法,方法不能被子类重写. 修饰 ...
- rtf格式 C#设置字间距 CharacterSpacing
richtextbox空间中操作行间距段间距都可以用发送消息解决,但是字间距却鲜有人关注,无法通过PARAFORMAT2消息解决,只能直接操作rtf格式 字间距主要就是要控制 expand expan ...