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 ...
随机推荐
- XCode 设置自定义环境变量
XCode 设置自定义环境变量 Product -> Scheme -> Edit Scheme -> 之后设置环境变量.
- grid布局笔记学习一之父元素（容器）
HTML代码: <div id="box"> <div class="lbox box1" style="background: # ...
- JavaScript的BOM编程，事件-第4章
目标 BOM编程 window和document对象 window对象的属性和方法 document对象的属性和方法 JavaScript中对象的分类 浏览器对象:window对象 window对象, ...
- Python3入门机器学习经典算法与应用
<Python3入门机器学习经典算法与应用> 章节第1章 欢迎来到 Python3 玩转机器学习1-1 什么是机器学习1-2 课程涵盖的内容和理念1-3 课程所使用的主要技术栈第2章 机器 ...
- LeetCode--No.015 3Sum
15. 3Sum Total Accepted: 131800 Total Submissions: 675028 Difficulty: Medium Given an array S of n i ...
- 30-socketserver类
SocketServer模块简化了编写网络服务程序的任务.同时SocketServer模块也是Python标准库中很多服务器框架的基础. socketserver模块可以简化网络服务器的编写,Pyth ...
- Python常用模块os & sys & shutil模块
OS模块 import os ''' os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录: ...
- Python模块学习 - Paramiko
简介 ssh是一个协议,OpenSSH是其中一个开源实现,paramiko是Python的一个库,实现了SSHv2协议(底层使用cryptography). 有了Paramiko以后,我们就可以在Py ...
- iOS之Settings.Bundle的应用
Settings.Bundle Settings.Bundle支持六种配置项分别是:Title,MultiValue,Group,Slider,ToggleSwitch,TextField . Tit ...
- PCA降维实验代码
实验需要提取数据的空间信息,所以要对光谱进行降维,使用主成分分析算法,样例代码备份如下 # -*- coding: utf-8 -*- """ Created on Mo ...