Issue #673Opened December 22, 2017by crazyxhz1 reactions

how to render block manager outside container?

Question

I'm new to this great library and it seems very neat and clean BUT here is the problem that I have. I'm having gjs rendered in the middle, and I want to render block manager and other panel and button into third party ui component. How can I do that? image

Answers (3)

lorrandavidMarch 1, 20181 reactions

@crazyxhz after the new release v0.14.5 it's now possible to render block manager outside of the main editor. You can achieve the desired result like this:

grapesjs.init({
  ...
  layerManager: {
    appendTo: 'query-or-element',
    ...
  },
  blockManager: {
    appendTo: 'query-or-element',
    ...
  },
  styleManager: {
    appendTo: 'query-or-element',
    ...
  },
  selectorManager: {
    appendTo: 'query-or-element',
    ...
  },
  traitManager: {
    appendTo: 'query-or-element',
    ...
  }
});

I don't know if it's docummented but you can find more about it on @artf explanations on the release https://github.com/artf/grapesjs/releases/tag/v0.14.5

artfDecember 27, 20170 reactions

Hi @crazyxhz currently it's not possible to achieve via configuration but it's something I'd like to improve. Currently, as a workaround, you can move panels via js once are rendered, for the block manager you have to activate it first

const editor = grapesjs.init({
	...
});

editor.on('load', () => {
	// Load blocks and put them in another element
    editor.runCommand('open-blocks'); // this will render blocks
	const blocksEl = document.querySelector('.gjs-blocks-cs');
	yourContainer.appendChild(blocksEl);
})
artfMarch 4, 20180 reactions

Thanks @lorrandavid for pointing this out, this issue can be closed now

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.