Questions about some customization.
So, first things first, how can i include my own stylesheet in the iframe of the editor? You can inject styles and javascripts on init via canvas options My second problem is that i have some parts of my site that i need to show in the editor, but i don't want the user to edit them, nor to be visible in the html edito...
Read full answer below ↓Question
Hey Guys,
first thank you very much for your work, this project seems really promising. I have a few question for a website i'm building.
In my case i don't need a complete Page Builder, but only a help for the end user to create/edit pages and posts contents visually, so some parts of the page should be visible in the editor, but the final html code should not include them (like page header, page footer and other stuff).
Now after spending 2 days of trying there are some things i really don't understand. So, first things first, how can i include my own stylesheet in the iframe of the editor?
At the moment what i'm doing is looping over document.styleSheets to find the style sheet i want, after that i loop over every cssRule and save it's content to a string with cssText. Then i inject the css into the editor with editor.setStyle(). This method is actually working, problem is: 1 - it's slow (i have a lot of css to include) 2 - the css i'm injecting is actually shown in the css editor (and that's bad, i don't want the end user to see/edit the styles, and i don't want to export it since i already have it)
My second problem is that i have some parts of my site that i need to show in the editor, but i don't want the user to edit them, nor to be visible in the html editor. They should only be editable through a generale Page Setup sidebar.
My third question is: how do i create a new sidebar (i can't find any documentation about that), like the style manager or the layer manager, since i need it to create a new sidebar for some general options for the page.
I hope i was able to explain myself.
Hoping in a soon answer.
Regards and thank you.
Answers (2)
So, first things first, how can i include my own stylesheet in the iframe of the editor?
You can inject styles and javascripts on init via canvas options
grapesjs.init({
...
canvas: {
scripts: ['https://.../file1.js', 'https://..../file2.js'],
styles: ['https://..../file1.css', '...'],
}
})
My second problem is that i have some parts of my site that i need to show in the editor, but i don't want the user to edit them, nor to be visible in the html editor. They should only be editable through a generale Page Setup sidebar.
I think in this case you can try to create a new custom component similar to this
domc.addType('void-component', {
model: defaultModel.extend({
defaults: { ...defaultModel.prototype.defaults,
style: { 'pointer-events': 'none' } // you won't be able to select it
},
toHTML() {
return ''; // returns none HTML
}
}, {
isComponent: function(el) {/**/},
}),
view: defaultView,
});
And then in your templates set the type explicitly
<div data-gjs-type="void-component">
...
</div>
how do I create a new sidebar
You might want to use Panels API but don't limit yourself just to grapesjs's panels, you can create your own containers, with your styles, your animations, just put stuff inside and use grapesjs's API. From the https://github.com/artf/grapesjs/releases/tag/v0.14.5 you can even change where to render built-in panels
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1043
[Question] Should I always save the CSS? (and other questions)
First, thanks a lot for this! It's an amazing piece of software. I've been playing around with grapesjs, and few questions popped up, would...
Issue #859
[QUESTIONS] Change canvas style
Hi there, I have some question about canvas style, in this case i have config like this. By default i use css with name builder-desktop.css...
Issue #1506
Css Media Query Issue
Hello @artf There is an issue on demo page as well as library in media query. Issue is that if user update style on mobile view first and t...
Issue #1566
Default style for custom blocks
Hi, I'm using GrapesJS to a page builder inside a Prestashop website. The idea is to set default template stored in DB with custom Blocks....
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.