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

有了这个想法后，我就到网上查阅资料，可惜资料少的可怜，都不能很好解决我的问题。于是觉得还是自己动手丰衣足食，皇天不负苦心人，终于摸索出解决方法，现在分享出来，和自己有同样想法的小伙伴。

代码如下：

<html>

  <head>

    <script src="ueditor/ueditor1.43.config.js"></script>

    <script src="ueditor/ueditor1.43.all.min.js"></script>

  </head>

  <body>

    <script type="text/plain" id="j_ueditorupload" style="height:5px;display:none;" ></script>

    <script>

      //实例化编辑器

      var o_ueditorupload = UE.getEditor('j_ueditorupload',

      {

        autoHeightEnabled:false

      });

      o_ueditorupload.ready(function ()

      {

    o_ueditorupload.hide();//隐藏编辑器

    //监听图片上传

    o_ueditorupload.addListener('beforeInsertImage', function (t,arg)

    {

          alert('这是图片地址：'+arg[0].src);

    });

    /* 文件上传监听

     * 需要在ueditor.all.min.js文件中找到

     * d.execCommand("insertHtml",l)

     * 之后插入d.fireEvent('afterUpfile',b)

     */

        o_ueditorupload.addListener('afterUpfile', function (t, arg)

        {

          alert('这是文件地址：'+arg[0].url);

        });

      });

      //弹出图片上传的对话框

      function upImage()

      {

        var myImage = o_ueditorupload.getDialog("insertimage");

        myImage.open();

      }

      //弹出文件上传的对话框

      function upFiles()

      {

        var myFiles = o_ueditorupload.getDialog("attachment");

        myFiles.open();

      }

    </script>

    <button type="button" onClick="upImage()">调用上传图片模块</button>

    <br>

    <button type="button" onClick="upFiles()">调用上传文件模块</button>

  </body>

<html>

注意：需要在ueditor.all.min.js文件中找到d.execCommand("insertHtml",l)之后插入d.fireEvent('afterUpfile',b)

教你如何调用百度编辑器ueditor的上传图片、上传文件等模块的更多相关文章

  1. dedecmsV5.7 百度编辑器ueditor 多图上传 在线管理 排序问题

    问题:dedecms后台百度编辑器ueditor的多图上传-在线管理的图片排序有问题,想把这个顺序调成按照文件修改时间倒序来展示 解决方法: 1.打开/include/ueditor/php/acit ...

  2. 百度编辑器ueditor批量上传图片或者批量上传文件时，文件名称和内容不符合，错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

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

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

  4. UEditor调用上传图片、上传文件等模块

    来源:https://www.cnblogs.com/lhm166/articles/6079973.html 说到百度富文本编辑器ueditor(下面简称ue),我不得不给它一个大大的赞.我们在网站 ...

  5. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  6. Flask实战第57天：UEditor编辑器集成以及配置上传文件到七牛

    相关链接 UEditor:http://ueditor.baidu.com/website/​ 下载地址:http://ueditor.baidu.com/website/download.html# ...

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

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

  8. FLASH图片上传功能—从百度编辑器UEditor里面提取出来

    为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样 ...

  9. 【UEditor】 UEditor整合项目上传资源到阿里云服务器

    目录 关于此文 下载源码 JSP代码 Java代码 阿里云jar包引入配置 成功啦! 回到顶部 关于此文 项目中要实现编辑器生成带格式的html文档,存入模板,最后生成html的URL,所以选择了UE ...

随机推荐

  1. The JSP specification requires that an attribute name is preceded by whitespace

    一个jsp页面在本地运行一点问题没有,发布到服务器就报错了: The JSP specification requires that an attribute name is preceded by ...

  2. 谈谈vertical-align的text-bottom和text-top - 韦奕

    学习资料 : http://www.tuicool.com/articles/uuYvMv 友情链接  行高   替换元素,非替换元素,内联元素,块元素

  3. get和post的区别与乱码问题解决

    ★ get和post的区别:     1.get请求通过url地址发送请求参数,可以在地址栏上直接显示     2.post请求通过请求体发送请求参数,不会再地址栏上显示     3.get在地址栏显 ...

  4. HtmlHelper用法大全

    HTML扩展类的所有方法都有2个参数: 以textbox为例子 public static string TextBox( this HtmlHelper htmlHelper, string nam ...

  5. Winform读写App.config文件以及重启程序

    //重启主程序 //System.Diagnostics.Process.Start(System.Reflection.Assembly.GetExecutingAssembly().Locatio ...

  6. Eclipse--Web项目中 .classpath、mymetadata、project文件的功用

    Web项目中 .classpath..mymetadata..project文件的作用 创建Web Project时,会自动生成这个三个文件. 一..mymetadata文件 1.部署项目用的,把项目 ...

  7. tomcat常用配置

    一. 增加内存,防止JVM内存溢出 1. 以服务的方式启动时 进入"tomcat安装路径\bin"目录下,打开service.bat文件,找到"--JvmOptions ...

  8. linux下怎么查看ssh的用户登录日志

    linux下登录日志在下面的目录里: cd /var/log 查看ssh用户的登录日志: less secure linux日志管理: 1. 日志简介 日志对于安全来说,非常重要,他记录了系统每天发生 ...

  9. ab.exe使用

       ab.exe是一个性能检测工具,是apache server中的一个小组件,使用简单,方便    下载地址:http://files.cnblogs.com/files/gossip/ab.zi ...

  10. java.util.Date与java.sql.Date

    我数据库里用到了日期类型.用java编程的时候同时import了java.util.*和java.sql.*,发现直接申明Date类型 Date dt; 会报错,查了一下才发现有java.util.D ...