Bind inner text/html (like div, p, h1) to Trait
changes in the canvas What kind of changes? How would you like to change the tag of the element in the canvas?
Read full answer below ↓Question
Hi! I've created a custom trait, and I want to be allowed to change the content of the tags (in this case it's a H1 tag) based on the trait values..
It would be awesome if it can be bi-directional; changes in the traits panel will update the canvas and also changes in the canvas would update the input in the panel.
I've tried a lot of approaches with no success at all.
Do you have any clue?
Answers (3)
changes in the canvas
What kind of changes? How would you like to change the tag of the element in the canvas?
No, i want to change the content.
for example
<p> $CHANGE_THIS </p>
onUpdate function in the custom trait definition allows you to update the input as you wish (in the example you see how the component parameter is passed and used to update the trait value)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3279
how to make textnode editing update component content?
I'm building a custom textarea component and want it to behave like the built in text component such that editing the textnode on the grape...
Issue #906
[Question]How to change custom component content (html) from ajax?
Hi @artf, First of all thanks for this awesome plugin. Can you please let me know how i can update/change block content? I created custom b...
Issue #2404
Question: how to observe children changes in component
Is there an easy way to subscribe/listen to changes in the components/children of my custom component type? Perhaps an event I can subscrib...
Issue #2193
[QUESTION] Reset trait on edit the content of a custom component
Hi, I have a custom component which content can be changed by switching trait select options, but also can be edited similar to the text co...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.