KindEditor编辑器无法获得提交的数据

川长思鸟来 2022-06-16 11:42 191阅读 0赞

以下列举KindEditor4X几处问题及解决方法：

PS：标红处为重点。

1. 使用A标签提交表单：

<form name="frm" action="demo.[PHP][]" method="post">  
  详细 内容：<textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea><br>  
                     <a href="\#" οnclick="[JavaScript][]:frm.submit()">提交</a>  
  </form>

把上面A标签代码改成下列即可，

提交前需要执行editor.sync()，editor是K.create返回的对象。

<a href="\#" οnclick="Javascript:editor.sync();frm.submit();">提交</a>

注意：提交表单的命名（标蓝色处）要一致。

2.检查form标签放在table和tr之间，如果是这样的话form自动绑定事件可能有问题。解决方法是，提交时请执行一下editor.sync()。

具体实例如下：

<link rel="stylesheet" href="kindeditor/themes/default/default.css" />  
<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />  
<script charset="utf-8" src="kindeditor/kindeditor.js"></script>  
<script charset="utf-8" src="kindeditor/lang/zh\_CN.js"></script>  
<script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>  
<script>  
    KindEditor.ready(function(K) \{  
        var editor = K.create('\#content', \{  
            cssPath : 'kindeditor/plugins/code/prettify.css',  
            uploadJson : 'kindeditor/php/upload\_json.php',  
            fileManagerJson : 'kindeditor/php/file\_manager\_json.php',  
            allowFileManager : true,  
            afterCreate : function() \{  
                var self = this;  
                K.ctrl(document, 13, function() \{  
                    self.sync();  
                    K('form\[name=form1\]')\[0\].submit();  
                \});  
                K.ctrl(self.edit.doc, 13, function() \{  
                    self.sync();  
                    K('form\[name=form1\]')\[0\].submit();  
                \});  
            \}  
        \});  
        K('\#form1').bind('submit', function() \{   
            editor.sync();  
        \});  
    \});  
</script>

<tr class="editTr">  
    <td class="editLeftTd">详细内容</td>  
    <td class="editRightTd">  
        <textarea id="content" name="content" style="width:800px;height:300px; visibility:hidden;"><?php echo $content; ?></textarea>  
    </td>  
</tr>

以上是本人使用到的Js与样式，可以根据实际操作相应增减，注意样式与Js引用路径问题是否正确，

上书绿色处为文本域ID与Name对应操作，蓝色处为表单名称命名，紫色为表单ID命名，红色处的操作是为了给解决表单布局的BUG所做的处理，给ID为\#form1绑定editor.sync();操作。

发布此文章是为了给大家提供一种快速的解决方式，官方上也有此解决问题的方式，但都是只字片语，此问题折腾了我几个小时，不希望大家也在此问题上被阻挡。

如有不明白处，可以给本人留言，本人愿与大家共学习，共进步。

欢迎访问我的技术群425783133

[PHP]: http://lib.csdn.net/base/php
[JavaScript]: http://lib.csdn.net/base/javascript

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关富文本编辑器KindEditor

目录下载引入前端使用KindEditor 后端处理表单 ajax K

蔚落/ 2022年12月11日 06:25/ 0 赞/ 475 阅读

相关 domino集成kindeditor富文本编辑器

domino9.0的富文本编辑器ckeditor，在手机上不能使用(不管是在xpages还是在form中不正常使用，可能水平有限！)，造成按钮不能提交，所以更换一个控件

向右看齐/ 2022年08月08日 03:26/ 0 赞/ 255 阅读

相关 KindEditor编辑器无法获得提交的数据

以下列举KindEditor4X几处问题及解决方法： PS：标红处为重点。 1. 使用A标签提交表单： <form name="frm" action="demo.[PH

川长思鸟来/ 2022年06月16日 11:42/ 0 赞/ 192 阅读

相关清空KindEditor编辑器内容

//创建 var editor = KindEditor.create("textarea[name='desc']", {....}); //清空ki

Dear 丶/ 2022年06月15日 02:49/ 0 赞/ 352 阅读

相关 kindeditor富文本编辑器的使用

百度下载kindeditor 解压放至项目中可以删除一些不必要的文件夹然后在页面引入 <link href="kindeditor-4.1.10/themes/

深藏阁楼爱情的钟/ 2022年05月17日 09:40/ 0 赞/ 393 阅读

相关 kindEditor编辑器的使用

1.在官网下载 [http://kindeditor.net/down.php][http_kindeditor.net_down.php] 2.导入必须的js

川长思鸟来/ 2022年05月17日 07:29/ 0 赞/ 284 阅读

相关 KindEditor 编辑器

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器

偏执的太偏执、/ 2022年04月22日 03:56/ 0 赞/ 266 阅读

相关 KindEditor:富文本编辑器介绍

富文本编辑器介绍富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器 Kin

野性酷女/ 2022年04月12日 13:53/ 0 赞/ 600 阅读

相关 KindEditor富文本编辑器

KindEditor简单使用 KindEditor 引入相关JS 简单使用 KindEditor KindEditor是一套开源的HTML可视化

水深无声/ 2021年10月06日 02:50/ 0 赞/ 558 阅读

相关 kindeditor在线HTML编辑器

kindeditor在线HTML编辑器

朱雀/ 2020年06月25日 09:42/ 0 赞/ 1023 阅读