How to disable pasting inline styles on CKEditor?

Question

How do I disable contents for styles when pasting to CKEditor?

Overview, I'm trying to fix width styles on my DOMPdf, but inline styles pasted to CKEditor is messing up with the styles I've set up in DOMPdf.

I've applied what was posted here https://docs.ckeditor.com/#!/guide/dev_disallowed_content.

And so far, here's some of what I tried CKEDITOR.config.disallowedContent = "table(width)", CKEDITOR.config.disallowedContent = "table[style]"

But when I copy and paste from word docs or customized html strings, styles or width would still be pasted. Any tips? Thanks!

j.swiderski j.swiderski · Accepted Answer · 2017-08-21T15:09:10

First of all if you want to remove the width style from the table, you need to use: CKEDITOR.config.disallowedContent = 'table{width}';.

The rule CKEDITOR.config.disallowedContent = "table(width)" will remove the width class from the table and CKEDITOR.config.disallowedContent = "table[style]" will not do anything because styles are defined in {} and not in [].

Read more about the format of Allowed Content Rules here: https://docs.ckeditor.com/#!/guide/dev_allowed_content_rules

But when I copy and paste from word docs or customized html strings, styles or width would still be pasted.

Please open the Full preset editor sample and try bolding the text or using some inline styles from the Styles dropdown. You will see tags like strong, code, big or span etc. are being used. In order to disallow them your ACF rule would need to look like so for example:

var editor = CKEDITOR.replace( 'editor1', {
    disallowedContent : 'span;code;strong;big'
});

Please note that above rule disables span, strong, code and big tags completely in CKEditor. If you still wish to use these tags in the editor but filter content only during pasting, you should use paste events and regex to change the incoming HTML:

How to disable pasting inline styles on CKEditor?

1 Answers