Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
c6a3a4a
·
verified ·
1 Parent(s): f781f7b

Update builder2.html

Browse files
Files changed (1) hide show
  1. builder2.html +129 -99
builder2.html CHANGED
@@ -1,108 +1,138 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>GrapesJS with Script Editor</title>
7
- <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
8
- <link href="https://unpkg.com/grapesjs-script-editor/dist/grapesjs-script-editor.min.css" rel="stylesheet">
9
- <script src="https://unpkg.com/grapesjs"></script>
10
- <script src="https://unpkg.com/grapesjs-script-editor"></script>
 
11
  <style>
12
- body, html {
13
- margin: 0;
14
- height: 100%;
15
- }
16
- #gjs {
17
- height: 100vh;
18
- }
19
- .controls-container {
20
- background-color: #302f2f;
21
- padding: 15px 0;
22
- text-align: center;
23
- }
24
- .controls-container label,
25
- .controls-container button {
26
- margin-left: 15px;
27
- }
28
- #export-html {
29
- background-color: #ccc;
30
- color: #000;
31
- border: none;
32
- padding: 10px 15px;
33
- font-size: 16px;
34
- cursor: pointer;
35
- border-radius: 5px;
36
- transition: background-color 0.3s ease;
37
- }
38
- #export-html:hover {
39
- background-color: #bbb;
40
- }
41
- .controls-container label {
42
- color: #fff;
43
- }
44
  </style>
45
- </head>
46
- <body>
 
 
47
  <div id="gjs"></div>
48
- <div class="controls-container">
49
- <button id="export-html">Скачать HTML</button>
50
- </div>
51
 
