Ckeditor event handler issue

[cstsang]

I have a table, I want each cell can be editable when user click on a cell.

My code can done the job well, I want the updated data can be upload to server database when the editing complete, so I capture the blur event to do so, the problem is when I select text color in toolbar, the blur event is triggered also.

Here is my code:

<html>
            <head>
                <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
                <script language="javascript" src="ckeditor/ckeditor.js"></script>
                <script language="javascript" src="ckeditor/adapters/jquery.js"></script>
                <script language="javascript">
                    $(document).ready(function() {
                        $("[id^='editor']").ckeditor().on("blur",function(){alert($(this).ckeditor().editor.getData());return false;});                                                             </script>   
            </head>
            <body>
                <table border=1>
                    <tr>
                        <td>
                            <div id="editor1" contenteditable="true">
                                <h1>Inline Editing in Action!</h1>
                                <p>The "div" element that contains this text is now editable.</p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="editor2" contenteditable="true">
                                <h1>Inline Editing in Action!</h1>
                                <p>The "div" element that contains this text is now editable.
                            </div>
                        </td>
                    </tr>           
                </table>
            </body>
        </html>

Here is my config.js

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For complete reference see:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for a single toolbar row.
	config.toolbarGroups = [
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'forms' },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'tools' },
		{ name: 'others' },
		{ name: 'about' }
	];

	// The default plugins included in the basic setup define some buttons that
	// are not needed in a basic editor. They are removed here.
	config.removeButtons = 'Anchor,Underline,Strike,Subscript,Superscript,Link,Unlink,Styles,About,HorizontalRule,Blockquote,Italic,SpellChecker,SpecialChar,Format';

	// Dialog windows are also simplified.
	config.removeDialogTabs = 'link:advanced';
	
	config.extraPlugins = 'onchange';
};

Here is my build-config.js

var CKBUILDER_CONFIG = {
	skin: 'office2013',
	preset: 'standard',
	ignore: [
		'.bender',
		'bender.js',
		'bender-err.log',
		'bender-out.log',
		'dev',
		'.DS_Store',
		'.editorconfig',
		'.gitattributes',
		'.gitignore',
		'gruntfile.js',
		'.idea',
		'.jscsrc',
		'.jshintignore',
		'.jshintrc',
		'less',
		'.mailmap',
		'node_modules',
		'package.json',
		'README.md',
		'tests'
	],
	plugins : {
		'a11yhelp' : 1,
		'about' : 1,
		'basicstyles' : 1,
		'blockquote' : 1,
		'clipboard' : 1,
		'colorbutton' : 1,
		'contextmenu' : 1,
		'elementspath' : 1,
		'enterkey' : 1,
		'entities' : 1,
		'filebrowser' : 1,
		'floatingspace' : 1,
		'format' : 1,
		'horizontalrule' : 1,
		'htmlwriter' : 1,
		'indentlist' : 1,
		'list' : 1,
		'magicline' : 1,
		'onchange' : 1,
		'panelbutton' : 1,
		'pastefromword' : 1,
		'pastetext' : 1,
		'removeformat' : 1,
		'resize' : 1,
		'specialchar' : 1,
		'stylescombo' : 1,
		'tab' : 1,
		'toolbar' : 1,
		'undo' : 1,
		'uploadwidget' : 1,
		'wsc' : 1
	},
	languages : {
		'en' : 1,
		'zh' : 1,
		'zh-cn' : 1
	}
};

[Jakub Ś]

If you try below code then it will work:

CKEDITOR.on( 'instanceReady', function( evt ) {
	evt.editor.on( 'blur',function(){
			console.log( evt.editor.getData() );
		}
	);	
});

If you look at ckeditor() ​method, you will notice that it return jQuery object and event that is assigned here doesn't belong to CKEditor but to jQuery.

Unfortunately these events may be fired too often - ​http://docs.ckeditor.com/#!/guide/dev_jquery-section-event-handling