Add classes dynamically on elements

[Darth_Vladus]

Hi everybody, I have found a problem with element and classes.

I want to add a class in my checkbox with the attribute "classes", but it doesn't work. I'm setting up a class on some elements, as an example when I add a checkbox. Then, I switch to Source code and my new checkbox has a class "required". But, when I switch back to WYSYWYG and then to Source code again, the attribute class disappear.

To solve my problem, I need to edit "ckeditor.js" on line 730 checkbox:"input[type,name,checked](required, etc...)".

I've attached some screenshots to this post.

On action 'InstanceReady', I'm scanning the list of "allowedContent" to find my checkbox item and I setting up a new attribute and classes like "required".

CKEDITOR.on('instanceReady', function() {
                if (!Browser.ie && this.textarea.parent) {
                    this.textarea.parent.setStyle('height', 'auto');
                }
                for (a in this.instance.filter.allowedContent) {
                    if (this.instance.filter.allowedContent[a].featureName == "checkbox") {

                        // readonly it s for Textfield or TextArea normaly
                        this.instance.filter.allowedContent[a].attributes['readonly'] = true;
                        this.instance.filter.allowedContent[a].classes = { 'required':true, etc...};
                       // i add more classes in real

                       console.log(this.instance.filter.allowedContent[a]);
                    }
                }
                this.load_end();
            }.bind(this));

[Darth_Vladus]

Console.log of element checkbox

[Darth_Vladus]

Add a checkbox and switch Source code

[Darth_Vladus]

See again Source code

[Piotrek Koszuliński]

The filter#allowedContent property is documented as read only - ​http://docs.ckeditor.com/#!/api/CKEDITOR.filter-property-allowedContent

You should rather:

• use config.extraAllowedContent if you're just working on integrating CKEditor with a system,
• or use editor.filter.allow( 'checkbox(whatever)', 'checkbox' ) if you're working on a plugin.