laravel-admin configures the rich text editor process

laravel-admin removes the rich text editor by default, and the official configuration method is also given .

I configured wangEditor , and I could use it happily after the configuration, but I never expected that there would still be pitfalls. The default is to upload with base64, that is, the base64 is saved in the database! ! ! Sure enough, an error was reported, showing

Data too long for column 'content'

I began to think that base64 is not a bad idea. There are not too many illustrations in the article. Baidu asked to modify the max_allowed_packet of mysql. After trying it, it still doesn't work.

Let's go back to the rich text editor and see the method of uploading pictures to the server and OSS on the official website . Then follow the vine to solve the problem, upload the picture asynchronously, and then save the path to the database.

code show as below

//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();
    }

// Modify the filesystems.php file, for the convenience of root as the public directory 
 'local' => [
             'driver' => 'local',
            'root' => public_path('app'),
        ],

// VerifyCsrfToken.php middleware add 
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]]);
    }

Finally, remember to add the interface to the routing, and you're done.

laravel-admin configures the rich text editor process

Guess you like