@themarioga/grid-editor 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/AUTO_SAVE.md +30 -0
  2. package/BUILDING.md +68 -0
  3. package/CHANGELOG.md +362 -0
  4. package/LICENSE +23 -0
  5. package/README.md +521 -0
  6. package/UPGRADING.md +88 -0
  7. package/dist/grideditor.css +3875 -0
  8. package/dist/grideditor.min.css +2 -0
  9. package/dist/grideditor.min.css.map +1 -0
  10. package/dist/jquery.grideditor.js +2996 -0
  11. package/dist/jquery.grideditor.min.js +2 -0
  12. package/dist/jquery.grideditor.min.js.map +1 -0
  13. package/dist/locales/grideditor.es.js +74 -0
  14. package/dist/locales/grideditor.es.min.js +2 -0
  15. package/dist/locales/grideditor.es.min.js.map +1 -0
  16. package/dist/plugins/grideditor.accordion.js +185 -0
  17. package/dist/plugins/grideditor.accordion.min.js +2 -0
  18. package/dist/plugins/grideditor.accordion.min.js.map +1 -0
  19. package/dist/plugins/grideditor.elements.js +141 -0
  20. package/dist/plugins/grideditor.elements.min.js +2 -0
  21. package/dist/plugins/grideditor.elements.min.js.map +1 -0
  22. package/dist/plugins/grideditor.popup.js +143 -0
  23. package/dist/plugins/grideditor.popup.min.js +2 -0
  24. package/dist/plugins/grideditor.popup.min.js.map +1 -0
  25. package/dist/plugins/grideditor.tabs.js +140 -0
  26. package/dist/plugins/grideditor.tabs.min.js +2 -0
  27. package/dist/plugins/grideditor.tabs.min.js.map +1 -0
  28. package/docs/events.md +158 -0
  29. package/docs/locale-keys.md +140 -0
  30. package/docs/plugins.md +163 -0
  31. package/example/autosave.html +89 -0
  32. package/example/basic.html +93 -0
  33. package/example/breakpoints.html +94 -0
  34. package/example/ckeditor.html +104 -0
  35. package/example/containers.html +214 -0
  36. package/example/elements.html +147 -0
  37. package/example/index.html +119 -0
  38. package/example/locale.html +84 -0
  39. package/example/plugins.html +217 -0
  40. package/example/summernote.html +106 -0
  41. package/example/wrap_content.html +44 -0
  42. package/package.json +66 -0
  43. package/src/js/jquery.grideditor.ckeditor.js +77 -0
  44. package/src/js/jquery.grideditor.js +2711 -0
  45. package/src/js/jquery.grideditor.summernote.js +72 -0
  46. package/src/js/jquery.grideditor.tinymce.js +135 -0
  47. package/src/js/locales/grideditor.es.js +74 -0
  48. package/src/js/plugins/grideditor.accordion.js +185 -0
  49. package/src/js/plugins/grideditor.elements.js +141 -0
  50. package/src/js/plugins/grideditor.popup.js +143 -0
  51. package/src/js/plugins/grideditor.tabs.js +140 -0
  52. package/src/less/grideditor.less +594 -0
