w8tcha / ckeditor-autosave-plugin Goto Github PK

Hi,
I've translated messages of autosave to Slovak. As the translation is not maintained in transifex (should be :)), I attach it here
sk.zip

M

Hi,

it's a great plugin!

1. what is the meaning and correct use of autosave_SaveKey?
2. I'd like to destroy the stored content when i click the submit button...is it possible?

thanks,
Matteo

On a page with multiple CKEditor instances, is there a way to specify the plugin to only run on a specific instance? We found that AutoSave doesn't work correctly in pages with more than one CKEditor instance.

I've found a problem with the compare window not displaying buttons at the bottom of the window if there is more lines of content then what fits into the browser window.

A good way to test the scenario is to add 20+ paragraphs of lorem ipsum text.

Hello,
there is a conflict with your plugin and phprunner generated website, your plugin must be overwriting a phprunner cookie named : searchPanel

you need to change the name to anything else try put your plugin name as a prefix to prevent any future problems.

regards

Hi there,

Great plugin concept :) I am testing it by loading the editor in a modal window. Every time the modal window is closed, I call the following so that I do not get errors if the modal window is reopened:

CKEDITOR.instances[name].destroy(true);

The issue is sometimes it doesn't auto save. I have waited well over 10 seconds sometimes And then when it does auto save, it returns different versions.

I'd be happy to help to get this issue resolved if I can.

Thanks

Hi There

Is it possible that we can have a config option for default diffType?

Most of my website users have very little to none html knowledge and the sideBySide default view confuse them. Would be nice to be able to set it to default inline.

Edit : It is already implemented. See answer 2 to use it with Django.

