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
How to Build an AI-Powered Page Builder with GrapesJS in 2026
What we learned building GJSDocs β from simple AI text generation to structured, context-aware visual editing
Tutorial
How Much Does It Cost to Build a SaaS Page Builder in 2026?
How much does it cost to build a SaaS page builder in 2026? Explore realistic development costs, timelines, features, and how using GrapesJS can reduce
Tutorial
PageKit: the GrapesJS application you'd have to build anyway
A source-available Next.js app around the open-source GrapesJS core β publishing, custom domains, leads, checkout and a plugin loader.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.