ホームページ  >  記事  >  バックエンド開発  >  1ページで複数のKindEditorエディタを使用し、サーバー側に値を渡す方法

1ページで複数のKindEditorエディタを使用し、サーバー側に値を渡す方法

眼眸间的深情
眼眸间的深情オリジナル
2021-07-19 19:30:452980ブラウズ

今日KindEditorを使う際、1ページに2つのエディタを使う必要があるのですが、最初は上記と同じ性質のコードを直接追加して効果が出ました。 「ただし、提出する際に必ず下限値が上限値を上書きしてしまいます。これは大きな問題ではないと思いますので、少しいじってようやく効果が得られました。これは私の個人的なまとめです。皆さんも一緒に学び、協力していただければ幸いです。」進捗!

手順は次のとおりです:

1. エディター配列を宣言します:

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(&#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>
 // 点击提交
    $("#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>

以上が1ページで複数のKindEditorエディタを使用し、サーバー側に値を渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。