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

Question

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., <section class="flex-sect" CrazyAttribute="SomeValue"> ... </section>

Any guidance would be greatly appreciated.

Thanks!

Answers (3)

ryandeba• February 6, 20183 reactions

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• February 7, 20180 reactions

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• March 8, 20180 reactions

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

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

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

Question

Answers (3)

Related Questions and Answers

[Question] Add custom html inside canvas

[Question]: Add a select-option to toolbar

[BUG] Custom Trait documentation example doesn't work

Hide Trait Element

Paid Plugins That Match This Issue

Browse Plugin Categories