Issue #428💬 AnsweredOpened October 17, 2017by asvine-p0 reactions

Change the background of the body

快速解答by Geczy

Here's how I remove buttons

Read full answer below ↓

Question

Hello,

First of all, I want to thank you for this amazing project! I have few a questions regarding the editor, and more precisely the newsletter preset:

  • I want to add a button in the block manager which can give a quick access to change the background of the body (without going to the component tree).

  • Furthermore, how can I reorganize the commands buttons in the panel manager? (I want to change positons and delete some) -> I'm using the newsletter preset

  • I don't know if there is a way to resize the preset "button" block after changing its style. Or if I add a custom block "button", how can I make it resizable and add the href property to it?

Thanks for your support!

Answers (3)

GeczyOctober 17, 2017

Here's how I remove buttons

editor.Panels.getButton('views', 'open-sm').set('active', false)
asvine-pOctober 17, 2017

@Geczy, thanks but the set("active", boolean) method only switches the highlight mode of the button. Actually It doesn't remove it.

artfOctober 18, 2017

Hi @asvine-p

I want to add a button in the block manager which can give a quick access to change the background of the body (without going to the component tree).

Once the editor is loaded you can add/remove stuff with JS (your button will be binded with some handler)

Furthermore, how can I reorganize the commands buttons in the panel manager? (I want to change positons and delete some) -> I'm using the newsletter preset

Here is an example from the newsletter preset how I change/remove buttons https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/buttons.js#L36-L37

I don't know if there is a way to resize the preset "button" block after changing its style. Or if I add a custom block "button", how can I make it resizable and add the href property to it?

You can't "change" (besides playing with paddings) its size because the built-in "Button" block is a link (inline element), but you can add your custom block and set, for example, in style "display: block" (or inline-block) this will allow editing it size

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.