来源：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调用上传图片、上传文件等模块的更多相关文章

  1. Shell脚本调用ftp上传文件

    Shell脚本调用ftp上传文件 1.脚本如下 ftp -n<<! open x.x.x.x ###x.x.x.x为ftp地址 user username password ###user ...

  2. Django和Ueditor自定义存储上传文件的文件名

    django台后默认上传文件名 在不使用分布式文件存储系统等第三方文件存储时,django使用默认的后台ImageField和FileField上传文件名默认使用原文件名,当出现同名时会在后面追加下随 ...

  3. 教你如何调用百度编辑器ueditor的上传图片、上传文件等模块

    出于兴趣爱好,前段时间自己尝试写了一个叫simple的cms,里面使用了百度ueditor编辑器,发现它的多图片上传模块很不错,用起来很方便,又可以选择已经上传好的图片.正好我又是个懒人,发现有现成的 ...

  4. 图片上传和显示——上传图片——上传文件）==ZJ

    http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...

  5. 使用RestTemplate调用接口上传文件

    场景 接口接受一个文件,缓存在本地,验证文件的完整性及内容,然后将文件上传至云服务器: 下面只写利用RestTemplate将文件上传至云服务器,至于文件上传以及缓存在本地可以参考:JAVA文件上传: ...

  6. JAVA调用FTP上传文件

    import java.io.File; import java.io.FileInputStream; import org.apache.commons.net.ftp.FTP; import o ...

  7. 最近上传图片上传文件报413错误及仅Https下报413问题，IIS高版本的配置方案及Web.config配置全解

    IIS文件上传大小限制30M,C盘中有的IIS_schema.xml文件 C:\Windows\System32\inetsrv\config\schema\ 但是考虑到安全等问题,而且这个文件默认是 ...

  8. ueditor浏览器 无法上传文件.问题

    dll也都引用了 路径绝对tmd没问题 最后 我一点一点的调试发现了问题 草tmd百度程序员 */UE.ajax = function() { //创建一个ajaxRequest对象 var fnSt ...

  9. C# HttpClient Post 参数同时上传文件 上传图片 调用接口

    // 调用接口上传文件 using (var client = new HttpClient()) { using (var multipartFormDataContent = new Multip ...

随机推荐

  1. OpenResty：通过 Lua 扩展 NGINX 实现的可伸缩的 Web 平台

    关于 http://openresty.org/cn/about.html 这个开源 Web 平台主要由章亦春(agentzh)维护.在 2011 年之前曾由淘宝网赞助,在后来的 2012 ~ 201 ...

  2. js 页面history.back()返回上一页，ios 不重新加载ready的解决办法

    参考自 http://blog.csdn.net/hbts_901111zb/article/details/76691900 项目中,主页面有很多输入字段,当由主页跳转到子页面, 将子页面的字段 s ...

  3. day19-网络编程基础（二）

    今天没有很多概念性的东西,主要是方法性的东西以及编程的一些方法吧 今日份目录 1.UDP传输的特点以及实验 2.UTP与UDP传输的区别 3.基于tcp的low版带验证功能的FTP小程序 4.基于so ...

  4. SaaS服务和个性化需求，就不能鱼和熊掌兼得吗?

    随时随地.轻松高效,移动工作让人类的自由度最大化.但企业的移动化过程却不轻松:要综合考虑销售.产品.客服.市场销售.人力资源等错综复杂的流程和需求,以及原有IT系统.数据信息的对接. 千企千面,很难有 ...

  5. MSIL学习------从HelloWorld开始

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3889z1y72b28 ...

  6. Python学习--Python变量类型

    变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的数据类型,这些变量可以存储整 ...

  7. 基于mybatis基本操作

    实体 在对上述三个实体操作中了解mybatis的实现 全部代码 pro1是另外的一个完整项目用spring和struts2 hibernate 下载  https://github.com/Danov ...

  8. Java语法----Java中equals和==的区别

    [正文] 平时在学Android和Java语言的时候,总是碰到“equals”和“==”这两个字符,老感觉差不多:其实还是有一些区别的,今天干脆把它们彻底弄清楚. 一.java当中的数据类型和“==” ...

  9. Linux中什么是动态网站环境及如何部署

    当谈论起网站时,我们可能听说过静态和动态这两个词,但却不知道它们的含义,或者从字面意思了解一些却不知道它们的区别. 这一切可以追溯到网站和网络应用程序,Web应用程序是一个网站,但很多网站不是Web应 ...

  10. C#中的虚函数及继承关系

    转载:http://blog.csdn.net/suncherrydream/article/details/8423991 若一个实例方法声明前带有virtual关键字,那么这个方法就是虚方法. 虚 ...