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


    出于兴趣爱好,前段时间自己尝试写了一个叫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)

  • 相关阅读:
    HDOJ_1010 Tempter of the Bone
    矩阵旋转
    HDU 2544 最短路 http://acm.hdu.edu.cn/showproblem.php?pid=2544
    题目连接:http://acm.zznu.edu.cn/problem.php?id=1329
    队列/优先队列(代码简单模式)
    虚拟方法调用
    Vim中分屏(整理)
    Java Web设计模式之依赖倒换原则
    Java Web 设计模式之开闭原则
    Java 2+2=5
  • 原文地址:https://www.cnblogs.com/jsonzheng/p/4639844.html
Copyright © 2020-2023  润新知