How I can save dynamic text persistent on a component view?
To insert the text in the highlight paragraph selected I did this because I was losing the focus after opening a popup modal dialog:
Read full answer below ↓Question
I was trying to insert dynamic text on a component view in the HTML but when I'm saving the html hasn't got my changes. I'll try the following things:
var text = editorRTE.getSelected().view.$el[0].innerHTML;
String.prototype.splice = function(idx, rem, str) {
return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};
value = text.splice(caret, 0, value);
editorRTE.getSelected().view.$el[0].innerHTML = value;
editorRTE.getSelected().view.$el[0].focus();
editorRTE.getSelected().set('content', value.trim());
With the code above I can inject the text in the caret position (cursor position) but the method when I save the content I'm receiving the value.trim() concat with the current text that it was in the DomDocument.
I tried as well to do:
editorRTE.getSelected().view.render();
But it's showing me the same output:
This week [email protected]@ This week Special
Answers (2)
To insert the text in the highlight paragraph selected I did this because I was losing the focus after opening a popup modal dialog:
var text = editor.getSelected().view.$el[0].innerHTML;
String.prototype.splice = function(idx, rem, str) {
return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};
value = text.splice(caret, 0, value);
const domComponents = editor.DomComponents;
const component = domComponents.getWrapper().find('.gjs-comp-selected')[0];
component.components(value.trim());
editor.getSelected().view.$el[0].focus();
domComponents.render();
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
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 #1511
[QUESTION] Change the html content of the selected component
I am trying to replace the html of the basic Text componet using the below code const component = editor.getSelected(); component.set('cont...
Issue #460
When the component's view modifies the HTML, text components are no longer editable
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...
Issue #818
[QUESTION] Open different Panel's view on click text element
How can I make "click" event on texts open different panel's view than StyleManager? I'm trying this:
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.