Selectively fire change events in CKEditor

ckeditor

Solution

You can always fire an event manually though it's not usually recommended. Use `CKEDITOR.event.fire`:

element.setAttribute( 'foo', 'bar' );
editor.fire( 'change' );

A better idea is to use `editor#saveSnapshot` event, which creates undo snapshots (your change becomes officially undoable, that's pretty cool) and fires `editor#change` automatically, if needed:

element.setAttribute( 'foo', 'bar' );
editor.fire( 'saveSnapshot' );

You can also interrupt existing events as they get fired and make sure no other listeners are called. Simply use `CKEDITOR.event.on` listener with low priority.

editor.on( 'change', function( evt ) {
    if ( some condition ) {
        evt.stop();
        // ...or...
        evt.cancel();
    }
}, editor, null, -999 ); // by default listeners have priority=10

See `CKEDITOR.eventInfo.stop` and `CKEDITOR.eventInfo.cancel`. They're slightly different.

It might be tricky to get why the event is fired as you click to open the dialog box (and to create the right rule), but it feels quite possible. I couldn't reproduce it though (tried latest Chrome and FF); `change` was fired only when typing or executing commands (like Bold, Link, etc.). If you provided some extra info about your setup (versions of CKEditor and the browser, editor config and the name of the dialog), it would be much easier to debug.

Problem

I am writing a plugin that uses a dialog box. I notice that clicking the toolbar button to open the dialog box fires a `change` event on the editor. Is there anyway to disable this event when opening the dialog box? The plugin modifies the content using `setAttribute()`, `removeAttribute()`, and `removeStyles()`. Is there anyway to have calls to these methods fire a change event? After more investigation, I discovered 2 issues (which I think relates to using YUI's App Framework), which might be the cause of the unexpected behaviour. To reproduce: http://jsfiddle.net/c3tqk/ Problem 1: 1. Select part of the first paragraph (`text`) and click the `Edit Link` button. 2. Select part of the second paragraph (`link`) and click the `Edit Link` button. Check the console and notice a change event is fired. Problem 2: 1. Select `ex` in the first paragraph and click the `Bold` button. 2. Deselect and select the `x` in the first paragraph and click the `Bold` button. Notice that the change event is fired twice.

Original source