So verwenden Sie mehrere KindEditor-Editoren auf einer Seite und übergeben Werte an die Serverseite-PHP-Tutorial-php.cn

So verwenden Sie mehrere KindEditor-Editoren auf einer Seite und übergeben Werte an die Serverseite

眼眸间的深情

Freigeben： 2023-04-10 11:34:02

Original

3127 Leute haben es durchsucht

Wenn ich heute den KindEditor verwende, muss ich zwei Editoren auf einer Seite verwenden. Zu Beginn habe ich direkt den gleichen Code wie oben hinzugefügt, und der Effekt kam heraus. Beim Einreichen überschreibt der untere Wert jedoch immer den oberen Wert. Nach einigem Basteln wird der Effekt endlich erreicht. Dies ist meine persönliche Zusammenfassung. Fortschritt!

Die folgenden Schritte sind:

1. Deklarieren Sie ein Editor-Array:

var editor = new Array();

Nach dem Login kopieren

2. Ändern Sie den vorherigen Editor-Anzeigezeilencode:

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

Nach dem Login kopieren

in einen Code in Form eines Index-Arrays:

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

Nach dem Login kopieren

Auf diese Weise wird das Rendering des KindEditors angezeigt:

3. Übergeben Sie die von KindEditor eingegebenen relevanten Daten:

Die bisherige Bereitstellungsmethode eines KindEditor-Editors war wie folgt:

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

Nach dem Login kopieren

Wir müssen den obigen Code ändern Teil zu Folgendem: Richtige Art der Wertübergabe:

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


        });


    });

Nach dem Login kopieren

Auf diese Weise können wir den entsprechenden Wert auf der Serverseite empfangen und überprüfen.

Der vollständige Code ist unten gepostet, Freunde, die ihn brauchen, können einen Blick darauf werfen:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie mehrere KindEditor-Editoren auf einer Seite und übergeben Werte an die Serverseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!