先看官方给的前端 模板
<!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官方的 重要的是解决问题哈
