-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_index.html
90 lines (90 loc) · 3.52 KB
/
_index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spectre CSS HTML Designer</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
<meta name="description" content="Spectre CSS/HTML Designer">
<meta name="author" content="Juan Carlos">
<link rel="shortcut icon" href="favicon.webp">
<link rel="icon" href="favicon.webp">
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet" async defer >
<script src="https://unpkg.com/grapesjs"></script>
<link href="https://unpkg.com/grapesjs-rte-extensions/dist/grapesjs-rte-extensions.min.css" rel="stylesheet" async defer >
<script src="https://unpkg.com/grapesjs-rte-extensions"></script>
<script src="https://unpkg.com/grapesjs-script-editor"></script>
<link href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css" rel="stylesheet" async defer >
<script src="https://unpkg.com/grapesjs-component-code-editor"></script>
<link href="https://unpkg.com/grapesjs-indexeddb-ui/dist/grapesjs-indexeddb-ui.min.css" rel="stylesheet" async defer >
<script src="https://unpkg.com/grapesjs-plugin-export"></script>
<script src="https://unpkg.com/grapesjs-indexeddb-ui"></script>
<script src="https://unpkg.com/grapesjs-blocks-flexbox"></script>
<script src="https://unpkg.com/grapesjs-style-bg"></script>
<script src="dist/grapespectre.min.js"></script>
<style>
body, html {height:100%; margin:0}
div.gjs-cm-editor-c { width: 99% }
div.gjs-cm-editor#gjs-cm-htmlmixed { border: 0 }
div.gjs-cm-editor#gjs-cm-css { display: none }
div.gjs-cm-editor#gjs-cm-htmlmixed {padding: 0}
@keyframes blink { from { opacity: 1 } to { opacity: 0 } }
span.gjs-pn-btn.fa.fa-code {
color: blue;
background: limegreen;
animation-iteration-count: 9;
animation-duration: 1s;
animation-name: blink;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
}
</style>
</head>
<body lang="en">
<script>
window.editor = grapesjs.init({
height: '100%',
container: 'body',
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
storageManager: true,
storageManager: {
id: 'some-id',//gjs-
type: 'indexeddb',
},
plugins: ['grapespectre', 'grapesjs-rte-extensions', 'grapesjs-script-editor', 'grapesjs-component-code-editor', 'grapesjs-indexeddb-ui', 'grapesjs-plugin-export', 'gjs-blocks-flexbox', 'grapesjs-style-bg'],
pluginsOpts: {
'grapesjs-script-editor': {
modalTitle: 'JavaScript',
buttonLabel: ' O K ! ',
starter: 'console.log(42);\n'
},
'grapesjs-rte-extensions': {
fonts: {
hilite: false,
},
format: {
heading1: true,
heading2: true,
heading3: true,
heading4: true,
heading5: true,
heading6: true,
quote: true,
paragraph: true,
clearFormatting: true,
},
subscriptSuperscript: true,
indentOutdent: true,
list: true,
align: true,
actions: true,
undoredo: true,
extra: true,
darkColorPicker: true,
maxWidth: '666px'
}
}
});
</script>
</body>
</html>