JavaScript Answers

How to stop CKEditor from automatically stripping classes from div with JavaScript?

Spread the love

To stop CKEditor from automatically stripping classes from <div> elements, you can configure CKEditor to allow certain HTML tags and attributes, including classes.

This can be achieved by configuring the CKEditor instance to use a specific set of allowed content rules.

For example, we write:

// Assuming you have already initialized CKEditor
var editor = CKEDITOR.replace('editor', {
    // Define the allowed content rules
    // Here we allow <div> elements with any class attribute
    // You can customize this as needed
    extraAllowedContent: 'div(*){*};',
    // Disable content filtering
    // Note: Disabling content filtering may pose security risks, 
    // so use it carefully and consider implementing server-side filtering
    // or other security measures
    allowedContent: true

In this example, extraAllowedContent allows you to specify additional elements and attributes that CKEditor should allow.

In this case, we’re allowing <div> elements with any class attribute.

allowedContent is set to true to disable content filtering completely.

Be cautious when using this option, as it can potentially allow malicious content to be injected into the editor.

Make sure to adjust the extraAllowedContent option according to your specific needs and security considerations.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *