Why CKEditor automatically remove html elements, attributes, styles and classes ?

Why CKEditor automatically remove html elements, attributes, styles and classes ?

Hello friends, today i tell you why CKEditor automatically remove html elements, attributes, styles and classes and how to solve it.

source

Whenever you want to change the code using source button for how it is fit in design view, you face that your all elements, attributes, styles and classes are removed automatically which is you add before. This is caused by Advance Content Filter. Advance Content Filter (ACF) is a core feature of CKEditor that filters incoming HTML contnet by transforming and deleting disallowed elements, attributes, classes and styles. If you paste content into CKEditor and notice that some elements are removed, then chances are high that it was removed by ACF.

By default, ACF works in automatic mode. It means that out-of-the-box CKEditor will only allow content that was defined as allowed by enabled editor features (buttons, plugins).

For more information you can visit  Advance Content Filter.

Now i will show you how to dissable Advance Content Filter in CKEditor.

For disallow ACF in ckeditor open config.js file. You can find config.js in ckeditor root folder. Open config.js in any your favourite text editor.

After opened it you can see CKEDITOR.editorConfig function and some bounch or code it written here.

For dissable Advance Content Filter you write following code in cofing.js

        config.allowedContent = true;

You can write this code inside CKEDITOR.editorConfig function and outside CKEDITOR.editorConfig function both. I read some blogs on internet and get that write this code in inside editorConfig functin but still my issues is not solve but after wtite this code inside and outside editorConfig function it will work fine for me.

After write this code save config.js file and refresh you CKEditor page.

Your issue is solved and it will work fine.

You can find some more information for allow and disallowed content

Disallow inline styles

        // Disallow setting borders for images. '*' is used as a 

           wildcard.

           config.disallowedContent = 'img{border*};

Disallow attributes

        // Disallow setting a target for links.

           config.disallowedContent = 'a[target]';

Disallow inline styles and use attributes instead

        // In case of disallowing width and height styles, CKEditor 

           will use attributes instead.

          config.disallowedContent = 'img{width,height}';

Specify all allowed tags manually

        // Example: Allow <u>, <em>, <strong>, <ul>, <li>, <a>.

        // For <a> elements, "href" attribute is required and 

          "target" is optional.

          config.allowedContent = 'u em strong ul li;a[!href,target]';

I hope i solved your query. Feel fre to comment and don't forget to like.