效果如下

引入

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src='./kindeditor-4.1.6/kindeditor-4.1.6/kindeditor.js'></script>
    <script src='./kindeditor-4.1.6/kindeditor-4.1.6/lang/zh_CN.js'></script>
  
    <link rel="stylesheet" href="./layui/layui/css/layui.css">
    <script src='./layui/layui/layui.js'></script>

样式

  .container {
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}
#banner{
    margin-top: 30px;
}
#uploadDemoView{
  display: block;
}

html

 <div class="container" id="banner" >
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"
                    autocomplete="off" class="layui-input">
            </div>


        <div class="layui-form-item">
            <label class="layui-form-label">日期</label>
            <!-- <div class="layui-input-block">
                <input type="text" name="createtime" id="date" lay-verify="createtime" placeholder="yyyy-MM-dd" autocomplete="off"
                    class="layui-input">
            </div> -->
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="createtime" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
            </div>
        </div>
        </div> 
        <div class="layui-form-item">

            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">

                <div class="layui-upload-drag" id="test10" style='margin: 0 auto;'>
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <div class="layui-hide" id="uploadDemoView">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 50px">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">

            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">

                <p id='model'>
                    <textarea id="tid" cols="30" rows="10"></textarea>
                </p>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" >立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </div>

    </form>

</div>
</div>

js

KindEditor.ready(function(K) {
		editor = K.create('#tid', {
		
			uploadJson: '', //KindEditor上传图片的接口
			allowImageUpload: true, //运行上传图片
			allowFileManager: true, //浏览图片空间
			allowImageRemote: false, //上传图片框网络图片的功能，false为隐藏，默认为true
      filterMode: false,
      formatUploadUrl: false,
			afterCreate: function() {
       
				this.sync();
			},
			afterBlur: function() {
				this.sync();
			}
		});
	});

    /*
    增加操作
    获取页面内容，调用ajax，post请求，
    */


     // 表单
  layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form
    ,layer = layui.layer
    ,layedit = layui.layedit
    ,laydate = layui.laydate;
    
    //日期
    laydate.render({
    elem: '#test5'
    ,type: 'datetime'
  });
    //创建一个编辑器
    var editIndex = layedit.build('LAY_demo_editor');
   
    //自定义验证规则
    form.verify({
      title: function(value){
        if(value.length < 5){
          return '标题至少得5个字符啊';
        }
      }
      ,content: function(value){
        layedit.sync(editIndex);
      }
    });
    
    
    //监听提交
    form.on('submit(demo1)', function (data) {
      editor.sync();
      var content = $("#tid").val(); //原生API
      var image =  $("#uploadDemoView img")[0].src
      data.field.content =content
      data.field.image = image
      console.log(data.field )
      var jsons = data.filed
      location.reload() 
    
      // 提交成功，调用增接口
      $.ajax({
        type: 'post',
        url: '',//增接口
        data: data.field,
        async: false,
        dataType: 'json',
        success: function (result) {
          editor.html(""); //内容
          console.log();
          
    
        }
      })

      return false;
    });
 
    
  });
  //  文件上传
layui.use('upload', function(){
    var $ = layui.jquery
    ,upload = layui.upload;
    
    upload.render({
						elem: '#test10',
						url: '',//表单图片上传的接口
						before: function(obj) {
							//预读本地文件示例，不支持ie8
							obj.preview(function(index, file, result) {
								$('#uploadDemoView img').attr('src', result); //图片链接（base64）
							});
						},
						done: function(res) {
							//如果上传失败
							if(res.code > 0) {
								return layer.msg('上传失败');
							}
						
						}
			});
   
  });

注意：

KindEditor上传图片，必须把该项目部署线上，才能正确显示，正确返回如下

如果本地上传，会一直转圈并报错

点击立即提交，调用增加接口即可，table页就能显示出来，table页有关代码之后上传

标签：function,false,layui,kindeditor,data,编辑器,var,上传
来源： https://blog.csdn.net/qq_44828153/article/details/110138928