What is protectedCss option ? How to use it?
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)
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
]
}
}
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.
@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.
Issue #1662
How we can reinitialise editor
Hi @artf, Hope you are doing good. How we can reinitialise the editor with json data. We want to reinitialise editor with some of the previ...
Issue #2012
[question] how to add script for all widgets(like protectedCss)
I want to add some functions for all components accessible. when initialize editor, there is a option like protectedCss. Isn't there a way...
Issue #2170
[QUESTION] Custom component - how to set editable to true
Hi, I've created a custom component type, but I am having some trouble making it editable. The component is a "span" with component type "t...
Issue #1780
How to change extra dropdown for link change trait
Hello @artf , I want to give one more functionality to user like user can change any link with default links drop down. In above image i wa...
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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.