How to get "Save" button event? I want to save by ajax..

ahh that is exactly what I want to do too. someone please help! in fact, best if there is some way to port over the ajaxAutoSave plugin from fckeditor to ckeditor or some plugin that is similar to the old ajaxAutoSave for ckeditor.

I'm in search of this solution too.

bhellman1 wrote:I'm in search of this solution too.

Isn't there anybody out there that can help?

Seems like more than one person is looking for an answer to this (me too)...

thanks
Steven

Jasper Liu wrote:Nobody answer?

Can't wait the answers. So I found another way to do this.

I created a new plugin named saveajax. It'll do the job for me.

About how to create custom plugin, please see this:
http://ajithmanmadhan.wordpress.com/200 ... ar-button/

lecter255 wrote:

Jasper Liu wrote:Nobody answer?

Can't wait the answers. So I found another way to do this.

I created a new plugin named saveajax. It'll do the job for me.

About how to create custom plugin, please see this:
http://ajithmanmadhan.wordpress.com/200 ... ar-button/

well, i got the click button part to work, but I am working on an autosave right now and maybe you can help. So i made a command call ajaxAutoSaveCmd and I add that command to the editor when the plugin initializes. How can I set a loop to call ajaxAutoSaveCmd every, say, 30 seconds? I tried using setInterval, but the command I pass in always complains that the function doesn't exist. Why is that? How do I get it to work? Thanks!

yea i think setInterval is the way to go too. currently i have this code reproduced below, that adds the plugin and initializes it. the code is inside plugin.js of my ajaxAutoSave plugin. when I click my plugin icon in the editor, the command fires off and does the right thing. as you can see, there is a setInterval call in there, but it complains that editor is not defined. please help!

CKEDITOR.plugins.add( pluginName,
   {
      init : function( ajaxAutoSave)
      {
         var command = editor.addCommand( ajaxAutoSave, ajaxAutoSaveCmd );
         command.modes = { wysiwyg : !!( editor.element.$.form ) };
         editor.ui.addButton( 'ajaxAutoSave',
            {
               label : 'ajaxAutoSave',
               command : pluginName,
               icon:this.path+'images/ajaxAutoSaveClean.gif'
            });   

         setInterval("editor.execCommand('ajaxAutoSave')",30000);
      }
   });

Jasper Liu wrote:

lecter255 wrote:

well, i got the click button part to work, but I am working on an autosave right now and maybe you can help. So i made a command call ajaxAutoSaveCmd and I add that command to the editor when the plugin initializes. How can I set a loop to call ajaxAutoSaveCmd every, say, 30 seconds? I tried using setInterval, but the command I pass in always complains that the function doesn't exist. Why is that? How do I get it to work? Thanks!

I think setInterval is the way for your solution, but I don't know why the function doesn't exist.

Can you give me some sample files to take a test. Maybe I can find out why.

Hey Jasper, thank you very much. I tried your second way and it works except for one niggle. I am not sure how to grab the correct instance of editor and get the data. my code for the function is in plugin.js the file that's in each plugin. CKEDITOR.instances,TextBody.getData() doesn't work. It complains CKEDITOR.instances is undefined, and looking at the API it is not lol. i am missing something obvious here... is it possible to grab the editor by the id I assigned to the textarea (which i later used CKEDITOR.replace to turn it into a ckeditor). For example, the id for the textarea is CKeditor1. how can I get that instance of CKeditor?

A million thanks!

Jasper Liu wrote:You have 2 ways to solve it:

First:
In the Init, it can't know what editor is...

So you should write like if(doAutoSave) setInterval(doAutoSave,30000); while doAutoSave is a javascript function. And you should refer your editor like CKEDITOR.instances.TextBody.getData();

Second:
Write your setInterval outside the init function. I write javascript with jquery here.

You should write like this:
<script language='javascript'>
setInterval(doAutoSave, 30000);

function doAutoSave()
{
var data = CKEDITOR.instances.TextBody.getData();
$.ajax(.......)
}


</script>

I got it Jasper!! Thank you! To get the instance, it's CKEDITOR.instances.ckeditor1, where ckeditor1 is the textarea id, just like you said! everything is working now.

However, I wish there is a way to change the icon of the button when it's doing the ajax call, and change back when it's done, so users know their draft was saved. is there a way to change the icon path and then change it back for a button? I guess it would also be nice to change the label to reflect the last time their draft was saved.

my plugin code is reproduced below for those who might be interested. ajaxAutoSaveCmd is defined in the same format as the 'save' command. just go to the stock 'save' plugin and look at how they do it. pluginName is defined as

