laravel-admin 配置富文本编辑器流程

素颜马尾好姑娘i 2021-09-29 02:44 734阅读 0赞

laravel-admin默认去除富文本编辑器的，官方也给出了[配置方法][Link 1]。

我配置的是[wangEditor][]，本来配置完后就能愉快得使用了，可万万没想到还是有坑的。默认是用base64上传的，也就是数据库中保存的是base64！！！果然报错了，显示

Data too long for column 'content'

开始觉得base64也未尝不可，文章插图不会太多，百度了下要求修改mysql的max\_allowed\_packet。尝试后还是发现没作用。

还是回归富文本编辑器吧，在官网上看到[图片上传到服务器和OSS的方法][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]]);
        }

最后记得把接口加到路由中，完成。

转载于:https://www.cnblogs.com/kkform/p/8955056.html

[Link 1]: http://laravel-admin.org/docs/#/zh/model-form-field-management
[wangEditor]: http://www.wangeditor.com/
[OSS]: https://www.kancloud.cn/wangfupeng/wangeditor3/335782