码迷,mamicode.com
首页 > 其他好文 > 详细

Layui中layedit模板的使用

时间:2020-05-26 12:24:58      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:name   demo   action   dex   field   lte   创建   BMI   官方   

1、当我们想要编辑一个文本框输入内容,同时可以像word一样对内容进行操作的时候(比如字体加粗,斜体或加上表情),我们就可以使用layui中的layedit模板,具体的使用如下代码:

<form class="layui-form" id="form_1" action="">
<div class="layui-form-item layui-form-text">
   <textarea class="layui-textarea " placeholder="请输内容" 
     name="content" lay-verify="content"
     id="editor_demo"></textarea>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="editor">提交保存<button>
</div>
</form>

 

2、在上面我定义了一个id便于接下来的操作,下面在使用之前记得先要声明使用layui中layedit这个模板,具体如下:

   layui.use([‘form‘, ‘layedit‘, ‘layer‘], function () {
        var form = layui.form,
            layedit = layui.layedit,
            layer = layui.layer;
        //创建一个编辑器
        var editIndex;
        editIndex = layedit.build(‘editor_demo‘);

        form.on(‘submit(editor)‘, function (data) 
            $.post(‘/test/addContent‘, {
                content: data.field.content,
            }, function (msg) {
                if (msg === ‘0‘) {
                    layer.alert("添加成功", {
                        title: ‘最终的提交信息‘,
                        yes: function (index) {
                            $(‘#form-1‘)[0].reset(); //内容提交之后清空文本框,重新定义这个模板
                            editIndex = layedit.build(‘editor_demo‘);
                            layer.close(index);
                        }
                    });
                }
            });
            return false;
        });

3、最终的效果图如下:

技术图片

 官方文档:https://www.layui.com/doc/modules/layedit.html

Layui中layedit模板的使用

标签:name   demo   action   dex   field   lte   创建   BMI   官方   

原文地址:https://www.cnblogs.com/yanghr/p/12964471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!