Issue #546💬 AnsweredOpened November 20, 2017by krunal0391 reactions

Inline css to class

快速解答by artf1

If you grep forceClass you will see that it does just one thing https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Components.js#L77 so when you add a new component and there is a not empty style attribute, all its properties will be moved into new class, so I apologize, probably have to change its nam...

Read full answer below ↓

Question

@artf thanks for amazing project, it mad site editing much easier.

by default editor convert inline css to class but is there setting not to convert inline css to class as we do not want to convert it to class?

Answers (3)

artfDecember 1, 2017

If you grep forceClass you will see that it does just one thing https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Components.js#L77 so when you add a new component and there is a not empty style attribute, all its properties will be moved into new class, so I apologize, probably have to change its name as seems to confuse a lot of people

For the newly proposed option, I was thinking about something which just brings back #ids styles inside the component style but if we're talking also about .classes, well, I don't think we need this kind of feature inside the core. So, If you need to inline all your styles, just use juice as I did here https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/openExportCommand.js

@ryandeba editor.runCommand('gjs-get-inlined-html') :)

artfNovember 21, 2017

Have you tried with forceClass?

grapesjs.init({
     ...
     forceClass: false,
})
francesca-cicileoNovember 21, 2017

I am also looking to do the same thing, but setting forceClass to false does not seem to work.

I made a minimal JSFiddle here that tries to use inline css instead of classes, but the editor always moves the styling into classes, even with forceClass set to false. Am I missing something?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.