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?

Answers (3)
@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
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);
})
Thanks @lorrandavid for pointing this out, this issue can be closed now
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1409
Component Drag Event
I want to know how can I get that component from which element is dragged and drop to the other component. I need to add a class if compone...
Issue #1951
[QUESTIONS] change or add event on add component from block
is it possible ?, change the drag and drop event to on click when adding a new component, I want to add components by clicking the block th...
Issue #1448
Child component not selectable when using custom view
I'm trying to create a custom component that creates it's own view with nested HTML. I do not want this HTML to be rendered as a component...
Issue #461
RTE toolbar appears in the top panel
Hi, We recently updated GrapesJS from 0.8.8 to 0.12.15. After the upgrade, I found that the rte-toolbar appears in the top panel for some r...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.