Update styleManager properties on drag and resize
Question
I need to see in real time the update of the properties of the component in the styleManager when I drag or resize a component (or in some other way that changes its style properties).
I've managed to see width and height running this:
editor.on("styleManager:change:width styleManager:change:height", (response) => { editor.trigger("component:styleUpdate"); });
Now, i need something like this to see the component position (top, bottom, left, right) and the font-size (then maybe something else), i'm tried other things like editor.trigger("component:toggled"); and StyleManager.render(), but it's not the way...
Any suggestions?
Answers (1)
Duplicate of #2374
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2587
Custom component, Need 4 Columns at a time when I drag
Hello @artf, I have created custom component, where I need to display 4 columns with specific style when I drag a component to the canvas a...
Issue #2207
[BUG]: Can't drag component if there is some space on top/left with Mode Absolute
Given the following code example... Results in no ability to drag and drop elements to correct position using drag icon on the panel. See F...
Issue #599
Set Device Height along with Device Width
Hi I want to add new devices with both width and height, Is there any way I can do this? An other issue is that when I give width of device...
Issue #3404
Style Manager Issue.
Hi @artf I want to hide and show style properties for specific component. After referencing this issue https://github.com/artf/grapesjs/iss...
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 a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.