Issue #2212Opened August 22, 2019by angelocala941 reactions

Extending default image component, resizable properties ignored

Question

I'm trying to extend the default image component.

export default function(editor) {
    editor.DomComponents.addType("image", {
        model: {
            defaults: {
                resizable: {
                    autoHeight: true,
                    keepAutoHeight: true,
                    tc: false,
                    bc: false,
                    cl: false,
                    cr: false
                },
                traits: [
                    {
                        type: "checkbox",
                        label: "Test",
                        name: "test",
                        changeProp: 1
                    },
                    "alt"
                ]
            }
        }
    });
}

I can see my "Test" trait, so I assume that the component is correctly overridden, but the resizableproperties are completely ignored.

Could anyone help me to figure out why?

Answers (3)

artf• August 27, 20191 reactions

Try to use config.avoidDefaults option as true (re-store and reload) Probably I'll set it to true by default in the next release

angelocala94• August 23, 20190 reactions
init: function() {
    this.set("resizable", {
        ratioDefault: 1,
        autoHeight: true,
        keepAutoHeight: true,
        tc: false,
        bc: false,
        cl: false,
        cr: false
    });
}

I'm able to set resizable property manually inside the component init function, but this is not the best way to do that.

angelocala94• August 23, 20190 reactions

Since the resizable property is part of the component model, the existing components (previously saved on DB) in the canvas have the old resizable settings.

This will replace your resizable configuration with the default one to all image components.

init: function() {
    this.set(
        "resizable",
        editor.DomComponents.getType("image").model.prototype
                        .defaults.resizable
    );
}

Related Questions and Answers

Continue research with similar issue discussions.

Issue #1155

Custom component used as HTML in block

I've extended the default image component Then I've got a block where I'm going to use the extended image. The following works fine. Howeve...

2 answersUpdated September 17, 2019

Issue #2839

[Question] I added one component named template in the blocks but when i try to drag another components inside this template component ,it will be dragged but after saving it removes all the components inside it. How to avoid this?

This is code of template component: I debugged it, so i got that : setComponents method in the dom_components clearing it ...but not gettin...

1 answersUpdated June 25, 2020

Issue #2697

[QUESTION] Problem with custom component type and table cell

Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn'...

3 answersUpdated April 16, 2020

Issue #3225

How to Update Style from checkbox Trait?

Hi @artf I am trying to update the style using the checkbox trait but it's not calling the function. Here is the code I really appreciate a...

1 answersUpdated January 10, 2021

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders