TP6结合layedit富文本编辑器实现上传图片

国内外有许多优秀、强大的HTML编辑器，但普遍都有一个共性：异常地臃肿（少则几千行，多则上万行代码）、UI陈旧，并且基本都好几年没更新了。而现在，随着Layui的发布，我们有必要重新为富文本做一些新的定义。LayEdit仍旧遵循极简的设计风格，无论是UI上，还是接口使用上，都尽可能地避免一些繁杂的功能和配置。如果你正苦苦寻找一款轻量的Web富文本编辑器，那么LayEdit会是你不错的选择。

最近在做项目的时候，采用的是layui后台模板，遇到很多坑，记下自己的解决方法，以下是编辑器的使用案例。

效果图：

前端代码：

        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="title" class="layui-form-label">
                            <span class="x-red">*</span>标题</label>
                        <div class="layui-input-inline">
                            <input type="text" id="title" name="title"  required="" lay-verify="required"  autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="title" class="layui-form-label">
                            <span class="x-red">*</span>内容</label>
                        <div class="layui-input-block" style="background:#fff;">
                             <textarea name="" class="layui-textarea content" id="content"  style="display:none"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
                    </div>
                </form>
            </div>
        </div>

js代码：

       <script>
        layui.use(['layedit','form', 'layer','jquery'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;

                 layui.layedit.set({
                      uploadImage: {
                        url: '{:url("admin/User/layedit")}' //接口url
                        ,type: 'post' //默认post
                      }
                    });
                var editIndex = layui.layedit.build('content');
                //监听提交
                form.on('submit(add)',
                function(data) {
                    data.field.content = layui.layedit.getContent(editIndex);
                    console.log(data);
                    //发异步，把数据提交给php
                    $.ajax({
                        url:'{:url("admin/User/message_add")}',
                        type:'post',
                        timeout: '0',
                        datatype:'json',
                        data:data.field,
                        success:function(msg){
                            if(msg.code==200){
                                layer.alert(msg.msg, {
                                    icon: 6
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();

                                    // 可以对父窗口进行刷新 
                                    xadmin.father_reload();
                                });
                            }else{
                              layer.alert(msg.msg, {icon: 5});
                            }
                        },
                        error:function(){
                            layer.alert('网络错误', {icon: 5});
                        }
                    })
                    
                    return false;
                });

            });
        </script>

后端代码：

<?php
declare (strict_types = 1);

namespace app\admin\controller;

use think\facade\View;
use think\facade\Db;

use app\admin\validate\Message;
use think\exception\ValidateException;
class User extends Base
{
添加
    public function message_add(){
        $data=[
            'title'=>input('title'),
            'content'=>input('content'),
            'addtime'=>time(),
        ];
        if(request()->isPost()){
            // return json(['code'=>500,'msg'=>$data]);
            try {
                validate(Message::class)->check($data);
                $res=Db::name('message')->insert($data);
                if($res){
                    return json(['code'=>200,'msg'=>'添加成功']);
                }else{
                    return json(['code'=>500,'msg'=>'添加失败']);
                }
            } catch (ValidateException $e) {
                // 验证失败 输出错误信息
                return json(['code'=>500,'msg'=>$e->getError()]);
            }
        }
        return View::fetch();
    }
//后端代码：图片上传接口
    public function layedit(){
       if(request()->isPost()){
         // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('file');
        try {
            // 使用验证器验证上传的文件
            validate(['file' => [
                // 限制文件大小(单位b)，这里限制为4M
                'fileSize' => 4 * 1024 * 1024,
                // 限制文件后缀，多个后缀以英文逗号分割
                'fileExt'  => 'gif,jpg,png'
            ]])->check(['file' => $file]);
            // 上传到本地服务器
             $savename = \think\facade\Filesystem::disk('public')->putFile('img', $file);
             if($savename){
                // 拼接路径
                $path=\think\Facade\Filesystem::getDiskConfig('public', 'url').str_replace('\\', '/', $savename);
             }
             // echo $savename;
             return json(['code'=>0,'msg'=>'上传成功','data'=>['src'=>$path]]);
        } catch (think\exception\ValidateException $e) {
            // echo $e->getMessage();
            return json(['code'=>500,'msg'=>$e->getMessage()]);
        }
       }
       return View::fetch();
    }
 }

修改的时候可以采用赋值的形式：$(".content").html('{$message.content|htmlspecialchars_decode}'); //先赋值