CKEditor, AJAX Save

Question

Can you provide an example on how to setup CKEditor to save via AJAX using the Save button in the CKEditor toolbar?

I\'m interested in creating a CKEditor AJAX save

Answer 1

More one solution variation, using AJAX from jQuery. 1) declare the function CKEDITOR.ajaxSAVE; 2) call it for save updated HTML of the textarea.

 CKEDITOR.ajaxSAVE = function ( editor ) {
    editor.updateElement();
    var htm = editor.getData();
    var otherParameter = '...';
    if (htm) $.ajax({
        type: "POST",
        url: "saveHtmFromCKEditor.php",
        data: { content: htm, other: otherParameter }
      }).done(function( msg ) { // string or JSON object
        if (!parseInt(msg)>0) alert( "ERROR WHEN SAVING: " + msg );
      });
    else 
      alert('EMPTY HTM. NOT SAVED');
 };

Then, for call, at any time, use

 var oEditor = parent.main.CKEDITOR.instances['YourTextAreaID'];
 CKEDITOR.ajaxSAVE(oEditor);  

Answer 2

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.

Answer 3

Lots of answers already but I think my solution is way easier and cleaner than everything here so far. This will simply override the existing save button's functionality with javascript that you specify with ckeditor 4:

html:

<textarea id="CKEditor1"></textarea>

javascript:

<script>
    // Need to wait for the ckeditor instance to finish initialization
    // because CKEDITOR.instances.editor.commands is an empty object
    // if you try to use it immediately after CKEDITOR.replace('editor');
    CKEDITOR.on('instanceReady', function (ev) {

        // Create a new command with the desired exec function
        var overridecmd = new CKEDITOR.command(editor, {
            exec: function(editor){
                // Replace this with your desired save button code
                alert(editor.document.getBody().getHtml());
            }
        });

        // Replace the old save's exec function with the new one
        ev.editor.commands.save.exec = overridecmd.exec;
    });

    CKEDITOR.replace('CKEditor1');

</script>

Answer 4

Additional Note: If you don't want to create your own Icon, change

{ 
            label : editor.lang.save, 
        command : pluginName, 
        icon: "/img/save.png" 
     });

to

{ 
            label : editor.lang.save, 
            command : pluginName, 
            className: 'cke_button_save'
         });

Answer 5

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

Answer 6

If you have no html-form around the element you may notice that initially the button is disabled, this behave is unfortunately hardcoded. To enable it you must change the state of the button.

This is my code:

<script>
    function editor(domElement, callback){
        var editor = CKEDITOR.replace(domElement);
        // save-command currently unavailable because we have no form.
        editor.on('instanceReady',function(){
            // find the save-command
            var command = editor.getCommand('save');
            // set the initail state to enabled/unpressed
            command.setState(CKEDITOR.TRISTATE_OFF);
            // overwrite the exec-command
            command.exec = function (){
                var newHtml = editor.getData();
                callback(newHtml);
                editor.destroy();
            }
        });
    }
</script>