Is there a way to have autoSaveKey automatically populated with the url?
Like having automatically this :
http://www.mysite.com/shop/products/1/ → autosave_shop/products/1/
http://www.mysite.com/shop/products/2/ → autosave_shop/products/2/
or anything else, like a hash of it... the point being to have a different local autosave for different pages, and not one for all (which doesn't make sense most of the time) if you can't/don't want to have specific settings for every page (like when you use this plugin within django or with a shared settings file in a CDN).
Thanks anyway for this awesome plugin !

A couple of translations and small corrections on the English message, if you would like.

/*
 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */ 
 CKEDITOR.plugins.setLang('autosave', 'jp', {
 loadSavedContent: '前に保存したコンテンツがあります。開きますか？'
 });



 /*
 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 CKEDITOR.plugins.setLang('autosave', 'pt-BR',   
 loadSavedContent: 'Tem uma versão salva. Você quer abrir?'
 });

I think that this English message is better:

 /*
 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 CKEDITOR.plugins.setLang('autosave', 'en', {
     loadSavedContent: 'There is a auto-saved version of this content. Do you want to open it?'
 });

If you want to stick to your original message, then this is correct English:

  'Auto-saved content found. Do you want to load it?'

By the way, between this and Wordcount you have done very great things for us. Thanks so much.

For example, let's assume you have some autosaved contents from yesterday.

As it is now, the editor knows only two values:

1. The autosaved modified content from yesterday.
2. The current content.

There are three ways how the editor could determine if the content has been changed between autosaving and loading the autosaved data:

1. Already possible (with server-side support): validating against the notOlderThen option using server-side timestamping (with notOlderThan = server_current_time - server_modified_time).
2. Save the original content (while performing the auto-save) and compare with the original content while loading. This will allow building diff view or even (possibly) merging the diff. This should be made configurable in case if someone does not want such functionality at the cost of extra space.
3. Add some simple hash (crc or anything else) of the original content and compare hashes. This will use less space in LocalStorage, but will not allow building (and merging) diffs and will require some crc function. It gives no benefits over variant 1 in case when server-side timestamping is active. Probably this should be made configurable.

If you want, you can implement 2 or 3. =)

The maximum amount of data that could be safely stored in LocalStorage is at least 2.5m characters per origin, but that depends on the browser.

With current implementation of escape in extensions.js, there is an issue if a number is passed. This breaks functionality in some pre-existing JavaScript that makes use of the native escape function. In at least Chrome 41 the following occurs:

native escape: escape(2) -> "2"
extensions escape: escape(2) -> Uncaught TypeError: undefined is not a function.

A simple fix would be:

function escape(a)
{
    var b = a.toString();
    b = b.replace(/&/g, "&");
    b = b.replace(/</g, "&lt;");
    b = b.replace(/>/g, "&gt;");
    b = b.replace(/"/g, "&quot;");
    return b
}

A better fix would be to have escape only scoped to your plugin as this implementation does not follow spec: (ECMAScript Spec - escape implementation)[http://www.ecma-international.org/ecma-262/5.1/#sec-B.2.1]

Have CKEditor set up in a Rails app with almost no customization at all. When autosave runs, I get the alert asking me if I want to diff, and then it throws this exception:

Uncaught TypeError: Cannot read property '0' of undefined extensions.min.js?t=E4KA:1
get_matching_blocks extensions.min.js?t=E4KA:1
get_opcodes extensions.min.js?t=E4KA:1
RenderDiff plugin.js?t=E4KA:240
onShow plugin.js?t=E4KA:111
i ckeditor.js?body=1:11
CKEDITOR.event.CKEDITOR.event.fire ckeditor.js?body=1:13
(anonymous function) ckeditor.js?body=1:535
(anonymous function) ckeditor.js?body=1:26
wrapped

Accepting changes still works, but the diff never shows up.

Verified in Chrome, Safari, Firefox, Opera

I find the "saved" notification quite distracting. Can I somehow turn it off?

Great extension - thanks for creating it.

While testing we found that Auto Saved pop-up is often in the way to read what you have just typed. Wouldn't it be nice to move it down below and make as least noticeable as possible?

Cheers
Igor

As it is now, only the actual contents of the editor are stored in the localStorage.

Replacing that thing with some kind of JSON structure would allow to store some additional data.

For example, store JSON.stringify({content: content, time: new Date()}).

JSON.stringify and JSON.parse are available since IE8, and IE7 is dead long ago and not supported by CKEditor as of version 4.2.

Storing the time will have no overhead and can be used for different purposes:

1. Telling the user (in the confirm dialog) when was the document autosaved.
2. Adding a possibility to limit (with a configuration variable) how old the autosave should be. This can be used, for example, if the documents on the server store the last modification time.
   The cleanest way, in my opinion, would be to pass a Date object (as an optional notOlderThan configuration variable) to which the time param from the autosave should be compared, and the autosave should be discarded if it is older.

The load saved content message says
"An auto-saved version of this content from "{0}" has been found. Would you like to compare content versions and choose which one to load?'"

However if you click cancel, the auto saved content is erased completely. It seems like this should be indicated in the message

"An auto-saved version of this content from "{0}" has been found. Would you like to compare content versions and choose which one to load? Clicking Cancel will remove previously auto-saved content."

Hi there,
I translated into italian the english-language file and filed in /autosave/lang as it.js with this code:

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang('autosave', 'it', {
    dateFormat: 'LLL',
    autoSaveMessage: 'Salvataggio automatico',
    loadSavedContent: 'C\'è una versione salvata automaticamente di questi contenuti da "{0}": desideri confrontare le due versioni per decidere quale utilizzare?',
    title: 'Confronta i contenuti salvati automaticamente con quelli caricati dal sito web',
    loadedContent: 'Contenuti caricati',
    autoSavedContent: 'Contenuti salvati automaticamente da: \'',
	ok: 'Si, carica i contenuti salvati automaticamente',
	no: 'No',
	diffType: 'Scegli il tipo di visualizzazione:',
	sideBySide: 'Vista affiancata',
	inline: 'Vista in linea'
});

But, seems to not loading the translation properly (inside a CKEditor in a Drupal installation).
I'm missing something? Do it need the it-IT language marker instead the simple it?

Thank you in advance (feel free to include the translation into the plugin next releases),
M.

I'm attempting to use this plugin under drupal (using the ckeditor module).
The autosave message appears however when I reload the page I never get the dialog asking to restore the autosaved value.

I tracked this done in the code and the problem is that the object returned by LoadData has a string in the saveTime property and the check in CheckForAutoSavedContent uses this value in a diff call that expects a Date. Replacing:

if (moment(new Date()).diff(autoSavedContentDate, 'minutes') > notOlderThen) {

with

if (moment(new Date()).diff(new Date(autoSavedContentDate), 'minutes') > notOlderThen) {

fixes the problem for me

Using version 0.13 everything works fine.
Upgraded to version 0.15 getting "ReferenceError: editorInstance is not defined" on line 31 of plugin.js.

Pagespeed module screws up LZString when it minifies. There isn't really a way to fix this that I can tell. So perhaps in the readme/documentation here and on CKEditor site, provide a warning + workaround. Thoughts?

Apache:
ModPagespeedDisallow "*/autosave/js/extensions.min.js*"

Nginx:
pagespeed Disallow "*/autosave/js/extensions.min.js*"

There should be a wildcard after the ".js" to account for any kind of querystring cachebust in rando platforms.

Thanks for the great plugin.

See attached screenshot which shows the full browser screenshot.

Note that the diff lines are too long, and the amount of content is too tall, making the dialog appear off the right and bottom edges of the screen.

Combined with the fact that the dialog is position:fixed means that it's impossible to scroll either left/right to view wide lines, or up/down to access the controls at the bottom of the dialog.

This is all caused by the following CSS rules:

.cke_reset_all, .cke_reset_all * {
  white-space: nowrap;
}

 <table class="cke_dialog cke_browser_webkit cke_ltr cke_single_page" style="position: fixed;">

Ultimately I think either the no-wrap needs removing for the diff dialog, or possibly just add horizontal and vertical scroll. The problem is I can't locate an autosave-specific class or id to use, does CKEditor.dialog provide this functionality?

We've upgraded our CKEditor from 4.3.3 to CKEditor 4.4 (released last night: http://ckeditor.com/blog/CKEditor-4.4-Released). As indicated on the AutoSave plugin page, CKEditor 4.4 support is not clear (http://ckeditor.com/addon/autosave), and when we've tried using it againts the CKEditor 4.4, the error notice shows (see the attached image). We're using Drupal 7 by the way.

We'll appreciate if you could take a look to the issue. Thanks again for this very useful plugin.

For anyone that uses the CK Editor in Drupal 7. There should be an error in your console: LZString is undefined...

To solve this -> Move the LZString code into the plugin.js file. That'll get it to work, file becomes huge though.

Even though the diffview should be fixed after #27 it would be nice to have a configuration option to just skip the diff view just import whatever content has been autosaved directly after clicking okay.

I think the dialog could just say

An auto-saved version of this content from "{0}" has been found. Would you like to import the autosaved content overwriting your current content?

in jsdiff.js escape function get redefined globally. This is really unexpected to anyone and make it super hard to debug when the overridden behavior is different from standard one (for example escape function in jsdiff.js does not have null check for the string passed in).

Please add namespace to those functions.

Hi man, sorry for all the issues and stuff the last couple days, but this plugin is great. There is 1 last thing that would make Autosave more epic: the ability to ignore certain URi querystrings so that SaveKey is broad enough in all situations. I didnt wanna do a pull request since the querystring function i used is borrowed for a quick and dirty example.

Using CS-Cart, imagine you are editing a product with url like:
/admin.php?dispatch=products.update&product_id=1121

After saving the product, the page is reloaded, and the last active tab is opened using url like: /admin.php?dispatch=products.update&product_id=1121&selected_section=detailed

Then you change storefronts to some other one, save again, the url changes to something like: /admin.php?dispatch=products.update&product_id=1121&selected_section=detailed&switch_company_id=1.

Unfortunately all this makes many different SaveKey for the same product, which means that it cant load accurate save points.

Edit, see referenced pull request #87

Thanks man

I've added our 2 submit buttons to the detection selectors and it's not accepting them:

saveDetectionSelectors : "a[href^='javascript:__doPostBack'][id*='cdh'],a[id*='Cancel'],submit[id*='cdh_buttadminman'],submit[id*='cdh_update_article']",

Hi! Thanks for plugin! Will be it compatible with 4.7 ckeditor?

Afer autosave and reopen CKE, plugin ask for restore. But sometimes I don't want to keep this data (some trash/broken text). So I try do make:

a) cancel on JS alert (from plugin)
b) close plugin by "x"
c) close plugin by "cancel" button.

