Autosave \ Manual Save with AJAX

Thank you for great work.
Your solution is what I am looking for. But I develop in ASP.NET and C#.
Can you suggest a sample for ASP.NET and C# to use your plugin.
Can I use your plugin for many CKEditor instances in one page.
Thank you in advance.

This pattern is what exactly I needed I've been looking for this kind of information and thanks be to you that you posted it here. I currently develop site using the ASP.net and any more suggestions in order this to working.

Hi Jakub, I was trying your plugin and it works well. What I didn't find is a way how to pass some custom parameters along with the actual editor content. I would need to dynamically pass at least some ID (to update the right content in DB) and a method name (in case ckeditor is used on different places for different purposes). Ideally if I can access the form containing the textarea or any other way. Many thanks!

Thank you for the response. I have to say that I didn't think of the option of configuring the URL within the actual page and adding URL parameters to it dynamically. So that actually solves the problem for me.

I was testing the plugin a bit more and was wondering if there's a way to intercept when content has been saved, e.g. via an event handler. So i can display a message to the user (in addition to the tick symbol). Something on the lines of :

CKEDITOR.instances.editor_id.on('autosave', ...)

I also haven't found a way to fire the autosave plugin using a shortcut. For standard save I've been able to configure Ctrl+S this way:

config.keystrokes[config.keystrokes.length] = [ CKEDITOR.CTRL + 83, 'save' ];

But if a try to change 'save' for 'autosave' or 'Autosave' it doesn't work. Could you please try if this also doesn't work for you.

I've just found another thing. It seems that the autosave plugin breaks the checkDirty functionality. When using the plugin, the function always returns false even if there are changes. If I remove the plugin from config.extraPlugins then the checkDirty starts working properly again.

I'm not sure though when to fire such event. The content is being saved in asynchronous

Well there can be both events, although I think the more useful one is callback - that means the content has been actually saved. Like in Google Docs you have "All changes saved" message.

plugin displays it's own messages in form of tooltip

The tick / cross icons are really nice but a normal user might not understand that. I'd like to show my own messages to ensure the user the content has been saved successfully.

I also haven't found a way to fire the autosave plugin using a shortcut.

I thought that ckeditor itself is handling that. Anyway that would be very useful if shortcuts could trigger autosave. Many users (incl. me) have the habit of using Ctrl+S when writing longer documents:-)

It does not break it. It uses it. I guess that this is the main drawback of this plugin - checking and resetting dirty state.

I see you're resetting in order to count changes. Wouldn't it be enough to count key presses? Surely, you'll miss using mouse events changing the style for example but I think the main proportion of editing a document will still be key presses.

Thanks for your response and also thanks for the work on this plugin, it's one of the most useful ones in CKEditor!

Anyway I have started to think of other way to handle saves

I guess one way would be to keep a version of the document and comparing the current version to it and detect changes. Although that might be expensive. A good compromise might be to store the document length from last check and check against it like this:

var currentLength = getCurrentLength(); // just a mock method
if ( lastLength != currentLength )
{
   autosaveCounter++ ;
   lastLength = currentLength;
   // change Icon to saveDirty
   autosaveChangeIcon( editor, autosaveIcons[1].path,
      autosaveIcons[1].title );
}

It's just my guess because i'm not aware of the inner logic of the plugin that much, but do you think it might work or is there some catch to it?

That's true, but that's only when the user selects one character and replace it with another and how often does that happen? Surely there are some other cases but 99% interactions will change the length which might be good enough. You can then even count how many characters were added / removed and fire autosave based on that. Cause with checking checkDirty there's no difference between typing one character and pasting 1000 characters. But anyway, that's just my suggestion.

Thanks Jakub. Now the plugin is even better!

j.swiderski wrote:

Wouldn't it be enough to count key presses?

- There are other events fired by dialog, non-dialog plugins, by undo/redo, fired in source-mode etc. Plugin registering only some changes and not all of them? Hmmm... I just don't see it, sorry.
Anyway I have started to think of other way to handle saves. Method would be more intelligent and eventually could let me drop changes counter, interval and using dirty mechanism but this part might take some time as this change is quite big and to be honest it's back to the drawing board for me

