search

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.38k stars 4.06k forks source link

What is protectedCss option ? How to use it? #2322

Closed dukie66 closed 4 years ago

dukie66 commented 5 years ago

I want to give some default style for some elements. Is there any option for doing that?

jcarizza commented 5 years ago

Hello @dukie66 one way to add default styles is adding a stylesheet in the initilalization of GrapeJS. This will load inside the canvas the stylesheet


    const editor = grapesjs.init({
        container : '#gjs',
        canvas: {
            styles: [
                "http://path.to/style.css
            ]
        }
    }
dukie66 commented 5 years ago

@jcarizza Thanks for commenting. If you see when you export canvas there are always some default styles for "body" and "*". Like that, I want to give my all "img" element width of 100%. Putting an external css file in the canvas option is not working for me. Maybe I'm doing something wrong. canvas:{ styles:[ './css/canvas.css' ] },

jcarizza commented 5 years ago

Its neccessary to write the full URL to load the CSS stylesheet.

canvas:{ styles:[ http://yourdomaon.com/css/canvas.css' ] },

or 

canvas:{ styles:[ 'http://localhost:8000/css/canvas.css' ] },

Here is an example using protectedCss. Checkout your CSS rules in case you are misspelling something.

https://codepen.io/jcarizza/pen/rNNeQvG