如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端

127 阅读 0 评论 84 点赞

我是靠谱客的博主无语自行车，这篇文章主要介绍如何在一个页面上使用多个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编辑器并将值传递到服务器端的详细内容，更多请关注靠谱客其它相关文章！