当前位置:网站首页>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>
边栏推荐
猜你喜欢

SQL Sever中的窗口函数row_number()rank()dense_rank()

解决Deprecated: Methods with the same name as their class will not be constructors in报错方案

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

正规方程、、、

Record the range of data that MySQL update will lock

大中型企业如何构建自己的监控体系

canvas掉落的小球重力js特效动画

leetCode-498: 對角線遍曆

利用pandas读取SQL Sever数据表

Cookie encryption 4 RPC method determines cookie encryption
随机推荐
How large and medium-sized enterprises build their own monitoring system
[db2] sql0805n solution and thinking
3. addition, deletion, modification and query of employees
2022全网最全最细的jmeter接口测试教程以及接口测试流程详解— JMeter测试计划元件(线程<用户>)
canvas掉落的小球重力js特效动画
学习使用KindEditor富文本编辑器,点击上传图片遮罩太大或白屏解决方案
uniapp开发微信小程序,显示地图功能,且点击后打开高德或腾讯地图。
Leetcode interview question 01.05: primary editing
一群骷髅在飞canvas动画js特效
【IEEE出版】2022年智能交通与未来出行国际会议(CSTFM 2022)
Role of message queuing
np. float32()
2.登陆退出功能开发
【IEEE出版】2022年服务机器人国际研讨会(IWoSR 2022)
【Energy Reports期刊发表】2022年能源与环境工程国际会议(CFEEE 2022)
解决Deprecated: Methods with the same name as their class will not be constructors in报错方案
The great charm of cookies
包装类型的缓存机制
学习使用php对字符串中的特殊符号进行过滤的方法
How to customize sharing links in wechat for H5 web pages