In all cases and reopen again CKE plugin ask again. I don't like it. I really sugest to remove stored content in case "a" and "c".
For that reason I won't use this plugin yet.

if the initial textarea is empty, there should not be a notification to choose whether or not the empty version or the previous version should be chosen.

Found if the timer goes off and something isn't dirty then it won't clear the timerid causing it to never save again. My fix was to just move the timeOutId = 0; to the first call.

Hi @w8tcha

I'm testing your plugin with a code snippet I've found on the CKeditor website : SharedSpace plugin

I think there's a bug while interacting with the SharedSpace plugin.

This code is about to use the same set of CKeditor buttons for every "zones" of the page we're working in.

I've got 2 <div> on my page, one on the left, one on the right.

When I'm typing text in the left one, I save it (with your autosave plugin).
Then I close the browser tab and reopen it in order to restore my text saved by your plugin.
But the restore is done in the right <div> !!

Above is the code :

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="mvc"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script type="text/javascript" src="<c:url value='ck/ckeditor.js'/>"></script>
</head>
<body>
	<div id="top">
		<!-- This div will handle all toolbars. -->
	</div>
	<div style="height: 460px; overflow: auto; border: 1px solid #afafaf; padding: 10px 10px;">

		<div style="width: 69%; float: left;">

	<textarea id="editor1" name="editor1" placeholder="">		&lt;p&gt;&lt;strong&gt;Barcelona&lt;/strong&gt; (		&lt;small&gt;English&lt;/small&gt;		&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English"&gt;/&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;b&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;ɑr&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;s&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;ɨ&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;ˈ&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;l&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;oʊ&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;n&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;ə&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English"&gt;/&lt;/a&gt;,		&lt;small&gt;Catalan:&amp;nbsp;&lt;/small&gt;		&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_Catalan"&gt;[bərsəˈɫonə]&lt;/a&gt;,		&lt;small&gt;Spanish:&amp;nbsp;&lt;/small&gt;		&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_Spanish"&gt;[bar&amp;theta;eˈlona]&lt;/a&gt;) is the capital city of the		&lt;a href="http://en.wikipedia.org/wiki/Autonomous_communities_of_Spain"&gt;autonomous community&lt;/a&gt; of &lt;a href="http://en.wikipedia.org/wiki/Catalonia"&gt;Catalonia&lt;/a&gt; in		&lt;a href="http://en.wikipedia.org/wiki/Spain"&gt;Spain&lt;/a&gt; and the country&amp;#39;s 2nd largest city, with a population of 1.6 million within its administrative limits.		&lt;/p&gt;		&lt;p&gt;Its &lt;a href="http://en.wikipedia.org/wiki/Urban_area"&gt;urban area&lt;/a&gt; extends beyond the administrative city limits with a population of around 4.5 million people, being the		&lt;a href="http://en.wikipedia.org/wiki/Largest_urban_areas_of_the_European_Union"&gt;sixth-most populous urban area&lt;/a&gt; in the		&lt;a href="http://en.wikipedia.org/wiki/European_Union"&gt;European Union&lt;/a&gt; after &lt;a href="http://en.wikipedia.org/wiki/Paris"&gt;Paris&lt;/a&gt;,		&lt;a href="http://en.wikipedia.org/wiki/London"&gt;London&lt;/a&gt;, &lt;a href="http://en.wikipedia.org/wiki/Ruhr_area"&gt;the Ruhr&lt;/a&gt;, &lt;a href="http://en.wikipedia.org/wiki/Madrid"&gt;Madrid&lt;/a&gt;		and &lt;a href="http://en.wikipedia.org/wiki/Milan"&gt;Milan&lt;/a&gt;. About five million people live in the &lt;a href="http://en.wikipedia.org/wiki/Barcelona_metropolitan_area"&gt;Barcelona		metropolitan area&lt;/a&gt;. It is the largest metropolis on the &lt;a href="http://en.wikipedia.org/wiki/Mediterranean_Sea"&gt;Mediterranean Sea&lt;/a&gt;, located on the coast between		the mouths of the rivers &lt;a href="http://en.wikipedia.org/wiki/Llobregat"&gt;Llobregat&lt;/a&gt; and &lt;a href="http://en.wikipedia.org/wiki/Bes%C3%B2s_%28river%29"&gt;Bes&amp;ograve;s&lt;/a&gt;,		and bounded to the west by the &lt;a href="http://en.wikipedia.org/wiki/Serra_de_Collserola"&gt;Serra de Collserola&lt;/a&gt; mountain range, the tallest peak of which is 512 metres		(1,680&amp;nbsp;ft) high.&lt;/p&gt;		&lt;p&gt;Founded as a Roman city, in the Middle Ages Barcelona became the capital of the &lt;a href="http://en.wikipedia.org/wiki/Counts_of_Barcelona"&gt;County of Barcelona&lt;/a&gt;. After		merging with the &lt;a href="http://en.wikipedia.org/wiki/Kingdom_of_Aragon"&gt;Kingdom of Aragon&lt;/a&gt;, Barcelona continued to be an important city in the		&lt;a href="http://en.wikipedia.org/wiki/Crown_of_Aragon"&gt;Crown of Aragon&lt;/a&gt;. Besieged several times during its history, Barcelona has a rich cultural heritage and is today		an important cultural centre and a major tourist destination.&lt;/p&gt;
	</textarea>
		</div>
		<div style="width: 29%; float: right;">

	<textarea id="editor2" name="editor2">		&lt;p&gt;Country: &lt;a href="http://en.wikipedia.org/wiki/Spain"&gt;Spain&lt;/a&gt;&lt;br/&gt;		Area&lt;/p&gt;		&lt;ul&gt;		&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Municipalities_of_Spain"&gt;Municipality:&lt;/a&gt; 101.9&amp;nbsp;km2&lt;/li&gt;		&lt;li&gt;Urban: 803&amp;nbsp;km2&lt;/li&gt;		&lt;/ul&gt;		&lt;p&gt;Population (2011)&lt;/p&gt;		&lt;ul&gt;		&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Municipalities_of_Spain"&gt;Municipality&lt;/a&gt;:		1,620,943 (city limits)&lt;br/&gt;		3,218,071 (&lt;a href="http://en.wikipedia.org/wiki/Greater_Barcelona"&gt;Greater&lt;br/&gt; Barcelona&lt;/a&gt;)		&lt;/li&gt;		&lt;li&gt;Density: 15,991/km2&lt;/li&gt;		&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Urban_area"&gt;Urban&lt;/a&gt;: 4,604,000&lt;/li&gt;		&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Metropolitan_area"&gt;Metro&lt;/a&gt;: 5,375,774&lt;/li&gt;		&lt;/ul&gt;
	</textarea>
		</div>
	</div>
	<div id="bottom">
		<!-- This div will handle all bottom bars. -->
	</div>

	<script>
		CKEDITOR.replace( 'editor1', {
			extraPlugins: 'sharedspace,autosave',
			removePlugins: 'maximize,resize',
			height: 410,
			sharedSpaces: {
				top: 'top',
				bottom: 'bottom'
			}
		} );

		CKEDITOR.replace( 'editor2', {
			extraPlugins: 'sharedspace',
			removePlugins: 'maximize,resize',
			height: 410,
			sharedSpaces: {
				top: 'top',
				bottom: 'bottom'
			}
		} );
	</script>
