富文本编辑器上传配置

ゝ一世哀愁。 2022-02-28 10:03 338阅读 0赞

# 富文本编辑器 上传配置 #

> 运行环境  
> 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');

## 后台接口处理 ##

> 后台接口处理主要做两部分工作
> 
> 1.  保存图片
> 2.  按照编辑器前台标准格式返回数据

/**上传图片 * @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;
        }