TinyMCE rich text editor is used in the layui pop-up layer, and data cases are echoed

Posted by zushiba on Mon, 03 Feb 2020 15:23:30 +0100

Refer to TinyMCE Chinese document: http://tinymce.ax-z.cn/quick-start.php

Let's see what I want to achieve

Click Add to pop up a rich text editor, which consists of layer and TinyMCE

Updating: echoing content

The page of the pop-up layer comes alone, because iFrame is used

Edit page, addOrUpdate.html, js code

<script type="text/javascript">

        selector: '#addOrUpdateText',
        language: "zh_CN"

    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';
        //Assign to form by url parameter

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

            //Before submitting the data, synchronize the content to textarea so that the data can be obtained below
            $.post('/notice/addNotice', $('#formData').serialize(), function (res) {
                if (res.code == 200) {
                    //Get the index of the current iframe layer in the parent window
                    var index = parent.layer.getFrameIndex(window.name);
                    //Close again
                    //Reload table of parent page
            return false; //Prevent form jump. If you need a form jump, just remove this paragraph.


The parent page calls the page of the pop-up box and extracts part of the main code

        function add() {
                title: "Add announcement",
                type: 2,
                maxmin: true,
                area: ['800px', '400px'],
                content: '/sys/toAddOrUpdate',
                btnAlign: 'c'

        function update(data) {

                type: 2,
                maxmin: true,
                area: ['800px', '400px'],
                //Open the page, through the url parameter mode, take the data to be echoed, remember to code, otherwise garbled
                content: '/sys/toAddOrUpdate?'+parseParams(data),

                //This method executes some statements when you finish creating the layer
                // success: function (layero, index) {
                //     var body = layer.getChildFrame('body', index);
                //In this way, the form in the pop-up layer can be assigned successfully, which is echo,
                //But I can't get the assigned value on the pop-up layer page, so I don't need it for the time being. Friends can use it. Try again when free,
                //     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 '';


100 original articles published, 39 praised, 70000 visitors+
Private letter follow

Topics: JQuery PHP Javascript