</body>
</html>

Are you sure it is wise to use editor.id as the storage key?

http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-id says that editor ids may be random. You might get the same id on simple cases, but in my testing I have noticed this can also fail. I have several editors on the same page and the ids seem to be mostly random numbers when I replace divs with the editor using the replace method. The result is that retrieving the content will be impossible as the ids mismatch.

At this moment I see stuff like

id: "cke_1"
id: "cke_59"
id: "cke_112"

as the id. These are internal generated IDs for the editors. Using something else that is more stable might be better choice, for example

localStorage.getItem('autosave' + editor.name)

which points (unintuitively) to the id of the element containing the editor. After bolting the ids of those down to something sane things should work more reliably.

Use newest autosave plugin. Changing article, autosave saves changes, edit more and more but nothing is saved. On reload it displays that there are changes, but only the first one is displayed. All the rest is gone...
Please fix!

That's a mistype that might confuse users.

I'm trying to use ckeditor with my own cms. I've got a long table based page (admin) whre I'm using replace method (ckeditor) to replace all textarea with CKE instance on demand.

All textareas has id like: opis_id. And now:

1. default config: - after open opis_1 by replace, change something, autosave plugin is doing something, because when I destroy (or not) ckeditor and call new one opis_2 autosave plugin is asking me for restore content. But - it's really different subpage. So, I'm trying to use keys to determine instances for autosave, so:...

