Layui富文本编辑器内容不显示，图片上传等问题

最新推荐文章于 2024-09-20 09:18:22 发布

贺兰山长老

最新推荐文章于 2024-09-20 09:18:22 发布

阅读量3k

点赞数

文章标签： php html javascript jquery html5

本文链接：https://blog.csdn.net/qq_33998074/article/details/106560538

版权

前提

开发环境

后台：PHP （ThinkPHP5.0）
前台：jQuery （Layui.js）

解决问题

富文本编辑器内容不显示
layui图片上传接口编写
layui富文本编辑器图片不显示

代码示例

前台 HTML

一定要记得包裹在form标签，具体提交方式根据业务来，可以是ajax，可以是method，此处选择ajax。
此处一定要记的严格按照layui表单内容写法！防止加载失败！ lay-verify=“content”

<!--form元素开始-->
   <div class="m-t ibox-content layui-form">
       <div class="layui-form-item">
           <textarea id="demo" style="display: none;" name="content" lay-verify="content" class="field-content"></textarea>
       </div>
       <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="component-form-element">添加</button>
   </div>
<!--form元素结束-->

前台 Layui.js

此处js包含图片接口，后面会具体写图片上传api

<script>
    layui.use(['layer','layedit', 'form','jquery'],function() {
        var form = layui.form, layer = layui.layer;
        var $ = layui.$;
        var layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: '{:url(\'api/upload/edit_img\')}' //图片上传接口url
                ,type: 'post' //默认post
            }
        });
        var index = layedit.build('demo', {
            height: 480 //设置编辑器高度
        }); //建立编辑器
        form.verify({
            content: function (value) {
                return layedit.sync(index);
            }
        })
    })
</script>

=当你做到上述步骤时，已经可以正常显示富文本编辑器文本html内容

=以下是图片上传接口，PHP编写

图片上传接口

记住此接口要严格按照layui图片上传接口返回格式书写

返回码必须0
msg内容自定义
data必须为数组，返回两个参数src 和 title，其中src必须严格书写，用于富文本加载图片，建议前期先测试好该地址，看看是否能加载，否则加载失败，并且控制台和layui.msg不会做任何提示！很大部分图片上传失败都是由于src接口错误导致！我图片上传接口符合ThinkPHP5.0格式，并且测试可以网络可以正常加载。

/**
     * json(['code' => 0, 'msg' => '', 'data' => $data]);
     * {
     *   "code": 0 //0表示成功，其它失败
     *   ,"msg": "" //提示信息 //一般上传失败后返回
     *   ,"data": {
     *       "src": "图片路径",
     *       "title": "图片名称" //可选
     *      }
     *  }
     */
    public function edit_img()
    {
        $isLogin = lib\Tools::isLogin();
        if(!$isLogin) {
            return show('500','请登录后操作');
        }
        $file = request()->file('file');
        $dir = ROOT_PATH . 'public' . DS . 'about/';
        $info = $file->move($dir);
        if($info && $info->getPathname()) {
            $data = [
                'src'    => '__STATIC__/../about/'.$info->getSaveName(),
                'title'  => 'link_image'
            ];
            return json(['code' => 0, 'msg' => 'ok', 'data' => $data]);
        }else {
            return json(['code' => 500, 'msg' => 'error', 'data' => '']);
        }
        return json(['code' => 500, 'msg' => 'error', 'data' => '']);
    }

=当你做到上述步骤时，已经可以正常显示富文本编辑器图片上传内容