Maybe you can use my onchange plugin (as-is or just picking up the relevant parts) to get info about any change. When you perform a save store a copy in memory of the current data, then wait for the onchange event + timers or whatever and if now the getData() is different save again. That wait you don't touch the "is dirty" property and rely just on your code.

For ASP.Net, you can capture the output of this with a simple Generic Handler.

Right-Click your project > Add New Item... > Generic Handler
Give it a name of AutoSave.ashx.

Replace all the code with whichever flavor below you like:

<%@ WebHandler Language="VB" Class="AutoSave" %>

Public Class AutoSave
   Implements IHttpHandler, IRequiresSessionState
       
   Public Sub ProcessRequest(ByVal context As HttpContext) _
   Implements IHttpHandler.ProcessRequest
      ' Do something with the data
      IO.File.WriteAllText("d:\path\to\save\content.txt", _
         context.Request.Form("Content").ToString)

      context.Response.Clear()
      context.Response.ContentType = "text/xml;charset=UTF-8"
      context.Response.StatusCode = 200
      context.Response.Write("<result status=""ok"" />")
      context.Response.Flush()
   End Sub
 
   Public ReadOnly Property IsReusable() As Boolean _
   Implements IHttpHandler.IsReusable
      Get
         Return False
      End Get
   End Property

End Class

<%@ WebHandler Language="C#" Class="AutoSave" %>

public class AutoSave : IHttpHandler, IRequiresSessionState
{

   public void ProcessRequest(HttpContext context)
   {
      // Do something with the data
      IO.File.WriteAllText("d:\path\to\save\content.txt",
         context.Request.Form("Content").ToString);

      context.Response.Clear();
      context.Response.ContentType = "text/xml;charset=UTF-8";
      context.Response.StatusCode = 200;
      context.Response.Write("<result status=\"ok\" />");
      context.Response.Flush();
   }

   public bool IsReusable {
      get { return false; }
   }
}

In your config.js...

config.autosaveTargetUrl = '/AutoSave.ashx';

Finally, if you're using .Net 4, you'll have to add the following to your web.config to avoid an HttpRequestValidationException: "A potentially dangerous Request.Form value was detected" because the content is pushed without any encoding:

<system.web>
   ...
   <httpRuntime requestValidationMode="2.0"/>
   ...
</system.web>

MrG

Hey this plugin looks great.

I'm using Backbone.js so when autosave fires, I only want the Autosave plugin to call my custom callback (not fire off any HTTP requests on its own). Would that be possible without hacking in to your code?

Something like:

$('#editor').ckeditor(config).ckeditorGet().on('autosave', function(event) {

  // Backbone Model .save() method will take care of hitting my API
  event.editor.config.model.save({content: event.editor.getData()});

  // return true/false so the plugin knows if saving was successful
  return true;

});

j.swiderski wrote:@chrisbraddock - it sounds to me like you only want to know when something got changed in the editor and then fire your own custom code.

If that's the case then what you really need is the onChange event part from the plugin. You're in luck because such event was created by @alfonsoml. You can find it on this forum and on his blog:
viewtopic.php?f=18&t=23605
http://alfonsoml.blogspot.com/2011/03/o ... ditor.html

Is this something you were looking for or my plugin has something more that you also need?

Well I like (and could use) other functionality bundled in your plugin. The onChange plugin you mention fires on every keypress I think ... I want less granular notification like your plugin provides.

But I guess I'm going to try a different route today. There's a decent jQuery plugin http://github.com/narfdotpl/jquery-typing I've used before that fires an event when a user stops typing. I'll see if I can integrate that.

Thanks for the response!

You can configure the onChange plugin with something like config.minimumChangeMilliseconds=1000 to fire the change event at most one per second.
And it doesn't take into account just keypresses but it tries to detect any change to the content (formatting, inserting elements, etc...)

