layui弹出层里使用TinyMCE富文本编辑器，并且回显数据案例

最新推荐文章于 2024-04-26 11:41:11 发布

Fire_Sky_Ho

最新推荐文章于 2024-04-26 11:41:11 发布

阅读量5.8k

点赞数 1

本文链接：https://blog.csdn.net/Fire_Sky_Ho/article/details/104162362

版权

使用前先看下TinyMCE中文文档：http://tinymce.ax-z.cn/quick-start.php

先看下我要实现的功能

点击添加，弹出一个富文本编辑器，这个弹框有layer和TinyMCE组成

更新：回显内容

弹出层的页面的单独来一个，因为用的是iFrame

1.添加或者更新的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <link rel="stylesheet" href="/resources/css/public.css"/>
    <script type="text/javascript" src="/resources/layui/layui.js"></script>
    <script src="/resources/tinymce/tinymce.min.js"></script>
</head>
<body>
<div style="padding: 10px">
    <form method="post" id="formData" lay-filter="formData">
        <div class="layui-form-item">
            <label class="layui-form-label">公告标题</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题"
                       class="layui-input"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公告内容</label>
            <div class="layui-input-block">
                <textarea name="content" id="addOrUpdateText"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit"><span
                        class="layui-icon layui-icon-add-1"></span>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-warm"><span
                        class="layui-icon layui-icon-refresh-1"></span>重置
                </button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">

    tinymce.init({
        selector: '#addOrUpdateText',
        language: "zh_CN"
    });

    /**
     * 获取url参数，回显内容，更新操作专用
     * @param name
     * @returns {string|null}
     */
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURI(r[2]);
        }
        return null;
    }

    layui.use(['jquery', 'form'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        tinyId = 'addOrUpdateText';
        //通过url参数赋值给表单
        $('[name="id"]').val(getQueryString("id"));
        $('[name="title"]').val(getQueryString("title"));
        $('[name="content"]').val(getQueryString("content"));
        let content = getQueryString('content');
        if (content != null) {
            tinyMCE.editors[tinyId].setContent();
        }

        form.on('submit(doSubmit)', function (data) {

            //在提交数据前，同步内容到textarea，这样下面才能拿得到数据
            tinyMCE.editors[tinyId].save();
            $.post('/notice/addNotice', $('#formData').serialize(), function (res) {
                if (res.code == 200) {
                    //在父窗口里得到当前iframe层的索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //再执行关闭
                    parent.layer.close(index);
                    //重载父级页面的表格
                    parent.layui.table.reload('noticeTable');
                }
                layer.msg(res.msg);
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</body>
</html>

2.点击添加或更新按钮所在的页面（父页面）调用TinyMC的页面，摘取部分主要代码

        function add() {
            layer.open({
                title: "添加公告",
                //一定是要ifream类型，不然富文本编辑器编辑不了内容
                type: 2,
                maxmin: true,
                area: ['800px', '400px'],
                content: '/sys/toAddOrUpdate',
                btnAlign: 'c'
            });
        }

        function update(data) {

            layer.open({
                type: 2,
                maxmin: true,
                area: ['800px', '400px'],
                //打开的页面，通过url参数方式，把需要回显的数据带过去，记得编码，不然乱码
                content: '/sys/toAddOrUpdate?'+parseParams(data),

                //这个方法当你在层创建完毕时即执行一些语句
                // success: function (layero, index) {
                //     var body = layer.getChildFrame('body', index);
                //本来这样赋值可以让弹出层的表单成功赋值，就是回显，
                //但是我在弹出层页面取不到赋的值，所以就暂时不用，群友可以用，有空再试一试，
                //     body.find('[name="id"]').val(data.id);
                //     body.find('[name="title"]').val(data.title);
                //     body.find('[name="content"]').text(data.content);
                // }
            });
        }

        function parseParams(data) {
            try {
                var tempArr = [];
                for (var i in data) {
                    var key = encodeURI(i);
                    var value = encodeURI(data[i]);
                    tempArr.push(key + '=' + value);
                }
                var urlParamsStr = tempArr.join('&');
                return urlParamsStr;
            } catch (err) {
                return '';
            }
        }
    });

Fire_Sky_Ho

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
layui弹出层里使用TinyMCE富文本编辑器，并且回显数据案例

参考TinyMCE中文文档：http://tinymce.ax-z.cn/quick-start.php先看下我要实现的功能点击添加，弹出一个富文本编辑器，这个弹框有layer和TinyMCE组成更新：回显内容弹出层的页面的单独来一个，因为用的是iFrame编辑页面，addOrUpdate.html，js代码<script type="text/java...
复制链接

扫一扫