Clever Geek Handbook

CKEditor capture / event activated when switching to / from source view

I am trying to convert a div tag to something I can drag and drop into CKEditor (as asked in another question). Do you know how I can trigger an event when someone switches between original view and WYSIWYG mode ?

Thanks,
-lony

+3


source to share


4 answers


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);
    });
});
+5


source


If you mean you want to commit the source mode changes, then you can 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.

0


source


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

Ckeditor can recognize items that need to be replaced with fake-elements

.

I started 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;
                    }
                }
            });
        }
    }
} );

}) ();

0


source


CKEditor onChange plugin:

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

http://ckeditor.com/addon/onchange

0


source






More articles:


All Articles