写这篇文章的时候要说下Simditor这个编辑器还是不错的,唯一不足的是明明是国人开发的非要弄个英文文档,看的迷迷糊糊的.
要说使用这个编辑器扩展性还是很强的,富文本、markdown、表情、mark笔等等很多。
今天主要说的是上传图片这一块,编辑器默认上传图片是关闭的,要在配置里面手动打开,配置好上传路径以后就可以上传文件了
var editor = new Simditor({
textarea: $('#editor'),
defaultImage:"/static/admin/img/a1.jpg",
markdown:true,
toolbar: ['markdown','mark','title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote',
'code', 'table','image','emoji'],
emoji:{
imagePath:'/static/admin/js/simditor/ext/simditor-emoji/images/emoji'
},
upload:{
url:"{{:url('/admin/upload','','')}}",
params:null,
fileKey:'image',
connectionCount:3,
leaveConfirm:'正在上传文件'
}
});
主要说下服务端这边的时候,上传成功后没有文档说明,返回的老是data:base64的图片格式,不多说备注一下以后可能需要,以七牛为例上传后返回格式为 success、file_path两个参数
public function index(){
$file = request()->file('image');
// 需要填写你的 Access Key 和 Secret Key
$accessKey = config('Qiniu.AccessKey');
$secretKey = config('Qiniu.SecretKey');
//
// // 构建鉴权对象
$auth = new Auth($accessKey, $secretKey);
// // 要上传的空间
$bucket = config('Qiniu.Bucket');
//
// // 生成上传 Token
$token = $auth->uploadToken($bucket);
//
// // 要上传文件的本地路径
$filePath = $file->getRealPath();
//
// // 上传到七牛后保存的文件名
$ext = pathinfo($file->getInfo('name'), PATHINFO_EXTENSION); //获取文件后缀
$key = date('Y-m-d',time()).'-'.time().'.'.$ext;
// // 初始化 UploadManager 对象并进行文件的上传
$uploadMgr = new UploadManager();
//
// // 调用 UploadManager 的 putFile 方法进行文件的上传
list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath);
if ($err !== null) {
return $err;
} else {
$data = [
'success'=>true,
'file_path'=>config('Qiniu.Domain') . $key
];
return json($data);
}
}