这篇文章主要介绍了tinymce提交ajaxform获取不到数据的解决方法,实例分析了对应的源码部分与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下9 V- X4 W/ N! e/ y3 o7 d2 H% h
本文实例分析了tinymce提交ajaxform获取不到数据的解决方法。分享给大家供大家参考。具体分析如下:
: j9 P0 ]4 }3 ^8 h J$ I) Q( q) s在没有使用ajaxform前,我做的一个小小的评论提交的web form,评论内容使用了tinymce做文本编辑。为了增加一点点的用户体验,就顺手拿ajaxform来实现ajax提交。可是发现出现了一个意外的事情。就是每次提交,第一次提交时,ajaxform会无法获得当前编辑的评论内容,即textarea里面的内容,要再点击一次提交,才能将textarea的内容提交上去。
2 K$ v* K7 ?$ I' V" e关键是tinymce上的内容没有在提交前更新到textarea中。于是想看看ajaxform是否有在提交前的事件绑定,发现在beforesubmit事件中,formdata的内容已经被填充,虽然可以在此处自行将当前的tinymce的内容填充上去,可是总觉得是不太漂亮的解决方案。
% ?" [2 J& d% g6 F+ ?, ~# H9 V为了找是否有其它途径解决此问题,我查看了一下ajaxform的源代码,发现原来ajaxform作者已经为这问题提出了统一的解决方案,具体源代码如下:' D; B) G; _8 u
1. js代码如下:! Q8 w) R/ {6 N! P
代码如下:4 _; u7 s1 Q; e/ h! u& Z- L. S8 |( ~7 Z
// hook for manipulating the form data before it is extracted;, u, P3 u( h" g* H+ Q7 O
// convenient for use with rich editors like tinymce or fckeditor
+ Y! w7 ^" S; G# K5 U% Nvar veto = {};3 ^1 ~0 N- [! X5 u
this.trigger('form-pre-serialize', [this, options, veto]);! N/ g: `1 D2 j. J. w# _
if (veto.veto) {6 W) R) a; R% E" x
log('ajaxsubmit: submit vetoed via form-pre-serialize trigger');
, F& `& e( h. B3 I9 T! jreturn this;
. S( |) H) {+ M1 D4 P8 M0 u. r1 M}
: ?: z9 D; e/ ^: g& b" p- G" c2. 对应fckeditor类似:0 k' Z# `' j7 c- I) Y: j2 s* w3 q
代码如下:1 e; c4 ]3 d o8 s
// bind form using 'ajaxform' & z4 _# f7 w1 n0 W" p' `7 G$ R
$('#commentform').ajaxform(options);. M- v! O; H8 m, D; x% L
// 绑定form-pre-serialize事件,在触发form-serilaize事件前保存tinymce的数据到textarea中$ C. j# W/ i! b4 @% K+ h/ ?
$('#commentform').bind('form-pre-serialize', function(event, form, options, veto) {- M4 Z3 S; \- J- {9 x+ h* }% D5 b' Q
tinymce.triggersave();$ q) |: h2 V) c
});; o a# D+ I) b, I0 z9 r) A
希望本文所述对大家的javascript程序设计有所帮助。! u7 Y5 o; G! \4 d& {% [0 c
! D7 n4 F! A2 _$ V7 g# @更多网页制作信息请查看: 网页制作 |
|