2. I'm callig config for all new instances like:

function replaceEditor(ec)
{
    if ( editor ) return;
  var box = document.getElementById( 'opis_' + ec );  
  if (box) {
    var html = box.innerHTML;
    editor = CKEDITOR.replace( 'opis_' + ec , { autosave_SaveKey: 'opis,'+ec+',admin,host.com'} );  
    }
}

but nothing happens after change ckeditor content (?). Console log is empty. So should I use autosave plugin for multi instances ?

Today I got error on v0.12:
NS_ERROR_DOM_QUOTA_REACHED: Persistent storage maximum size reached
Line: 225
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0

Hello,

I've tested autosave plugin on Chrome Version 55.0.2883.95 (64-bit), on macOS Sierra 10.12.12 and every time I reload the editor to see if text was saved, it only saves a chunk of it.

Example:

Then I tried it on Safari and it works perfectly so I guess the issue is somehow related to Chrome.

Any hints? Thanks in advance!

Not sure if this is a bug or a missing feature really, however the use case is:

1. Make a change to content.
2. Reload page so it reverts to default content.
3. Apply autosaved changes to content.
4. Reload page again without making further changes.
5. Autosaved changes are no longer offered.

Hi,

our content is created in drupal in collaboration between authors and editors. An author saves the content and changes its state so that an editor can edit it. If the editor sends the content back to the author, the dialog regarding differences in the locally stored and web version is displayed. As I understand the documentation, the option
saveDetectionSelectors : "a[href^='javascript:__doPostBack'][id*='Save'],a[id*='Cancel']",
should solve this problem.
This, however, does not work for me.
We use drupal and its ckeditor module, the id of the Save button is 'id="edit-submit"'. So we use
saveDetectionSelectors : "a[href^='javascript:__doPostBack'][id='edit-submit']]".
This setting is used, I can see it in the "js_conf" section in the html code of the page.

