Until i upgrade my versions, I've never had this problem.
Before, I'm using grapesjs:0.19.4 and grapesjs-preset-newsletter:0.2.21. Here's the result:
Of course, the code I'm using is the same between both of this images.
<div>
<div>
<div class="editor-row">
<div class="editor-canvas">
<div :id="'gjs_tab-'+idaccordeon"></div>
</div>
<div :class="['options-container-'+idaccordeon]"></div>
</div>
</div>
</div>
<div :class="['right-part is-flex', ['preview', 'disabled'].includes(mode) ? 'has-blur' : '']">
<div :class="['overlay', ['preview', 'disabled'].includes(mode) ? 'is-visible' : '']"></div>
<div :class="['panel__right-'+idaccordeon]">
<div :class="['traits-container-'+idaccordeon]" style="display: none"></div>
<div :class="['styles-container-'+idaccordeon]" style="display: none"></div>
<div :class="['layers-container-'+idaccordeon]" style="display: none"></div>
<div :class="['blocks-container-'+idaccordeon]"></div>
</div>
<div class="panel__btn">
<div class="panel__basic-actions"></div>
<div :class="['panel__switcher-'+idaccordeon]"></div>
</div>
</div>
const instance = this
this.editor = grapesjs.init({
container: '#gjs_tab-' + this.idaccordeon,
...this.config,
canvas: {
styles: ['https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400i,700,700i' +
'|Roboto:300,300i,400,400i,500,500i,700,700i&subset=latin,latin-ext']
},
i18n: {
locale: 'fr',
messages: { fr }
},
plugins: [grapesPreset, TextableType, TextableLinkType, TableMultipleType, GedType, ColumnType, PjType],
panels: {
defaults: [
{
id: 'layers',
el: '.panel__right-' + instance.idaccordeon
},
{
id: 'options',
el: '.options-container-' + instance.idaccordeon,
buttons: [
{
id: 'undo',
className: 'fa fa-undo',
command: 'undo',
attributes: { title: 'Annuler' }
},
{
id: 'redo',
className: 'fa fa-repeat',
command: 'redo',
attributes: { title: 'Refaire' }
},
{
id: 'export-template',
className: 'fas fa-upload',
command: 'export-template',
context: 'export-template', // For grouping context of buttons from the same panel,
attributes: { title: 'Voir le code' }
}, {
active: true,
id: 'sw-visibility',
className: 'fas fa-square',
command: 'sw-visibility',
context: 'sw-visibility',
attributes: { title: 'Voir les composants' }
}, {
id: 'preview',
className: 'fa fa-eye',
command: 'preview',
context: 'preview',
attributes: { title: 'Preview' }
}, {
id: 'fullscreen',
className: 'fa fa-arrows-alt',
command: 'fullscreen',
context: 'fullscreen',
attributes: { title: 'Fullscreen' }
}
]
},
{
id: 'views',
el: '.panel__switcher-' + instance.idaccordeon,
buttons: [
{
id: 'open-traits',
className: 'fa fa-cog',
command: 'open-traits',
togglable: 0,
active: true,
attributes: { title: 'Ouvrir les Paramètres' }
},
{
id: 'open-sm',
className: 'fa fa-paint-brush',
command: 'open-sm',
togglable: 0,
active: false,
attributes: { title: 'Ouvrir les Styles' }
},
{
id: 'open-tm',
className: 'fa fa-cog hidden',
command: 'open-tm',
togglable: 0,
active: false,
attributes: { title: 'Paramètres' }
},
{
id: 'open-layers',
className: 'fa fa-bars',
command: 'open-layers',
togglable: 0,
active: false,
attributes: { title: 'Voir les Couches' }
},
{
id: 'open-blocks',
className: 'fa fa-th-large',
command: 'open-blocks',
togglable: 0,
active: true,
attributes: { title: 'Ouvrir les Blocks' }
}]
}]
}
})
pluginsOpts: {
grapesPreset: {
useCustomTheme: false,
updateStyleManager: false
},
},
Hi,
Until i upgrade my versions, I've never had this problem.
Before, I'm using
grapesjs:0.19.4andgrapesjs-preset-newsletter:0.2.21. Here's the result:Now, I'm using
grapesjs:0.21.4andgrapesjs-preset-newsletter:1.0.2. And that's what I have now:Of course, the code I'm using is the same between both of this images.
When I setup the editor, I pass the
panels: { default: [....] }option to editor init' function.It's working well when I'm not using the Preset Newsletter, but when I'm using it, I can't moove anymore when I want.
That's what I'm doing:
HTML (VUE) template
And my JS config:
I also tried the next plugin config to disable customTheme, without any success:
Thank you !! :)