This is a plugin that tries to fire a 'change' event whenever the content of a CKEditor instance is changed.
+ +Alfonso Martínez de Lizarrondo
+Falcana
+Extract the contents of the zip in you plugins directory, so it ends up like
+ this
+
+
+ckeditor\ + ... + images\ + lang\ + plugins\ + ... + onchange\ + plugin.js + docs\ + install.html + ... + skins\ + themes\ ++
Now add the plugin in your config.js or custom js configuration
+file:
+config.extraPlugins='onchange';
+
You can limit the minimum time between changes to avoid getting too many events fired:
+config.minimumChangeMilliseconds = 100; // 100 milliseconds (default value)
+.
Write your listener for the new 'change' event and perform whatever action you need there.
+editor.on( 'change', function(e) { console.log(e) });
+.
CKEditor is © CKSource.com
+ + diff --git a/vendor/assets/javascripts/ckeditor/plugins/onchange/docs/styles.css b/vendor/assets/javascripts/ckeditor/plugins/onchange/docs/styles.css new file mode 100755 index 0000000..58ae80a --- /dev/null +++ b/vendor/assets/javascripts/ckeditor/plugins/onchange/docs/styles.css @@ -0,0 +1,59 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 90%; +} +h1 { + text-align:center; + font-size:180%; +} +h2 { + border-bottom:2px solid #CCC; + margin:1em 0 0.4em 0; +} +h3 { + margin-bottom:0.4em; +} +p { + margin:0 0 1em 1em; + text-align:justify; +} +ol { + margin:0 0 1.2em 1em; + padding:0; + list-style-type:none; +} +ol li { + margin:0.2em 0; +} +pre, code { + font-size:100%; + font-family:"Courier New", Courier, mono; + background-color: #CCCCCC; + border:1px solid #999; + padding:0.2em 1em; + margin: 0.4em 0; + display:block; + white-space: pre; + overflow: auto; +} +form { + margin:0 0 0 1em; +} +span.key { + color: #006600; +} +#install { + display:none +} +#languages ul { + display:inline; + list-style-type:none; + margin:0; + padding:0; +} +#languages li { + display:inline; + margin:0; + padding:0; + vertical-align:bottom; +} \ No newline at end of file diff --git a/vendor/assets/javascripts/ckeditor/plugins/onchange/plugin.js b/vendor/assets/javascripts/ckeditor/plugins/onchange/plugin.js new file mode 100755 index 0000000..56dd346 --- /dev/null +++ b/vendor/assets/javascripts/ckeditor/plugins/onchange/plugin.js @@ -0,0 +1,148 @@ +/* + * @file change event plugin for CKEditor + * Copyright (C) 2011 Alfonso Martinez de Lizarrondo + * + * == BEGIN LICENSE == + * + * Licensed under the terms of any of the following licenses at your + * choice: + * + * - GNU General Public License Version 2 or later (the "GPL") + * http://www.gnu.org/licenses/gpl.html + * + * - GNU Lesser General Public License Version 2.1 or later (the "LGPL") + * http://www.gnu.org/licenses/lgpl.html + * + * - Mozilla Public License Version 1.1 or later (the "MPL") + * http://www.mozilla.org/MPL/MPL-1.1.html + * + * == END LICENSE == + * + */ + + // Keeps track of changes to the content and fires a "change" event +CKEDITOR.plugins.add( 'onchange', +{ + init : function( editor ) + { +// // Test: +// editor.on( 'change', function(e) { console.log( e ) }); + + var timer, + theMutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver, + observer; +// http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers +// http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ + + // Avoid firing the event too often + function somethingChanged() + { + // don't fire events if the editor is readOnly as they are false detections + if (editor.readOnly) + return; + + if (timer) + return; + + timer = setTimeout( function() { + timer = 0; + editor.fire( 'change' ); + }, editor.config.minimumChangeMilliseconds || 100); + } + // Kill the timer on editor destroy + editor.on( 'destroy', function() { if ( timer ) clearTimeout( timer ); timer = null; }); + + // in theory this block should be enabled only for browsers that don't support MutationObservers, + // but it doesn't seem to fire correctly in all the situations. Maybe in the future... + { + // Set several listeners to watch for changes to the content + editor.on( 'saveSnapshot', function( evt ) + { + if ( !evt.data || !evt.data.contentOnly ) + somethingChanged(); + }); + + var undoCmd = editor.getCommand('undo'); + undoCmd && undoCmd.on( 'afterUndo', somethingChanged); + var redoCmd = editor.getCommand('redo'); + redoCmd && redoCmd.on( 'afterRedo', somethingChanged); + + editor.on( 'afterCommandExec', function( event ) + { + if ( event.data.name == 'source' ) + return; + + if ( event.data.command.canUndo !== false ) + somethingChanged(); + } ); + } + + if ( theMutationObserver ) + { + observer = new theMutationObserver( function( mutations ) { + somethingChanged(); + } ); + + // To check that we are using a cool browser. + if (window.console && window.console.log) + console.log("Detecting changes using MutationObservers"); + } + + // Changes in WYSIWYG mode + editor.on( 'contentDom', function() + { + if ( observer ) + { + // A notification is fired right now, but we don't want it so soon + setTimeout( function() { + observer.observe( editor.document.getBody().$, { + attributes: true, + childList: true, + characterData: true + }); + }, 100); + } + + editor.document.on( 'keydown', function( event ) + { + // Do not capture CTRL hotkeys. + if ( event.data.$.ctrlKey ||event.data.$.metaKey ) + return; + + var keyCode = event.data.$.keyCode; + // Filter movement keys and related + if (keyCode==8 || keyCode == 13 || keyCode == 32 || ( keyCode >= 46 && keyCode <= 90) || ( keyCode >= 96 && keyCode <= 111) || ( keyCode >= 186 && keyCode <= 222) ) + somethingChanged(); + }); + + // Firefox OK + editor.document.on( 'drop', somethingChanged); + // IE OK + editor.document.getBody().on( 'drop', somethingChanged); + }); + + // Detect changes in source mode + editor.on( 'mode', function( e ) + { + if ( editor.mode != 'source' ) + return; + + editor.textarea.on( 'keydown', function( event ) + { + // Do not capture CTRL hotkeys. + if ( !event.data.$.ctrlKey && !event.data.$.metaKey ) + somethingChanged(); + }); + + editor.textarea.on( 'drop', somethingChanged); + editor.textarea.on( 'input', somethingChanged); + if (CKEDITOR.env.ie) + { + editor.textarea.on( 'cut', somethingChanged); + editor.textarea.on( 'paste', somethingChanged); + } + }); + + + } //Init +} ); diff --git a/vendor/assets/javascripts/sisyphus.js b/vendor/assets/javascripts/sisyphus.js index 8509bc5..46b0e22 100644 --- a/vendor/assets/javascripts/sisyphus.js +++ b/vendor/assets/javascripts/sisyphus.js @@ -193,6 +193,23 @@ self.bindSaveDataOnChange( field, prefix ); } } ); + + if ( typeof window.CKEDITOR !== 'undefined' ) { + CKEDITOR.on( 'instanceReady', function(ev) { + if ( $.inArray( ev.editor.element.$, fieldsToProtect ) ) { + ev.editor.on( 'change', function(eev) { + eev.editor.updateElement(); + var element = eev.editor.element.$; + + if ( typeof element.oninput === 'undefined' ) { + element.onpropertychange(); + } else { + element.oninput(); + } + } ); + } + } ); + } } ); }, @@ -205,6 +222,7 @@ */ saveAllData: function() { var self = this; + self.targets.each( function() { var targetFormId = $( this ).attr( "id" ); var fieldsToProtect = $( this ).find( ":input" ).not( ":submit" ).not( ":reset" ).not( ":button" ).not( ":file" ); @@ -318,6 +336,7 @@ */ bindSaveDataImmediately: function( field, prefix ) { var self = this; + if ( typeof $.browser.msie === 'undefined' ) { field.get(0).oninput = function() { self.saveToBrowserStorage( prefix, field.val() ); @@ -456,4 +475,4 @@ } }; } )(); -} )( jQuery ); \ No newline at end of file +} )( jQuery ); diff --git a/vendor/assets/javascripts/sisyphus/ckeditor.js b/vendor/assets/javascripts/sisyphus/ckeditor.js new file mode 100644 index 0000000..6b47cba --- /dev/null +++ b/vendor/assets/javascripts/sisyphus/ckeditor.js @@ -0,0 +1,7 @@ +//= require ckeditor/plugins/onchange/plugin.js +//= require_self + +(function() { + CKEDITOR.config.extraPlugins += ",onchange"; +})(this); +