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

4 comments:

  1. Thanks, turned out to be the only working solution on the web, phew! :)

    ReplyDelete
  2. Hi i'm facing your same problem, no save button on inline ckeditor.
    I tried to follow your solution but even if i create a customized ckeditor including all plugins, i do not have this plugin/file
    ckeditor/plugins/save/plugin.js

    Have you an idea?
    Thanks

    Vikvarg

    ReplyDelete
  3. I've made a ajax save button pliugin for ckeditor 4.
    http://stackoverflow.com/questions/18956257/how-to-add-an-ajax-save-button-with-loading-gif-to-ckeditor-4-2-1-sample-plugi

    ReplyDelete
    Replies
    1. btw, it is working for inline-editing and it also displays an ajax loader gif during the post request.

      Delete