@themarioga/grid-editor 5.1.1 → 5.2.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 (41) hide show
  1. package/BUILDING.md +6 -0
  2. package/CHANGELOG.md +45 -0
  3. package/README.md +18 -8
  4. package/UPGRADING.md +25 -0
  5. package/dist/grideditor.css +3 -0
  6. package/dist/grideditor.min.css +1 -1
  7. package/dist/grideditor.min.css.map +1 -1
  8. package/dist/jquery.grideditor.bundle.min.js +2 -2
  9. package/dist/jquery.grideditor.js +374 -218
  10. package/dist/jquery.grideditor.min.js +1 -1
  11. package/dist/jquery.grideditor.min.js.map +1 -1
  12. package/dist/plugins/grideditor.ckeditor.js +115 -0
  13. package/dist/plugins/grideditor.ckeditor.min.js +2 -0
  14. package/dist/plugins/grideditor.ckeditor.min.js.map +1 -0
  15. package/dist/plugins/grideditor.summernote.js +93 -0
  16. package/dist/plugins/grideditor.summernote.min.js +2 -0
  17. package/dist/plugins/grideditor.summernote.min.js.map +1 -0
  18. package/dist/plugins/grideditor.tinymce.js +157 -0
  19. package/dist/plugins/grideditor.tinymce.min.js +2 -0
  20. package/dist/plugins/grideditor.tinymce.min.js.map +1 -0
  21. package/docs/plugins.md +86 -3
  22. package/example/attributes.html +364 -0
  23. package/example/autosave.html +2 -0
  24. package/example/basic.html +2 -0
  25. package/example/ckeditor.html +2 -0
  26. package/example/clipboard.html +2 -0
  27. package/example/containers.html +2 -0
  28. package/example/elements.html +2 -0
  29. package/example/index.html +8 -0
  30. package/example/summernote.html +2 -0
  31. package/example/wrap_content.html +2 -0
  32. package/package.json +1 -1
  33. package/src/js/compat/bundled-texts.js +14 -0
  34. package/src/js/jquery.grideditor.js +73 -14
  35. package/src/js/plugins/grideditor.ckeditor.js +115 -0
  36. package/src/js/plugins/grideditor.summernote.js +93 -0
  37. package/src/js/plugins/grideditor.tinymce.js +157 -0
  38. package/src/less/grideditor.less +4 -0
  39. package/src/js/jquery.grideditor.ckeditor.js +0 -77
  40. package/src/js/jquery.grideditor.summernote.js +0 -72
  41. package/src/js/jquery.grideditor.tinymce.js +0 -135
@@ -18,6 +18,8 @@
18
18
  <!-- Grid editor javascript -->
19
19
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
20
20
  <script src="../dist/jquery.grideditor.min.js"></script>
21
+ <!-- The text editor is a plugin of its own, loaded after the editor -->
22
+ <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
21
23
  </head>
22
24
  <body>
23
25
  <!-- Back to the demo index -->
@@ -18,6 +18,8 @@
18
18
  <!-- The editor with SortableJS inside it. Every other example loads the
19
19
  two files separately; a page does one or the other, never both. -->
20
20
  <script src="../dist/jquery.grideditor.bundle.min.js"></script>
21
+ <!-- The text editor is a plugin of its own, loaded after the editor -->
22
+ <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
21
23
 
22
24
  <script>
