Question

I am trying to add a custom id attribute for each img & input elements in ckeditor 3.6.4.
So far I have added dataProcessor.htmlFilter to handle the id attribute like this

        CKEDITOR.on( 'instanceReady', function(event) {     
            var editor = CKEDITOR.instances.editor;

            editor.dataProcessor.htmlFilter.addRules(
            {
                elements: {
                    $: function (element) {
                        if ( (element.name == 'img' || element.name == 'input') && CKEDITOR.instances.editor.mode == 'wysiwyg' ) {
                            if (!element.attributes.id){
                                var g = createID();
                                alert('new id: ' + g);
                                element.attributes.id = g;
                            }
                        }

                    }
                }
            });
        });

and when I add a new textfield in visual editor I do get a new id. But if I set to the source mode the mode is still ‘wysiwyg’ and not ‘source’ and it gives a new Id.

How can I prevent the double action?

---

Did some testing. Added this

CKEDITOR.instances.editor.on('mode', function() {
            // Code to execute when the user switches editing modes
                alert('Changed to: ' + CKEDITOR.instances.editor.mode);
            });

Somehow that fires after the htmlFilter rule.

Answer 1

Went with plan B

Customized the widgets needed and added the id attribute in plugin. Was easy and fast.