当前位置:网站首页>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>
边栏推荐
- Yolov6: the fast and accurate target detection framework is open source
- Uniapp implementation forbids video drag fast forward
- JMeter接口测试工具基础— 使用Badboy录制JMeter脚本
- 包装类型的缓存机制
- Why is JSX syntax so popular?
- uniapp开发微信小程序,显示地图功能,且点击后打开高德或腾讯地图。
- np. float32()
- How large and medium-sized enterprises build their own monitoring system
- numpy.linspace()
- SVG+js拖拽滑块圆形进度条
猜你喜欢
随机推荐
MySQL data advanced
Development of anti fleeing marketing software for health products
Using pandas to read SQL server data table
413 binary tree Foundation
自定义kindeditor编辑器的工具栏,items即去除不必要的工具栏或者保留部分工具栏
[db2] sql0805n solution and thinking
uniapp 开发微信公众号,下拉框默认选中列表第一个
小程序 rich-text中图片点击放大与自适应大小问题
分布式事务原理以及解决分布式事务方案
Why is JSX syntax so popular?
Recursive traversal of 414 binary tree
Common methods of thread scheduling
[EI分享] 2022年第六届船舶,海洋与海事工程国际会议(NAOME 2022)
2022年智能机器人与系统国际研讨会(ISoIRS 2022)
leetCode-面试题 16.06: 最小差
2.登陆退出功能开发
Leetcode-498: diagonal traversal
oracle池式连接请求超时问题排查步骤
机器学习——主成分分析(PCA)
包装类型与基本类型的区别







