富文本编辑器 上传配置
运行环境
laravel5.7
simditor 富文本编辑器
前台配置
//html 部分
<textarea name="body" class="form-control" id="editor" rows="6" placeholder="请填入至少三个字">{{old('body',$topic->body)}}</textarea>
//js配置部分
<script>
$(document).ready(function () {
var editor = new Simditor({
textarea: $('#editor'),
upload: {
//图片上传配置
url: '{{route('topics.upload_image')}}',
params: {_token: '{{csrf_token()}}'},
//服务器获取图片的键值
fileKey: 'upload_file',
//最多只能同时上传3张图片
connectionCount: 3,
leaveConfirm: '文件上传中,关闭此页面将取消上传'
},
pasteImage: true,
});
});
</script>
路由
Route::post('upload_image',"TopicsController@upload_image")->name('upload_image');
后台接口处理
后台接口处理主要做两部分工作
- 保存图片
- 按照编辑器前台标准格式返回数据
/**上传图片
* @param Request $request
* @param ImageUpload $imgUpload
* @return array
*/
public function upload_image(Request $request,ImageUpload $imgUpload)
{
$status=[
'success'=>false,
'msg'=>'图片上传失败',
'flie_path'=>''
];
//$imageUpload 为自定义的图片处理类,这里直接使用laravel的图片处理也行
$result=$imgUpload->save($request->upload_file,'topics',\Auth::id(),1024);
if($result){
$status=[
'success'=>true,
'msg'=>'图片上传成功',
'file_path'=>$result
];
}
return $status;
}