Issue #2322💬 AnsweredOpened October 11, 2019by dukie662 reactions

What is protectedCss option ? How to use it?

快速解答by jcarizza1

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

Read full answer below ↓

Question

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

Answers (3)

jcarizzaOctober 11, 2019

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
            ]
        }
    }
jcarizzaOctober 15, 2019

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

dukie66October 14, 2019

@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' ] },

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.