CKEditor, AJAX Save

You can use the beforeCommandExec event & cancel() method:

<script type="text/javascript">$(document).ready(function () {    $('.ckeditoriz').ckeditor(/* config */);    $('.ckeditoriz').each(function () {        var id = $(this).attr('id'),            form = this.form;        CKEDITOR.instances[id].on('beforeCommandExec', function (event) {            if (event.data.name === 'save') {                event.cancel();                $(form).submit();            }        });    });    $('.ajaxForm').submit(function (event) {        event.preventDefault();        var $this = $(this);        $.ajax({            type: $this.attr('method'),            url: $this.attr('action'),            data: $this.serialize()        });    });});</script><form action="url" method="post" class="ajaxForm">  <!-- Your textarea must have an ID! -->  <textarea id="textarea1" name="textarea1" class="ckeditoriz"></textarea></form>

Update:

This doesn't work in CKEditor versions 4.0, 4.1, 4.2, however it works again since version 4.3.

Since CKEditor version 4.2 you can use the save event with the cancel() method:

CKEDITOR.instances[id].on('save', function (event) {    event.cancel();    $(form).submit();});

Try copying straight from _source/plugins/save/plugin.js and changing as needed. Create your new plugin in /path/to/ckeditor/plugins (i.e. Not in /path/to/ckeditor/_source/plugins). For example, in /path/to/ckeditor/plugins create a new directory "AjaxSave", then in that directory create a file "plugin.js". Then in that file do something like this (adapted from the normal "save" plugin in the source folder):

(function(){  var saveCmd =  {    modes : { wysiwyg:1, source:1 },    exec : function( editor )    {      var $form = editor.element.$.form;      if ( $form )      {          try          {            editor.updateElement();//Here is where you put your ajax submit function. For example... if you are using// jQuery and the ajaxform plugin, do something like this:            $($form).ajaxSubmit({               success: function(response){                 //do something with the response               }            });          } catch ( e ) {            //alert(e);          }      }    }  }  var pluginName = 'ajaxsave';  CKEDITOR.plugins.add( pluginName,  {     init : function( editor )     {        var command = editor.addCommand( pluginName, saveCmd );        command.modes = { wysiwyg : !!( editor.element.$.form ) };        editor.ui.addButton( 'AjaxSave',         {            label : editor.lang.save,            command : pluginName,            icon: "/img/save.png"         });     }   });})();

Then in the config, where you define your toolbar, change 'AjaxSave' for 'Save'.

EDIT: you must also add config.extraPlugins = "ajaxsave";to the config.

This is the method I use, no plugins required:

It's simple and reliable and uses the CKEditors built in save button.

Add a non-visible submit button (display:none) to the same form where the CKEditor is and set it's ID and Name to "submit" then both the input's onclick and the forms onsubmit will both be executed when the CKEditor's standard save button is clicked. you can hook up your event handlers inline or with jquery.bind() or any other way. Then add a function attached to the forms onsubmit event to serialize the form and ajax post it to the url set in the form 'action' attribute. Just return 'False' from the event handler to ensure the form does not post. Now any code or button (including the ckeditor save button) that submits the form will run your handler instead. No CKeditor plugins or CKeditor configuration required.Here's a simplified example (assumes JQuery ).

<form id="myform" name="myform" action="" method="post" onsubmit="alert('form.onsubmit()');return false;"><input type="submit" id="submit" name="submit" style="display:none" onclick="SaveText(this);"/><textarea id="ckeditor1"></textarea></form><script>function SaveText (eventargs){   var form = $(eventargs).closest("form");   var data = form.serialize();   var url = form.attr('action');$.post(url, data);return false;}</script>

A more realistic approach might use JQuery.Bind() and the script would be in an external JS file etc. but the end result is the same. It works because the input hides the form's submit function so any call to form.submit() calls the submit button's onclick() function instead (std behavior for all browsers). Because it's a 'submit' button it causes the form's 'onsubmit' event to fire which would not normally happen if you called form.submit() directly. so you get reliable loosely coupled interception of the save event without plugins or using the CKEditor API. you can use it for more than ajax save too, its nice for any pre-save processing you need to do.