Forums/Enterprise TinyMCE/Enterprise TinyMCE Knowledge Base

Save using AJAX

Brett Henderson
posted this on May 18, 2011 11:13 PM

In TinyMCE there is a "save" button you can put on the toolbar that when you click, submits page. But what if you want to perform a save using AJAX methods instead.

The save plugin and toolbar button call form.submit by default. If you want to save using AJAX, you need to override this by specifying the JavaScript function to call instead. You achieve this by setting the save_onsavecallback configuration parameter. For example

save_onsavecallback : "ajaxSave"

An example of an AJAX save method is

function ajaxSave() {

   var ed = tinyMCE.get('articleContent');

   tinymce.util.XHR.send({
         url : "url_to_the_save_page_goes_here",
         content_type : "application/x-www-form-urlencoded",
         type : "POST",
         data : "content=" + escape(ed.getContent()),
         success : function(text) {

           // Do anything you need to do if save successful
           ed.setProgressState(false); // cancel showing progress    
         },       
        error : function( type, req, o ){     
              alert("Save Failed\n Error: " + type + "\n HTTP Status: " + req.status);        
        }
   });

   ed.setProgressState(true); // Show progress
}

For more information check out the documentation on the save plugin and the API Documentation on tinymce.util.XHR.