Currently, I am utilizing Grapejs with Vue and everything appears to be functioning properly. However, I am encountering an issue with the "grapesjs-preset-webpage" library.
I am struggling to incorporate additional HTML options, such as "Columns", "Videos", and other settings that are visible when using the CDN.
My main query is how can I include more blocks beyond the default 3 that already exist? (link-block, quote, text-basic).
In my configuration file, the setup looks like this:
<script>
import grapesjs from 'grapesjs'
import 'grapesjs/dist/css/grapes.min.css'
import 'grapesjs/dist/grapes.min.js'
import plugin from 'grapesjs-preset-webpage';
export default {
name: 'BuilderHtml',
mounted(){
grapesjs.init({
container: '#gjs',
height: '900px',
width: '100%',
plugins: [plugin],
storageManager: {
id: 'gjs-',
type: 'local',
autosave: true,
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
},
deviceManager: {
devices:
[
{
id: 'desktop',
name: 'Desktop',
width: '',
},
{
id: 'tablet',
name: 'Tablet',
width: '768px',
widthMedia: '992px',
},
{
id: 'mobilePortrait',
name: 'Mobile portrait',
width: '320px',
widthMedia: '575px',
},
]
},
pluginsOpts: {
[plugin]: {
blocksBasicOpts: {
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video'],
flexGrid: 1,
},
blocks:['link-block', 'quote', 'text-basic', 'column3'],
},
}
})
}
}
</script>
Despite my efforts to include the configuration above, no new block is displaying. Have I made an error somewhere? https://i.sstatic.net/r3Rmc.png