简单集成wangEditor plupload 到Tp3.2

wangEditor编辑器 plupload上传 tp3.2
先看官方给的前端 模板nbsp;html><br><br><br>     <meta> <br>     <title>wangEditor2 test</title> <br>     <link> <br>     <style><br /> #jz_editor {<br /> height: 300px;<br /> max-height: 500px;<br /> }<br /> .container {<br /> width: 100%;<br /> margin: 0 auto;<br /> position: relative;<br /> }<br /> </style> <br><br><br>     <p></p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/xiazai/code/10567"> <img src="https://img.php.cn/upload/webcode/000/000/004/176275800985960.jpg" alt="Psky企业网站系统1.1.2"> </a> <div class="aritcle_card_info"> <a href="/xiazai/code/10567">Psky企业网站系统1.1.2</a> <p>Psky企业网站是基于PHP+MYSQL开发的一款企业官网宣传网站，支持PC、wap浏览。 主要功能包括导航管理、轮播新闻、单位动态、通知通报、单位简介、后台管理等。运行环境下载安装PHPStudy（小皮）即可。系统采用PHP语言（版本：7.3.4nts）和MYSQL（版本：5.7.26）数据库进行开发，安装PHPStudy（小皮）集成环境进行测试通过。安装步骤：1、导入SQL文件到PHPmyad</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="Psky企业网站系统1.1.2"> <span>2</span> </div> </div> <a href="/xiazai/code/10567" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="Psky企业网站系统1.1.2"> </a> </div> <br>     <div> <br>         <textarea><br>             <br>         </textarea><br>     </div> <br>    <script></script><br><script></script><br><script></script><br>     <!--<script type="text/javascript" src="../../dist/js/wangEditor.min.js"></script>--><br>     <script><br /> // 封装console.log<br /> function printLog(title, info) {<br /> window.console && console.log(title, info);<br /> }<br /> // 配置上传<br /> function uploadInit () {<br /> var editor = this;<br /> var btnId = editor.customUploadBtnId;<br /> var containerId = editor.customUploadContainerId;<br /> //实例化一个上传对象<br /> var uploader = new plupload.Uploader({<br /> browse_button: btnId,<br /> url: "{{:U(&#039;Admin/Index/upload&#039;)}}",<br /> flash_swf_url: &#039;lib/plupload/plupload/Moxie.swf&#039;,<br /> sliverlight_xap_url: &#039;lib/plupload/plupload/Moxie.xap&#039;,<br /> filters: {<br /> mime_types: [<br /> //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）<br /> { title: "图片文件", extensions: "jpg,gif,png,bmp" }<br /> ]<br /> }<br /> });<br /> //存储所有图片的url地址<br /> var urls = [];<br /> //初始化<br /> uploader.init();<br /> //绑定文件添加到队列的事件<br /> uploader.bind(&#039;FilesAdded&#039;, function (uploader, files) {<br /> //显示添加进来的文件名<br /> $.each(files, function(key, value){<br /> printLog(&#039;添加文件&#039; + value.name);<br /> });<br /> // 文件添加之后，开始执行上传<br /> uploader.start();<br /> });<br /> //单个文件上传之后<br /> uploader.bind(&#039;FileUploaded&#039;, function (uploader, file, responseObject) {<br /> //注意，要从服务器返回图片的url地址，否则上传的图片无法显示在编辑器中<br /> var url = responseObject.response;<br /> //先将url地址存储来，待所有图片都上传完了，再统一处理<br /> urls.push(url);<br /> printLog(&#039;一个图片上传完成，返回的url是&#039; + url);<br /> });<br /> //全部文件上传时候<br /> uploader.bind(&#039;UploadComplete&#039;, function (uploader, files) {<br /> printLog(&#039;所有图片上传完成&#039;);<br /> // 用 try catch 兼容IE低版本的异常情况<br /> try {<br /> //打印出所有图片的url地址<br /> $.each(urls, function (key, value) {<br /> printLog(&#039;即将插入图片&#039; + value);<br /> // 插入到编辑器中<br /> editor.command(null, &#039;insertHtml&#039;, &#039;<img src="&#039; + value + &#039;" style="max-width:90%"/ alt="简单集成wangEditor plupload 到Tp3.2" >&#039;);<br /> });<br /> } catch (ex) {<br /> // 此处可不写代码<br /> } finally {<br /> //清空url数组<br /> urls = [];<br /> // 隐藏进度条<br /> editor.hideUploadProgress();<br /> }<br /> });<br /> // 上传进度条<br /> uploader.bind(&#039;UploadProgress&#039;, function (uploader, file) {<br /> // 显示进度条<br /> editor.showUploadProgress(file.percent);<br /> });<br /> }<br /> // 创建编辑器<br /> var editor = new wangEditor(&#039;jz_editor&#039;);<br /> editor.config.customUpload = true; // 配置自定义上传<br /> editor.config.customUploadInit = uploadInit; // 配置上传事件<br /> editor.create();<br /> </script><br><br>模板仅修改了编辑器ID 你可以根据需要修改哈

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

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

2.写你的upload方法
{{:U('Admin/Index/upload')}}我这是测试的
对应Admin里面的IndexController.class.php upload方法public function upload() {<br>     $upload = new \Think\Upload();// 实例化上传类<br>     $upload->maxSize   =     3145728 ;// 设置附件上传大小<br>     $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型<br>     $upload->rootPath  =      './Uploads/'; // 设置附件上传根目录<br>     // 上传单个文件<br>     $info   =   $upload->upload();<br>     if(!$info) {// 上传错误提示错误信息<br>         $this->error($upload->getError());<br>     }else{// 上传成功 获取上传文件信息<br>          foreach($info as $file){<br>             $url = 'http://localhost/jz/Uploads/'.$file['savepath'].$file['savename'];<br>             //预留接口 ************<br>             //在这里可以把图片地址写入数据库 或者对图片进行操作 例如生成缩略图<br>            <br><br><br>  //这里返回每一次的URL pulpload 规则 参见 编辑器js<br><br><br><br>               $this->ajaxReturn($url,'EVAL');<br>             }<br>         }<br>     }这样子就可以了
注意 ajaxReturn返回方式一定要选EVAL 不然会转义你的url


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

AD：真正免费，域名+虚机+企业邮箱=0元