当前位置:网站首页>How to use multiple kindeditor editors on a page and pass values to the server

How to use multiple kindeditor editors on a page and pass values to the server

2022-06-24 10:24:00 Wandering in memory of Yu Fei

Use today KindEditor Editors need to involve the use of two editors for one page , At first , I am directly adding code of the same nature as above , The effect is out . But when submitting, the value below always overwrites the value above

1、 Make a statement editor Array :

var editor = new Array();

2、 Show the previous editor lines of code :

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

Code in the form of an index array :

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

such ,KindEditor The rendering of the editor will be displayed :

3、 Pass on KindEditor Relevant data filled in :

The previous one KindEditor The editor is passed in this way :

<script>

$("#submitBtn").on('click', function(event) {
    
        // The content in the editor is submitted asynchronously 
        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>

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

$("#submitBtn").on('click', function(event) {
    
        // The content in the editor is submitted asynchronously 
        editor[0].sync();
        editor[1].sync();// It should be noted that , The index value should be consistent with the code index value in the form of an index array , That is, there are as many keys as values !!!
        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);
        }
    });
});

such , We can receive and verify the corresponding values on the server .

Here is the complete code , You can take a look at it if you need it :

<script>
 //  Click on the submit 
    $("#submitBtn").on('click', function(event) {
    
        // The content in the editor is submitted asynchronously 
        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>

    <!--  Editor plugin  -->
    <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>
    <!--  To avoid kindeditor Error getting directory , Path introductions are avoided base Set up , Take root path  -->
    <!-- uploadJson By default, the path of etc. is PHP Of , You don't have to configure it . -->
    <!--  However, if configured , The relative path starts from the main window URL perhaps base, No kindeditor Self 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>
原网站

版权声明
本文为[Wandering in memory of Yu Fei]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/175/202206240914529394.html