52
- <script>
53
- const editor = grapesjs.init({
54
- container: '#gjs',
55
- height: '100%',
56
- fromElement: true,
57
- storageManager: false,
58
- plugins: ['grapesjs-script-editor'],
59
- pluginsOpts: {
60
- 'grapesjs-script-editor': {
61
- toolbarIcon: '<i class="fa fa-puzzle-piece"></i>', // Иконка в панели инструментов
62
- scriptTypesSupport: ['default', 'text', 'textnode'], // Поддержка скриптов для текстовых блоков
63
- modalTitle: 'Script Editor', // Заголовок модального окна
64
- buttonLabel: 'Save', // Текст кнопки сохранения
65
- onRun: () => console.log('Script is valid'), // Логика при успешной проверке
66
- onError: err => console.log('Error:', err) // Логика при ошибке
67
- }
68
- },
69
- panels: {
70
- defaults: [
71
- {
72
- id: 'views',
73
- buttons: [
74
- {
75
- attributes: { title: 'Open Script Editor' },
76
- className: 'fa fa-puzzle-piece',
77
- command: 'edit-script',
78
- id: 'edit-script'
79
- }
80
- ],
81
- appendTo: '.gjs-pn-views-container'
82
- }
83
- ]
84
- }
85
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
 
87
- // Команда для открытия редактора скриптов
88
- editor.Commands.add('edit-script', {
89
- run: function(editor) {
90
- editor.runCommand('script-editor');
91
- }
92
- });
 
 
 
93
 
94
- // Обработчик для кнопки экспорта
95
- document.getElementById('export-html').addEventListener('click', function() {
96
- const html = editor.getHtml();
97
- const css = editor.getCss();
98
- const blob = new Blob(['<html><head><style>' + css + '</style></head><body>' + html + '</body></html>'], { type: 'text/html' });
99
- const link = document.createElement('a');
100
- link.href = URL.createObjectURL(blob);
101
- link.download = 'page.html';
102
- document.body.appendChild(link);
103
- link.click();
104
- document.body.removeChild(link);
105
- });
106
  </script>
107
- </body>
108
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Document</title>
8
+ <link
9
+ href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
10
+ rel="stylesheet"
11
+ />
12
  <style>
13
+ html,
14
+ body {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </style>
20
+ </head>
21
+ <body>
22
+ <button id="export">Export</button>
23
+ <button id="import">Import</button>
24
  <div id="gjs"></div>
 
 
 
25
 
26
+ <script type="text/javascript" src="https://unpkg.com/grapesjs"></script>
27
+ <script
28
+ type="text/javascript"
29
+ src="https://unpkg.com/grapesjs-blocks-basic"
30
+ ></script>
31
+ <script
32
+ type="text/javascript"
33
+ src="https://unpkg.com/[email protected]"
34
+ ></script>
35
+ <script
36
+ type="text/javascript"
37
+ src="https://unpkg.com/[email protected]"
38
+ ></script>
39
+ <script
40
+ type="text/javascript"
41
+ src="https://unpkg.com/[email protected]"
42
+ ></script>
43
+ <script
44
+ type="text/javascript"
45
+ src="https://unpkg.com/[email protected]"
46
+ ></script>
47
+ <script
48
+ type="text/javascript"
49
+ src="https://unpkg.com/[email protected]"
50
+ ></script>
51
+ <script
52
+ type="text/javascript"
53
+ src="https://unpkg.com/[email protected]"
54
+ ></script>
55
+ <script
56
+ type="text/javascript"
57
+ src="https://unpkg.com/[email protected]"
58
+ ></script>
59
+
60
+ <!-- Change code view -->
61
+ <script src="https://unpkg.com/grapesjs-parser-postcss"></script>
62
+ <link
63
+ href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css"
64
+ rel="stylesheet"
65
+ />
66
+ <script src="https://unpkg.com/grapesjs-component-code-editor"></script>
67
+
68
+ <link rel="stylesheet" href="https://unpkg.com/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css">
69
+ <script src="https://unpkg.com/[email protected]/dist/grapesjs-preset-newsletter.min.js"></script>
70
+
71
+ <script type="text/javascript">
72
+ var editor = grapesjs.init({
73
+ container: "#gjs",
74
+ components: '<div class="text-red">Welcome</div>',
75
+ style: ".text-red{color: red}",
76
+ storageManager: false,
77
+ plugins: [
78
+ "gjs-blocks-basic",
79
+ "grapesjs-plugin-export",
80
+ "grapesjs-tabs",
81
+ "grapesjs-custom-code",
82
+ "grapesjs-tui-image-editor",
83
+ "grapesjs-typed",
84
+ "grapesjs-style-bg",
85
+ "grapesjs-preset-webpage",
86
+ "grapesjs-component-code-editor",
87
+ "grapesjs-parser-postcss",
88
+ 'gjs-preset-newsletter'
89
+ ],
90
+ pluginsOpts: {
91
+ "gjs-blocks-basic": {},
92
+ "grapesjs-component-code-editor": {
93
+ /* Test here your options */
94
+ },
95
+ 'gjs-preset-newsletter': {
96
+ modalTitleImport: 'Import template',
97
+ // ... other options
98
+ }
99
+ },
100
+ });
101
+
102
+ const pn = editor.Panels;
103
+ const panelViews = pn.addPanel({
104
+ id: "views",
105
+ });
106
+ panelViews.get("buttons").add([
107
+ {
108
+ attributes: {
109
+ title: "Open Code",
110
+ },
111
+ className: "fa fa-file-code-o",
112
+ command: "open-code",
113
+ togglable: false, //do not close when button is clicked again
114
+ id: "open-code",
115
+ },
116
+ ]);
117
+
118
+ const htmlBody = '<p id="i7au" style="box-sizing: border-box; color: #7d1f1f;">from export</p>';
119
+ document.querySelector("#import").onclick = () => {
120
+ editor.setComponents(htmlBody);
121
+ };
122
 
123
+ document.querySelector("#export").onclick = () => {
124
+ var reg = /\<body[^>]*\>([^]*)\<\/body/m;
125
+ var htmlWithCss = editor.runCommand('gjs-get-inlined-html');
126
+ let withoutBodyTag = htmlWithCss.match(reg)[1];
127
+ console.log('EXPORT ->', withoutBodyTag)
128
+ // let content = editor.getHtml();
129
+ // let newContent = content.match(reg)[1];
130
+ // console.log("export", newContent, htmlWithCss);
131
+ };
132
 
133
+ window.onload = () => {
134
+ editor.setComponents("<p>asdasd</p>");
135
+ };
 
 
 
 
 
 
 
 
 
136
  </script>
137
+ </body>
138
+ </html>