✓ Solved: How to apply traits to components used for…

快速解答by artf❤ 2

currently there is a problem on storing custom types unless they are defined inside a plugin. Not a problem 😬, you just need to load custom types before the content and using plugins is the only wayI can't add all possible such elements as plugins https://jsfiddle.net/artur_arseniev/9tg0a36c/

Read full answer below ↓

Question

I am using

        this.gjs.DomComponents.addType('some-name', {
            isComponent: (el: HTMLElement) => {
                let isCmp = false;
                if (el.attributes) {
                    isCmp = el.attributes['some-attribute'] !== undefined;
                }
                return isCmp;
            },
            model: {
                defaults: {
                    traits: [
                        {
                            type: 'select', // Type of the trait
                            label: 'Trait label', // The label you will see in Settings
                            name: 'some-attribute', // The name of the attribute/property to use on component
                            options: myItems.map(x => ({ id: x.id, name: x.name }))
                        }
                    ],
                    // As by default, traits are binded to attributes, so to define
                    // their initial value we can use attributes
                    attributes: { 'some-attribute': '' },
                },
            },
        });

This works but only for blocks which are added/drag-dropped to the editor manually after it is initialized. If we supply components when we call grapesjs.init({..., components: [..]}), the components defined in components do not have the traits. How can we apply traits to initially loaded components too, not only to these added later manually ?

Answers (3)

👍 Most helpfulartf• December 14, 2019

currently there is a problem on storing custom types unless they are defined inside a plugin.

Not a problem 😬, you just need to load custom types before the content and using plugins is the only way

I can't add all possible such elements as plugins

https://jsfiddle.net/artur_arseniev/9tg0a36c/

varadero• December 12, 2019

This is how it can be reproduced:

Go to https://jsfiddle.net/nwsy6mv1/3/
Open blocks and place "1 Column" block
Click inside the column and go to "Settings"
You will see the drop-down trait with label "Trait label"
At this time the grapesjs components are saved in the local storage because it is configured as storageManager: { type: 'local' }
Refresh the browser so grapesjs will load components from the local storage
Click on the column and go to "Settings"

What happens: The settings panel now contains only the default traits but not the one specified in the code. Now if you add manually another "1 Column" block and click on its settings - you will see the trait. If you keep refreshing, every trait specified will not be available for "initially loaded" components - it will be available only for these manually dragged-dropped into the grapesjs editor.

An animated gif: