-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy path_index.html
86 lines (83 loc) · 3.06 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Editor</title>
<link href="https://cdn.jsdelivr.net/npm/grapesjs@0.20.1/dist/css/grapes.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.38.1/dist/full.css" rel="stylesheet" type="text/css" />
<!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" type="text/css" /> -->
<link href="https://cdn.jsdelivr.net/gh/smarttechmukesh/assets/css/tailwindcss_v3.1.6.min.css rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/grapesjs@0.20.1/dist/grapes.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/artf/grapesjs-plugin-export/dist/index.js"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
/* Primary color for the background */
.gjs-one-bg {
background-color: #242933;
}
/* Secondary color for the text color */
.gjs-two-color {
color: #a6adba;
}
/* Tertiary color for the background */
.gjs-three-bg {
background-color: #ec5896;
color: white;
}
/* Quaternary color for the text color */
.gjs-four-color,
.gjs-four-color-h:hover {
color: #641ae6;
}
textarea {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<div style="margin:100px 100px 25px; padding:25px; font:caption">
Click on the "4 squares" logo in the right navbar and start draging stuff<br />
Delete this block by clicking it then click on the trash bin<br/>
Click the </> logo to copy your html into your code!
</div>
</div>
<script type="text/javascript">
// Wait for the plugin to be injected by the dev server
setTimeout(() => {
window.editor = grapesjs.init({
canvas: {
styles: [
'https://cdn.jsdelivr.net/npm/daisyui@2.38.1/dist/full.css',
'https://cdn.jsdelivr.net/gh/smarttechmukesh/assets/css/tailwindcss_v3.1.6.min.css'
],
},
height: '100%',
container: '#gjs',
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
plugins: ['grapesjs-plugin-export', 'grapesjs-daisyui-tailwind-html-editor'],
pluginsOpts: {
'grapesjs-daisyui-tailwind-html-editor': { /* Test here your options */ }
},
storageManager: {
type: 'local', // Type of the storage, available: 'local' | 'remote'
autosave: true, // Store data automatically
autoload: true, // Autoload stored data on init
stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
options: {
local: { // Options for the `local` type
key: 'gjsProject', // The key for the local storage
},
}
}
});
}, 100);
</script>
</body>
</html>