[HELP WANTED]: questions about some customization.

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)

artf• February 27, 20180 reactions

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

lock[bot]• September 18, 20190 reactions

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.

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[HELP WANTED]: questions about some customization.

Question

Answers (2)

Related Questions and Answers

[Question] Should I always save the CSS? (and other questions)

[QUESTIONS] Change canvas style

Css Media Query Issue

Default style for custom blocks

Paid Plugins That Match This Issue

Browse Plugin Categories