如何在一個頁面上使用多個KindEditor編輯器並將值傳遞到伺服器端

今天使用KindEditor編輯器時需要涉及到一個頁面使用兩個編輯器的問題，剛開始，我直接在添加和上面一樣性質的程式碼，效果是出來了。但是提交的時候下面的那個值總是將上面的那個值覆蓋了，我感覺這問題應該不大，於是經過一番搗鼓，最終實現效果，這是我個人總結的心得，希望大家一起學習，共同進步！

以下是操作步驟：

1.宣告一個editor陣列:

var editor = new Array();

2.將先前的編輯器顯示行程式碼：

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

變成一個索引陣列形式的程式碼：

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

這樣，KindEditor編輯器的效果圖便會顯示出來：

3.傳遞KindEditor所填寫的相關資料：

之前一個KindEditor編輯器的傳遞方式是這樣的：

<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>

我們需要將上述程式碼部分改為如下我們的正確傳值方式：

$("#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);
            }


        });


    });

這樣，我們就可以在伺服器端進行對應值的接收和校驗了。

下面把完整的程式碼貼下，需要的小夥伴可以看下：

<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>

以上是如何在一個頁面上使用多個KindEditor編輯器並將值傳遞到伺服器端的詳細內容。更多資訊請關注PHP中文網其他相關文章！