layui富文本域form表单提交和ajax提交获取编辑器内容详解

Myth丶恋晨 2022-02-16 02:19 605阅读 0赞

最近写项目中需要用到LayUI富文本编辑器，提交时发现富文本编辑器中内容是空的，查了很多资料才发现，LayUI在渲染富文本域时，是在下面插入的样式代码。我们页面上定义的是一个textarea标签，之后用JS渲染的。我们获取的内容是textarea中内容，富文本域中的内容和textarea中的内容不是自动同步的，所以我们需要在提交前把内容同步一下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

**form表单提交：**

首先定义文本域和提交按钮

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

提交时把富文本域中的内容与textarea标签同步一下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2][]

**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][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_89536834]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20220216/386f53a98d714da1b37f113ed654b19b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: /images/20220216/4a6bf64fb1fc4aa6ae8fc919ef7c0799.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]: /images/20220216/2debdd6cbe5a4c5f8a7c506794086c9e.png
[https_blog.csdn.net_qq_40205116_article_details_89433791]: https://blog.csdn.net/qq_40205116/article/details/89433791
[https_blog.csdn.net_qq_40205116_article_details_89536834]: https://blog.csdn.net/qq_40205116/article/details/89536834