Trait to change the inner html of specified item

[LamaYouzghatli]

Can I change the content (innerhtml) of component using trait?

[sandenson]

Not exactly. What you can do, as an example, is listen to the change event of the trait and make it call a function which will manipulate the component's inner HTML. That can either be the component's script or a function made by you. Here are two examples:

Example 1

editor.DomComponents.addType('your-component', {
  model: {
    defaults: {
      traits: [
        {
          name: 'traitName',
          label: 'Trait label',
          changeProp: 1,
        },
      ],
      script: function () {
        const traitValue = '{[ traitName ]}';
    
        this.innerHtml = traitValue;
      },
    },
  },
  isComponent: .....,
  view: defaultView.extend({
    init({ el, model }) {
      this.listenTo(model, 'change:traitName', this.updateScript);
    }
  });
}

Example 2:

editor.DomComponents.addType('your-component', {
  model: {
    defaults: {
      traits: [
        {
          name: 'traitName',
          label: 'Trait label',
          changeProp: 1,
        },
      ],
    },
  },
  isComponent: .....,
  view: defaultView.extend({
    init({ el, model }) {
      function updateHTML () {
        el.innerHTML = model.gettrait('traitName').attributes.value;
      }
      this.listenTo(model, 'change:traitName', updateHTML);
    }
  });
}

Example 3:

editor.DomComponents.addType('your-component', {
  model: {
    defaults: {
      traits: [
        {
          name: 'traitName',
          label: 'Trait label',
          changeProp: 1,
        },
      ],
    },
  },
  isComponent: .....,
  view: defaultView.extend({
    init({ el, model }) {
      this.listenTo(model, 'change:traitName', () => {
        el.innerHTML = model.gettrait('traitName').attributes.value;
      });
    }
  });
}

This was made assuming that the trait's value is the new HTML, but it serves as a basis for any kind of operation that you might want to do.

[stljeff1]

You have to create a custom trait, then specify how to update html when the trait is updated.

start here: https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type

Here is a snippit of some experimental code i did a while back

    editor.TraitManager.addType('product-price', {
        
        onEvent({elInput, component, e}) {
            
            const attrs = component.getAttributes();
            const priceEl = component.find('.product-price');

            if(priceEl.length) {
                priceEl[0].attributes.content = attrs['product-price'] || ''; 
            }
        }           
        
        /*,
        onUpdate({elInput, component}) {
                    // this is where you would update the trait value from the component's markup
        }*/

    });

again, this was something i started but didn't finish, so no guarantees here