@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.
- package/BUILDING.md +6 -0
- package/CHANGELOG.md +45 -0
- package/README.md +18 -8
- package/UPGRADING.md +25 -0
- package/dist/grideditor.css +3 -0
- package/dist/grideditor.min.css +1 -1
- package/dist/grideditor.min.css.map +1 -1
- package/dist/jquery.grideditor.bundle.min.js +2 -2
- package/dist/jquery.grideditor.js +374 -218
- package/dist/jquery.grideditor.min.js +1 -1
- package/dist/jquery.grideditor.min.js.map +1 -1
- package/dist/plugins/grideditor.ckeditor.js +115 -0
- package/dist/plugins/grideditor.ckeditor.min.js +2 -0
- package/dist/plugins/grideditor.ckeditor.min.js.map +1 -0
- package/dist/plugins/grideditor.summernote.js +93 -0
- package/dist/plugins/grideditor.summernote.min.js +2 -0
- package/dist/plugins/grideditor.summernote.min.js.map +1 -0
- package/dist/plugins/grideditor.tinymce.js +157 -0
- package/dist/plugins/grideditor.tinymce.min.js +2 -0
- package/dist/plugins/grideditor.tinymce.min.js.map +1 -0
- package/docs/plugins.md +86 -3
- package/example/attributes.html +364 -0
- package/example/autosave.html +2 -0
- package/example/basic.html +2 -0
- package/example/ckeditor.html +2 -0
- package/example/clipboard.html +2 -0
- package/example/containers.html +2 -0
- package/example/elements.html +2 -0
- package/example/index.html +8 -0
- package/example/summernote.html +2 -0
- package/example/wrap_content.html +2 -0
- package/package.json +1 -1
- package/src/js/compat/bundled-texts.js +14 -0
- package/src/js/jquery.grideditor.js +73 -14
- package/src/js/plugins/grideditor.ckeditor.js +115 -0
- package/src/js/plugins/grideditor.summernote.js +93 -0
- package/src/js/plugins/grideditor.tinymce.js +157 -0
- package/src/less/grideditor.less +4 -0
- package/src/js/jquery.grideditor.ckeditor.js +0 -77
- package/src/js/jquery.grideditor.summernote.js +0 -72
- package/src/js/jquery.grideditor.tinymce.js +0 -135
package/example/autosave.html
CHANGED
|
@@ -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 -->
|
package/example/basic.html
CHANGED
|
@@ -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() {
|
package/example/ckeditor.html
CHANGED
|
@@ -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() {
|
package/example/clipboard.html
CHANGED
|
@@ -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>
|
package/example/containers.html
CHANGED
|
@@ -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>
|
package/example/elements.html
CHANGED
|
@@ -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>
|
package/example/index.html
CHANGED
|
@@ -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’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>
|
package/example/summernote.html
CHANGED
|
@@ -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
|
@@ -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="
|
|
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
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
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
|
|
1438
|
-
if (
|
|
1439
|
-
|
|
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
|
|
3808
|
+
var text = textFor(settings.content_types[0]);
|
|
3772
3809
|
var column = $('<div class="column"/>')
|
|
3773
|
-
.append(createDefaultContentWrapper().html(
|
|
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
|
-
|
|
3917
|
-
|
|
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 ' ' creating a non usable box :/
|
|
53
|
+
contentArea.html(' ');
|
|
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);
|