Can I develop my own stylemanager and bind the properties conveniently?
Question
I want to build my own stylemanager useing some UI framework like Element-UI to make a beauty UI quickly. But how can I bind the properties to a selected component? I didn't see any API like setProperties to an element... . Can you help how to do that, thank you very much!!!
Answers (3)
#2296 This might help you!
I guess something like this should work, if you need to create the Style Manager from scratch
let targetsToStyle = [];
const eventToListen = 'component:toggled component:update:classes change:state change:device';
const sm = editor.StyleManager;
editor.on(eventToListen, () => {
targetsToStyle = editor.getSelectedAll().map(cmp => sm.getModelToStyle(cmp));
// Loop through selected targets and update inputs (depends on your framework of choice)
targetsToStyle.forEach(target => {
const style = target.getStyle();
// ... update inputs
})
});
// On some element change (depends on your framework of choice)
myBgInputElement.onChange((newBgValue) => {
targetsToStyle.forEach(target => target.addStyle({ background: newBgValue }))
})
@artf That is totally what I need! Thank you very much!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3231
BUG: how to change gjs-ckeditor-format component
hi guys, we all know that gjs-ckeditor-plugin working with [data-gjs-type]="text" components. I wanna know , could we change this option? I...
Issue #2461
How to apply style or trait to parent or child element of selected component
For example i have component image that wrapped in div. I want to style image with multiple properties(horizontal position, border-radius,...
Issue #2170
[QUESTION] Custom component - how to set editable to true
Hi, I've created a custom component type, but I am having some trouble making it editable. The component is a "span" with component type "t...
Issue #2388
[Question] - How to import styles from <link> to be rendered when dragging block to canvas
My situation: I'm slowly importing some of my custom made UI components in ReactJS to GrapesJS. Now, I am able to render the component prop...
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.