TinyMCE, jQuery and Ajax forms

TinyMCE Init

Replaces textareas with CSS class wysiwyg by TinyMCE editors.

// warning: has to be outside of jQuery's "document ready" block.
 tinyMCE.init({
	mode : "textareas",
	theme : "simple",
	editor_selector : "wysiwyg"
});

TinyMCE Form Submission

When a textarea is replaced by TinyMCE, it's actually hidden and a TinyMCE editor (an iframe) is displayed instead. However, it's that textarea's contents which is sent when the form is submitted. So its contents has to be updated before the form submission. For a standard form submission, TinyMCE does it automatically. For an Ajax form submission, it needs to be done manually, by calling (before the form is submitted):

tinyMCE.triggerSave();

TinyMCE and jQuery Form plugin

If using the jQuery Form plugin, that needs to be done before the form fields are serialized and sent via Ajax:

$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});

Errors

If you get this error with tinyMCE.triggerSave():

t.win.document has no properties

You're are probably adding or removing textareas dynamically without dealing properly with their associated TinyMCE editors. How to do it the right way:

TinyMCE Init

tinyMCE.init({
    mode : "none",
    theme : "simple"
});

Replacing a textarea by a TinyMCE editor

tinyMCE.execCommand('mceAddControl', false, 'textareaId');
// (replace textareaId by the id of your textarea)

Removing a TinyMCE editor

tinyMCE.execCommand('mceRemoveControl', false, 'textareaId');
// (replace textareaId by the id of your textarea)

Reference

Feedback

Even thought this really seems easy, I believe there's stuff missing. I'm trying to make jquery and TinyMCE works together in ajax mode (silent submit and reload), but I really can't get anything working... some help would be appreciated.
romain
May 16, 2008
#1
"tinyMCE.triggerSave();" was all it took. I just wish I read your entry 4 hours earlier :) would have saved the headache.
Mark L.
Jun 12, 2008
#2
ghjghjghj
guga
Aug 26, 2008
#3
Thanks bro! I was totally bamboozled as to why it wasn't working before finding your post.
Paul S
Sep 2, 2008
#4
Thanks, saved me after a few hours of head scratching!
Karl
Sep 26, 2008
#5
This may be a dumb question, but where, in the Drupal code, do you put the "tinyMCE.triggerSave();" line? And would you just place this: "tinyMCE.init({ mode : "textareas", theme : "simple", editor_selector : "wysiwyg" });" in the <head> tag of page.tpl.php? Thanks! PS. Basically I am just not getting what the step my step is to implement this code. Thanks again!
Scott
Oct 22, 2008
#6
Thank you very much. I had a nasty but where TinyMCE and jQuery were fighting which was also disabling or breaking Firebug. The TinyMCE wiki does not clearly address this (that I can see). Changing to running init with mode "none" and then calling mceAddControl solved my problem perfectly.
Jason Smith
Dec 14, 2008
#7
thanks! great tip!
cwd
May 2, 2009
#8
Where does this go ? $('form').bind('form-pre-serialize', function(e) { tinyMCE.triggerSave(); });

Jun 4, 2009
#9
Thanks a lot! What a nightmare!
Jon
Jun 5, 2009
#10
Thanks, you saved my day. I couldn't find anywhere else why jquery was fighting with tinymce!
Andrea
Jun 10, 2009
#11
Doh! If I only had googled for "tinymce jquery ajax form" earlier! Great post, mate!
TomM
Jun 18, 2009
#12
thanks so much - you saved me a ton of time trying to figure that one out!
Dan Pickett
Jun 22, 2009
#13
Thanks!
marss
Jul 28, 2009
#14
Thank you very much... I Love YOU!!!
darcon3371
Aug 24, 2009
#15
Really easy and great solution, saved me what would be hours of work. Thanks for the answer!
Gingah
Aug 25, 2009
#16
You safe my life! Thanks God.
aifarfa
Oct 1, 2009
#17
This is exactly what I needed. Awesome
maxleb
Oct 13, 2009
#18
Brilliant. Thank you
Dave
Oct 24, 2009
#19
You sure saved me a lot of time! Thanks for this very helpful post.
Kathryn
Oct 30, 2009
#20
Thanks!!!! Wish I read your page a few hours earlier ;-)!
Jordy
Nov 11, 2009
#21
Nice post! Thx!
Jan
Jan 13, 2010
#22
LifeSaver. Tks.
Mauricio Wolff
Feb 5, 2010
#23
Great!!! thanks
RoloTomasi
Feb 10, 2010
#24
hi, i got two textareas in my form and i would like to keep the second one as a simple textarea. how can i target a specific textarea to be replaced by tinyMCE ?
thanks anyway
imed
Feb 11, 2010
#25
ok, i think i got the solution :
init tinyMCE with : mode : "none",
then add tinyMCE control to the specific textarea by passing its ID : tinyMCE.execCommand('mceAddControl', false, 'idTargetedTextarea');
imed
Feb 11, 2010
#26
it was just in front of me (shame!!)
thx
imed
Feb 11, 2010
#27
THX!

