简单集成wangEditor plupload 到Tp3.2
- WBOY原創
- 2016-06-07 11:35:001901瀏覽
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>
<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('Admin/Index/upload')}}",<br />
flash_swf_url: 'lib/plupload/plupload/Moxie.swf',<br />
sliverlight_xap_url: 'lib/plupload/plupload/Moxie.xap',<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('FilesAdded', function (uploader, files) {<br />
//显示添加进来的文件名<br />
$.each(files, function(key, value){<br />
printLog('添加文件' + value.name);<br />
});<br />
// 文件添加之后，开始执行上传<br />
uploader.start();<br />
});<br />
//单个文件上传之后<br />
uploader.bind('FileUploaded', function (uploader, file, responseObject) {<br />
//注意，要从服务器返回图片的url地址，否则上传的图片无法显示在编辑器中<br />
var url = responseObject.response;<br />
//先将url地址存储来，待所有图片都上传完了，再统一处理<br />
urls.push(url);<br />
printLog('一个图片上传完成，返回的url是' + url);<br />
});<br />
//全部文件上传时候<br />
uploader.bind('UploadComplete', function (uploader, files) {<br />
printLog('所有图片上传完成');<br />
// 用 try catch 兼容IE低版本的异常情况<br />
try {<br />
//打印出所有图片的url地址<br />
$.each(urls, function (key, value) {<br />
printLog('即将插入图片' + value);<br />
// 插入到编辑器中<br />
editor.command(null, 'insertHtml', '<img src="' + value + '" style="max-width:90%"/ alt="简单集成wangEditor plupload 到Tp3.2" >');<br />
});<br />
} catch (ex) {<br />
// 此处可不写代码<br />
} finally {<br />
//清空url数组<br />
urls = [];<br />
// 隐藏进度条<br />
editor.hideUploadProgress();<br />
}<br />
});<br />
// 上传进度条<br />
uploader.bind('UploadProgress', function (uploader, file) {<br />
// 显示进度条<br />
editor.showUploadProgress(file.percent);<br />
});<br />
}<br />
// 创建编辑器<br />
var editor = new wangEditor('jz_editor');<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元