var pluginName = 'ajaxAutoSave';

   CKEDITOR.plugins.add( pluginName,
   {
      init : function( editor )
      {
         var command = editor.addCommand( pluginName, ajaxAutoSaveCmd );
         command.modes = { wysiwyg : !!( editor.element.$.form ) };
         editor.ui.addButton( 'ajaxAutoSave',
            {
               label : 'ajaxAutoSave',
               command : pluginName,
               icon:this.path+'images/ajaxAutoSaveClean.gif'
            });   
      }
   });
   var check_dirty_save_and_reset = function(){
      if(CKEDITOR.instances.FCKeditor1.checkDirty()){
         CKEDITOR.instances.FCKeditor1.execCommand('ajaxAutoSave');
         CKEDITOR.instances.FCKeditor1.resetDirty();
      }
   }
   setInterval(check_dirty_save_and_reset,30000);
})();

Hi guys, nice done! I'm just polishing it here a bit, may it helps:

(function()
{
   var pluginName = 'ajaxAutoSave';

   CKEDITOR.plugins.add( pluginName,
   {
      /**
       * @param editor The editor instance to which the plugin bind.
       */
      init : function( editor )
      {
         var commandDefinition =
         {
            // This command works in both editing modes.
            modes : { wysiwyg:1, source:1 },

            // This command will not auto focus editor before execution.
            editorFocus : false,

            // This command requires no undo snapshot.
            canUndo : false,

            exec : function( editor )
            {
               // Simulate Do ajax post ...
               setTimeout( function()
               {
                  // Simulate on ajax callback successful ...
                  editor.resetDirty();

                  // No more busy state.
                  command.setState( CKEDITOR.TRISTATE_OFF );
               }, 1000 );
            }
         };

         var commandName = pluginName,
            command = editor.addCommand( commandName, commandDefinition );

         editor.ui.addButton( 'AjaxAutoSave',
         {
            label : editor.lang.ajaxAutoSaveButtonLabel,
            command : commandName,
            icon:this.path + 'images/ajaxAutoSaveClean.gif'
         } );


         // Schedule auto ajax save only if content is changed.
         var autoAjaxSave = setInterval( function()
         {
            if( editor.checkDirty() )
            {
               editor.execCommand( commandName );

               // Indicate busy state on this command.
               command.setState( CKEDITOR.TRISTATE_DISABLED );
            }
         }, editor.config.autoAjaxSaveInterval || 30000 );

         // Stop the job after editor is down.
         editor.on( 'destroy', function()
         {
            clearInterval( autoAjaxSave );
         } );
      }
   } );
})();

Hey Garry, thanks for the help. I have a question though. After an autosave call is made, I want to change the label of the button to say something like "Saved At ...." where ... is the time saved. How can I do that through the API? Currently, I get the button element id, which is something like cke_14, but that will change depending on how far right the ajaxAutoSave Plugin is loaded on the editor. So any idea how to change the label in a more robust way?

garry.yao wrote:Hi guys, nice done! I'm just polishing it here a bit, may it helps:

(function()
{
   var pluginName = 'ajaxAutoSave';

   CKEDITOR.plugins.add( pluginName,
   {
      /**
       * @param editor The editor instance to which the plugin bind.
       */
      init : function( editor )
      {
         var commandDefinition =
         {
            // This command works in both editing modes.
            modes : { wysiwyg:1, source:1 },

            // This command will not auto focus editor before execution.
            editorFocus : false,

            // This command requires no undo snapshot.
            canUndo : false,

            exec : function( editor )
            {
               // Simulate Do ajax post ...
               setTimeout( function()
               {
                  // Simulate on ajax callback successful ...
                  editor.resetDirty();

                  // No more busy state.
                  command.setState( CKEDITOR.TRISTATE_OFF );
               }, 1000 );
            }
         };

         var commandName = pluginName,
            command = editor.addCommand( commandName, commandDefinition );

         editor.ui.addButton( 'AjaxAutoSave',
         {
            label : editor.lang.ajaxAutoSaveButtonLabel,
            command : commandName,
            icon:this.path + 'images/ajaxAutoSaveClean.gif'
         } );


         // Schedule auto ajax save only if content is changed.
         var autoAjaxSave = setInterval( function()
         {
            if( editor.checkDirty() )
            {
               editor.execCommand( commandName );

               // Indicate busy state on this command.
               command.setState( CKEDITOR.TRISTATE_DISABLED );
            }
         }, editor.config.autoAjaxSaveInterval || 30000 );

         // Stop the job after editor is down.
         editor.on( 'destroy', function()
         {
            clearInterval( autoAjaxSave );
         } );
      }
   } );
})();

