Hi there,
this topic was discussed many times, however I couldn't really find up-to-date 4.4-related information.
I have a widget that creates a table with a width attribute. Unfortunately CKEditor transforms this attribute into a CSS rule and moves it into an inline style attribute. This is a real problem here, because we use CKeditor to create HTML emails.
CKEDITOR.plugins.add('emailgrid', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('emailgrid', {
requiredContent: 'table(block-table)',
template:
'<table class="block-table" width="640">' +
' <tr><td>' +
// more template code
' </td></tr>' +
'</table>'
});
editor.filter.allow('table(!block-table)[width]', 'emailgrid', 1);
}
});
This produces markup like <table class="block-table" style="width: 640px"> even though I explicitely allow table(!block-table)[width] and do not allow table[style].
Is there any way to disable this transformation in this special situation or (even better) globally?
I think that the answer could
I think that the answer could be found in the addTransformations method documentation which I recommend to read, but I'll try to explain this case here. The algorithm which applies transformations checks the transformations rules in the order in which they were defined. The first rule which matches is applied and the rest is skipped.
This is how the table plugin adds rules - https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/table/plugin.js#L25-L27.
As you can see, the first one checks whether `table{width}` is allowed and if that's true, the `sizeToStyle` rule is applied. This means that in order to disable this rule, you would need to disallow `table{width}` which is allowed by the table plugin (which I guess you use). For example this works for me:
CKEDITOR.replace( 'editor1', { extraAllowedContent: 'table[width]', disallowedContent: 'table{width}' } );That's the easiest solution, but it may not be applicable in some cases (e.g. if you want to allow styles and attributes at the same time). There are of course more options, like modifying the table plugin, or changing the rules it registers on the fly, but for you it may be easier to use the filter.addElementCallback method to disable filtering on your table element:
var editor = CKEDITOR.replace( 'editor1' ); editor.on( 'pluginsLoaded', function() { editor.filter.addElementCallback( function( el ) { if ( el.name == 'table' && el.hasClass( 'block-table' ) ) return CKEDITOR.FILTER_SKIP_TREE; } ); } );Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
The table plugin, that's it.
The table plugin, that's it. Thank you for your detailed explanation.