Mar 1, 2010
#28
Obrigado !!!
Ou melhor ...Thanks !!! ;)
Daniel Medeiros
Mar 3, 2010
#29
w

Mar 18, 2010
#30
I don't get this solution to work. :(

Please can you post an example...?
Shaaa
May 7, 2010
#31
Fantastic. Thank you - much appreciated.
Damian
Jun 11, 2010
#32
Thanks.
Nice post :)
quangpd
Jul 3, 2010
#33
Cool. The elegant solution he was seeking. Thanks!
EDB
Jul 15, 2010
#34
good job, thanks!
marcus
Jul 25, 2010
#35
You saved my day, thanks.
: )
Aug 2, 2010
#36
Thank you soooo much. Just solved my half-day problem.
Aquarius
Aug 29, 2010
#37
I actually wasn't able to use your post in anyway. However I just love your comments area. Especially the use of only two fields to get all the important information (text & user).

Do you support HTML in here? What about code blocks?

tinyMCE.triggerSave();

David
Sep 3, 2010
#38
Thank you David. No HTML, only code blocks :)
Jérôme Jaglale
Sep 3, 2010
#39
Very useful but a demo is really needed, the snippet could go anywhere, bit of a guess work solution
Pete
Oct 12, 2010
#40
Thanks
tinyMCE.triggerSave(); was the solution for me.

As far as I understand: it brings the content from the tinyMCE editor to the HTML textarea element, so we can finally get the content with jquery

either
$("#textarea_name").html();


