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

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();
});

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2015-03-02

php实现图片上传并进行替换操作

首先建立两个文件: change.html 和 change.php change.html 文件的表单代码如下: <html> <head> <title>change file example.</title> <meta charset="UTF-8"> </head> <body> <form method="post" action="changefile.

ajaxForm和ajaxSubmit 粘贴就可用示例代码

复制代码 代码如下: <!-- To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/ht

jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 本文演示的是:jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm 和 ajaxSubmit 都支持大量的可选参数,它们通过可选参数项对象传入.可选参数项对象只是一个简单的 JavaScript对象,里边包含了一些属性和一些值:

两种php实现图片上传的方法

图片上传在项目中经常用到,几乎没有任何一个项目可以脱离图片或者是文件上传.本篇我在这向大家介绍两种常规的上传方式.(注:在这里我们仅仅是对功能的实现,不去做过多的前端的样式) 一.利用form表单上传 此种方式是最原始的上传方式,前端就是简单的form表单,后端我们有PHP处理传输过来的文件. 首先看前端的代码 upload.html <form action="handle.php" name="form" method="post" e

springMVC结合AjaxForm上传文件

最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 在spring-servlet.xml进行multipartResolver配置: <bean id="multipartResolver" class="org.springf

PHP AjaxForm提交图片上传并显示图片源码

本文实例为大家分享了PHP AjaxForm提交图片上传并显示图片的具体代码,供大家参考,具体内容如下 PHP dofile.php 文件上传源码 <?php $file_upload = "upload/"; $file_allow_ext='gif|jpg|jpeg|png|gif|zip|rar|ppt|xls|pdf|pptx|xlsx|docx'; $file_allow_size = 5*1024*1024; if($_POST['submit']=="上传

jQuery ajaxForm()的应用

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程.本文就是介绍了ajaxForm()的应用. 一.ajaxForm() 介绍 ajaxForm预处理将要使用 AJAX  方式提交的表单,将所有需要用到的事件监听器添加到其中.它不是提交这个表单. 在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作. ajaxForm 需要零个或一

php+html5实现无刷新图片上传教程

本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理.实现过程如下(带图片预览功能) 前端html代码 upload,html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu

浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

• 依赖的脚本文件 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../Javascript/jquery.form.js" type="text/javascript"></script> • ajaxSubmit 和ajaxForm区

php实现图片上传、剪切功能

本文实例为大家详细介绍了php实现图片上传.剪切功能的具体代码,供大家参考,具体内容如下 <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Index extends MY_Controller { function __construct(){ parent::__construct(); $this->load->helper(array('form', 'url')); } /**

Kindeditor编辑器添加图片上传水印功能(php代码)

KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框.可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用. 主要特点: 快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能 风格:修改编辑器

Yii结合CKEditor实现图片上传功能

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它.虽然有跟CKEditor配合良好的CKFinder,不过这个东东的功能太复杂,简单看了下CKEdtior的文档,发现这个功能还是可以自己实现而不用借助CKFinder的. 下面代码虽然基于Yii Framework的,但是用其他框架或者语言思路却是完全一样的,有需要的童鞋可以参考一下. 首先要让CkEditor出现图片上传的功能,需要配置编辑器的filebrowserImageUplo

thinkphp实现图片上传功能

关于图片上传,实现方法很多,比如可以用jQuery,当然,我们的thinkPHP内置了关于图片上传的功能,我们可以直接使用,使用方法如下: 首先,是表单书写,我们建立如下表单: <form action="__URL__/addChk" method="post" enctype="multipart/form-data"> <table cellspacing="1" cellpadding="2

ASP.NET图片上传实例(附源码)

由于需要图片上传的功能,所以花了一些时间网上找相关资料终于搞定,效果图如下: 下面的是解决方案截图和上传的图片截图: 下面是代码: 1.界面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadPic.aspx.cs" Inherits="Pic_Try.UploadPic" %> <!DOCTYPE html PUBLIC &q

c#图片上传和显示的实现方法

由于需要图片上传的功能,所以花了一些时间网上找相关资料终于搞定,效果图如下: 下面的是解决方案截图和上传的图片截图: 具体实现代码如下: 1.界面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadPic.aspx.cs" Inherits="Pic_Try.UploadPic" %> <!DOCTYPE html PUBLIC

php基于CodeIgniter实现图片上传、剪切功能

本文实例为大家分享了codeigniter 图片上传.剪切,控制器类,供大家参考,具体内容如下 <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Index extends MY_Controller { function __construct(){ parent::__construct(); $this->load->helper(array('form', 'url')); }

CKEditor与dotnetcore实现图片上传功能

本文实例为大家分享了CKEditor与dotnetcore实现图片上传的具体代码,供大家参考,具体内容如下 CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script> 2.定义一个textarea标签 <textarea id="editor"> </textarea> 3.用Ck

Vue.js 2.0 移动端拍照压缩图片上传预览功能

在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

移动端利用H5实现压缩图片上传功能

此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法. 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的 实现.根据查看caniuse,本demo里使用到的FileRea