laravel-admin 配置富文本編輯器流程

laravel-admin默認去除富文本編輯器的,官方也給出了配置方法

我配置的是wangEditor,本來配置完後就能愉快得使用了,可萬萬沒想到還是有坑的。默認是用base64上傳的,也就是數據庫中保存的是base64!!!果然報錯了,顯示

Data too long for column 'content'

開始覺得base64也未嘗不可,文章插圖不會太多,百度了下要求修改mysql的max_allowed_packet。嘗試後還是發現沒作用。

還是迴歸富文本編輯器吧,在官網上看到圖片上傳到服務器和OSS的方法。然後就順藤摸瓜解決問題,異步方式上傳圖片,再保存路徑到數據庫中。

代碼如下

複製代碼

//wangEditor.php
public function render()
    {
        $name = $this->formatName($this->column);
        $this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgServer = '/admin/api/upload'
editor.customConfig.uploadFileName = 'img'
editor.customConfig.onchange = function (html) {
    $('input[name=\'$name\']').val(html);
}
editor.create()

EOT;
        return parent::render();
    }

複製代碼

//修改filesystems.php文件,爲了方便root爲public目錄
 'local' => [
            'driver' => 'local',
            'root' => public_path('app'),
        ],
//VerifyCsrfToken.php中間件 添加
protected $except = [
        '/admin/api/*'
    ];

複製代碼

//api.php 接口方法
public function upload(Request $request){
        $path = Storage::disk('local')->putFile('images', $request->file('img'));
        $p = '/app/'.$path;
        return response()->json(['errno'=>0,'data'=>[$p]]);
    }

複製代碼

最後記得把接口加到路由中,完成。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章