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

1、声明一个editor数组:
2、将之前的编辑器显示行代码：
3、传递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编辑器并将值传递到服务器端相关推荐

html ajax实现ntlm,jquery – 在一个页面上通过AJAX POST获取NTLM挑战
这里的奥秘很神秘.我有一个使用Windows身份验证的ASP.NET MVC 4 Web应用程序,已保存超过18个月没有问题.最近,它被部署到一个新的网站,我遇到了以下,非常奇怪的行为. 我使用一个j ...
绘图_origin在一个页面上绘制多个图像x1y1和x2y2
目的:最近再做仿真的时候,分别做了按照路径d和时间t的仿真,为了验证两者的准确性,计划将路径d的数据转换为时间t的图像,看二者能否重合. 问题:路径d转换为时间t后数据成了不规则的数据,而时间t的变量 ...
通过点击热区，有个href 跳到servlet,怎么把页面上的值传到servlet里面?
jsp页面:<a href='servlet?parm1=name&parm2=pw'> servlet里面:String name=request.getParameter(&q ...
html之设置页面ico图标ie浏览器,如何修改网页小图标，浏览器页面上的图标（favicon.ico）...
我们在查看网页的时候很多那么如何更改这个图标呢?两种方式. 第一种方式: 1.找到已经安装的tomcat目录,进入D: omcatapache-tomcat-7.0.50-1webappsROOT目 ...
自定义kindeditor编辑器的工具栏，items即去除不必要的工具栏或者保留部分工具栏
自定义kindeditor编辑器的工具栏,items即去除不必要的工具栏或者保留部分工具栏 kindeditor编辑器的工具栏简介第一种:修改原始文件kindeditor.js对工具栏进行统一调整 ...
如何在一个页面添加多个不同的kindeditor编辑器
kindeditor官方下载地址:http://kindeditor.net/down.php (入门必看)kindeditor官方文档:http://kindeditor.net/doc.ph ...
如何在一个html页面使用多个kindeditor编辑器
如何在一个html页面使用多个kindeditor编辑器 html页面 js初始化编辑器 html页面 <tr><th width="80">奇葩简介< ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...
百度富文本编辑器的应用技巧---在一个页面中使用多个样式不同功能不同的编辑器...
//1.2.4以后可以使用一下代码实例化编辑器 //UE.getEditor('myEditor') 在官方的说明文档上看到这个注释,不是很明白,而且需要在一个页面中使用多次样式功能不同的uedito ...

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

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

1、声明一个editor数组:

2、将之前的编辑器显示行代码：

3、传递KindEditor所填写的相关数据：

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

最新文章

热门文章