UEditor调用上传图片、上传文件等模块
来源：https://www.cnblogs.com/lhm166/articles/6079973.html
说到百度富文本编辑器ueditor（下面简称ue），我不得不给它一个大大的赞。我们在网站建设、前端开发时，网站的内容管理就使用了它。对于它的多图片上传和附件上传，个人感觉很好用，我就琢磨着是否可以外部调用多图上传和附件上传组件为自己所用，并封装成一个插件，节省单独开发的成本。
有了这个想法后，着手操作，理下实现思路，得出实现的关键在于监听这两个组件在编辑器里的插入动作。打开源码，苦心研究，皇天不负苦心人，终于摸索出解决方法，现在分享出来，给拥有同样想法的小伙伴，为网站建设届尽一份力。
注：本文基于UEditor1.4.3.3版本。
1、引入ue相关文件，写好初始代码
为了更好的封装整一个单独的插件，这里我们要做到示例化ue后隐藏网页中的编辑窗口，并移除焦点。
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>外部调用UEditor的多图上传和附件上传</title>
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
<style>
ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
li{list-style-type: none;margin: 5px;padding: 0;}
</style>
</head>
<body>
<h1>外部调用UEditor的多图上传和附件上传示例</h1> <button type="button" id="j_upload_img_btn">多图上传</button>
<ul id="upload_img_wrap"></ul> <button type="button" id="j_upload_file_btn">附件上传</button>
<ul id="upload_file_wrap"></ul> <!-- 加载编辑器的容器 -->
<textarea id="uploadEditor" style="display: none;"></textarea> <!-- 使用ue -->
<script type="text/javascript"> // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
var uploadEditor = UE.getEditor("uploadEditor", {
isShow: false,
focus: false,
enableAutoSave: false,
autoSyncData: false,
autoFloatEnabled:false,
wordCount: false,
sourceEditor: null,
scaleEnabled:true,
toolbars: [["insertimage", "attachment"]]
}); // todo::some code </script>
</body>
</html>
2、监听多图上传和上传附件组件的插入动作
uploadEditor.ready(function () {
// 监听插入图片
uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
// 监听插入附件
uploadEditor.addListener("afterUpfile",_afterUpfile);
});
3、自定义按钮绑定触发多图上传和上传附件对话框的事件
我们对id="j_upload_img_btn"和id="j_upload_file_btn"的两个button绑定触发ue多图上传和上传附件对话框的事件，这样我们才能够操作ue。
document.getElementById('j_upload_img_btn').onclick = function () {
var dialog = uploadEditor.getDialog("insertimage");
dialog.title = '多图上传';
dialog.render();
dialog.open();
};
document.getElementById('j_upload_file_btn').onclick = function () {
var dialog = uploadEditor.getDialog("attachment");
dialog.title = '附件上传';
dialog.render();
dialog.open();
};
4、多图上传
多图上传的核心在于“beforeInsertImage”动作，此动作返回已选图片的信息集合。
function _beforeInsertImage(t, result) {
var imageHtml = '';
for(var i in result){
imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
}
document.getElementById('upload_img_wrap').innerHTML = imageHtml;
}
5、新增“afterUpfile”动作
对于附件上传，ue源码中并未提供插入动作的相关事件，所以这里我们手动添加一个触发动作“afterUpfile”。
打开“ueditor.all.js”，搜索代码：
me.execCommand('insertHtml', html); //在此代码后插入以下代码
me.fireEvent('afterUpfile', filelist);
这样我们就新增了“afterUpfile”事件。
这里核心在于 “fireEvent”。
6、附件上传
上一步中我们新增了“afterUpfile”动作，这里直接监听就可以了。
function _afterUpfile(t, result) {
var fileHtml = '';
for(var i in result){
fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
}
document.getElementById('upload_file_wrap').innerHTML = fileHtml;
}
以下是完整代码：
注：本文基于UEditor1.4.3.3版本。
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>外部调用UEditor的多图上传和附件上传</title>
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
<style>
ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
li{list-style-type: none;margin: 5px;padding: 0;}
</style>
</head>
<body>
<h1>外部调用UEditor的多图上传和附件上传示例</h1> <button type="button" id="j_upload_img_btn">多图上传</button>
<ul id="upload_img_wrap"></ul> <button type="button" id="j_upload_file_btn">附件上传</button>
<ul id="upload_file_wrap"></ul> <!-- 加载编辑器的容器 -->
<textarea id="uploadEditor" style="display: none;"></textarea> <!-- 使用ue -->
<script type="text/javascript"> // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
var uploadEditor = UE.getEditor("uploadEditor", {
isShow: false,
focus: false,
enableAutoSave: false,
autoSyncData: false,
autoFloatEnabled:false,
wordCount: false,
sourceEditor: null,
scaleEnabled:true,
toolbars: [["insertimage", "attachment"]]
}); // 监听多图上传和上传附件组件的插入动作
uploadEditor.ready(function () {
uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
uploadEditor.addListener("afterUpfile",_afterUpfile);
}); // 自定义按钮绑定触发多图上传和上传附件对话框事件
document.getElementById('j_upload_img_btn').onclick = function () {
var dialog = uploadEditor.getDialog("insertimage");
dialog.title = '多图上传';
dialog.render();
dialog.open();
}; document.getElementById('j_upload_file_btn').onclick = function () {
var dialog = uploadEditor.getDialog("attachment");
dialog.title = '附件上传';
dialog.render();
dialog.open();
}; // 多图上传动作
function _beforeInsertImage(t, result) {
var imageHtml = '';
for(var i in result){
imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
}
document.getElementById('upload_img_wrap').innerHTML = imageHtml;
} // 附件上传
function _afterUpfile(t, result) {
var fileHtml = '';
for(var i in result){
fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
}
document.getElementById('upload_file_wrap').innerHTML = fileHtml;
}
</script>
</body>
</html>
UEditor调用上传图片、上传文件等模块的更多相关文章
- Shell脚本调用ftp上传文件
Shell脚本调用ftp上传文件 1.脚本如下 ftp -n<<! open x.x.x.x ###x.x.x.x为ftp地址 user username password ###user ...
- Django和Ueditor自定义存储上传文件的文件名
django台后默认上传文件名 在不使用分布式文件存储系统等第三方文件存储时,django使用默认的后台ImageField和FileField上传文件名默认使用原文件名,当出现同名时会在后面追加下随 ...
- 教你如何调用百度编辑器ueditor的上传图片、上传文件等模块
出于兴趣爱好,前段时间自己尝试写了一个叫simple的cms,里面使用了百度ueditor编辑器,发现它的多图片上传模块很不错,用起来很方便,又可以选择已经上传好的图片.正好我又是个懒人,发现有现成的 ...
- 图片上传和显示——上传图片——上传文件）==ZJ
http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...
- 使用RestTemplate调用接口上传文件
场景 接口接受一个文件,缓存在本地,验证文件的完整性及内容,然后将文件上传至云服务器: 下面只写利用RestTemplate将文件上传至云服务器,至于文件上传以及缓存在本地可以参考:JAVA文件上传: ...
- JAVA调用FTP上传文件
import java.io.File; import java.io.FileInputStream; import org.apache.commons.net.ftp.FTP; import o ...
- 最近上传图片上传文件报413错误及仅Https下报413问题，IIS高版本的配置方案及Web.config配置全解
IIS文件上传大小限制30M,C盘中有的IIS_schema.xml文件 C:\Windows\System32\inetsrv\config\schema\ 但是考虑到安全等问题,而且这个文件默认是 ...
- ueditor浏览器 无法上传文件.问题
dll也都引用了 路径绝对tmd没问题 最后 我一点一点的调试发现了问题 草tmd百度程序员 */UE.ajax = function() { //创建一个ajaxRequest对象 var fnSt ...
- C# HttpClient Post 参数同时上传文件 上传图片 调用接口
// 调用接口上传文件 using (var client = new HttpClient()) { using (var multipartFormDataContent = new Multip ...
随机推荐
- .NET CORE学习笔记系列(6)——KestrelServer
原文:http://www.cnblogs.com/artech/p/KestrelServer.html 跨平台是ASP.NET Core一个显著的特性,而KestrelServer是目前微软推出了 ...
- nginx [alert] 12339#0: 1024 worker_connections are not enough
进一步分析报错原因,具体步骤如下: l 查看这两台系统最大的允许文件打开数 [root@nginx01 logs]# cat /proc/sys/fs/file-max 343927 l 通过ul ...
- PHP处理XML文档，没有CDATA部分数据处理
在博客备份时,导出了所有文章,导出是xml文档,文章内容在CDATA部分. 这里介绍下XML中CDATA: 所有 XML 文档中的文本均会被解析器解析.只有 CDATA 区段(CDATA sectio ...
- Github 上 Star 最多的个人 Spring Boot 开源学习项目
2016年,在一次技术调研的过程中认识到了 Spring Boot ,试用之后便一发不可收拾的爱上它.为了防止学习之后忘记,就在网上连载了 Spring Boot 系列文章,没想到这一开始便与 Spr ...
- Java 向MySql 插入日期和时间正确的姿势
Mysql和Java之间时间对应关系表: date java.sql.Date Datetime java.sql.Timestamp Timestamp ...
- EChars学习之路1
引入echarts.min.js或者使用CDN https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js 为ECharts准备一个具备大小(宽高 ...
- css清除默认样式，stylus学习
reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, ...
- 四、Java多人博客系统-2.0版本
由于时间关系,多人博客系统这里穿插一个2.0版本. 2.0版本本来是打算用于建立个人网站,但是后来发现个人建站需要购买域名服务器,还需要备案,很繁琐.最终放弃.完成此版本,最终也只是作为技术演练.此版 ...
- [NOI2005]维护数列——平衡树观止
本题题解并不详细,不推荐大家看这一篇. 可以看这篇 题目描述 请写一个程序,要求维护一个数列,支持以下 6 种操作:(请注意,格式栏 中的下划线‘ _ ’表示实际输入文件中的空格) 100%的数据中, ...
- linux device drivers ch02
ch02.构造和运行模块 模块的构造: #include <linux/init.h> #include <linux/module.h> MODULE_LICENSE(&qu ...