Opened 3 years ago

Closed 3 years ago

#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 3 years ago.
build-config.js (2.0 KB) - added by cstsang 3 years ago.
config.js (1.4 KB) - added by cstsang 3 years ago.

Download all attachments as: .zip

Change History (4)

Changed 3 years ago by cstsang

Attachment: def.html added

Changed 3 years ago by cstsang

Attachment: build-config.js added

Changed 3 years ago by cstsang

Attachment: config.js added

comment:1 Changed 3 years ago by Jakub Ś

Resolution: invalid
Status: newclosed
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.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy