Issue #1374💬 AnsweredOpened August 22, 2018by emilsedgh1 reactions

Default Component Properties

快速解答by jereddanielson1

@artf FYI that doesn't exactly work as needed. Updating the default component's default properties does not take effect for already-defined components (such as built in table, textnode, et. al.) because they have already extended the default model. Updating the default component would only change the default behavior...

Read full answer below ↓

Question

Is there any way I can change the default properties of components?

I want almost everything to be copyable: false, resizable: false, draggable: false unless the loaded component specifically provides a data-resizable=true.

So basically I want to whitelist some components to enable these instead of blacklisting.

Is it doable?

Answers (3)

jereddanielsonSeptember 11, 2018

@artf FYI that doesn't exactly work as needed. Updating the default component's default properties does not take effect for already-defined components (such as built in table, textnode, et. al.) because they have already extended the default model. Updating the default component would only change the default behavior for any new models that further extend the new default model definition.

In order to update all components, including existing and built ins, to have the desired default properties, I had to iterate over them all and update them one by one. This resulted in the desired (for me) behavior of establishing across-the-board default properties.

// Update all component model default properties
const allComps = editor.DomComponents.componentTypes.slice();
for (let i = 0; i < allComps.length; i++) {
    editor.DomComponents.addType(allComps[i].id, {
        model: {
            defaults: {
                copyable: false,
                resizable: false,
                draggable: false,
            }
        },
    });
}
artfSeptember 15, 2018

@jereddanielson correct, this is how you should do to update also already defined component types. Thanks for pointing this out

Related Questions and Answers

Continue research with similar issue discussions.

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.