Layui富文本layedit

Layui超实用10篇技术解决方案:https://blog.csdn.net/libusi001/article/details/100065911

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、html代码

<form class="layui-form" action="" lay-filter="example">

    <input type="text" name="id" style="display: none">

    <div class="layui-form-item">
        <label class="layui-form-label">漏洞简介</label>
        <textarea id="vulnerabilityIntroduction" name="vulnerabilityIntroduction" style="display: none;"></textarea>
    </div>
 
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="submit" style="display: none">立即提交</button>
        </div>
    </div>

</form>

二、创建富文本并接收值

layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        var aa = layedit.build('vulnerabilityIntroduction');

三、Ajax新属性赋值并传送后台

//监听提交
        form.on('submit(demo1)', function (data) {
            var vulnerabilityIntroduction = layedit.getContent(aa);
            var bean = data.field;
            bean.vulnerabilityIntroduction = vulnerabilityIntroduction;
            $.ajax({
                async: false,
                type: "POST",
                url: ctxPath + 'demo/add',
                data: bean,
                success: function (result) {
                    layer.alert("新增成功");
                    if (result.code === 0) {
                        layer.alert("新增成功");
                    }
                }
            });
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            parent.$('.layui-laypage-btn').click();
        });

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!

 

上一篇:ASP.NET MVC实现layui富文本编辑器应用


下一篇:layedit富文本,图片大小限制完美解决方案