Need custom save event. Plugin documentation?

I need to CK to fire an attached event when I click on the save button. i.e. NOT submit the form, just call my own custom function for ajax saving.

Any ideas about how I could achieve this?

Wed, 10/07/2009 - 21:43

keilaron

Joined: 11/03/2005

Posts: 38

Re: Need custom save event. Plugin documentation?

Here's the CKEditor API documentation; As far as I know, there's no plug-in documentation yet (but there is a guide if you search this forum).

As for getting the data... if you have a CKEditor replacing a textarea in a form and already have a form harvesting function (e.g. using getElementsByTagName and getting the values of inputs, textareas and selects) you can use updateElement():

CKEDITOR.instances[__INSTANCE_NAME__].updateElement();

otherwise you can directly grab the data using getData():

CKEDITOR.instances[__INSTANCE_NAME__].getData();

Thu, 10/08/2009 - 10:59

fruitbatinshades

Joined: 25/06/2008

Posts: 40

Re: Need custom save event. Plugin documentation?

Found this great introductory guide http://syrinx.ph/articles/CkEditorPluginGuide.aspx but am still not sure how to create events. Just to clarify.
I'm creating CKEditor dynamically by replacing divs. I need to be able to notify the hosting page that some event has occurred. Ideally I'd like to pass it in on creation. I've tried using config to pass in the callback but thats global and I may have multiple instances.

ideally i'd like CKEDITOR.replace(div, callbackOnSave);

Can anyone help me understand the events system?

plugin.js

(function() {
   var a = {
      modes: { wysiwyg: 1, source: 1 },
      exec: function(editor) {
         //editor.setData('You clicked save');
         CKEDITOR.config.AjaxSave_Callback(editor);
      }
   }, b = 'AjaxSave';
   CKEDITOR.plugins.add(b,
   { init: function(c) {
      var d = c.addCommand(b, a);
      d.modes = {
         wysiwyg: true
      };
      c.ui.addButton('AjaxSave', { label: c.lang.save, command: b, icon: this.path + 'images/pencil.png' });
   }
   });
})();

CKEDITOR.config.AjaxSave_Callback = null;

Thu, 10/08/2009 - 11:14

fruitbatinshades

Joined: 25/06/2008

Posts: 40

Re: Need custom save event. Plugin documentation?

this works, but still interested in how to do this properly

function replaceDiv(div) {
   if (editor)
      editor.destroy();
   editor = CKEDITOR.replace(div);
   editor.saveCallback = function(instance) {
      alert(instance.getData());
   }
}

Sun, 10/11/2009 - 11:48

garry.yao

Joined: 03/01/2009

Posts: 170

Re: Need custom save event. Plugin documentation?

Hi, sorry for lacking of documentation at this moment, I hope the following codes could help:

// Listener...
editorInstance.on( 'customSave', function( evt )
{
   AjaxSave_Callback( evt.data );
} );

// Your command...
editorInstance.addCommand( 'customSave',
 {
     exec : function( editor )
     {
         editor.fire( 'customSave', editor.getData() );
     }
    //...
 } );

Tue, 10/20/2009 - 23:15

schulichit

Joined: 19/10/2009

Posts: 3

Re: Need custom save event. Plugin documentation?

I created my own "mysave" plugin and replaced "save" with it in my custom toolbar

CKEDITOR.plugins.add('mysave',{
    init:function(a){
        var cmd = a.addCommand('mysave',{exec:CKsaveAjax})
        a.ui.addButton('MySave',{
            label:'Save',
            command:'mysave',
            icon:this.path+"images/save.png"
        })
    }
})
function CKsaveAjax(e){
    var theForm = e.element.$.form;
    if (typeof(theForm.onsubmit) == 'function'){
        theForm.onsubmit();
        return false;
    }
    else{
        theForm.submit();
    }
}

>>>this code is actually from the fckeditor "fck_othercommands.js" (commandclasses)

config.extraPlugins = "mysave"