layui富文本编辑器 使用及躺坑经验

由于公司项目中使用的wangedit富文本编辑器,苹果手机无法输入,所以更换为layuiEdit富文本编辑器。

1. Html代码:

<textarea class="layui-textarea" id="LAY_demo1" style="display: none"></textarea>


2. JS代码:

layui.use(['layer', 'layedit'], function () {
        var layer = layui.layer;

        var layedit = layui.layedit;
        
        // 设置编辑器的图片上传配置
        layedit.set({
            uploadImage: {
                url: '/user/Ueditor/layeditUpload/'     // 接口url
                ,type: 'post'                           // 默认post
            }
        });
        
        //构建一个默认的编辑器
        var index = layedit.build('LAY_demo1', {
            tool: ['image'],
        });
});


3. PHP代码(ThinkCMF5框架):

/**
     * [layeditUpload Layui富文本编辑器 图片上传]
     * @return [type] [description]
     */
    public function layeditUpload()
    {
        $post = $this->request->param();
        $ftype = !empty($post['ftype']) ? $post['ftype'] : 'image';
        
        $uploader = new Upload();
        $uploader->setFileType($ftype);
        $uploader->setFormName('file');
        $result = $uploader->upload();

        if ($result) {
            $data = [];
            $data['src'] = $result['url'];
            $data['title'] = $result['name'];
            return ['code'=>0, 'msg'=>'成功', 'data'=>['src'=>$result['url'], 'title'=>$result['name']]];
        } else {
            return ['code'=>1, 'msg'=>$uploader->getError()];
        }

    }


4. 获取编辑器的内容

layedit.getContent(index)


5. 官方文档:https://www.layui.com/doc/modules/layedit.html


敲黑板!!重点来了,下面讲述下几个比较坑的地方:

  1. 后端返回给前端的数据格式

        一定要注意看官方文档,不要想当然的给状态码(code = 0 才表示成功,其他失败!!!!!好吧,我承认我载了。。。)一定要按照这个格式返回数据,否则无法回显到编辑器内

        image.png


 2. 编辑器内照片回显尺寸过大

    (1)找到layedi.js 文件,路径:layui/lay/modules/layedit.js

   (2)文件中定义了编辑器内的CSS样式,修改img的CSS样式,如下图,max-width: 90% 是我加上去的,可以根据自己的需求自行设定

    image.png

    (3)修改完成后,页面一定要强制刷新,否则浏览器缓存会让你奔溃到怀疑人生。。。


1条评论

陈云龙  2019-08-13 21:52:45 回复该留言
不错学习了, 感谢分享!

发布评论