add grapesjs modes
This commit is contained in:
parent
5ec7624019
commit
90629a199c
|
@ -1,6 +1,9 @@
|
||||||
const $ = require('jquery')
|
const $ = require('jquery')
|
||||||
const GrapesJs = require('grapesjs')
|
const GrapesJs = require('grapesjs')
|
||||||
const bootstrap4 = require('grapesjs-blocks-bootstrap4').default
|
|
||||||
|
require('grapesjs-blocks-bootstrap4').default
|
||||||
|
require('grapesjs-preset-webpage').default
|
||||||
|
require('grapesjs-preset-newsletter').default
|
||||||
|
|
||||||
const makeId = () => {
|
const makeId = () => {
|
||||||
let result = ''
|
let result = ''
|
||||||
|
@ -14,12 +17,58 @@ const makeId = () => {
|
||||||
return 'grapesjs-' + result
|
return 'grapesjs-' + result
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const modes = {
|
||||||
|
bootstrap4: {
|
||||||
|
id: 'grapesjs-blocks-bootstrap4',
|
||||||
|
options: {
|
||||||
|
blocks: {},
|
||||||
|
blockCategories: {},
|
||||||
|
labels: {},
|
||||||
|
gridDevicesPanel: true,
|
||||||
|
formPredefinedActions: [
|
||||||
|
]
|
||||||
|
},
|
||||||
|
canvas: {
|
||||||
|
styles: [
|
||||||
|
'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css'
|
||||||
|
],
|
||||||
|
scripts: [
|
||||||
|
'https://code.jquery.com/jquery-3.5.1.slim.min.js',
|
||||||
|
'https://unpkg.com/@popperjs/core@2',
|
||||||
|
'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
presetWebpage: {
|
||||||
|
id: 'gjs-preset-webpage',
|
||||||
|
options: {
|
||||||
|
},
|
||||||
|
canvas: {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
presetNewsletter: {
|
||||||
|
id: 'gjs-preset-newsletter',
|
||||||
|
options: {
|
||||||
|
},
|
||||||
|
canvas: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const doInitEditor = () => {
|
const doInitEditor = () => {
|
||||||
$('textarea[data-grapesjs]').each((i, v) => {
|
$('textarea[data-grapesjs]').each((i, v) => {
|
||||||
const textarea = $(v)
|
const textarea = $(v)
|
||||||
const element = textarea.parent().prev()
|
const element = textarea.parent().prev()
|
||||||
const id = element.attr('id') ? element.attr('id') : makeId()
|
const id = element.attr('id') ? element.attr('id') : makeId()
|
||||||
|
|
||||||
|
let mode = textarea.attr('data-grapesjs')
|
||||||
|
const pluginsOpts = {}
|
||||||
|
|
||||||
|
if (!mode || typeof modes[mode] === 'undefined') {
|
||||||
|
mode = 'bootstrap4'
|
||||||
|
}
|
||||||
|
|
||||||
|
pluginsOpts[modes[mode].id] = modes[mode].options
|
||||||
element.attr('id', id)
|
element.attr('id', id)
|
||||||
|
|
||||||
const editor = GrapesJs.init({
|
const editor = GrapesJs.init({
|
||||||
|
@ -33,7 +82,7 @@ const doInitEditor = () => {
|
||||||
noticeOnUnload: 0,
|
noticeOnUnload: 0,
|
||||||
showOffsets: 1,
|
showOffsets: 1,
|
||||||
showDevices: false,
|
showDevices: false,
|
||||||
plugins: ['grapesjs-blocks-bootstrap4'],
|
plugins: [modes[mode].id],
|
||||||
colorPicker: {
|
colorPicker: {
|
||||||
appendTo: 'parent',
|
appendTo: 'parent',
|
||||||
offset: {
|
offset: {
|
||||||
|
@ -41,26 +90,8 @@ const doInitEditor = () => {
|
||||||
left: -166
|
left: -166
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
pluginsOpts: {
|
pluginsOpts: pluginsOpts,
|
||||||
'grapesjs-blocks-bootstrap4': {
|
canvas: modes[mode].canvas
|
||||||
blocks: {},
|
|
||||||
blockCategories: {},
|
|
||||||
labels: {},
|
|
||||||
gridDevicesPanel: true,
|
|
||||||
formPredefinedActions: [
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
canvas: {
|
|
||||||
styles: [
|
|
||||||
'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css'
|
|
||||||
],
|
|
||||||
scripts: [
|
|
||||||
'https://code.jquery.com/jquery-3.5.1.slim.min.js',
|
|
||||||
'https://unpkg.com/@popperjs/core@2',
|
|
||||||
'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const deviceManager = editor.DeviceManager
|
const deviceManager = editor.DeviceManager
|
||||||
|
|
Loading…
Reference in a new issue