Inline css to class

[krunal039]

@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?

[artf]

Have you tried with forceClass?

grapesjs.init({
     ...
     forceClass: false,
})

[francesca-cicileo]

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?

[krunal039]

@artf it does not work.

[arthuralmeidap]

You have two options:

• The grapesjs-preset-newsletter plugin provides this functionality. You can install it and be happy

• Use the juice library to combine the css and html. You can get the html and css from the editor using: editor.getHtml() and editor.getCss()

[blackbirdzzz]

@arthuralmeidap I use this technique actualy and @francesca-cicileo forceclass doesn't work ,

Please @artf is it possible to add . to roadmap an option that will disable every default editor convert inline css to class css ? Thanks again if you can do this that will help everyone haha or maybe just debug the forceclass.

[artf]

@blackbirdzzz Ok I can add some new option to the Roadmap but I'm not sure if I got exactly about what class you're talking about. I mean if I look at @francesca-cicileo's example I don't see any class there. In the exporter, I just put the inlined style inside an id rule (just to make the code cleaner), do you want to see that style inlined?

[blackbirdzzz]

@artf the new option to add to the roadmap is a possibility .to disable the auto class and id that replace every css inline in the code with this everybody will be enable to get the code clear withtout using juice thats not really great to convert class and id into inline css to be more understandable i'm will two exemple :

With the feature of the roadmap my code that i drop into my work space :

<span style="text-transform: uppercase;">this is a test </span>

Actualy without the feature of the roadmap :

<span id="c47854">this is a test </span>

If you didn't understand again tell me haha , but this feature will save a lot of time to people i think cause juice will not clear all your code as you want.

Thanks a lot

[blackbirdzzz]

Also @artf i just wanted to know why at every auto class generated there is some useless css like :

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;color:rgb(0, 0, 0);max-width:100%;height:auto;border-top-width:initial;border-right-width:initial;border-bottom-width:initial;border-left-width:initial;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;

The auto css generate all of this instead of just generate color: rgb(0,0,0) is there a way to disable all of this useless css generated also or add a feature to the roadmap Thanks a lot.

[francesca-cicileo]

Hi @artf, I believe we are both looking for a flag that forces all styling to remain inline, instead of creating classes and id rules. Is this not what forceClass is supposed to do? In my JSFiddle example, the line <div style="color: blue;">Has style</div> is converted to <div id="c150" >Has style</div>. forceClass is set to false in this example, so we expected the style to remain inline, but instead it was moved to an id rule.

I think @blackbirdzzz would like the functionality of the grapesjs-preset-newsletter plugin as a flag in the editor's initialization. The grapesjs-preset-newsletter plugin provides the functionality that we are expecting forceClass to have.

[blackbirdzzz]

Yeah we need to add to road a feature like "RemainInlineCss: true or false" that will work for disable style inline transform by : id="c50,,," or class="c400.."

[ryandeba]

I am also interested in this functionality. I'm trying to test this out with the grapesjs-preset-newsletter plugin as mentioned in these comments but I'm not seeing it working as desired. Starting with the demo, I cleared out all of the existing content, then dropped in the "1/2 Section" block, then called editor.getHtml(), and this is my result: <table class="c3445"><tr><td id="c3457"></td><td id="c3461"></td></tr></table>. I was expecting to see inline styles on the table and td elements...am I doing something wrong?

[OverFlow636]

also having this issue, but from importing content from objects, not html

with forceClass: false, it works for the initial import, but as soon as i select the component inside the editor, the inlined styles are added to the existing class which breaks all the other things sharing the same class. additionally multiple id selector styles are added to the css export after selecting the element, the styles from the id selector are added to the class that exists on the component.

with forceClass: true or omitted inlined styles are converted to new classes which is ok (does not break other components), but i need them to stay inline

[artf]

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') :)

[blackbirdzzz]

Thanks for you answer i think this is what i want : ''For the newly proposed option, I was thinking about something which just brings back #ids styles inside the component style''

If you do this , this will end my project :!) And everything that i want will work good !:)

[blackbirdzzz]

@artf so did you add this issue to the roadmap ?

[artf]

@blackbirdzzz as I said I don't want to inline classes (as you suggested here) For anyone interested in style inlining, just create a command like this https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/openExportCommand.js

I close this as, currently, I don't see any value in adding a feature for style inlining (as a solution, outside of the core, already exists)

[blackbirdzzz]

I was talking about this:

For the newly proposed option, I was thinking about something which just brings back #ids styles inside the component style but ...

I'm interested about this feature can you do it you think ? Please

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.