CKEditor, AJAX Save

Question

Can you give an example of configuring CKEditor to save via AJAX using the "Save" button on the CKEditor toolbar?

I am interested in creating a CKEditor AJAX save page, but I do not see any examples on their site.

Thanks!

Answer 1

Try copying directly from _source / plugins / save / plugin.js and modify if necessary. 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 create a file "plugin.js" in this directory. Then in this file do something like this (adapted from the usual "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 configuration where you define your toolbar, change “AjaxSave” to “Save”.

EDIT: you should also add config.extraPlugins = "ajaxsave"; into the configuration.

Answer 2

You can use the beforeCommandExec event and cancel () :

 <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 does not work in versions CKEditor 4.0 , 4.1 , 4.2 , however it works again from version 4.3 .

Since CKEditor version 4.2 , you can use the save event with cancel () :

 CKEDITOR.instances[id].on('save', function (event) { event.cancel(); $(form).submit(); }); 

Answer 3

This is the method I use, no plugins required:

It is simple and reliable and uses the built-in save button of CKEditors.

Add the invisible submit button (display: none) to the same form as CKEditor, and set the identifier and name for the submission for it, while the onclick input and the onsubmit form will be executed when the CKEditor standard Save button is clicked. you can hook inline event handlers either using jquery.bind () or any other way. Then add a function attached to the onsubmit event of the form to serialize the form, and ajax will output it to the url set in the "action" attribute. Just return "False" from the event handler so that the form does not publish. Now any code or button (including the ckeditor save button) that submits the form will start your handler. No CKeditor plugins or CKeditor configurations are required. Here's a simplified example (assuming jQuery).

 <form id="myform" name="myform" action="" method="post" onsubmit="alert('form.onsubmit()');return false;"> <input type="submit" id="submit" name="submit" style="display:none" onclick="SaveText(this);"/> <textarea id="ckeditor1"></textarea> </form> <script> function SaveText (eventargs){ var form = $(eventargs).closest("form"); var data = form.serialize(); var url = form.attr('action'); $.post(url, data); return false; } </script> 

A more realistic approach might be using JQuery.Bind (), and the script in the external JS file, etc., but the end result is the same. It works because the input hides the form submission function, so any call to form.submit () calls the onclick () submission function instead (std behavior for all browsers). Because the submit button fires the onsubmit event of the form, which usually doesn't happen if you call form.submit () directly. so you get a reliable loosely coupled capture event capture without plugins or using the CKEditor API. you can use it for more than ajax save too, its nice for any preprocessing you have to do.

Answer 4

I posted the simplest ajax save plugin here Ajax save plugin for CKEDITOR 3.x with jquery 1.4.x

Answer 5

A lot of answers already, but I think my solution is much simpler and cleaner than everything here. This will simply override the existing save button functionality with javascript, which 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 exec function with the new one ev.editor.commands.save.exec = overridecmd.exec; }); CKEDITOR.replace('CKEditor1'); </script> 

Answer 6

Additional note. If you do not 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 7

I tried the Korikulum method on CKEditor 4, but it writes the form twice, so I came up with this:

 $(function () { setTimeout(function () { CKEDITOR.instances.MyEditor.on('beforeCommandExec', function (event) { if (event.data.name === 'save') { event.cancel();//this does not seem to prevent the form post $(MyEditor).val(CKEDITOR.instances.MyEditor.getData());//copy data from the editor to the textarea $.ajax({ type: $(editorForm).attr('method'), url: $(editorForm).attr('action'), data: $(editorForm).serialize(), success: function (data) { alert(data.message); } }); } }); }, 100);//CKEditor is heavy and needs time to initialize editorForm.submit = function (e) {//this is needed to prevent the 2nd post return false; }; }); 

MyEditor is a text area identifier with ckeditor class

editorForm is the identifier of the form that wraps the text area

CKEditor overrides the form.submit () function when it is initialized inside the form and event.cancel () does not seem to prevent the form from being submitted. So I had to redefine the function with a function that returns false.

EDIT: I forgot to copy the recently edited data into a text box so that it can be sent along with the rest of the form.

Answer 8

More than one solution using AJAX from jQuery. 1) declare the function CKEDITOR.ajaxSAVE; 2) call it to save the updated HTML file in a text field.

  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 to call at any time, use

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

Answer 9

  <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea> <button id="save" onclick="save()"></button> <script type="text/javascript"> function save() { var question = CKEDITOR.instances.editor1.getData(); alert(question); $.ajax({ type: 'POST', data: {file: question}, url: "aiq_save.php?xyz="+question+"", success: function (html) { alert('may be saved'); $("#show").html(html); } }); return false; </script> <div id="show"></div> 

Create a new aiq_save.php page, then:

 <?php ECHO $_GET['xyz']; ECHO $_POST['file'];//post method ?> 

And you did it.

Answer 10

If you don’t have an html form around the element, you may notice that the button is initially disabled , unfortunately, this leads to hard coding. 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>