layui富文本域form表單提交和ajax提交獲取編輯器內容詳解

最近寫項目中需要用到LayUI富文本編輯器，提交時發現富文本編輯器中內容是空的，查了很多資料才發現，LayUI在渲染富文本域時，是在下面插入的樣式代碼。我們頁面上定義的是一個textarea標簽，之后用JS渲染的。我們獲取的內容是textarea中內容，富文本域中的內容和textarea中的內容不是自動同步的，所以我們需要在提交前把內容同步一下。

 

 

 

form表單提交：

首先定義文本域和提交按鈕

 

 提交時把富文本域中的內容與textarea標簽同步一下。

 

 

ajax提交

ajax提交form表單是一樣的

提交部分代碼，先綁定按鈕，同步文本內容，在發送post請求提交：

注意：submit(formSubmit)中的formSubmit為提交按鈕的lay-filter值。data.field可以獲取到form表單中的數據。返回false是阻止form提交后，在進行form表單提交刷新頁面。

form.on("submit(formSubmit)", function (data) {
    console.log(data.field);
    $.post("layEdit/save", data.field, function(result){
        layer.msg(result.msg,{offset:'rb'});
    });
    return false;
})

上面插入都是圖片，下面為代碼部分：

form表單部分代碼：

<form id="myForm" action="layUITextarea/save" method="post" class="layui-form white-bg radius">
    <input type="hidden" name="id" id = "id" value="${model.id}">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">標題</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="title" value="${model.title}">
            </div>
        </div>
        <div class="layui-inline"> 
            <label class="layui-form-label">類型</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="type" value="${model.type}">
            </div>
        </div>
    </div>
    <textarea id="lay_edit" lay-verify="content" name = "text">${model.text}</textarea>
    
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</button>
</form>

同步部分代碼：

layui.use(['layedit', 'form'], function(){
    var form = layui.form;
      var layedit = layui.layedit;
      layedit.set({    //設置圖片接口
            uploadImage: {
              url: 'layUITextarea/upload', //接口url
              type: 'post'
            }
      });
      //創建一個編輯器
      var index = layedit.build('lay_edit',{
          height: 350
      });
      //提交時把值同步到文本域中
      form.verify({
          //content富文本域中的lay-verify值
           content: function(value) {
               return layedit.sync(index);
           }
       });
    //提交
     form.on("submit(formSubmit)", function (data) {
            console.log(data.field);
            $.post("layEdit/save", data.field, function(result){
                layer.msg(result.msg,{offset:'rb'});
            });
            return false;
        })
});

最后關於layui富文本域圖片上傳回顯問題可以訪問：https://blog.csdn.net/qq_40205116/article/details/89433791

layui富文本域完整案例：https://blog.csdn.net/qq_40205116/article/details/89536834

轉載：https://blog.csdn.net/qq_40205116/article/details/89433623

 

----------------------------------------------------------------------自己項目--------------------------------------------------------------

   <form class="layui-form" action="">
        
          <div class="layui-form-item">
            <label class="layui-form-label" style="padding: 5px 5px;">所屬分類</label>
            <div class="layui-input-block" style="width: 500px;">
              <select name="interest" lay-filter="aihao">
                <option value=""></option>
                <option value="0">寫作</option>
                <option value="1" selected="">閱讀</option>
                <option value="2">游戲</option>
                <option value="3">音樂</option>
                <option value="4">旅行</option>
              </select>
            </div>
        </div>
        
        
  <div class="layui-form-item">
    <label class="layui-form-label" style="padding: 5px 5px;">標題</label>
    <div class="layui-input-block" style="width: 500px;">
      <input type="text" name="title" required  lay-verify="required" autocomplete="off" placeholder="例如：春季脫單，大型相親活動" class="layui-input" >
    </div>
  </div>
        
        
          <div class="layui-form-item layui-form-text">
    <label class="layui-form-label" style="padding: 5px 5px;">活動圖片</label>
       <div class="layui-upload">
    <div class="layui-input-block">
         <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" src="__STATIC__/images/1.jpg"  style="border: 1px solid black;width: 150px;height: 150px;">
               <input type="hidden" name="background_img" value="" >
            <p id="demoText"></p>
          </div>
            <button type="button" class="layui-btn" id="test1" style="background-color: #53AD3F">上傳圖片</button>
         <br>
        <span style="color: red;">*必填項  活動圖片尺寸: 1147 * 442</span>
        </div>
    </div>
  </div>
     <div class="layui-form-item" style="height: 30px;"></div>
    
        
   
    
    <div class="layui-form-item">
    <label class="layui-form-label" style="padding: 5px 5px;">瀏覽量</label>
    <div class="layui-input-block" style="width: 500px;">
      <input type="text" name="address" required  lay-verify="required" autocomplete="off" placeholder="例如：武漢市洪山區洪山體育館" class="layui-input" >
    </div>
  </div>
    
    
    <div class="layui-form-item">
    <label class="layui-form-label" style="padding: 5px 5px;">點贊數</label>
    <div class="layui-input-block" style="width: 500px;">
      <input type="text" name="address" required  lay-verify="required" autocomplete="off" placeholder="例如：武漢市洪山區洪山體育館" class="layui-input" >
    </div>
  </div>
    
  
<textarea   id="LAY_demo1" lay-verify="content" name="content" style="display: none">

</textarea>
  <div></div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      
       <button type="button" class="layui-btn layui-btn-primary" style="background-color: #EA5514;color: white" onclick="back()">返回</button>
    </div>
  </div>
</form>

<script>


layui.use(['upload','form','layedit'], function() {
    var $ = layui.jquery
        , upload = layui.upload
        ,layedit = layui.layedit
        ,form = layui.form;



    layedit.set({    //設置圖片接口
        uploadImage: {
            url: "{:url('admin/article/form_img')}", //接口url
            type: 'post'
        }
    },function (res) {
        console.log(res);
    });
    //創建一個編輯器
    var index = layedit.build('LAY_demo1',{
        height: 350
    });
    //提交時把值同步到文本域中
    form.verify({
        //content富文本域中的lay-verify值
        content: function(value) {
            return layedit.sync(index);
        }
    });




    
    //監聽提交
    form.on('submit(demo1)', function(data){
        console.log(data.field);
        
        // $.ajax({
        //     type:'post',
        //     url:"{:url('admin/article/form')}",
        //     data:{data:data.field},
        //     success:function (res) {
        //         console.log(res);
        //         // if (res.status == 200) {
        //         //     layer.msg(res.msg,function () {
        //         //         window.location.reload();
        //         //     });
        //         // } else {
        //         //     layer.msg('失敗', {icon: 2, time: 1000});
        //         // }
        //     }
        // });

        return false;
    });
    

    $('.site-demo-layedit').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    //自定義工具欄
    layedit.build('LAY_demo2', {
        tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
        ,height: 100
    })

    
  
});



</script>