TinyMCE提交AjaxForm获取不到数据的解决方法
更新时间：2015年03月05日 11:20:39 作者：大猪
这篇文章主要介绍了TinyMCE提交AjaxForm获取不到数据的解决方法,实例分析了对应的源码部分与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例分析了TinyMCE提交AjaxForm获取不到数据的解决方法。分享给大家供大家参考。具体分析如下：
在没有使用AjaxForm前，我做的一个小小的评论提交的Web form，评论内容使用了TinyMCE做文本编辑。为了增加一点点的用户体验，就顺手拿AjaxForm来实现Ajax提交。可是发现出现了一个意外的事情。就是每次提交，第一次提交时，AjaxForm会无法获得当前编辑的评论内容，即TextArea里面的内容，要再点击一次提交，才能将TextArea的内容提交上去。
关键是TinyMCE上的内容没有在提交前更新到TextArea中。于是想看看AjaxForm是否有在提交前的事件绑定，发现在beforeSubmit事件中，formData的内容已经被填充，虽然可以在此处自行将当前的TinyMCE的内容填充上去，可是总觉得是不太漂亮的解决方案。
为了找是否有其它途径解决此问题，我查看了一下AjaxForm的源代码，发现原来AjaxForm作者已经为这问题提出了统一的解决方案，具体源代码如下：
1. js代码如下：
复制代码 代码如下:
// hook for manipulating the form data before it is extracted;
// convenient for use with rich editors like tinyMCE or FCKEditor
var veto = {};
this.trigger('form-pre-serialize', [this, options, veto]);
if (veto.veto) {
log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
return this;
}
// convenient for use with rich editors like tinyMCE or FCKEditor
var veto = {};
this.trigger('form-pre-serialize', [this, options, veto]);
if (veto.veto) {
log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
return this;
}
2. 对应FCKEditor类似：
复制代码 代码如下:
// bind form using 'ajaxForm'
$('#commentForm').ajaxForm(options);
// 绑定form-pre-serialize事件，在触发form-serilaize事件前保存tinyMCE的数据到textarea中
$('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
tinyMCE.triggerSave();
});
$('#commentForm').ajaxForm(options);
// 绑定form-pre-serialize事件，在触发form-serilaize事件前保存tinyMCE的数据到textarea中
$('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
tinyMCE.triggerSave();
});
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要给大家介绍了关于ES6中类（Class）的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
JavaScript语言有一个机制：在解析时，能够在一句话后面自动插入一个分号，用来修改语句末尾遗漏的分号分隔符。然而，由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突，即所有空格符都被忽略，因此程序可以利用空格格式化代码2015-11-11
这篇文章主要介绍了动态统计当前输入内容的字节、字符数的实例详解的相关资料,希望通过本文能帮助到大家，让大家实现这样的功能，需要的朋友可以参考下2017-10-10
本文我们将讨论 axios 中是如何处理异常的,在此之前,我们先了解以下 axios 中各种类型的异常,文中通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-05-05
这篇文章主要为大家详细介绍了使用zepto.js，纯JS写的登录界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
前端通过多种方式向后端获取数据,下面这篇文章主要介绍了前端存储后端响应数据超详细的实现方式和注意事项,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了echarts统计x轴区间的数值,本文给出了实现实例及实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
本文主要分享了利用canvas画多边形的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
今天小编就为大家分享一篇使用layer弹窗提交表单时判断表单是否输入为空的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
在现代Web应用程序中,日期选择器是一个非常常见的组件,用户可以使用它来选择特定的日期,在本篇文章中,我们将使用JavaScript和HTML来创建一个简单但功能强大的日期选择插件,这个日期选择插件是比较考验Js基本功的,需要的朋友可以参考下2023-10-10
最新评论