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

前提

开发环境

  • 后台: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' => '']);
    }

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

总结

  • 在书写时,请严格按照Layui返回参数书写
  • 目前Layui富文本编辑器还在升级阶段,存在多处Bug,例如图片会直接上传,造成服务器空间浪费,并且工具栏还不丰富,当然我还是选择支持Layui
  • 如果还存在问题,请留言,我会及时解决
Layui 是一个经典的前端UI框架,它提供了包括富文本编辑器在内的多种模块。Layui富文本编辑器可以增加表格插入功能,让用户在编辑器中方便地创建和管理表格。 在Layui富文本编辑器中增加表格功能,通常需要使用编辑器提供的API来实现。具体步骤如下: 1. 引入Layui富文本编辑器模块。在你的HTML页面中,通过`<script>`标签引入Layui的CSS文件和JavaScript文件,并初始化富文本编辑器。 2. 加载编辑器的默认配置,你可以根据自己的需求来修改这些配置。例如,如果你想要添加一个按钮来快速插入表格,你可能需要配置工具栏(toolbar)中包含表格插入的按钮。 3. 使用编辑器提供的API,如`layer.tabledrag`来添加表格拖拽排序的功能,或者使用`layer.load`来在插入表格时显示加载动画。 4. 调用编辑器的实例方法,如`edit.execCommand('inserttable', rows, cols)`,来在编辑器中插入指定行数和列数的表格。 下面是一个简单的代码示例,展示如何在Layui富文本编辑器中增加插入表格的功能: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui富文本编辑器增加表格功能</title> <link rel="stylesheet" href="path/to/layui/css/layui.css" media="all"> </head> <body> <div id="editor-container"></div> <script src="path/to/layui/layui.js"></script> <script> layui.use('layedit', function(){ var layedit = layui.layedit; // 初始化编辑器 layedit.use(['upload', 'table'], function(layedit, upload, table){ // 配置编辑器 layedit.full({ elem: '#editor-container', // 容器 toolbar: true, // 是否显示工具栏 upload: { // 上传图片配置 url: '/upload.php' // 服务器上传接口 }, table: { // 表格配置 width: '100%' // 表格宽度 }, done: function(bin, editor){ console.log(bin) }, error: function(err){ console.log(err) } }); }); }); </script> </body> </html> ``` 在这个示例中,`layedit.full`初始化了富文本编辑器,并且通过`toolbar: true`开启了工具栏,`table`属性设置了表格的一些基本配置。根据实际需求,你可以添加更多的配置项和工具栏按钮。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值