package/example/ckeditor.html ADDED
@@ -0,0 +1,104 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
+
6
+ <!-- CSS dependencies -->
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
9
+
10
+ <!-- Javascript dependencies -->
11
+ <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
12
+ <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
14
+
15
+ <!-- Ckeditor js -->
16
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.22.1/ckeditor.js"></script>
17
+
18
+ <!-- Grid editor CSS -->
19
+ <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
20
+ <!-- Grid editor javascript -->
21
+ <script src="../dist/jquery.grideditor.min.js"></script>
22
+
23
+ <script>
24
+ $(function() {
25
+ // Initialize grid editor
26
+ $('#myGrid').gridEditor({
27
+ new_row_layouts: [[12], [6, 6], [9, 3]],
28
+ content_types: ['ckeditor'],
29
+ ckeditor: {
30
+ config: {
31
+ on: {
32
+ instanceReady: function(evt) {
33
+ var instance = this;
34
+ console.log('instance ready', evt, instance);
35
+ }
36
+ }
37
+ }
38
+ }
39
+ });
40
+
41
+ // Get resulting html
42
+ var html = $('#myGrid').gridEditor('getHtml');
43
+ console.log(html);
44
+ });
45
+ </script>
46
+
47
+ <title>Grid Editor example</title>
48
+ </head>
49
+ <body>
50
+
51
+ <div class="container">
52
+ <div id="myGrid">
53
+
54
+ <div class="row">
55
+ <div class="col-md-12">
56
+ <h1>Lorem ipsum dolor sit amet, consectetur</h1>
57
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit exercitationem eaque aperiam rem quia quibusdam dolor ducimus quo similique eos pariatur nostrum aliquam nam eius, doloremque quis voluptatum unde. Porro voluptates aspernatur voluptate ipsam, magni vero. Accusamus, iusto tempore id!</p>
58
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae laboriosam, excepturi quas.</p>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="row">
63
+ <div class="col-md-4">
64
+ <h2>Lorem ipsum dolor</h2>
65
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis vel aliquam aspernatur dolor placeat totam saepe perferendis. Odio quia vel sed eveniet cupiditate, illum doloremque sint veniam eum? Corporis?</p>
66
+ </div>
67
+ <div class="col-md-4">
68
+ <h2>Pariatur reprehenderit</h2>
69
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo adipisci ipsa, consequuntur cum, sunt dolores veniam. Enim inventore in dolore deserunt vitae sequi nemo!</p>
70
+ </div>
71
+ <div class="col-md-4">
72
+ <h2>Pariatur reprehenderit</h2>
73
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea excepturi ducimus numquam aut error corporis aspernatur ipsum quos eius culpa!</p>
74
+ </div>
75
+ </div>
76
+
77
+ <div class="row">
78
+ <div class="col-md-8">
79
+ <h2>Lorem ipsum dolor.</h2>
80
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro distinctio atque molestiae optio, consequuntur? Iusto ratione cumque dolor aut dolore!</p>
81
+
82
+ <div class="row">
83
+ <div class="col-md-6">
84
+ <hr>
85
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis facilis molestias voluptatum laudantium fuga ratione tempora rem dolor dicta rerum vero ut, suscipit ex qui amet quam vel cupiditate quaerat minus assumenda reiciendis, similique omnis delectus! Autem, repudiandae cumque eaque?</p>
86
+ </div>
87
+ <div class="col-md-6">
88
+ <hr>
89
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestiae quaerat illum, consequuntur iusto aspernatur quam provident? Possimus!</p>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <div class="col-md-4">
95
+ <h2>Lusto ratione</h2>
96
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis fugit quasi officiis id laudantium error aut ut aperiam dicta saepe non vel, cupiditate illum ipsam velit deleniti natus incidunt impedit molestias dolore quos dolores enim. Aliquid ipsam eaque consequuntur quaerat, suscipit a in. Praesentium repudiandae quibusdam recusandae sequi eligendi quos, dignissimos, officiis officia minima necessitatibus eaque consequatur in id adipisci qui minus voluptatum quae debitis, quas maxime iure. Tempore vero unde quia reiciendis ad beatae voluptate omnis, ipsa expedita ab, quasi, neque. Doloribus, pariatur. Aut hic voluptate.</p>
97
+ </div>
98
+ </div>
99
+
100
+ </div> <!-- /#myGrid -->
101
+ </div> <!-- /.container -->
102
+
103
+ </body>
104
+ </html>
package/example/containers.html ADDED
@@ -0,0 +1,214 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
+
6
+ <!-- CSS dependencies -->
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
9
+
10
+ <!-- Javascript dependencies -->
11
+ <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
12
+ <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
14
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
15
+
16
+ <!-- Grid editor CSS -->
17
+ <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
18
+ <!-- Grid editor javascript -->
19
+ <script src="../dist/jquery.grideditor.min.js"></script>
20
+ <!-- One file per container type: load the ones this page offers -->
21
+ <script src="../dist/plugins/grideditor.tabs.min.js"></script>
22
+ <script src="../dist/plugins/grideditor.accordion.min.js"></script>
23
+ <script src="../dist/plugins/grideditor.popup.min.js"></script>
24
+
25
+ <script>
26
+ $(function() {
27
+ $('#myGrid').gridEditor({
28
+ new_row_layouts: [[12], [6,6]],
29
+ content_types: ['tinymce'],
30
+
31
+ // Every container plugin the page loaded is offered. Name
32
+ // them to offer fewer than were loaded:
33
+ // plugins: ['tabs', 'accordion'],
34
+
35
+ // Host tools, same shape as row_tools, on the container
36
+ // drawer and on each pane's drawer
37
+ container_tools: [{
38
+ title: 'Container settings the host owns',
39
+ iconClass: 'bi bi-sliders',
40
+ className: 'my-app-container-settings',
41
+ on: { click: function() { alert('The host would open its own panel here.'); } },
42
+ }],
43
+ tab_tools: [],
44
+ accordion_tools: [],
45
+ });
46
+
47
+ $('#output').on('click', function() {
48
+ $('#html').text($('#myGrid').gridEditor('getHtml'));
49
+ });
50
+
51
+ $('#authored').on('click', function() {
52
+ var html = $('#myGrid').gridEditor('getHtml');
53
+ var page = window.open('', '_blank');
54
+
55
+ // The output, in a page that loads Bootstrap and nothing else:
56
+ // the tabs switch, the accordion collapses and the popup opens,
57
+ // all driven by Bootstrap's own JS
58
+ page.document.write(
59
+ '<!DOCTYPE html><html><head>' +
60
+ '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">' +
61
+ '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"><\/script>' +
62
+ '</head><body><div class="container py-4">' + html + '</div></body></html>'
63
+ );
64
+ page.document.close();
65
+ });
66
+ });
67
+ </script>
68
+
69
+ <title>Grid Editor containers example</title>
70
+ </head>
71
+ <body>
72
+
73
+ <div class="container">
74
+
75
+ <div class="row my-3">
76
+ <div class="col-lg-8">
77
+ <h1 class="h4">Containers</h1>
78
+ <p class="form-text">
79
+ A container holds panes, and every pane is an ordinary
80
+ region: rows, columns, content areas and elements nest
81
+ inside one exactly as they do at the top level. The three
82
+ buttons in the toolbar add a tabs container, an accordion
83
+ and a popup.
84
+ </p>
85
+ <p class="form-text">
86
+ While editing, a popup is unfolded in place and an
87
+ accordion opens and closes from its headers as it will on
88
+ the page &mdash; what you leave open here is what the
89
+ authored page opens with. Bootstrap's own JS is never
90
+ asked to do any of it, so there is no backdrop and no focus
91
+ trap to fight with. Double click a tab or item label to
92
+ rename it. The last row shows two levels: tabs inside an
93
+ accordion item.
94
+ </p>
95
+ <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
96
+ <button class="btn btn-sm btn-primary" id="authored" type="button">Open that html as a real page</button>
97
+ <pre id="html" class="form-text"></pre>
98
+ </div>
99
+ </div>
100
+
101
+ <div id="myGrid">
102
+
103
+ <div class="row">
104
+ <div class="col-lg-6">
105
+ <div data-ge-container="tabs">
106
+ <ul class="nav nav-tabs" role="tablist">
107
+ <li class="nav-item ge-tab" role="presentation">
108
+ <button class="nav-link active" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-tab-one" aria-controls="example-tab-one" aria-selected="true">Overview</button>
109
+ </li>
110
+ <li class="nav-item ge-tab" role="presentation">
111
+ <button class="nav-link" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-tab-two" aria-controls="example-tab-two">Details</button>
112
+ </li>
113
+ </ul>
114
+ <div class="tab-content">
115
+ <div class="tab-pane fade show active" id="example-tab-one" role="tabpanel" tabindex="0">
116
+ <div class="row"><div class="col-lg-12">
117
+ <div class="ge-content" data-ge-content-type="tinymce"><p>The first tab, with an ordinary editable region in it.</p></div>
118
+ </div></div>
119
+ </div>
120
+ <div class="tab-pane fade" id="example-tab-two" role="tabpanel" tabindex="0">
121
+ <div class="row"><div class="col-lg-12">
122
+ <div class="ge-content" data-ge-content-type="tinymce"><p>The second tab.</p></div>
123
+ </div></div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="col-lg-6">
130
+ <div data-ge-container="popup" data-ge-popup-id="example-popup">
131
+ <button type="button" class="btn btn-primary ge-popup-trigger" data-ge-popup-target="example-popup">Open the terms</button>
132
+ <div class="modal fade" id="example-popup" tabindex="-1" aria-hidden="true">
133
+ <div class="modal-dialog">
134
+ <div class="modal-content">
135
+ <div class="modal-header">
136
+ <h5 class="modal-title">Terms</h5>
137
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
138
+ </div>
139
+ <div class="modal-body">
140
+ <div class="row"><div class="col-lg-12">
141
+ <div class="ge-content" data-ge-content-type="tinymce"><p>The popup's body is a region like any other.</p></div>
142
+ </div></div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <p>
150
+ A trigger the host owns, anywhere in the canvas:
151
+ <a href="#" data-ge-popup-target="example-popup">open the same popup</a>.
152
+ Grid editor leaves the markup alone and writes
153
+ Bootstrap's attributes onto it in the output.
154
+ </p>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="row">
159
+ <div class="col-lg-12">
160
+ <div data-ge-container="accordion">
161
+ <div class="accordion" id="example-accordion">
162
+ <div class="accordion-item ge-accordion-item">
163
+ <h2 class="accordion-header">
164
+ <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#example-item-one" aria-expanded="true">Open by default</button>
165
+ </h2>
166
+ <div id="example-item-one" class="accordion-collapse collapse show" data-bs-parent="#example-accordion">
167
+ <div class="accordion-body">
168
+ <div class="row"><div class="col-lg-12">
169
+ <div class="ge-content" data-ge-content-type="tinymce"><p>An accordion item, open in the authored page.</p></div>
170
+ </div></div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ <div class="accordion-item ge-accordion-item">
175
+ <h2 class="accordion-header">
176
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#example-item-two" aria-expanded="false">Closed by default, with tabs inside</button>
177
+ </h2>
178
+ <div id="example-item-two" class="accordion-collapse collapse" data-bs-parent="#example-accordion">
179
+ <div class="accordion-body">
180
+ <div data-ge-container="tabs">
181
+ <ul class="nav nav-tabs" role="tablist">
182
+ <li class="nav-item ge-tab" role="presentation">
183
+ <button class="nav-link active" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#nested-tab-one" aria-controls="nested-tab-one" aria-selected="true">Nested</button>
184
+ </li>
185
+ <li class="nav-item ge-tab" role="presentation">
186
+ <button class="nav-link" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#nested-tab-two" aria-controls="nested-tab-two">Two levels</button>
187
+ </li>
188
+ </ul>
189
+ <div class="tab-content">
190
+ <div class="tab-pane fade show active" id="nested-tab-one" role="tabpanel" tabindex="0">
191
+ <div class="row"><div class="col-lg-12">
192
+ <div class="ge-content" data-ge-content-type="tinymce"><p>Tabs inside an accordion item: two levels, which is as deep as the examples go.</p></div>
193
+ </div></div>
194
+ </div>
195
+ <div class="tab-pane fade" id="nested-tab-two" role="tabpanel" tabindex="0">
196
+ <div class="row"><div class="col-lg-12">
197
+ <div class="ge-content" data-ge-content-type="tinymce"><p>The editor does not police depth; the examples stop here.</p></div>
198
+ </div></div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ </div> <!-- /#myGrid -->
211
+ </div> <!-- /.container -->
212
+
213
+ </body>
214
+ </html>
package/example/elements.html ADDED
@@ -0,0 +1,147 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
+
6
+ <!-- CSS dependencies -->
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
9
+
10
+ <!-- Javascript dependencies -->
11
+ <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
12
+ <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
14
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
15
+
16
+ <!-- Grid editor CSS -->
17
+ <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
18
+ <!-- Grid editor javascript -->
19
+ <script src="../dist/jquery.grideditor.min.js"></script>
20
+ <script src="../dist/plugins/grideditor.elements.min.js"></script>
21
+
22
+ <style>
23
+ /* The host styles its own elements. Grid editor only adds its drawer
24
+ and, while editing, the outline that says "this is one thing". */
25
+ .my-app-quote { border-left: 4px solid #999; padding-left: 12px; font-style: italic; }
26
+ .my-app-tag-placeholder {
27
+ display: inline-block;
28
+ border: 1px dashed #999;
29
+ border-radius: 4px;
30
+ padding: 2px 8px;
31
+ font-size: 12px;
32
+ color: #666;
33
+ background: #f7f7f7;
34
+ }
35
+ </style>
36
+
37
+ <script>
38
+ $(function() {
39
+ $('#myGrid').gridEditor({
40
+ new_row_layouts: [[12], [6,6]],
41
+ content_types: ['tinymce'],
42
+
43
+ elements: {
44
+ // The default. Only nodes carrying this attribute are
45
+ // elements, so nothing becomes one because of where it
46
+ // happens to sit.
47
+ selector: '[data-ge-element]',
48
+
49
+ // Turn this on for a page that configures no rich text
50
+ // editor and injects its own markup: every child of a
51
+ // content area is then an element.
52
+ auto: false,
53
+ },
54
+
55
+ // Host tools on every element drawer, same shape as row_tools
56
+ element_tools: [{
57
+ title: 'Edit this element',
58
+ iconClass: 'bi bi-pencil',
59
+ className: 'my-app-edit',
60
+ on: {
61
+ click: function() {
62
+ var element = $(this).closest('.ge-element');
63
+ alert('The host would open its own editor for ' +
64
+ element.attr('data-ge-element') + ' here.');
65
+ },
66
+ },
67
+ }],
68
+ });
69
+
70
+ // An element with no visual output of its own: the host supplies a
71
+ // placeholder to see and move while editing, and strips it in its
72
+ // own save step. Grid editor needs no feature for this - the
73
+ // element level controls already apply (spec 4.4).
74
+ $('#addTag').on('click', function() {
75
+ var contentArea = $('#myGrid .ge-content').first();
76
+
77
+ $('#myGrid').gridEditor('createElement',
78
+ '<span class="my-app-tag-placeholder">Analytics tag</span>',
79
+ { type: 'analytics-tag', label: 'Analytics', appendTo: contentArea }
80
+ );
81
+ });
82
+
83
+ $('#output').on('click', function() {
84
+ $('#html').text($('#myGrid').gridEditor('getHtml'));
85
+ });
86
+ });
87
+ </script>
88
+
89
+ <title>Grid Editor elements example</title>
90
+ </head>
91
+ <body>
92
+
93
+ <div class="container">
94
+
95
+ <div class="row my-3">
96
+ <div class="col-lg-8">
97
+ <h1 class="h4">Element level controls</h1>
98
+ <p class="form-text">
99
+ An element is a node inside a content area that the editor
100
+ treats as one movable, deletable thing instead of as rich
101
+ text. The host marks them with
102
+ <code>data-ge-element</code>, optionally naming them with
103
+ <code>data-ge-label</code>. Each one gets a drawer of its
104
+ own: move, an info tool, the host's own tools, and delete.
105
+ They drag between content areas as well as within one.
106
+ </p>
107
+ <p class="form-text">
108
+ Click the text around an element to edit it as text; the
109
+ element itself stays atomic while the editor is open.
110
+ </p>
111
+ <button class="btn btn-sm btn-secondary" id="addTag" type="button">Add an analytics tag</button>
112
+ <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
113
+ <pre id="html" class="form-text"></pre>
114
+ </div>
115
+ </div>
116
+
117
+ <div id="myGrid">
118
+
119
+ <div class="row">
120
+ <div class="col-lg-6">
121
+ <div class="ge-content" data-ge-content-type="tinymce">
122
+ <p>Ordinary text, edited in place by tinyMCE.</p>
123
+
124
+ <blockquote class="my-app-quote" data-ge-element="quote" data-ge-label="Pull quote">
125
+ <p>An element the host owns and styles.</p>
126
+ </blockquote>
127
+
128
+ <p>More ordinary text, after the element.</p>
129
+ </div>
130
+ </div>
131
+ <div class="col-lg-6">
132
+ <div class="ge-content" data-ge-content-type="tinymce">
133
+ <p>A second content area. Drag an element's drawer from
134
+ the left column into this one.</p>
135
+
136
+ <div data-ge-element="figure" data-ge-label="Figure">
137
+ <p><strong>Figure 1.</strong> Another element, of a different type.</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ </div> <!-- /#myGrid -->
144
+ </div> <!-- /.container -->
145
+
146
+ </body>
147
+ </html>
package/example/index.html ADDED
@@ -0,0 +1,119 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
9
+
10
+ <title>Grid Editor demos</title>
11
+ </head>
12
+ <body class="bg-body-tertiary">
13
+
14
+ <div class="container py-5" style="max-width: 56rem;">
15
+
16
+ <h1 class="h3">Grid Editor demos</h1>
17
+ <p class="text-body-secondary">
18
+ Every page here is a working editor. They are static: served from
19
+ any web server, or from GitHub Pages, with no build step. Each one
20
+ runs the built files in <code>dist/</code>, so run
21
+ <code>npm run build</code> after changing anything under
22
+ <code>src/</code>.
23
+ </p>
24
+
25
+ <div class="list-group my-4">
26
+
27
+ <a class="list-group-item list-group-item-action" href="basic.html">
28
+ <div class="d-flex justify-content-between">
29
+ <strong>The editor</strong>
30
+ <code class="text-body-secondary">basic.html</code>
31
+ </div>
32
+ <span class="text-body-secondary">tinyMCE in the content areas, and the drawer as the drag handle</span>
33
+ </a>
34
+
35
+ <a class="list-group-item list-group-item-action" href="plugins.html">
36
+ <div class="d-flex justify-content-between">
37
+ <strong>Plugins</strong>
38
+ <code class="text-body-secondary">plugins.html</code>
39
+ </div>
40
+ <span class="text-body-secondary">The plugin model, with a container plugin written in the page itself</span>
41
+ </a>
42
+
43
+ <a class="list-group-item list-group-item-action" href="containers.html">
44
+ <div class="d-flex justify-content-between">
45
+ <strong>Containers</strong>
46
+ <code class="text-body-secondary">containers.html</code>
47
+ </div>
48
+ <span class="text-body-secondary">Tabs, accordions and popups, two levels deep, and the export opened as a real page</span>
49
+ </a>
50
+
51
+ <a class="list-group-item list-group-item-action" href="elements.html">
52
+ <div class="d-flex justify-content-between">
53
+ <strong>Elements</strong>
54
+ <code class="text-body-secondary">elements.html</code>
55
+ </div>
56
+ <span class="text-body-secondary">Element level controls, including an element with no visual output</span>
57
+ </a>
58
+
59
+ <a class="list-group-item list-group-item-action" href="breakpoints.html">
60
+ <div class="d-flex justify-content-between">
61
+ <strong>Breakpoints</strong>
62
+ <code class="text-body-secondary">breakpoints.html</code>
63
+ </div>
64
+ <span class="text-body-secondary">The six breakpoints, the &ldquo;all sizes&rdquo; view, and resizing by dragging</span>
65
+ </a>
66
+
67
+ <a class="list-group-item list-group-item-action" href="locale.html">
68
+ <div class="d-flex justify-content-between">
69
+ <strong>Languages</strong>
70
+ <code class="text-body-secondary">locale.html</code>
71
+ </div>
72
+ <span class="text-body-secondary">The interface in Spanish, with a language switcher</span>
73
+ </a>
74
+
75
+ <a class="list-group-item list-group-item-action" href="ckeditor.html">
76
+ <div class="d-flex justify-content-between">
77
+ <strong>CKEditor</strong>
78
+ <code class="text-body-secondary">ckeditor.html</code>
79
+ </div>
80
+ <span class="text-body-secondary">CKEditor in the content areas instead of tinyMCE</span>
81
+ </a>
82
+
83
+ <a class="list-group-item list-group-item-action" href="summernote.html">
84
+ <div class="d-flex justify-content-between">
85
+ <strong>Summernote</strong>
86
+ <code class="text-body-secondary">summernote.html</code>
87
+ </div>
88
+ <span class="text-body-secondary">The same, with summernote</span>
89
+ </a>
90
+
91
+ <a class="list-group-item list-group-item-action" href="wrap_content.html">
92
+ <div class="d-flex justify-content-between">
93
+ <strong>Wrapped content</strong>
94
+ <code class="text-body-secondary">wrap_content.html</code>
95
+ </div>
96
+ <span class="text-body-secondary">Markup that was never a bootstrap grid, wrapped into one</span>
97
+ </a>
98
+
99
+ <a class="list-group-item list-group-item-action" href="autosave.html">
100
+ <div class="d-flex justify-content-between">
101
+ <strong>Autosave</strong>
102
+ <code class="text-body-secondary">autosave.html</code>
103
+ </div>
104
+ <span class="text-body-secondary">Saving the html as the user edits, through the editor&rsquo;s events</span>
105
+ </a>
106
+
107
+ </div>
108
+
109
+ <p class="text-body-secondary">
110
+ <a href="../README.md">README</a> &middot;
111
+ <a href="../docs/plugins.md">Writing a plugin</a> &middot;
112
+ <a href="../docs/events.md">Events</a> &middot;
113
+ <a href="https://github.com/themarioga/grid-editor">Source</a>
114
+ </p>
115
+
116
+ </div>
117
+
118
+ </body>
119
+ </html>