简单集成wangEditor plupload 到Tp3.2

浏览:4163 发布日期:2016年04月02日分类:用法示例关键字: wangEditor plupload 编辑器图片上传多图上传

wangEditor编辑器 plupload上传 tp3.2
先看官方给的前端模板

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>wangEditor2 test</title>

  <link rel="stylesheet" type="text/css" href="__PUBLIC__/libs/wang/css/wangEditor.min.css">

  <style type="text/css">

    #jz_editor {

      height: 300px;

      max-height: 500px;

    }

    .container {

      width: 100%;

      margin: 0 auto;

      position: relative;

    }

  </style>

</head>

<body style="padding:0 20px;">

  <p></p>

  <div class="container">

    <textarea id="jz_editor" name="content">

      

    </textarea>

  </div>

  <script src="__PUBLIC__/libs/jquery/jquery-2.1.4.js"></script>

<script src="__PUBLIC__/libs/wang/js/wangEditor.min.js"></script>

<script src="__PUBLIC__/libs/plupload/v2.1.8/js/plupload.full.min.js"></script>

  <!--<script type="text/javascript" src="../../dist/js/wangEditor.min.js"></script>-->

  <script type="text/javascript">

    // 封装console.log

    function printLog(title, info) {

      window.console && console.log(title, info);

    }

    // 配置上传

    function uploadInit () {

      var editor = this;

      var btnId = editor.customUploadBtnId;

      var containerId = editor.customUploadContainerId;

      //实例化一个上传对象

      var uploader = new plupload.Uploader({

        browse_button: btnId,

        url: "{{:U('Admin/Index/upload')}}",

        flash_swf_url: 'lib/plupload/plupload/Moxie.swf',

        sliverlight_xap_url: 'lib/plupload/plupload/Moxie.xap',

        filters: {

          mime_types: [

            //只允许上传图片文件 (注意,extensions中,逗号后面不要加空格)

            { title: "图片文件", extensions: "jpg,gif,png,bmp" }

          ]

        }

      });

      //存储所有图片的url地址

      var urls = [];

      //初始化

      uploader.init();

      //绑定文件添加到队列的事件

      uploader.bind('FilesAdded', function (uploader, files) {

        //显示添加进来的文件名

        $.each(files, function(key, value){

          printLog('添加文件' + value.name);

        });

        // 文件添加之后,开始执行上传

        uploader.start();

      });

      //单个文件上传之后

      uploader.bind('FileUploaded', function (uploader, file, responseObject) {

        //注意,要从服务器返回图片的url地址,否则上传的图片无法显示在编辑器中

        var url = responseObject.response;

        //先将url地址存储来,待所有图片都上传完了,再统一处理

        urls.push(url);

        printLog('一个图片上传完成,返回的url是' + url);

      });

      //全部文件上传时候

      uploader.bind('UploadComplete', function (uploader, files) {

        printLog('所有图片上传完成');

        // 用 try catch 兼容IE低版本的异常情况

        try {

          //打印出所有图片的url地址

          $.each(urls, function (key, value) {

            printLog('即将插入图片' + value);

            // 插入到编辑器中

            editor.command(null, 'insertHtml', '<img src="' + value + '" style="max-width:100%;"/>');

          });

        } catch (ex) {

          // 此处可不写代码

        } finally {

          //清空url数组

          urls = [];

          // 隐藏进度条

          editor.hideUploadProgress();

        }

      });

      // 上传进度条

      uploader.bind('UploadProgress', function (uploader, file) {

        // 显示进度条

        editor.showUploadProgress(file.percent);

      });

    }

    // 创建编辑器

    var editor = new wangEditor('jz_editor');

    editor.config.customUpload = true; // 配置自定义上传

    editor.config.customUploadInit = uploadInit; // 配置上传事件

    editor.create();

  </script>

</body>

</html>

模板仅修改了编辑器ID 你可以根据需要修改哈

楼主仔细看完之后发现这个页面的js就是需要传入图片的url 一开始可难坏我了不过还是解决了分享一下经验

1.修改url 到你的上传地址 {{:U('你的上传地址')}} 这里我用的U方法 {{}} 这里是我修改过模板配置你要是没修过的话应该是{:U('你的上传地址')}

2.写你的upload方法
{{:U('Admin/Index/upload')}}我这是测试的
对应Admin里面的IndexController.class.php upload方法

public function upload() {

  $upload = new \Think\Upload();// 实例化上传类

  $upload->maxSize  =   3145728 ;// 设置附件上传大小

  $upload->exts   =   array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型

  $upload->rootPath =   './Uploads/'; // 设置附件上传根目录

  // 上传单个文件

  $info  =  $upload->upload();

  if(!$info) {// 上传错误提示错误信息

    $this->error($upload->getError());

  }else{// 上传成功 获取上传文件信息

     foreach($info as $file){

      $url = 'http://localhost/jz/Uploads/'.$file['savepath'].$file['savename'];

      //预留接口 ************

      //在这里可以把图片地址写入数据库 或者对图片进行操作 例如生成缩略图

      





 //这里返回每一次的URL pulpload 规则 参见 编辑器js







       $this->ajaxReturn($url,'EVAL');

      }

    }

  }

这样子就可以了
注意 ajaxReturn返回方式一定要选EVAL 不然会转义你的url

哈哈:代码只是简单修改下都是copy官方的重要的是解决问题哈

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

收藏

赞

Elementary

积分:401 等级:LV2

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。