Also, is there a way to change the icon of the button through the API? Because I want the button to change to something then change back to indicate a draft has been saved.

complete noob here...

how does a person install this modification to fresh install of the editor?

what if any supporting addons need to also be added?

thank you very much

this autosave, will surely be a lifesaver

Hey Jasper,
I did an autosave function on my form using,

 var text = CKEDITOR.instances.txt_content.getData();

It worked a treat and all the content is going to the database but now if i hit enter twice it wont save anything after it so i put some text like this:

line one


line two

It will only save the first line with the text 'line one'

have you encountered this. Any help will be great.

Thanks
Nick

Hi,

I'm a newbie in the area and can't put this to work, can i have some help ?

Ishbar wrote:I'm a newbie in the area and can't put this to work, can i have some help ?

http://source.wendt.se/git/?p=wiki.git; ... f4cf62db37



http://wendt.se/wiki/TestPage

(function()
{
   var pluginName = 'AjaxSave';
   // var sNmEditor = '';

   CKEDITOR.plugins.add( pluginName,
   {
      init : function( editor )
      {
         var commandDefinition =
         {
            modes : { wysiwyg:1, source:1 },
            editorFocus : false,
            canUndo : false,
            exec : function( editor )
            {
               setTimeout( function()
               {
                  editor.resetDirty();
                  command.setState( CKEDITOR.TRISTATE_OFF );
               }, 1000 );
            }
         };

         var commandName = pluginName,
            command = editor.addCommand( commandName, commandDefinition );

         editor.ui.addButton( 'AjaxSave',
         {
            label : editor.lang.ajaxAutoSaveButtonLabel,
            command : commandName,
            icon: "plugins/ajaxsave/images/ajaxSaveClean.gif"
         } );


         var autoAjaxSave = setInterval( function()
         {
            if( editor.checkDirty() )
            {
            //blur(sNmEditor)
            sNmEditor = editor.name;
            //focus(sNmEditor)
            content = CKEDITOR.instances[sNmEditor].getData();
            if (content==""){
               content=" ";   
            }
            atualiza(url, content);
                editor.execCommand( commandName );
                command.setState( CKEDITOR.TRISTATE_DISABLED );
            }
         }, editor.config.autoAjaxSaveInterval || 2000 );
         editor.on( 'destroy', function()
         {
            clearInterval( autoAjaxSave );
         } );
      }
   } );
})();

var Caminho = document.getElementById("Caminho").value;
var iNrProcesso = document.getElementById("iNrProcesso").value;
var iNrProcessoVara = document.getElementById("iNrProcessoVara").value;
var iNrProcessoAno = document.getElementById("iNrProcessoAno").value;
var url = "/saveAdapter/saveAdapter.asp";

function atualiza(url,valores)
{
   req = null;
   // Procura por um objeto nativo (Mozilla, Safari, IE7+ ...)
   if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
      req.onreadystatechange = processReqChange;
      req.open("POST",url,true);
      req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      req.send('content=' + encodeURIComponent(valores) + '&Caminho=' + Caminho + '&sNmEditor=' + sNmEditor + '&iNrProcesso=' + iNrProcesso + '&iNrProcessoVara=' + iNrProcessoVara + '&iNrProcessoAno=' + iNrProcessoAno);
   }
   // Procura por uma versao ActiveX (IE)
   else if (window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
      if (req) {
         req.onreadystatechange = processReqChange;
         req.open("POST",url,true);
         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         req.send('content=' + encodeURIComponent(valores) + '&Caminho=' + Caminho + '&sNmEditor=' + sNmEditor + '&iNrProcesso=' + iNrProcesso + '&iNrProcessoVara=' + iNrProcessoVara + '&iNrProcessoAno=' + iNrProcessoAno);
      }
   }
}

function processReqChange(){
   if (req.readyState == 4) {
      if (req.status == 200) {
         document.getElementsByName(sNmEditor).innerHTML = req.responseText;
      }
      else{
         if(req.status == 500){
            alert("Erro interno do servidor !!!<br>" + unescape(req.responseText.replace(/\+/g," ")));
         }
         else{
            alert("Houve um problema ao obter os dados:\n" + req.statusText);
         }

      }
   }
}

http://cksource.com/forums/viewtopic.php?t=24128