CODEWITHSUNDEEP
javascriptjqueryajaxckeditor
Gaurav_0093
Gaurav_0093

Reputation: 1030

How to Implement ajax call on save button plugin in ckeditor

How to get ajax call to save data of ckeditor on save button plugin.

Here I attached image.

enter image description here

Upvotes: 2

Views: 772

Answers (1)

surendra Kandira
surendra Kandira

Reputation: 607

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';

Upvotes: 1

Related Questions