`
miss_安
  • 浏览: 19402 次
文章分类
社区版块
存档分类
最新评论

TinyMCE 提交 AjaxForm 获取不到数据的问题

阅读更多
在没有使用AjaxForm前,我做的一个小小的评论提交的Web form,评论内容使用了TinyMCE做文本编辑。为了增加一点点的用户体验,就顺手拿AjaxForm来实现Ajax提交。可是发现出现了一个意外的事情。就是每次提交,第一次提交时,AjaxForm会无法获得当前编辑的评论内容,即TextArea里面的内容,要再点击一次提交,才能将TextArea的内容提交上去。

关键是TinyMCE上的内容没有在提交前更新到TextArea中。于是想看看AjaxForm是否有在提交前的事件绑定,发现在beforeSubmit事件中,formData的内容已经被填充,虽然可以在此处自行将当前的TinyMCE的内容填充上去(详细可查看这里),可是总觉得是不太漂亮的解决方案。

为了找是否有其它途径解决此问题,我查看了一下AjaxForm的源代码,发现原来AjaxForm作者已经为这问题提出了统一的解决方案,具体源文件代码如下:

// 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;
}

// 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();
});
参考:[ur=http://www.huiyi8.com/donghua/l]http://www.huiyi8.com/donghua/[/url]
分享到:
评论

相关推荐

    TinyMCE提交AjaxForm获取不到数据的解决方法

    本文实例分析了TinyMCE提交AjaxForm获取不到数据的解决方法。分享给大家供大家参考。具体分析如下: 在没有使用AjaxForm前,我做的一个小小的评论提交的Web form,评论内容使用了TinyMCE做文本编辑。为了增加一点点...

    tinymce_ajaxfilemanager_by fanzhengyuan

    tinymce ajaxfilemanager

    tinyMCE

    tinyMCE

    tinyMCE本地图片预览

    tinymce新增的本地图片预览功能,具体实现依靠jquery和ajax,代码并不复杂

    tinymce-中文包

    tinymce-中文包

    tinymce 汉化语言包

    tinymce2 的汉化语言包,来自官方

    Tinymce组件

    这不是静态资源包,是调用富文本的一个vue组件,一个封装好的可直接使用的组件

    Html富文本tinymce_powerpaste-master,word复制粘贴保留格式,含Tinymce5.2包和示例代码

    因客户要求word复制粘贴到富文本编辑器保留格式,不然发文章内容太多调整费时间,找了很久,Html富文本编辑器tinymce_powerpaste-master,word复制粘贴保留格式,免费版含示例代码,简单上手,亲测效果一级棒,困扰...

    tinymce powerpaste 支持tinymce4,tinymce5(亲测可用)

    tinymce4对应powerpaste-3.3.3-308, tinymce5对应4.0.1-317 tinymce.init({ selector: '#tinymce', // css选择器,和jquery的选择器一个道理,建议直接用id language: 'zh_CN', // 需要在官网自己下载一个全局的...

    vue+elementui+tinymce

    弹窗二次打开无法获取焦点问题,在标签加v-if,让富文本组件在弹窗关闭时销毁(原因由于el-dialog弹窗销毁为key自增,实际富文本未被销毁,再次打开造成影响。可重写弹窗销毁策略。简单方法就添加v-if)

    tinymce powerpaste插件(兼容最新tinymce5.2.0)

    tinymce powerpaste插件,兼容最新的tinymce5.2.0版本。解压后放到plugins目录

    tinymce编辑器内预览视频

    解决tinymce编辑器内不能预览视频,替换tinymce/plugins/media/plugin.min.js即可。因为默认富文本编辑器内是一个img标签,并不能播放。

    TinyMCE 3.0

    What is TinyMCE? TinyMCE是什么? <br>TinyMCE是跨浏览器,跨平台的JS脚本WEB所见即所得编辑器,它是开源的。通过TinyMCE可以将html的textarea或者其他合适的元素变为编辑器,并且TinyMCE很荣誉的与其他系统集成...

    自己扩展TinyMCE的上传附件插件

    功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),支持AJAX。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是 PHP,那还可以进一步优化。最重要的是,TinyMCE是一个根据LGPL license发布的自由...

    Tinymce.zip

    vue项目中需要使用富文本编辑器,为方便大家使用,因此把所使用的的组件的打包起来上传到这里,供大家使用。

    vue3中使用tinyMCE

    vue3中使用tinyMCE的demo,setup语法糖写法,解压后请删除node_model包后重新cnpm i

    TinyMCE自定义上传图片

    tinyMCE编辑器,包含自定义上传图片插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示

    tinymce简体中文版

    tinymce简体中文版

Global site tag (gtag.js) - Google Analytics