Inline style loads on id instead of class
Question
Hello,
I have been using your tool for a while and I decided to upgrade to a newer version(from v0.12.37 to v0.16.3 + gjs-preset-newsletter). I have the styles stored inline, I know it is not desirable, but since we use the tool for authoring emails, it is still a safer option.
Is there a way to load inline styles on the class, if the component has a class already set(as it used to be in older versions)?
I have a JSfiddle example here: https://jsfiddle.net/Lo91v0um/1/
Hence, in my case, I have the following component:
<div style="font-size: 20px;" class="my-class" >A text component</div>
If I select the component, the selector is shown to be class "my-class", but the style is added to the id. When editing the component's font-size it would be added to the class and the changes would not be visible because they are overwritten by those already set on id.
I tried adding avoidInlineStyle, but this added one extra class for each component at every editor load, and that was not the desired behavior.
Is there any way I can still achieve the old behavior? (prior to 0.14.40)
Thank you very much! Lavinia
Answers (1)
I'd suggest using this option
grapesjs.init({
...
selectorManager: {
componentFirst: true,
},
})
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3069
BUG: Style gone on link or nested text elements after exiting edit
Hello, I am editing legacy HTML with version 0.16.3 + newsleter-plugin. The style is stored inline (since the tool is used for authoring em...
Issue #3053
Allowing user to add a global stylesheet to canvas dynamically
Hi, I wanted to provide the user the option to load a custom stylesheet to the canvas. This is so that the user can apply the custom define...
Issue #2738
[QUESTION] Keep Hover state when amending the child
I'm trying to edit a dropdown list option, and it's quite difficult to style it because you cannot move your mouse to the Style Manager sin...
Issue #913
[Question] Using Style tag instead of css
Hi, I've been taking a look inside of the dom_components, but cant seem to figure out how to manually override the styling aspect. I need a...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.