Custom html DOM changes does reflected when saving changes to database
Be sure to use the latest version and try to call sync:content on selected component before calling the desired command, eg.
Read full answer below βQuestion
I created new toolbar option called text-align using following code In order to make above code work, I added following function into grapes.js file : Due to above code, my changes working in the editor in UI refer: I am getting html of editor using following code : Now, the issue is, in the HTML got using above command, I don't see my formatting changes done using above code. Please help me to fix this issue. Due to this, I can't save changes done using text-align feature into database
Answers (3)
Be sure to use the latest version and try to call sync:content on selected component before calling the desired command, eg.
editor.getSelected().trigger('sync:content');
editor.runCommand('gjs-get-inlined-html')
@artf, Thanks for the answer. I tried with that but unfortunately not working. I am getting that using following code: I already did this but nothing happens. Please correct me if something wrong. Again, highly appreciate your help on this.
@jadejahardipsinh grapesjs version?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3218
How to add new HTML element with inline styles?
I would like to add a new HTML element, with inline styles, around the rte.selection(). With the following example, the HTML is OK, but pro...
Issue #2189
How to add "Ordered/Unordered List" option in rte/custom block
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled wit...
Issue #1661
I've created html table and cannot drag new elements to table cells
Hello. if I create html table with next block of code, everything works, I'm able to drop a Quote, for example, to any cell: But next code...
Issue #698
Editor.getSelected().toHTML() is not consistent
Hi everyone, I created a new component type, 'html-block', which is a component in which you can add your html code. I added an 'Edit' butt...
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.
Tutorial
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps β a beginner-friendly 2026 comparison
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners β this post is for you.
Tutorial
How We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.