Context Navigation

← Previous Ticket
Next Ticket →

#14504 closed Bug (invalid)

Ckeditor event handler issue

Reported by:	cstsang	Owned by:
Priority:	Normal	Milestone:
Component:	General	Version:
Keywords:		Cc:

Description

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
	}
};

Attachments (3)

def.html (1.4 KB) - added by cstsang 10 years ago.
build-config.js (2.0 KB) - added by cstsang 10 years ago.
config.js (1.4 KB) - added by cstsang 10 years ago.

Download all attachments as: .zip

Change History (4)

Changed 10 years ago by cstsang

Attachment:	def.html added

Changed 10 years ago by cstsang

Attachment:	build-config.js added

Changed 10 years ago by cstsang

Attachment:	config.js added

comment:1 Changed 10 years ago by Jakub Ś

Resolution:	→ invalid
Status:	new → closed
Version:	4.5.7

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

Note: See TracTickets for help on using tickets.

Download in other formats: