怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務器端

這篇文章主要介紹“怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務器端”，在日常操作中，相信很多人在怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務器端問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在一個頁面上使用多個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('click', function(event) {
        //編輯器中的內容異步提交
        editor.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('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('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>

    <!-- 編輯器插件 -->
    <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: '100%',
        resizeType: 1,
        items: [
            'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut',
            'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter',
            'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent',
            'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|',
            'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor',
            'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight',
            'removeformat', '|', 'image', 'multiimage', '|', 'table', 'hr', 'emoticons',
            'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
        ],
        uploadJson: '{:U("imgUpload",array("f"=>"imgFile"))}',
        formatUploadUrl: false,
        // uploadJson: '__ROOT__/Public/lib/js/plugins/kindeditor/php/upload_json_extend.php',
        afterUpload: function(url) {}
    };


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

到此，關于“怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務器端”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！