I try to convert a div tag into something I can drag and drop in CKEditor (as asked in another question).

Do you know how I can trigger the event when someone switches between source view and WYSIWYG mode?

I try to convert a div tag into something I can drag and drop in CKEditor (as asked in another question).

Do you know how I can trigger the event when someone switches between source view and WYSIWYG mode?

• javascript
• ckeditor
• dom-events

4 Answers 4

I think this is what you are looking for:

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.on('mode', function(e){
        // Do your stuff here
        alert(e.editor.mode);
    });
}); 

If you mean, you want to capture source mode changes , then you could try something like this:

//add this to your CKeditor’s config.js
$('textarea.cke_source').live('keyup', function() {
  $(this)
    .closest('.cke_wrapper')
    .parent()
    .parent()
    .prev()
    .ckeditorGet()
    .fire('change');
});

This discussion might help as well: ckEditor Hope it helps

CKEditor onChange plugin:

Get a notification (new event) whenever the content of CKEditor changes.

http://ckeditor./addon/onchange

I think you should write a plugin to make a fake element for the wysiwyg-view.

Ckeditor is able to recognize elements that need to be replaced with fake-elements.

I made a start for you:

(function() {
    CKEDITOR.plugins.add('myPlugin', {
        requires : ['fakeobjects'],
        init: function(editor) {
            var me = this;
            var pluginName = 'myPlugin';
            editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
            
            editor.addCss( // your custom css for your placeholder here
                'div.myPluginElement' +
                '{' +
                    'border: 1px solid #a9a9a9;' +
                    'width: 70px;' +
                    'height: 50px;' +
                '}'
            );
        },
        afterInit : function(editor) {
            var dataProcessor = editor.dataProcessor,
                dataFilter = dataProcessor && dataProcessor.dataFilter;

            if (dataFilter) {
                dataFilter.addRules({
                    elements : {
                        div : function(element) {
                            if (typeof element.attributes['class'] !== 'undefined' && element.attributes['class'].indexOf('myPluginElement') != -1)
                                return editor.createFakeParserElement(element, 'myPluginElement', 'div', false);
                            else return;
                        }
                    }
                });
            }
        }
    });
})();