• 技术文章 >后端开发 >php教程

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

    眼眸间的深情眼眸间的深情2021-07-21 09:23:16原创596
    今天使用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编辑器并将值传递到服务器端的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:KindeEditor
    上一篇:KindEditor编辑器上传图片超过限制处理方案 下一篇:深入浅析PHP中的建造者模式
    VIP会员

    相关文章推荐

    • 关于YII视图整合kindeditor如何扩展的方法• dede编辑器怎么换成kindEditor编辑器• dede更换成kindeditor后栏目内容无法保存怎么办• php kindeditor使用方法• KindEditor编辑器上传图片超过限制处理方案

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网