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
Additionally you will need to update the config.js file for the ckeditor and add the following lines
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
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
Thanks, turned out to be the only working solution on the web, phew! :)
ReplyDeleteHi i'm facing your same problem, no save button on inline ckeditor.
ReplyDeleteI 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
I've made a ajax save button pliugin for ckeditor 4.
ReplyDeletehttp://stackoverflow.com/questions/18956257/how-to-add-an-ajax-save-button-with-loading-gif-to-ckeditor-4-2-1-sample-plugi
btw, it is working for inline-editing and it also displays an ajax loader gif during the post request.
Delete