alfonsoml wrote:You can configure the onChange plugin with something like config.minimumChangeMilliseconds=1000 to fire the change event at most one per second.
And it doesn't take into account just keypresses but it tries to detect any change to the content (formatting, inserting elements, etc...)

Ooh nice. I hadn't considered the formatting stuff. I'll give the onChange plugin another go. Thanks

This plugin is exactly what I want. Thanks!
I have an odd behavior in Internet Explorer (9.0.8112.16421). When pressing any CKeditor button (e.g. Bold or Italic), the plugin shows the message about abandon the page: "You will lose changes you have made in the editor since last save". Both Firefox and Chrome works without any problem.
To warn if there are unsaved modifications is a great functionality, so I wouldn't want to disable it.

Thanks in advance for any hint!

Hello,

Above all, Thanks for your work and your sharing.
I am new to plugin installation.
Sorry for my english google translation. I am French. : s

I downloaded the archive:
http://code.google.com/p/ckeditor-ajax- ... _1.0.2.zip

I put the autosave folder in the ckeditor plugins folder ...

I added the lines in the config.js file of ckeditor:

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
    config.font_names =
    'Arial/Arial, Helvetica, sans-serif;' +
    'Courier New/Courier New, Courier, monospace;' +
    'Times New Roman/Times New Roman, Times, serif;';
    config.resize_enabled = false;
    config.width = '96%';
    config.disableNativeSpellChecker = false;
// Lignes à rajouter :
   config.extraPlugins = 'autosave';
   config.toolbar = [['Source','Save','Preview','-', 'Autosave']];
   config.autosaveTargetUrl = 'http://mywebsite.fr/media/autosave/save/';
    config.filebrowserUploadUrl = 'media/kcfinder/upload.php?type=files';
    config.filebrowserImageUploadUrl = 'media/kcfinder/upload.php?type=images';
    config.filebrowserFlashUploadUrl = 'media/kcfinder/upload.php?type=flash';
// Fin Lignes à rajouter
    // ADVANCED EDITOR || DESACTIVED : SAVE - FORM,CHECKBOX,RADIO,TEXTFILED,TEXTAREA,SELECT,BUTTON,IMAGEBUTTON,HIDDENFIELD - FLASH - ABOUT
    config.toolbar_Full =
    [
        { name: 'document',    items : [ 'Source','-','NewPage','DocProps','Preview','Print','-','Templates' ] },
        { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
        { name: 'editing',     items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
        { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
        '/',
        { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
        { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
        { name: 'tools',       items : [ 'Maximize', 'ShowBlocks' ] },
        { name: 'insert',      items : [ 'Video','syntaxhighlight' ] },
        '/',
        { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
        { name: 'colors',      items : [ 'TextColor','BGColor' ] },
        { name: 'insert',      items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
    ];

    // BASIC EDITOR
    config.toolbar_Basic =
    [
        [ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'Image', 'Link', 'Smiley', '-', 'TextColor', 'RemoveFormat', '-', 'Scayt' ]
    ];
};

But nothing happens ... I think I missed something.
Sorry for my noob attitude

My CMS is Nuked Klan 1.7.9 RC6 :s
http://www.nuked-klan.org/

tanks a lot for your help! :s

j.swiderski wrote:@ leocofre I have just tried this plugin and didn't get behaviour you were talking about.
Could you perhaps send me private message explaining in more detail how you are getting this problem.

@j.swiderski Hi, Thanks for your help! I realized what the problem was: I use ckeditor with a plugin for redmine 1.3 *, and this plugin allows to add or remove the autosave button from the toolbar. So the button was not there while the autosave plugin tried to access it. Firefox and Chrome don't bother the problem, but IE complained in that odd way. I modified the t(D,E,F) function to handle this exception.

The solution seems easy, but I can post it if useful. If there is an elegant workaround I'll be pleased to learn about it.

Thanks a lot!

* Redmine CKEditor Plugin: https://github.com/ebrahim/redmine_ckeditor.

When I use the next option in the ckeditor:
config.forcePasteAsPlainText = true;

And then I try to make a "paste" in the editor, this results in duplicate information.