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 ...
随机推荐
- 详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...
- vue.js 跳转同一页面，传不同值，组件监听路由
watch: { '$route' () { this.type = this.$route.params.type this.loadData() } },
- Surging1.0发布在即，.NET开发者们，你们还在等什么？
Surging1.0发布在即,.NET开发者们,你们还在等什么? 开源,是近三十年来互联网经久不衰的话题.它不仅仅是一种技术分享的形态,更是一种开放,包容,互利共赢的互联网精神. 不到30年前,大神林 ...
- Loadrunner学习资料
辅导书籍(书的价值主要在学习的人,而不在书本身) 于涌 | 精通软件性能测试与LoadRunner实战京东 点击查看 柳胜 | 性能测试从零开始京东 点击查看适合零基础的同学学习 柳胜 | LoadR ...
- （hdu 6030） Happy Necklace 找规律+矩阵快速幂
题目链接 :http://acm.hdu.edu.cn/showproblem.php?pid=6030 Problem Description Little Q wants to buy a nec ...
- PS调出米黄色复古柔和外景人物照
配色思路 从片中可以看出主要景物近处的有人物和栏杆,远处的海水,天空和礁石.为体现出远近层次,近处景物选择了偏黄的色调,远处景物选择了偏青色调. 调色 以下面这张照片为例,先放上对比图: LR部分 首 ...
- supervisor 守护者进程配置小记
安装 Supervisor 联网状态下,官方推荐首选安装方法是使用easy_install,它是setuptools(Python 包管理工具)的一个功能.所以先执行如下命令安装 setuptools ...
- openstack搭建之-基础服务配置（7）
基础环境准备,所需服务器及说明 172.16.2.51 base.test.com 基础服务节点 172.16.2.52 ctrl.test.com 控制节点 172.16.2.53 ...
- php函数 array_combine
(PHP 5, PHP 7) array_combine — 创建一个数组,用一个数组的值作为其键名,另一个数组的值作为其值 array_combine ( array $keys , array $ ...
- java内存模型详解
对于本篇文章,将从四个概念来介绍:内存模型基础,重排序,顺序一致性和happens-before 1.内存模型基础 在并发编程中,有两个关键问题:线程之间如何通信和如何同步.由此而引出了两种并发模型: ...