Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#10341 closed Bug (invalid)

Add classes dynamically on elements

Reported by: Darth_Vladus Owned by:
Priority: Normal Milestone:
Component: General Version: 4.1
Keywords: Cc:

Description

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));

Attachments (3)

console_log_before_Add_Checkbox.png (65.0 KB) - added by Darth_Vladus 7 years ago.
Console.log of element checkbox
add_checkbox_look_source_code.png (41.3 KB) - added by Darth_Vladus 7 years ago.
Add a checkbox and switch Source code
second_look_code_source.png (32.8 KB) - added by Darth_Vladus 7 years ago.
See again Source code

Download all attachments as: .zip

Change History (4)

Changed 7 years ago by Darth_Vladus

Console.log of element checkbox

Changed 7 years ago by Darth_Vladus

Add a checkbox and switch Source code

Changed 7 years ago by Darth_Vladus

Attachment: second_look_code_source.png added

See again Source code

comment:1 Changed 7 years ago by Piotrek Koszuliński

Resolution: invalid
Status: newclosed

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.
Last edited 7 years ago by Piotrek Koszuliński (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy