How to use multiple KindEditor editors on one page and pass values ​​to server side

When using the KindEditor today, I need to use two editors on one page. At the beginning, I directly added the code with the same nature as above, and the effect came out. But when submitting, the lower value always overwrites the upper value. I feel that this problem should not be big, so after some tinkering, the effect is finally achieved. This is my personal summary. I hope everyone can learn together and work together. progress!

The following are the steps:

1. Declare an editor array:

var editor = new Array();

2. Display the previous editor line of code:

KindEditor.ready(function(K) {
        window.editor = K.create('#content', defaultEditorOptions);
});

Change the code into an index array form:

KindEditor.ready(function(K) {
        window.editor[0] = K.create('#content', defaultEditorOptions);
        window.editor[1] = K.create('#ycontent', defaultEditorOptions);
});

In this way, the rendering of the KindEditor editor will be displayed:

3. Pass the relevant data filled in by KindEditor:

The previous transfer method of a KindEditor editor was like this:

<script>

$("#submitBtn").on(&#39;click&#39;, function(event) {
        //编辑器中的内容异步提交
        editor.sync();
        event.preventDefault();
        var params = $("form").serializeArray();
        sendRequest(&#39;{:U("doEdit")}&#39;, params, function(data) {
            if (data.status == 1) {
                simpleSwal(data.info, &#39;&#39;, 1, function() {
                    jumpCurrentFrame();
                });
            } else {
                simpleSwal(data.info, &#39;&#39;, 2);
            }


        });


    });

<script>

We need to change the above code part to our correct value transfer method as follows:

$("#submitBtn").on('click', function(event) {
        //编辑器中的内容异步提交
        editor[0].sync();
        editor[1].sync();//需要注意的是，这里面的索引数值是需要和变为一个索引数组形式的代码索引值一致，即键值一样多！！！
        event.preventDefault();
        var params = $("form").serializeArray();
        sendRequest('{:U("doEdit")}', params, function(data) {
            if (data.status == 1) {
                simpleSwal(data.info, '', 1, function() {
                    jumpCurrentFrame();
                });
            } else {
                simpleSwal(data.info, '', 2);
            }


        });


    });

In this way, We can then receive and verify the corresponding values ​​on the server side.

Post the complete code below, friends who need it can take a look:

<script>
 // 点击提交
    $("#submitBtn").on(&#39;click&#39;, function(event) {
        //编辑器中的内容异步提交
        editor[0].sync();
        editor[1].sync();
        event.preventDefault();
        var params = $("form").serializeArray();
        sendRequest(&#39;{:U("doEdit")}&#39;, params, function(data) {
            if (data.status == 1) {
                simpleSwal(data.info, &#39;&#39;, 1, function() {
                    jumpCurrentFrame();
                });
            } else {
                simpleSwal(data.info, &#39;&#39;, 2);
            }


        });


    });
    </script>

    <!-- 编辑器插件 -->
    <script charset="utf-8" src="__PUBLIC__/lib/js/plugins/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="__PUBLIC__/lib/js/plugins/kindeditor/lang/zh_CN.js"></script>
    <!-- 为避免kindeditor获取目录时出错，路径引入都避开base设置，采用根路径 -->
    <!-- uploadJson等的路径默认是PHP的，可以不用配置。 -->
    <!-- 但是若配置，则其相对路径起始是主窗口URL或者base，不是kindeditor自身的basePath -->
    <script>
    var editor = Array();
    var defaultEditorOptions = {
        width: &#39;100%&#39;,
        resizeType: 1,
        items: [
            &#39;source&#39;, &#39;|&#39;, &#39;undo&#39;, &#39;redo&#39;, &#39;|&#39;, &#39;preview&#39;, &#39;print&#39;, &#39;template&#39;, &#39;code&#39;, &#39;cut&#39;,
            &#39;copy&#39;, &#39;paste&#39;, &#39;plainpaste&#39;, &#39;wordpaste&#39;, &#39;|&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;,
            &#39;justifyright&#39;, &#39;justifyfull&#39;, &#39;insertorderedlist&#39;, &#39;insertunorderedlist&#39;, &#39;indent&#39;,
            &#39;outdent&#39;, &#39;subscript&#39;, &#39;superscript&#39;, &#39;clearhtml&#39;, &#39;quickformat&#39;, &#39;selectall&#39;, &#39;|&#39;,
            &#39;fullscreen&#39;, &#39;/&#39;, &#39;formatblock&#39;, &#39;fontname&#39;, &#39;fontsize&#39;, &#39;|&#39;, &#39;forecolor&#39;,
            &#39;hilitecolor&#39;, &#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;strikethrough&#39;, &#39;lineheight&#39;,
            &#39;removeformat&#39;, &#39;|&#39;, &#39;image&#39;, &#39;multiimage&#39;, &#39;|&#39;, &#39;table&#39;, &#39;hr&#39;, &#39;emoticons&#39;,
            &#39;pagebreak&#39;, &#39;anchor&#39;, &#39;link&#39;, &#39;unlink&#39;, &#39;|&#39;, &#39;about&#39;
        ],
        uploadJson: &#39;{:U("imgUpload",array("f"=>"imgFile"))}&#39;,
        formatUploadUrl: false,
        // uploadJson: &#39;__ROOT__/Public/lib/js/plugins/kindeditor/php/upload_json_extend.php&#39;,
        afterUpload: function(url) {}
    };


    KindEditor.ready(function(K) {
        window.editor[0] = K.create(&#39;#content&#39;, defaultEditorOptions);
        window.editor[1] = K.create(&#39;#ycontent&#39;, defaultEditorOptions);
    });
    </script>

The above is the detailed content of How to use multiple KindEditor editors on one page and pass values ​​to server side. For more information, please follow other related articles on the PHP Chinese website!