tp6+layui+ueditor的具体应用_layui ueditor

第一步：composer tp6的第三方组件ueditor（github.com）

composer require bingher/ueditor

第二步：资源配置

php think ueditor:publish

php think migrate:run

以上操作将会复制静态资源文件到/public/static/bingher/ueditor目录下,在数据库中创建ueditor_config配置表

第三步：编辑html静态页面

<div class="layui-form layuimini-form" lay-filter="myForm">
    <div class="layui-form-item">
        <label class="layui-form-label required">内容：</label>
        <div class="layui-input-block">{:ue_view()}</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">标题：</label>
        <div class="layui-input-block"><input type="text" name="title" id="title" lay-verify="required" lay-reqtext="标题不能为空" placeholder="请输入标题" class="layui-input"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
 
<script>
  layui.use(['form'], function () {
    let form = layui.form,
        $ = layui.jquery;
 
      //监听提交
      form.on('submit(saveBtn)', function (data) {
          let content=ue.getContent(); //获取ue编辑器的内容;
          let JsonData=data.field;     //获取表单各个元素的键值对;
          JsonData.content=content;    //添加key到json
          delete JsonData.ueditor;     //删除原始的内容id;
          console.log(JSON.stringify(JsonData)); //打印数据
          //ajax提交后端
          $.post('{:url("/admin/supplier/save")}',JsonData,function (res){
              layer.msg(res.msg);
          },'json');
      });
  });
</script>

第四步：在控制器里获取内容，插入数据库

public function save()
{
    $title=input('post.title');
    $content=input('post.content');
    $data=[
        'title'   => $title, //数据库表字段为title,依次类推;
        'content' => $content
    ];
    $result = Db::('news')->insert($data); //此为演示用,实际应用中try\catch
    return json(['code'=>0,'msg'=>'插入成功']);
}