使用漂亮的WangEditor3踩过的坑

环境：thinkphp5+layui
网址：http://www.wangeditor.com/
第一步：引入编辑器

image.png

第二步：根据需求改需求配置

image.png
image.png

是的，你发现了下面有个textarea还是隐藏域 到底什么原理呢？
答：wangueditor引入之后仅仅需求一个div 隐藏域是用来提交信息 当div的内容触发同步到隐藏域 隐藏域到数据库，在每次触发即同步

image.png

插入图片 更具后台返回的固定的json值并回显（配置）
editor.customConfig.uploadImgServer = '{:url("edtiorUpload")}' 这是写你后台提交的地址
上传代码：

    public function edtiorUpload(){
        $file = request()->file('file');
        // 移动到框架应用根目录/public/uploads/ 目录下
        $info = $file->move('./uploads/');
        $data = [];  //定义一个返回的数组
        if($info){
            $savename=$info->getSaveName();
            $savename=str_replace('\\','/',$savename);
            $data['code'] =0;
            $data['data'] = '/static/../uploads/'.$savename;
        }else{
            $data['code']= 1;
            $data['data'] = $file->getError();
        }
        return json_encode($data,JSON_UNESCAPED_SLASHES);
    }

返回的有固定的格式

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回若干图片的线上地址
    "data": [
        "图片1地址",
        "图片2地址",
        "……"
    ]
}

image.png

insertImg(url)就是回显的函数，已经封装好了 插件还是很方便的

重点！重点！我他妈踩了一个坑~~~

image.png

为了防止奇葩的用户搞些花里胡哨的东西，做了配置，mmp 昨天一天在查bug，原来过滤html，script标记 醉了。。

image.png
好吧~~ 甚是小心啊~~~ 这个编辑器比ueditor， umditor这些简洁大方多了~~~~ ok git push了