[SOLVED] [QUESTION] Function to refresh DOM tree after component changes
Question
Hello. I am developing a site using this amazing software. Now, I am customizing the editor and I have found a task that I am not be able to carry on. I am using the ckeditor plugin and it works as expected. In the ckeditor toolbar I have the option of insert images inline the text. It works well, but the problem is that I would like GrapesJS to recognize this image as a component (I have also a image component and block in GrapesJS) as usual when the edition of the text has finished for example. The idea is to refresh de component DOM (if posible) after the edition (with the image inserted by ckeditor) has finished. I have searched through the API but I haven't found any function that refresh the component DOM so the GrapesJS is aware of the image component. As final point, if I save the content to the database and load again, the GrapesJS loads the whole DOM and the image is then a GrapesJS component. Is there a function to refresh the component tree by component? The same problem happens if I insert paragraphs on ckeditor and have paragraphs as component on GrapesJS. Paragraphs are recognized as components after save on database and load again.
Thanks in advance.
Answers (2)
I have already solved my problem.
The key code is the event "rte:disable" that is fired when the Rich Text Editor (rte) is closed.
And another important thing is that the content that it has been edited is not in the component model, only in its view, so you have to refresh the model with that content.
The relevant code is:
`editor.on('rte:disable', (componentView) => {
const model = componentView.model;
const innerHTML = componentView.$el[0].innerHTML;
const contentModel = model.get('content');
if (contentModel !== innerHTML) {
model.set('content', innerHTML);
const html = editor.getHtml();
const css = editor.getCss();
editor.DomComponents.getWrapper().set('content', '');
editor.setComponents(html);
editor.setStyle(css);
}
});`
I hope this helps other people..@qtarant check out #2537 comment Cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1150
[Question] Get Uploads as Base64
Hello All, I need help integrating this into a web app that I have. Everything renders and works as expected but I am trying to get the upl...
Issue #3018
Page refresh preventing after click on import
Version: 0.15.9 Are you able to reproduce the bug from the demo? Yes What is the expected behavior? Don't refresh the page after clicking o...
Issue #2337
[BUG / QUESTION] Deleting default styles does not work
Hello, i'm trying to delete some of the default styles of the blocks. I wrote everything I changed in a plugin. I used this function to upd...
Issue #1493
[QUESTION] render() works on the first time but not on subsequent calls
Hello, I've created a custom component that shows images using background-image on a <div> instead of using an <img> element. It's mostly w...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.