-
Notifications
You must be signed in to change notification settings - Fork 7
/
es5.html
119 lines (113 loc) · 3.48 KB
/
es5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Symbols for GrapesJS</title>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapesjs-preset-webpage.min.css">
<script src="https://unpkg.com/grapesjs-preset-webpage"></script>
<script xxdata-main="dist/es5/index.js" src="node_modules/requirejs/require.js"></script>
<script>
require.config({
baseUrl: "dist/es5/",
paths: {
"backbone": "/node_modules/backbone/backbone",
"underscore": "/node_modules/underscore/underscore",
"jquery": "/node_modules/jquery/dist/jquery",
},
});
require(['dist/es5/index.js'], function () {});
</script>
<style>
body,
html {
height: 100%;
margin: 0;
}
.gjs-editor-cont { height: 100% !important; }
</style>
</head>
<body>
<div id='basic-actions' class="panel__basic-actions" style="z-index: 9; left: 120px;"></div>
<div id="gjs">
</div>
<script type="text/javascript">
window.onload = () => {
window.editor = grapesjs.init({
container: '#gjs',
//storageManager: false,
autosave: false,
noticeOnUnload: false,
plugins: [
'grapesjs-preset-webpage',
'@silexlabs/grapesjs-symbols',
],
pluginsOpts: {
'grapesjs-preset-webpage': {},
'@silexlabs/grapesjs-symbols': {
appendTo: '.gjs-pn-views-container',
},
},
pageManager: {
pages: [{
id: 'page-1',
name: 'Page 1',
},
{
id: 'page-2',
name: 'Page 2',
},
],
}
})
var idx = 0
editor.on('load', () => {
const colors = ['red', 'blue', 'grey', 'yello', 'black', 'orange', 'chocolate', 'cadetblue', 'blueviolet']
const color = colors[Math.floor(Math.random() * colors.length)]
editor.addComponents(`<div style="min-height: 100px; background: ${color};"></div>`);
editor.Panels.addPanel({
id: 'basic-actions',
el: '.panel__basic-actions',
buttons: [
{
id: 'create-button',
label: 'Create symbol',
command(editor) {
var label = prompt('Label', 'Symbol ' + ++idx)
var icon = prompt('Icon', 'fa-list')
editor.runCommand('symbols:add', { label, icon })
},
},
{
id: 'separator',
label: '|',
},
].concat(editor.Pages.getAll().flatMap(p => ([{
id: 'button' + p.cid,
label: p.getName() || 'no name?',
command(editor) {
editor.Pages.select(p)
},
},
{
id: 'separator' + p.cid,
label: '|',
},
])))
})
//setTimeout(() => {
// const data = JSON.parse(localStorage.getItem('init'))
// if(data) editor.loadData(data)
//})
})
editor.addComponents([`
<div class="main" style="padding: 20px; background: lightblue;">
<h1 class="title">Test title</h1>
<p class="content">Test content text lorem ipsum</p>
</div>
`])
}
</script>
</body>
</html>