23
25
  $(function() {
@@ -19,6 +19,8 @@
19
19
  <!-- Grid editor javascript -->
20
20
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
21
21
  <script src="../dist/jquery.grideditor.min.js"></script>
22
+ <!-- The text editor is a plugin of its own, loaded after the editor -->
23
+ <script src="../dist/plugins/grideditor.ckeditor.min.js"></script>
22
24
 
23
25
  <script>
24
26
  $(function() {
@@ -17,6 +17,8 @@
17
17
  <!-- Grid editor javascript -->
18
18
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
19
19
  <script src="../dist/jquery.grideditor.min.js"></script>
20
+ <!-- The text editor is a plugin of its own, loaded after the editor -->
21
+ <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
20
22
  <!-- Copy and paste is a plugin of its own. The others are here so there
21
23
  is a bit of everything to copy. -->
22
24
  <script src="../dist/plugins/grideditor.clipboard.min.js"></script>
@@ -17,6 +17,8 @@
17
17
  <!-- Grid editor javascript -->
18
18
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
19
19
  <script src="../dist/jquery.grideditor.min.js"></script>
20
+ <!-- The text editor is a plugin of its own, loaded after the editor -->
21
+ <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
20
22
  <!-- One file per container type: load the ones this page offers -->
21
23
  <script src="../dist/plugins/grideditor.tabs.min.js"></script>
22
24
  <script src="../dist/plugins/grideditor.accordion.min.js"></script>
@@ -17,6 +17,8 @@
17
17
  <!-- Grid editor javascript -->
18
18
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
19
19
  <script src="../dist/jquery.grideditor.min.js"></script>
20
+ <!-- The text editor is a plugin of its own, loaded after the editor -->
21
+ <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
20
22
  <script src="../dist/plugins/grideditor.elements.min.js"></script>
21
23
 
22
24
  <style>
@@ -61,6 +61,14 @@
61
61
  <span class="text-body-secondary">The plugin model, with a container plugin written in the page itself</span>
62
62
  </a>
63
63
 
64
+ <a class="list-group-item list-group-item-action" href="attributes.html">
65
+ <div class="d-flex justify-content-between">
66
+ <strong>A plugin with a modal</strong>
67
+ <code class="text-body-secondary">attributes.html</code>
68
+ </div>
69
+ <span class="text-body-secondary">A drawer tool that opens a modal and saves its settings on the node as an attribute, with tinyMCE&rsquo;s undo in mind</span>
70
+ </a>
71
+
64
72
  <a class="list-group-item list-group-item-action" href="containers.html">
65
73
  <div class="d-flex justify-content-between">
66
74
  <strong>Containers</strong>
@@ -21,6 +21,8 @@
21
21
  <!-- Grid editor javascript -->
22
22
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
23
23
  <script src="../dist/jquery.grideditor.min.js"></script>
24
+ <!-- The text editor is a plugin of its own, loaded after the editor -->
25
+ <script src="../dist/plugins/grideditor.summernote.min.js"></script>
24
26
 
25
27
  <script>
26
28
  $(function() {
@@ -17,6 +17,8 @@
17
17
  <!-- Grid editor javascript -->
18
18
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
19
19
  <script src="../dist/jquery.grideditor.min.js"></script>
20
+ <!-- The text editor is a plugin of its own, loaded after the editor -->
21
+ <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
20
22
 
21
23
  <script>
22
24
  $(function() {
package/package.json CHANGED
@@ -34,7 +34,7 @@
34
34
  "comment": "A scoped package publishes restricted unless it is told otherwise.",
35
35
  "access": "public"
36
36
  },
37
- "version": "5.1.1",
37
+ "version": "5.2.0",
38
38
  "main": "dist/jquery.grideditor.js",
39
39
  "files": [
40
40
  "dist",
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Up to 6.0 the main bundle carries a copy of each text editor plugin, so a
3
+ * page that loaded only the editor keeps the editor it had. This marks those
4
+ * copies, and the editor warns once when a content area is edited with one:
5
+ * 6.0 leaves them out. Loaded on its own, a plugin's file registers itself
6
+ * again, unmarked, and is the one used.
7
+ *
8
+ * Only ever concatenated after the plugins it marks, never built on its own.
9
+ */
10
+ (function($) {
11
+ ['tinymce', 'ckeditor', 'summernote'].forEach(function(type) {
12
+ if ($.fn.gridEditor.texts[type]) { $.fn.gridEditor.texts[type].bundled = true; }
13
+ });
14
+ })(jQuery);
@@ -894,7 +894,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
894
894
 
895
895
  // Add row
896
896
  addRowGroup = $('<div class="ge-addRowGroup btn-group" />').appendTo(wrapper);
897
- addContainerGroup = $('<div class="ge-addContainerGroup btn-group" />');
897
+ addContainerGroup = $('<div class="ge-addContainerGroup btn-group ms-1" />');
898
898
  $.each(settings.new_row_layouts, function(j, layout) {
899
899
  var grouped = !Array.isArray(layout);
900
900
  var btn = $('<a class="btn btn-sm btn-primary" />')
@@ -1040,9 +1040,11 @@ $.fn.gridEditor = function( optionsOrMethod ) {
1040
1040
  ;
1041
1041
 
1042
1042
  // Floated right after the source and preview buttons, so it
1043
- // stands to their left
1043
+ // stands to their left. Not a btn-group: its buttons show one at
1044
+ // a time, and a hidden one still counts as a neighbour to
1045
+ // Bootstrap, which squares off the corners they would share.
1044
1046
  if (endItems.length) {
1045
- $('<div class="btn-group pull-right ge-toolbar-end" />')
1047
+ $('<div class="pull-right ge-toolbar-end" />')
1046
1048
  .append(endItems)
1047
1049
  .appendTo(wrapper)
1048
1050
  ;
@@ -1402,11 +1404,25 @@ $.fn.gridEditor = function( optionsOrMethod ) {
1402
1404
  // its toolbar out against, and nothing anyone can type into
1403
1405
  if (!$(this).is(':visible')) { return; }
1404
1406
 
1405
- var rte = getRTE($(this).data('ge-content-type'));
1406
- if (rte) {
1407
- $(this).addClass('ge-rte-active', true);
1408
- rte.init(settings, $(this));
1407
+ var type = $(this).data('ge-content-type');
1408
+ var text = textFor(type);
1409
+ if (!text) { return; }
1410
+
1411
+ // Not marked active, so the next click tries again: the library
1412
+ // may be loaded by then
1413
+ if (text.available && !text.available()) {
1414
+ if (text.missingKey) { console.error(t(text.missingKey)); }
1415
+ return;
1416
+ }
1417
+
1418
+ if (text.bundled) {
1419
+ warnOnceHere('text-bundled:' + type, 'the ' + type + ' text editor is the copy in the ' +
1420
+ 'main bundle, which 6.0 will not include: load dist/plugins/grideditor.' + type +
1421
+ '.js after the editor');
1409
1422
  }
1423
+
1424
+ $(this).addClass('ge-rte-active');
1425
+ text.start($(this));
1410
1426
  }
1411
1427
 
1412
1428
  function reset() {
@@ -1434,9 +1450,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
1434
1450
  canvas.removeClass('ge-editing ge-drag-drawer ge-dropping');
1435
1451
  var contents = canvas.find('.ge-content').each(function() {
1436
1452
  var content = $(this);
1437
- var rte = getRTE(content.data('ge-content-type'));
1438
- if (rte) {
1439
- rte.deinit(settings, content);
1453
+ var text = textFor(content.data('ge-content-type'));
1454
+ if (text) {
1455
+ text.stop(content);
1440
1456
  }
1441
1457
  // Cleared after rte.deinit, not before: an editor can restore the
1442
1458
  // class attribute it snapshotted when it was created, which would
@@ -1553,6 +1569,23 @@ $.fn.gridEditor = function( optionsOrMethod ) {
1553
1569
  if (wanted(name)) { FEATURES[name] = factory(api); }
1554
1570
  });
1555
1571
 
1572
+ // Text editors are chosen by content_types rather than by the
1573
+ // plugins setting: a page that names its containers there has
1574
+ // named no editor, and still wants the one it uses
1575
+ $.each($.fn.gridEditor.texts, function(type, factory) {
1576
+ TEXTS[type] = $.extend({ bundled: !!factory.bundled }, factory(api));
1577
+ });
1578
+
1579
+ // 5.x's registry, for an integration a host wrote itself. One the
1580
+ // plugins above already provide is theirs.
1581
+ $.each($.fn.gridEditor.RTEs, function(type, rte) {
1582
+ if (TEXTS[type]) { return; }
1583
+
1584
+ warnOnceHere('rtes:' + type, '$.fn.gridEditor.RTEs is deprecated and will be removed ' +
1585
+ 'in 7.0: register "' + type + '" under $.fn.gridEditor.texts, see docs/plugins.md');
1586
+ TEXTS[type] = legacyText(rte);
1587
+ });
1588
+
1556
1589
  $.each($.fn.gridEditor.utilities, function(name, factory) {
1557
1590
  if (!wanted(name)) { return; }
1558
1591
 
@@ -1629,6 +1662,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
1629
1662
  bareStyle: bareStyle,
1630
1663
  rowFromLayout: rowFromLayoutValue,
1631
1664
  nodeHtml: nodeHtml,
1665
+ // A text editor has rewritten a content area, so whatever the
1666
+ // editor and its plugins had put in there goes back in
1667
+ textReady: function(block) { block.trigger('ge-rte-ready'); },
1632
1668
  toolbarItems: function(name) {
1633
1669
  return mainControls
1634
1670
  ? mainControls.find('[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]')
@@ -2162,6 +2198,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
2162
2198
  * -------------------------------------------------------------- */
2163
2199
 
2164
2200
  var CONTAINERS = {}; // The container plugins in use, by the type each builds
2201
+ var TEXTS = {}; // The text editor plugins, by the content type each edits
2165
2202
  var FEATURES = {}; // The feature plugins in use, by name
2166
2203
  var UTILITIES = {}; // The utility plugins in use, by name
2167
2204
  var featureMethods = {}; // The methods those features contribute
@@ -3768,9 +3805,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
3768
3805
  * the all view. `offset` indents it, within the same 12 unit budget.
3769
3806
  */
3770
3807
  function createColumn(size, offset) {
3771
- var rte = getRTE(settings.content_types[0]);
3808
+ var text = textFor(settings.content_types[0]);
3772
3809
  var column = $('<div class="column"/>')
3773
- .append(createDefaultContentWrapper().html(rte ? rte.initialContent : ''))
3810
+ .append(createDefaultContentWrapper().html(text ? text.initialContent : ''))
3774
3811
  ;
3775
3812
 
3776
3813
  // The tier being edited, or the base class in the all view
@@ -3913,8 +3950,21 @@ $.fn.gridEditor = function( optionsOrMethod ) {
3913
3950
  return curView;
3914
3951
  }
3915
3952
 
3916
- function getRTE(type) {
3917
- return $.fn.gridEditor.RTEs[type];
3953
+ /** The text editor plugin for a content type, or null. */
3954
+ function textFor(type) {
3955
+ return TEXTS[type] || null;
3956
+ }
3957
+
3958
+ /**
3959
+ * An integration written to 5.x's contract - init and deinit over a
3960
+ * set of content areas - as a text editor plugin.
3961
+ */
3962
+ function legacyText(rte) {
3963
+ return {
3964
+ initialContent: rte.initialContent,
3965
+ start: function(block) { rte.init(settings, block); },
3966
+ stop: function(block) { rte.deinit(settings, block); },
3967
+ };
3918
3968
  }
3919
3969
 
3920
3970
  /**
@@ -3989,6 +4039,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
3989
4039
 
3990
4040
  };
3991
4041
 
4042
+ /**
4043
+ * Text editor plugins: tinyMCE, CKEditor, summernote, and whatever a host
4044
+ * writes. A factory registered under the content type it edits, called once
4045
+ * per editor with the handle described in docs/plugins.md, returning
4046
+ * { labelKey, initialContent, available, missingKey, start, stop }.
4047
+ */
4048
+ $.fn.gridEditor.texts = {};
4049
+
4050
+ /** 5.x's registry of text editors, adapted with a warning. Removed in 7.0. */
3992
4051
  $.fn.gridEditor.RTEs = {};
3993
4052
 
3994
4053
  /**
@@ -0,0 +1,115 @@
1
+ /**
2
+ * CKEditor for grid-editor's content areas.
3
+ *
4
+ * A text editor plugin: load this file after the editor, and CKEditor 4
5
+ * after or before it, and content_types: ['ckeditor'] edits each content area
6
+ * with an inline CKEditor. What it can ask the editor for is the handle its
7
+ * factory is called with, described in docs/plugins.md.
8
+ *
9
+ * <script src="ckeditor/ckeditor.js"></script>
10
+ * <script src="dist/jquery.grideditor.min.js"></script>
11
+ * <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
12
+ *
13
+ * Up to 6.0 the main bundle carries a copy of this file too.
14
+ */
15
+ (function($) {
16
+
17
+ var INITIAL_CONTENT = '<p>Lorem initius... </p>';
18
+
19
+ $.fn.gridEditor.texts.ckeditor = function(ge) {
20
+
21
+ /**
22
+ * The instance editing this content area. Kept in jQuery data when it
23
+ * is made, and looked for among CKEditor's own as a fallback, since
24
+ * an instance made by another version of this file has no data.
25
+ */
26
+ function instanceOf(contentArea) {
27
+ var kept = contentArea.data('ge-ckeditor');
28
+ if (kept) { return kept; }
29
+
30
+ var found = null;
31
+ $.each(window.CKEDITOR.instances, function(name, instance) {
32
+ if (instance.element && instance.element.$ === contentArea[0]) { found = instance; }
33
+ });
34
+
35
+ return found;
36
+ }
37
+
38
+ return {
39
+ initialContent: INITIAL_CONTENT,
40
+ missingKey: 'error.ckeditor_missing',
41
+
42
+ available: function() { return !!window.CKEDITOR; },
43
+
44
+ start: function(contentAreas) {
45
+ var settings = ge.settings;
46
+
47
+ contentAreas.each(function() {
48
+ var contentArea = $(this);
49
+ if (contentArea.hasClass('active')) { return; }
50
+
51
+ if (contentArea.html() == INITIAL_CONTENT) {
52
+ // CKEditor kills this '&nbsp' creating a non usable box :/
53
+ contentArea.html('&nbsp;');
54
+ }
55
+
56
+ // Add the .attr('contenteditable',''true') or CKEditor loads readonly
57
+ contentArea.addClass('active').attr('contenteditable', 'true');
58
+
59
+ var configuration = $.extend(
60
+ {},
61
+ (settings.ckeditor && settings.ckeditor.config ? settings.ckeditor.config : {}),
62
+ {
63
+ // Focus editor on creation
64
+ on: {
65
+ instanceReady: function( evt ) {
66
+ // Call original instanceReady function, if one was passed in the config
67
+ var callback;
68
+ try {
69
+ callback = settings.ckeditor.config.on.instanceReady;
70
+ } catch (err) {
71
+ // No callback passed
72
+ }
73
+ if (callback) {
74
+ callback.call(this, evt);
75
+ }
76
+
77
+ // The editor owns what is inside the
78
+ // content area now, so the grid editor is
79
+ // told to put its own furniture back
80
+ ge.textReady(contentArea);
81
+
82
+ instance.focus();
83
+ }
84
+ }
85
+ }
86
+ );
87
+ var instance = window.CKEDITOR.inline(contentArea.get(0), configuration);
88
+ contentArea.data('ge-ckeditor', instance);
89
+ });
90
+ },
91
+
92
+ stop: function(contentAreas) {
93
+ contentAreas.filter('.active').each(function() {
94
+ var contentArea = $(this);
95
+
96
+ // This content area's instance, and no other: up to 5.x
97
+ // closing one content area destroyed every CKEditor on
98
+ // the page, other editors' and the host's own included
99
+ var instance = window.CKEDITOR ? instanceOf(contentArea) : null;
100
+ if (instance) { instance.destroy(); }
101
+ contentArea.removeData('ge-ckeditor');
102
+
103
+ // Cleanup
104
+ contentArea
105
+ .removeClass('active cke_focus')
106
+ .removeAttr('id')
107
+ .removeAttr('style')
108
+ .removeAttr('spellcheck')
109
+ .removeAttr('contenteditable')
110
+ ;
111
+ });
112
+ },
113
+ };
114
+ };
115
+ })(jQuery);
@@ -0,0 +1,93 @@
1
+ /**
2
+ * Summernote for grid-editor's content areas.
3
+ *
4
+ * A text editor plugin: load this file after the editor, and summernote
5
+ * after or before it, and content_types: ['summernote'] edits each content
6
+ * area with summernote in air mode. What it can ask the editor for is the
7
+ * handle its factory is called with, described in docs/plugins.md.
8
+ *
9
+ * <script src="summernote/summernote-bs5.min.js"></script>
10
+ * <script src="dist/jquery.grideditor.min.js"></script>
11
+ * <script src="dist/plugins/grideditor.summernote.min.js"></script>
12
+ *
13
+ * Up to 6.0 the main bundle carries a copy of this file too.
14
+ */
15
+ (function($) {
16
+
17
+ var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
18
+
19
+ $.fn.gridEditor.texts.summernote = function(ge) {
20
+ return {
21
+ initialContent: INITIAL_CONTENT,
22
+ missingKey: 'error.summernote_missing',
23
+
24
+ available: function() { return !!$.fn.summernote; },
25
+
26
+ start: function(contentAreas) {
27
+ var settings = ge.settings;
28
+
29
+ // Summernote 0.9.1 calls $.now(), which jQuery 4 removed, and
30
+ // cannot open without it. Given back only where it is missing,
31
+ // and only once summernote is actually used.
32
+ if (!$.now) { $.now = Date.now; }
33
+
34
+ contentAreas.each(function() {
35
+ var contentArea = $(this);
36
+ if (contentArea.hasClass('active')) { return; }
37
+
38
+ if (contentArea.html() == INITIAL_CONTENT) {
39
+ contentArea.html('');
40
+ }
41
+ contentArea.addClass('active');
42
+
43
+ var configuration = $.extend(
44
+ true, // deep copy
45
+ {},
46
+ (settings.summernote && settings.summernote.config ? settings.summernote.config : {}),
47
+ {
48
+ tabsize: 2,
49
+ airMode: true,
50
+ // Focus editor on creation
51
+ callbacks: {
52
+ onInit: function() {
53
+
54
+ // Call original oninit function, if one was passed in the config
55
+ var callback;
56
+ try {
57
+ callback = settings.summernote.config.callbacks.onInit;
58
+ } catch (err) {
59
+ // No callback passed
60
+ }
61
+ if (callback) {
62
+ callback.call(this);
63
+ }
64
+
65
+ // The editor owns what is inside the
66
+ // content area now, so the grid editor is
67
+ // told to put its own furniture back
68
+ ge.textReady(contentArea);
69
+
70
+ contentArea.summernote('focus');
71
+ }
72
+ }
73
+ }
74
+ );
75
+ contentArea.summernote(configuration);
76
+ });
77
+ },
78
+
79
+ stop: function(contentAreas) {
80
+ contentAreas.filter('.active').each(function() {
81
+ var contentArea = $(this);
82
+ contentArea.summernote('destroy');
83
+ contentArea
84
+ .removeClass('active')
85
+ .removeAttr('id')
86
+ .removeAttr('style')
87
+ .removeAttr('spellcheck')
88
+ ;
89
+ });
90
+ },
91
+ };
92
+ };
93
+ })(jQuery);
@@ -0,0 +1,157 @@
1
+ /**
2
+ * tinyMCE for grid-editor's content areas.
3
+ *
4
+ * A text editor plugin: load this file after the editor, and tinyMCE 6
5
+ * after or before it, and content_types: ['tinymce'] edits each content area
6
+ * with an inline tinyMCE. What it can ask the editor for is the handle its
7
+ * factory is called with, described in docs/plugins.md.
8
+ *
9
+ * <script src="tinymce/tinymce.min.js"></script>
10
+ * <script src="dist/jquery.grideditor.min.js"></script>
11
+ * <script src="dist/plugins/grideditor.tinymce.min.js"></script>
12
+ *
13
+ * Up to 6.0 the main bundle carries a copy of this file too.
14
+ */
15
+ (function($) {
16
+
17
+ // tinyMCE snapshots the target element's attributes when an inline editor is
18
+ // created and restores them on remove(), so this has to run *after* remove()
19
+ // to keep the grid editor's own class and tinyMCE's leftovers off the element.
20
+ function cleanUp(contentArea) {
21
+ contentArea
22
+ .removeClass('active')
23
+ .removeClass('ge-rte-active')
24
+ .removeAttr('id')
25
+ .removeAttr('style')
26
+ .removeAttr('spellcheck')
27
+ .removeAttr('contenteditable')
28
+ .removeAttr('data-mce-style')
29
+ ;
30
+ }
31
+
32
+ var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
33
+
34
+ $.fn.gridEditor.texts.tinymce = function(ge) {
35
+ return {
36
+ initialContent: INITIAL_CONTENT,
37
+ missingKey: 'error.tinymce_missing',
38
+
39
+ available: function() { return !!window.tinymce; },
40
+
41
+ start: function(contentAreas) {
42
+ var settings = ge.settings;
43
+ var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
44
+
45
+ contentAreas.each(function() {
46
+ var contentArea = $(this);
47
+ if (contentArea.hasClass('active')) { return; }
48
+
49
+ if (contentArea.html() == INITIAL_CONTENT) {
50
+ contentArea.html('');
51
+ }
52
+ contentArea.addClass('active');
53
+
54
+ var configuration = $.extend({
55
+ // tinyMCE's own "Upgrade" badge in the menubar. Off by
56
+ // default because an inline editor here is a column of
57
+ // someone's page, not tinyMCE's own interface; a host that
58
+ // wants it back passes promotion: true.
59
+ promotion: false,
60
+ }, userConfig, {
61
+ target: this,
62
+ inline: true,
63
+ init_instance_callback: function(editor) {
64
+ // deinit ran before this init finished, so tear it down again
65
+ if (contentArea.data('ge-tinymce-pending-remove')) {
66
+ contentArea.removeData('ge-tinymce-pending-remove');
67
+ editor.remove();
68
+ // deinit already ran and cannot clean up after this
69
+ // late remove(), so do it here instead
70
+ cleanUp(contentArea);
71
+ return;
72
+ }
73
+
74
+ contentArea.data('ge-tinymce', editor);
75
+
76
+ // The editor rewrote what is inside this content area
77
+ // while it took it over, so whatever the grid editor
78
+ // had in there is gone. Saying so lets it put its own
79
+ // furniture back.
80
+ ge.textReady(contentArea);
81
+
82
+ // Undo and redo rewrite it too, from snapshots that
83
+ // leave out whatever is marked data-mce-bogus - an
84
+ // element's drawer among them - so it goes back in
85
+ // after each of those as well
86
+ editor.on('Undo Redo', function() {
87
+ ge.textReady(contentArea);
88
+ });
89
+
90
+ // The inline toolbar is laid out against the element's
91
+ // geometry at the moment tinyMCE draws it, and an
92
+ // element that has just appeared - a tab pane, an
93
+ // accordion body, a column whose width is still
94
+ // settling - may not have its own width yet. Asking
95
+ // for the ui again once the browser has laid the frame
96
+ // out measures it as it now is, instead of leaving a
97
+ // toolbar wrapped into a narrow column.
98
+ window.requestAnimationFrame(function() {
99
+ if (editor.removed || !editor.ui || !editor.ui.show) { return; }
100
+
101
+ editor.ui.show();
102
+ });
103
+
104
+ // And again whenever the user comes back to this
105
+ // editor: by then the element may have been resized,
106
+ // hidden and shown again - a tab switched away from
107
+ // and back, a column made narrower - and the toolbar
108
+ // is only ever as right as its last measurement.
109
+ editor.on('focus', function() {
110
+ window.requestAnimationFrame(function() {
111
+ if (editor.removed || !editor.ui || !editor.ui.show) { return; }
112
+
113
+ editor.ui.show();
114
+ });
115
+ });
116
+
117
+ // Bring focus to text field
118
+ editor.focus();
119
+
120
+ // Call the original callbacks, if any were passed in the config
121
+ if (userConfig.init_instance_callback) {
122
+ userConfig.init_instance_callback.call(this, editor);
123
+ }
124
+ // 'oninit' is the pre-6 name, honoured so existing configs keep working
125
+ if (userConfig.oninit) {
126
+ userConfig.oninit.call(this, editor);
127
+ }
128
+ }
129
+ });
130
+ // We always edit the element we were handed, so a selector in the
131
+ // user config would only fight with target
132
+ delete configuration.selector;
133
+
134
+ window.tinymce.init(configuration);
135
+ });
136
+ },
137
+
138
+ stop: function(contentAreas) {
139
+ contentAreas.filter('.active').each(function() {
140
+ var contentArea = $(this);
141
+ var editor = contentArea.data('ge-tinymce');
142
+
143
+ if (editor) {
144
+ contentArea.removeData('ge-tinymce');
145
+ editor.remove();
146
+ } else {
147
+ // tinymce.init() is asynchronous, so the editor may not exist
148
+ // yet. Leave a note for init_instance_callback to remove it.
149
+ contentArea.data('ge-tinymce-pending-remove', true);
150
+ }
151
+
152
+ cleanUp(contentArea);
153
+ });
154
+ },
155
+ };
156
+ };
157
+ })(jQuery);
@@ -67,6 +67,10 @@
67
67
 
68
68
  .ge-toolbar-end {
69
69
  margin-right: 5px;
70
+
71
+ > .btn + .btn {
72
+ margin-left: 5px;
73
+ }
70
74
  }
71
75
 
72
76
  .btn:focus {