Blog Archive

Wednesday 10 April 2013

Save button for ckeditor using ajax

The task was to use inline ckeditor in order to edit div contents and save by sending ajax request to the server.
I have stuck to a problem that ckeditor save button did not appear on the toolbar. So here is a solution for that. The most important part is highlighted with bold.
Just replace the "save" plugin contents. You can find it in ckeditor/plugins/save/plugin.js


(function() {
 var saveCmd = { modes:{wysiwyg:1,source:1 },
  readOnly: 1,

  exec: function( editor ) {
            var data = editor.getData();
            jQuery.post(editor.config.saveSubmitURL,
                        {text: data},
                        function(response){
                           alert('Data sent to server!!!');
                        });
  }
 };

 var pluginName = 'save';

 // Register a plugin named "save".
 CKEDITOR.plugins.add( pluginName, {
  lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en-au,en-ca,en-gb,en,eo,es,et,eu,fa,fi,fo,fr-ca,fr,gl,gu,he,hi,hr,hu,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt-br,pt,ro,ru,sk,sl,sr-latn,sr,sv,th,tr,ug,uk,vi,zh-cn,zh', // %REMOVE_LINE_CORE%
  icons: 'save', // %REMOVE_LINE_CORE%
  init: function( editor ) {
   var command = editor.addCommand( pluginName, saveCmd );
   //command.modes = { wysiwyg: !!( editor.element.$.form ) };

   editor.ui.addButton( 'Save', {
    label: editor.lang.save.toolbar,
    command: pluginName,
    toolbar: 'clipboard,50'
   });
  }
 });
})();

Additionally you will need to update the config.js file for the ckeditor and add the following lines

config.saveSubmitURL = 'URL_TO_YOUR_SERVER_SCRIPT.php';

And you are done.

The problem was that "save" plugin was only working in the "replace" mode. When ckeditor replaces textareas on the page with the editor. But is was not working in the inline mode. When you use ckeditor in order to edit contents of the div tags.

UPD: There is working solution on stackoverflow posted by user kasper Taeymans