当前位置:网站首页>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】
How to use multiple on one page KindEditor Editor and pass the value to the server
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>
边栏推荐
- tf. errors
- CVPR 2022 oral | NVIDIA proposes an efficient visual transformer network a-vit with adaptive token. The calculation of unimportant tokens can be stopped in advance
- 牛客-TOP101-BM29
- 线程池的状态
- 使用swiper左右轮播切换时,Swiper Animate的动画失效,怎么解决?
- 2. login and exit function development
- Leetcode interview question 01.05: primary editing
- leetCode-2221: 数组的三角和
- Leetcode-1089: replication zero
- Flink集群搭建以及企业级yarn集群搭建
猜你喜欢

Juul, the American e-cigarette giant, suffered a disaster, and all products were forced off the shelves

leetCode-1823: 找出游戏的获胜者

Flink checkPoint和SavePoint

Tutorial (5.0) 08 Fortinet security architecture integration and fortixdr * fortiedr * Fortinet network security expert NSE 5

leetCode-2221: 数组的三角和

线程池的状态

消息队列的作用

numpy.linspace()

时尚的弹出模态登录注册窗口

保健品一物一码防窜货营销软件开发
随机推荐
【IEEE出版】2022年工业自动化,机器人与控制工程国际会议(IARCE 2022)
整理接口性能优化技巧,干掉慢代码
牛客-TOP101-BM29
读取csv(tsv)文件出错
植物生长h5动画js特效
tf. contrib. layers. batch_ norm
Baidu online disk download has been in the process of requesting solutions
What are the characteristics of EDI local deployment and cloud hosting solutions?
利用pandas读取SQL Sever数据表
SQL sever基本数据类型详解
Why is JSX syntax so popular?
leetCode-面试题 01.05: 一次编辑
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端
2.登陆退出功能开发
leetCode-1051: 高度检查器
YOLOv6:又快又准的目标检测框架开源啦
How large and medium-sized enterprises build their own monitoring system
numpy.linspace()
Groovy obtains Jenkins credentials through withcredentials
uniapp开发微信小程序,显示地图功能,且点击后打开高德或腾讯地图。