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
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 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.
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;
}
}
});
}
}
} );
}) ();
CKEditor onChange plugin:
Receive a notification (new event) whenever the content of the CKEditor changes.
http://ckeditor.com/addon/onchange