Grapesjs: [QUESTION] Add default Trait (attribute) to model for all HTML Components (elements)

[kewilson]

Hi,

I've read the Traits, Components and API wikis, grepped all the open & closed issues. I've even found the code where you are creating the defaults (ID, Title, Alt) you have today. There have been similar questions asked but none answer the question at hand.

For every HTML component I want to add another default attribute (trait) in addition to the predefined default attributes (ID, Title, Alt, etc.). This includes adding the new trait to flexboxes, divs, inputs, images, etc. so that when Settings is selected we see (using the text type as an example):

ID [Placeholder Text]
Title [Placeholder Text]
CrazyAttribute [Placeholder Text] <<<==== Example new default attribute (trait)

Per some replies to issues as well as your Traits wiki page the trait examples all center around adding a new component which I do not want to do, I want all existing components to inherit the new attribute even if they don't have one today.

It isn't clear to me from the examples shown in the Traits wiki on how I would simply add another default trait to the model so that it applies to all components.

E.g.,

...

Any guidance would be greatly appreciated.

Thanks!

[ryandeba]

Hi @kewilson,

You've got a few different approaches for how to accomplish this...if every single component needs this custom trait, then I would probably override the initialize method of the default component type and add it there. Something like this:

var defaultType = editor.DomComponents.getType("default");
var _initialize = defaultType.model.prototype.initialize;
defaultType.model.prototype.initialize = function() {
    _initialize.apply(this, arguments);

    this.get("traits").add({
        type: "input",
        label: "Crazy Attribute",
        name: "data-crazy"
    });
};

Alternatively, you might be able to get away with just adding your trait the component defaults:

editor.DomComponents.getType("default").model.prototype.defaults.traits.push({label: "Crazy Attribute", name: "data-crazy"})

[kewilson]

Hey @ryandeba thanks so much for the suggestions. I put in the second one and it works for, well, the defaults as you would expect. Blocks like link, image, input just to name a few it doesn't add the attribute but those must be classified differently. Nonetheless an all around success in my book.

Thanks again much appreciated.

[josefph]

@kewilson could you help me adding another default trait in a specific component?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.