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 ...
随机推荐
- Android 实现手写板技术
Android手写板和涂鸦的功能,代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...
- JavaScript使用注意事项
1.jQuery和JS中页面加载完后执行方法的写法 (1)在javascript中用来执行页面加载中的操作时候,我们会使用 window.onload=function(){} window.onlo ...
- 分享一个windows下检测硬件信息的bat脚本
文件名必须以.bat结尾,如果出现闪退,请右击鼠标,以管理身份运行即可 @echo offcolor 0atitle 硬件检测 mode con cols=90sc config winmgmt st ...
- web.xml简介
用于配置Web应用的相关信息,如:监听器(listener).过滤器(filter). Servlet.相关参数.会话超时时间.安全验证方式.错误页面等.例如: Servlet 3中的异步处理指的是什 ...
- 脚手架vue-cli系列三：vue-cli工程webpack的作用和特点
Vue项目开发过程中,会因为很多不同的实际运用需求不断地对webpack配置进行修改,在此之前,我们需要对webpack有一个基本的认识,了解它到底能为我们做些什么 webpack是一个模块打包的工具 ...
- 1-VScode格式化ESlint-方法（最全最好用方法！）
1-VScode格式化ESlint-方法(最全最好用方法!) ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VSc ...
- C# 使用PrintDocument类打印标签
最近做了一个项目,使用不干胶标签贴在RFID抗金属标签上,那么就会出现标签打印的问题,该如何打印呢?后来经过网上冲浪发现,其实打印标签和打印A4纸的方法一样,只不过就是布局.设置纸张大小的问题. 本文 ...
- vue脚手架构
我们是用Eclipse开发的,所以用vue开始时,要进行代理,不然访问不到服务器,所以就需要配置一下 dev context 里面写的是代理的接口,就是以这些接口开头的,如果没有就往里写一下,pro ...
- 目标检测模型的性能评估--MAP（Mean Average Precision）
目标检测模型中性能评估的几个重要参数有精确度,精确度和召回率.本文中我们将讨论一个常用的度量指标:均值平均精度,即MAP. 在二元分类中,精确度和召回率是一个简单直观的统计量,但是在目标检测中有所不同 ...
- await和async在一般处理程序中的使用
写在前面 有个小项目,前端使用的html页面,那服务端的业务处理就采用最简单的一般处理程序了,之前一直在用,觉得一直用一种方式,确实挺蛋疼的,之前也有了解过async和await的内容.就想着自己折腾 ...