or
$("#textarea_name").serializeArray() as data to send with an ajax call
Flo.
Oct 22, 2010
#41
???????????????????????????????
??????????
Nov 10, 2010
#42
Thank you so much. This is really helpful.
Visitor
Jan 14, 2011
#43
thanks alot
Muhammad Zubair
Feb 2, 2011
#44
triggerSave saved my da..erhm, night :) Thx!
shcodenick
Feb 19, 2011
#45
tinyMCE.triggerSave(); thanks you
dungninhbinh
Mar 23, 2011
#46
Thanks for the article man ... saved me from serious headache...
Robert B.
Mar 31, 2011
#47
hi
dev narayan
Apr 28, 2011
#48
Important: If you call tinymce() twice or more times on the same textarea, save() will be not working probably.
So, I fixed this by removing class:
$('textarea.tinymce').each(function(){
$(this).removeClass('tinymce');
.......
olamedia
May 7, 2011
#49
I'm using ASP.NET AJAX (using an UpdatePanel). Turns out, I didn't need the form plugin and the triggerSave method.

However, your post gave me a big clue: putting the TinyMCE initialisation code OUTSIDE the jQuery document ready block sorted it for me.
Richard Fawcett
May 19, 2011
#50
i have jsp page in which the contents are calling from another jsp using ajax.In the second jsp file threre is textarea is there.i have used the tiny mce script for the text area.but on ajax call it is not loaded in the first jsp file...please help me..i am in troubel
rahul
Jun 29, 2011
#51
Thanks !! It helped me with work on my project :)
Tomas Drozda
Jul 14, 2011
#52
Thanks a lot! I just needed to add tinyMCE.triggerSave();
Mike Maisuradze
Jul 29, 2011
#53
Nice! Just what I needed!
<a href="GechoDesigns.com">GechoDesigns</a>
Dominic
Aug 2, 2011
#54
very helpful
Amir
Aug 4, 2011
#55
excelente!! gracias
jose damian
Aug 12, 2011
#56
Habe alles brauchen können! Danke!
UK
Aug 16, 2011
#57
Great thanks, saved me some head-scratching!
ND
Aug 23, 2011
#58
So it's very helpful trick! Thnx!
sierjKhaletski
Aug 31, 2011
#59
That was great, thank you so much!
Tulio
Sep 5, 2011
#60
So it sound like trick

Sep 29, 2011
#61
Million thanks!!!
Panos
Oct 8, 2011
#62
for everyones reference, I was also able to add a triggerSave to the submit handler using a tinymce jquery call like this (where i have a form with an id of "content_form" and a tinymce textarea with an id of "content":

$(document).ready(function(){
$('#content').tinymce({
....stuff in here...
});
$('#content_form').submit(function(){
tinymce.triggerSave();
});
});

.. and as an alternative, this also worked...

$(document).ready(function(){
$('#content').tinymce({
....stuff in here...
});
$('#content_form').submit(function(){
$('#content').val(tinymce.get('content').getContent());
});
});

Hope that can help someone too
Jordan
Nov 3, 2011
#63
This was very helpful! the triggerSave() was all I needed, thank your VERY much for sharing this information!

Regards,

Erik
Erik
Nov 19, 2011
#64
So many hours spent looking at ways round this issue!

Thanks!
Jon Schreyers, Brians mate!
Feb 15, 2012
#65
ramdan said
THANKS....
:)....
ramdhan
Feb 26, 2012
#66
Thanks, man! You just saved my work today!
Mario Arroyo
Mar 1, 2012
#67
This is a great tip.
tinyMCE.triggerSave(); was the solution for me.
Thank you very much
Amr Mekkawy
Mar 29, 2012
#68
Thanks!)
Alex , Ukraine.

Apr 13, 2012
#69
Thank you very much for sharing the information.
tinyMCE.triggerSave(); is the magic key ;)

Greetings from HUNGARY


Oct 18, 2012
#70
Thanks for the post ;)
Sherwin, South Africa
Nov 2, 2012
#71
Thanks :)

This helped.

Appreciate it
Jeremy
Nov 23, 2012
#72
Thanks. Seems like this would be part of the documentation by now.

You are awesome!
David
Nov 26, 2012
#73
where should this go?
$('form').bind('form-pre-serialize', function (e) {
tinyMCE.triggerSave();
});

Because even after placing tinyMCE.triggerSave() my code is not taking updated values. my code is below.

I have also tried placing tinyMCE.triggerSave() before form serialize.

$(".submit").live("click", function () {
var f = $(this).parents("form");
var action = f.attr("action");
var serializedForm = f.serialize();
tinyMCE.triggerSave();
$.ajax({
type: 'POST',
url: action,
data: serializedForm,
async: false,
success: function (data, textStatus, request) {
$(".divform").html(data);

},
error: function (req, status, error) {
alert&#40;"Error occurred!"&#41;;
}
});
return false;
});


any help would be appreciated
Sanjay Panchal
Jan 17, 2013
#74
This:
tinyMCE.triggerSave();
solved my problem thenkyou very very much!
Maksym
Apr 4, 2013
#75
Thanks a lot buddy.. thank you very much.
anoop
May 2, 2013
#76
tinyMCE.triggerSave() did it for me :)

Thanks
meta3
Aug 3, 2013
#77
I was dying to get a fix to the problem of empty textarea in case of jquery form submission. Thanks a lot. It helped me a lot.
Isfar Ahmad Sifat
Sep 16, 2013
#78
Thanks a lot. It helped me a lot.
kalayana-tantri
Oct 19, 2013
#79
Men, really, you save my life with this! God Bless You very much
Matheus Lopes Santos
Aug 6, 2014
#80
thanks for the solution ;)
Zoublazoub
Jul 17, 2015
#81
Lordy! Took me halfway down third google page to find this solution that worked immediately. THanks!!!!!!
Michael Fouquette
Apr 21, 2016
#82