When the component's view modifies the HTML, text components are no longer editable
I tried the above, as follows: But I'm still unable to edit the text in the h1 and p elements after dropping the component on the canvas. :(
Read full answer below ↓Question
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also want to modify the HTML in the view (to add some content that I want shown in the editor but not in the saved HTML). I tried something like this: The issue is if I modify the render() function as above, the text components in the Text section (the h1 and the p) can no longer have their text edited by double-clicking on the text. Is there a better way to do what I want to do? Thanks!
Answers (3)
I tried the above, as follows: But I'm still unable to edit the text in the h1 and p elements after dropping the component on the canvas. :(
Sorry I didn't notice this you basically remove elements with models and attach a new string as HTML (the editor can't access their models anymore). If you want to add a new component you should do it via models (eg. view.model.append('<div>stuff</div>'))
You can extend the Text Component instead of the base one
const defaultType = comps.getType('default');
const textType = comps.getType('text');
...
view: textType.view.extend({ ...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #701
Modifying a component in the editor clears the model content
What I'm trying to achieve: I have special "data-" attributes on some of the components I pull into the editor. When one of these is modifi...
Issue #1030
[Question] Firing events with custom components
I'm trying to build a plugin for Grapesjs with some custom components, and I'm having trouble with triggering events and interacting with t...
Issue #1912
[QUESTION] Custom component default children
Hi, I am trying to understand how I can achieve the following.Create a component with a default content as children.Create a block to add t...
Issue #486
Custom Component not editable and also after traits update canvas does not update
below is code i used for traits and custom section but after adding component via block, cannot edit text or trait update does not update c...
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 →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.