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

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 by fanzhengyuan" 是一个专门为TinyMCE文本编辑器设计的文件管理插件。TinyMCE是一款流行的开源富文本编辑器,它提供了丰富的功能,使得用户可以在网页上实现类似Word的编辑体验。而AJAX...

    Tinymce.zip

    8. **数据保存**:编辑器内容可以通过API获取,通常在`blur`事件触发时保存内容到服务器,或者在提交表单时同步到其他数据字段。 9. **安全考虑**:富文本编辑器可能会引入XSS攻击风险,因此在使用Tinymce时,应...

    vue3中使用tinyMCE

    在Vue3中集成TinyMCE是一个常见的需求,特别是在构建富文本编辑器场景下。TinyMCE是一个功能强大的JavaScript WYSIWYG(所见即所得)编辑器,它提供了丰富的文本格式化选项,使得用户可以方便地创建和编辑HTML内容。...

    tinyMCE本地图片预览

    2. **AJAX**(Asynchronous JavaScript and XML):这是一种创建交互式网页应用的技术,可以实现在不重新加载整个页面的情况下更新部分数据。 3. **tinyMCE**:一个强大的所见即所得的编辑器,支持多种插件扩展功能...

    在vue3项目中使用tinymce编辑器

    首先,你需要从TinyMCE官方网站下载最新版本的编辑器,同时获取到汉化包。TinyMCE支持多种语言,包括中文,你可以从其语言资源包中选择“zh_CN”(简体中文)或“zh_TW”(繁体中文)。在提供的压缩包文件"langs"中...

    tinyMCE方法调用

    6. 关闭编辑器:`tinyMCE.execCommand('mceRemoveEditor', false, id)` 可以关闭指定ID的编辑器,恢复到原始的textarea。 ```javascript tinyMCE.execCommand('mceRemoveEditor', false, 'myTextareaId'); ``` 7...

    tinymce 汉化语言包

    在部署时,开发者需要将对应的汉化文件引入到TinyMCE的配置中,以启用中文界面。 要使用tinymce2的汉化语言包,首先需要在HTML页面中引入TinyMCE的JavaScript库,然后在TinyMCE初始化时设置"language"参数为"zh_CN"...

    TinyMCE自定义上传图片

    1. **下载并解压**:获取到压缩包文件后,将其解压缩,你会看到包含插件代码的文件和目录。 2. **放置插件**:将解压后的插件文件夹放入TinyMCE的`plugins`目录下。通常,插件目录应包含一个`plugin.js`文件,这是...

    tinymce静态资源文件

    Tinymce是一款广泛应用于Web开发领域的开源富文本编辑器,它以其强大的功能和良好的用户体验而备受开发者喜爱。在“tinymce4.7.5”这个压缩包中,包含了Tinymce的特定版本——4.7.5的所有静态资源文件,这些文件使得...

    tinyMCE

    tinyMCE

    layui的富文本编辑器插件(tinymce)封装

    1. **安装与引入**:首先,你需要下载tinymce及其相关依赖,然后将其引入到你的项目中。在layui-tinymce-master这个压缩包中,可能包含了tinymce的源码和配置文件。确保在HTML文件中正确引入tinymce的JS和CSS资源。 ...

    tinymce

    错误可能源于多种原因,如服务器配置问题、权限设置不正确、路径引用错误或者与特定浏览器的兼容性问题等。 修复这个问题可能需要以下步骤: 1. **检查服务器配置**:确保服务器允许文件上传,并且tinymce的file...

    tinymce粘贴word插件powerpaste

    随着 Tinymce 更新到第五个大版本,Powerpaste 也升级到了 4.0.1-317 版本,以适应新的框架和功能。这个版本进一步优化了格式转换的准确性和效率,同时增加了对更多 Word 特性的支持。例如,更好地处理表格、图片和...

    tinymce-中文包

    tinymce-中文包

    Java开发之文本编辑器TinyMCE-含上传本地图片

    默认情况下,TinyMCE不支持直接上传本地图片到服务器的功能。为了解决这个问题,需要进行额外的配置和编程工作。 ##### 3.1 集成uploadimage插件 - 在`./tinymce/js/tinymce/plugins`目录下新建一个名为`...

    tinymce-highcharts-editor

    【tinymce-highcharts-editor】是一个将流行的富文本编辑器TinyMCE与强大的数据可视化库Highcharts相结合的项目。这个项目的主要目标是使用户能够在TinyMCE编辑器内部创建和编辑Highcharts图表,从而提供一种直观且...

    tinymce4.7.5

    7. **Vue.js 集成**:通过Vue.js插件,可以轻松地在Vue组件中引入TinyMCE,实现数据双向绑定,使得文本编辑的数据实时同步到应用状态。 8. **可定制的主题**:TinyMCE 允许用户自定义编辑器的外观,以匹配网站或...

Global site tag (gtag.js) - Google Analytics