layui 富文本编辑器

忘是亡心i 2022-11-05 06:30 462阅读 0赞

html部分

<textarea id="demo" lay-verify="content" name="explain" class="layui-textarea">{$list.explain}</textarea>

js部分

layui.use(["jquery", "form", "layedit"], function () {
     	var $ = layui.jquery
     	,upload = layui.upload
     	,layedit = layui.layedit
     	,form = layui.form;
     	//注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
        layedit.set({
            uploadImage: {
                url: '/admin/Upload/up' //图片上传接口
                ,type: 'post' //默认post
            }
        });
        var index = layedit.build('demo'); //建立编辑器
        //提交时把值同步到文本域中
        form.verify({
            //content富文本域中的lay-verify值
            content: function (value) {
                return layedit.sync(index);
            }
        });
    })

注意：  
图片上传接口返回信息的格式必须如下所示，否则将显示不出来图片

{
      "code": 0 //0表示成功，其它失败
      ,"msg": "" //提示信息 //一般上传失败后返回
      ,"data": {
        "src": "图片路径"
        ,"title": "图片名称" //可选
      }
    }

php部分  
图片上传接口

public function up()
     {
         //设置php 不超时
         @ini_set('memory_limit', '-1');
         @set_time_limit(0);
         $param = $this->request->param();
         $file = request()->file('file');
         // 移动到框架应用根目录/public/uploads/ 目录下
         if ($file) {
             $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
             if ($info) {
                 $url = aliyunOss('uploads/' . $info->getSaveName(), 'edityuesao');
                 $data['code'] = 0;
                 $data['msg'] = '';
                 $data['data']['src'] = $url ;
                 return json($data);
             } else {
                 // 上传失败获取错误信息
                 echo $file->getError();
             }
         }
     }
     //上传的图片直接存在阿里云OSS上面了
    function aliyunOss($savePath, $category = '', $isunlink = 1)
    {
        $bucket = config('Bucket');
        $accessKeyId = config('KeyId');//去阿里云后台获取秘钥
        $accessKeySecret = config('KeySecret');//去阿里云后台获取秘钥
        $endpoint = config('Endpoint');//你的阿里云OSS地址
        $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
        //判断bucketname是否存在，不存在就去创建
        if (!$ossClient->doesBucketExist($bucket)) {
            $ossClient->createBucket($bucket);
        }
        $category = empty($category) ? $bucket : $category;
        $savePath = str_replace("\\", "/", $savePath);
        $object = 'xmzp/' . $category . '/' . $savePath;//想要保存文件的名称
        $object = str_replace('uploads/', '', $object);
        try {
            $ossClient->uploadFile($bucket, $object, $savePath);
            $os = getcwd() . '/' . $savePath;
            if ($isunlink == 1 && is_file($os)) {
                chmod($os, 0777);
                unlink($os);
            }
        } catch (OssException $e) {
            printf(__FUNCTION__ . ": FAILED\n");
            printf($e->getMessage() . "\n");
            return;
        }
        $oss = config('url');
        $url = $oss . "/" . $object;
        return $url;
    }

表单提交后数据处理接口

提交的数据处理入库