Thank in advance for your help
Milos

• In Chrome browser the left and right windows in diff view are not of the same width making it hard to find diffs
• In MS Edge browser the diff view dialog is much too width, can't change viewtype or click OK, Cancel buttons (when large content page is opened, seems OK with little content)

Hi @w8tcha ,

I've just downloaded CKeditor including your plugin (v. 0.16) and have some questions for you if you're OK with that.

1) Autosave and notifications for each keystroke

I'm sorry for coming back again on an already opened issue, but I encounter some problems with the plugin and I thought I could find here more infos than on the CK website.

Here what I'm using. My project is a Java one.

CKEDITOR.plugins.add("autosave", {
        lang: 'ca,cs,de,en,es,fr,ja,nl,pl,pt-br,ru,sk,sv,zh,zh-cn', // %REMOVE_LINE_CORE%
        requires: 'notification',
        version: **0.16**,
        init: function (editor) {
            // Default Config
            var defaultConfig = {
                **delay: 10**,
                messageType: "notification",
                saveDetectionSelectors: "a[href^='javascript:__doPostBack'][id*='Save'],a[id*='Cancel']",
                saveOnDestroy: false,
                NotOlderThen: 1440,
                **SaveKey: "autosaveKey"**,
                diffType: "sideBySide"
            };

The problem is that every keystroke seems to fire an auto-save and that the screen is full of notifications (this issue was reported to you a few days ago) and I'm looking at your code to configure the plugin behaviour.

You're talking about a 25 seconds delay between each auto-save but I cant't find this 25 seconds value anywhere in the code.
Actually, Delay var is set to 10 (seconds ?) but I don't see the difference if I set 100 or 1000.

2) AutosaveKey

I also needed more informations about the "autosaveKey" -> what is it ?

Sorry for my poor questions, but I'm an absolute beginner in JS and jQuery and some elements are not clear for me.

3) DiffType

When I test the closing and reopening of my browser to verify if my datas have been correctly saved, the window showing historical datas (difftype) is sometimes broken and I can't see the right part of the table (difftype 'side by side' is selected).

Thanx by advance for your help.

I've installed autosave with ckeditor 4.3.3 and have noticed that it's conflicting with Olark (a chat widget).

It's spitting out this error: WARNING: [framesocket] timed out while flushing to persistent storage

Screenshot

Any ideas on how to resolve this conflict? Thanks!

We have the Word Count plug-in and the AutoSave plug-in installed. When the notification is shown in the status bar (our preference) , the auto save notification overlaps with the word count notification and is unreadable.

When a base64 string for an image was added to the CKEdtior and the diff viewer shows up, it's something like 2000px wide due to the unwrapped base64 string.

This should be either fixed by adding some overflow-x:scroll or allowing text to wrap at any point.

Editor instance SaveKey string(s) should not be based on init id's, because they are not actually historical id's linked to a specific field. It's based on instance not origin input name. Currently, the default SaveKey uses editor.id but that will screw up in a couple of situations:

• When adding a new functionality (such as a new ecom module) which sorts/places any new field in source, changing the count/order.
• When loading editors based on a click into a field to prevent out of memory/stack on pages with hundreds of textareas.

With that in mind, perhaps a better choice for most cases would be using the following for default SaveKey:

SaveKey: 'autosave_' + window.location + "_" + $('#' + editor.name).attr('name'),

This looks for the editor field id, then pulls the name based on that, which in most cases of forms/POST is what is used to submit data. From what i can tell, CK requires a field id to load.

I realize none of the default tactics can be 100% accurate due to querystring changes, id int/tag/identifier changes, etc, but this seems to link better. Thanks for the sweet plugin.

The maximum amount of data that could be safely stored in LocalStorage is at least 2.5m characters per origin, but that depends on the browser.

You could pack the serialized JSON data to minimize the used LocalStorage space.

See http://stackoverflow.com/questions/11170716/are-there-any-characters-that-are-not-allowed-in-localstorage for the range of allowed symbols for encoding the data.

A new "auto saved" notification is shown with every keystroke. In addition, interaction with other editor buttons is impeded or prevented, even when messageType is set to "no" in the config file.

The issue only occurred after updating to the latest version of ckeditor (4.6.1).

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang('autosave', 'pl', {
    autoSaveMessage: 'Auto Saved',
    loadSavedContent: 'Istnieje automatycznie zapisana wersja zawartości (z "{0}"). Otworzyć okno porównawcze, w którym można zadecydować o wczytaniu automatycznie zapisanej zawartości?',
    title: 'Porównanie tymczasowo zapisanej zawartości z zawartością wczytaną w witrynie',
    loadedContent: 'Zawartość wczytania',
    autoSavedContent: 'Zawartość zapisana automatycznie (z: \'',
    ok: 'Tak, wczytaj automatycznie zapisaną treść',
    no: 'Nie',
    diffType: 'Widok porównawczy:',
    sideBySide: 'Obok siebie',
    inline: 'Osadzony'
});

Additional, you are using date format going from web server. It's not the best way. A lot of servers has default english localize. So not everybody can understand displayed date (?). Maybe better date format will be %Y-%m-%d %H:%i:%s ? Without words as month. It can be also configured by config if you like.

Second one problem, "OK" button for restore is too short:

Great job! Thank you for your plugin!

Used the same file as fr.js and is working.
Also It would be good to have a default language if user's system language is not in the list of the languages autosave support. Otherwise the plugin crashes ckeditor