@themarioga/grid-editor 5.1.2 → 5.2.0

package/dist/plugins/grideditor.tinymce.js

@@ -0,0 +1,157 @@
+/**
+ * tinyMCE for grid-editor's content areas.
+ *
+ * A text editor plugin: load this file after the editor, and tinyMCE 6
+ * after or before it, and content_types: ['tinymce'] edits each content area
+ * with an inline tinyMCE. What it can ask the editor for is the handle its
+ * factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="tinymce/tinymce.min.js"></script>
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.tinymce.min.js"></script>
+ *
+ * Up to 6.0 the main bundle carries a copy of this file too.
+ */
+(function($) {
+
+    // tinyMCE snapshots the target element's attributes when an inline editor is
+    // created and restores them on remove(), so this has to run *after* remove()
+    // to keep the grid editor's own class and tinyMCE's leftovers off the element.
+    function cleanUp(contentArea) {
+        contentArea
+            .removeClass('active')
+            .removeClass('ge-rte-active')
+            .removeAttr('id')
+            .removeAttr('style')
+            .removeAttr('spellcheck')
+            .removeAttr('contenteditable')
+            .removeAttr('data-mce-style')
+        ;
+    }
+
+    var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
+
+    $.fn.gridEditor.texts.tinymce = function(ge) {
+        return {
+            initialContent: INITIAL_CONTENT,
+            missingKey: 'error.tinymce_missing',
+
+            available: function() { return !!window.tinymce; },
+
+            start: function(contentAreas) {
+                var settings = ge.settings;
+                var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
+
+                contentAreas.each(function() {
+                    var contentArea = $(this);
+                    if (contentArea.hasClass('active')) { return; }
+
+                    if (contentArea.html() == INITIAL_CONTENT) {
+                        contentArea.html('');
+                    }
+                    contentArea.addClass('active');
+
+                    var configuration = $.extend({
+                        // tinyMCE's own "Upgrade" badge in the menubar. Off by
+                        // default because an inline editor here is a column of
+                        // someone's page, not tinyMCE's own interface; a host that
+                        // wants it back passes promotion: true.
+                        promotion: false,
+                    }, userConfig, {
+                        target: this,
+                        inline: true,
+                        init_instance_callback: function(editor) {
+                            // deinit ran before this init finished, so tear it down again
+                            if (contentArea.data('ge-tinymce-pending-remove')) {
+                                contentArea.removeData('ge-tinymce-pending-remove');
+                                editor.remove();
+                                // deinit already ran and cannot clean up after this
+                                // late remove(), so do it here instead
+                                cleanUp(contentArea);
+                                return;
+                            }
+
+                            contentArea.data('ge-tinymce', editor);
+
+                            // The editor rewrote what is inside this content area
+                            // while it took it over, so whatever the grid editor
+                            // had in there is gone. Saying so lets it put its own
+                            // furniture back.
+                            ge.textReady(contentArea);
+
+                            // Undo and redo rewrite it too, from snapshots that
+                            // leave out whatever is marked data-mce-bogus - an
+                            // element's drawer among them - so it goes back in
+                            // after each of those as well
+                            editor.on('Undo Redo', function() {
+                                ge.textReady(contentArea);
+                            });
+
+                            // The inline toolbar is laid out against the element's
+                            // geometry at the moment tinyMCE draws it, and an
+                            // element that has just appeared - a tab pane, an
+                            // accordion body, a column whose width is still
+                            // settling - may not have its own width yet. Asking
+                            // for the ui again once the browser has laid the frame
+                            // out measures it as it now is, instead of leaving a
+                            // toolbar wrapped into a narrow column.
+                            window.requestAnimationFrame(function() {
+                                if (editor.removed || !editor.ui || !editor.ui.show) { return; }
+
+                                editor.ui.show();
+                            });
+
+                            // And again whenever the user comes back to this
+                            // editor: by then the element may have been resized,
+                            // hidden and shown again - a tab switched away from
+                            // and back, a column made narrower - and the toolbar
+                            // is only ever as right as its last measurement.
+                            editor.on('focus', function() {
+                                window.requestAnimationFrame(function() {
+                                    if (editor.removed || !editor.ui || !editor.ui.show) { return; }
+
+                                    editor.ui.show();
+                                });
+                            });
+
+                            // Bring focus to text field
+                            editor.focus();
+
+                            // Call the original callbacks, if any were passed in the config
+                            if (userConfig.init_instance_callback) {
+                                userConfig.init_instance_callback.call(this, editor);
+                            }
+                            // 'oninit' is the pre-6 name, honoured so existing configs keep working
+                            if (userConfig.oninit) {
+                                userConfig.oninit.call(this, editor);
+                            }
+                        }
+                    });
+                    // We always edit the element we were handed, so a selector in the
+                    // user config would only fight with target
+                    delete configuration.selector;
+
+                    window.tinymce.init(configuration);
+                });
+            },
+
+            stop: function(contentAreas) {
+                contentAreas.filter('.active').each(function() {
+                    var contentArea = $(this);
+                    var editor = contentArea.data('ge-tinymce');
+
+                    if (editor) {
+                        contentArea.removeData('ge-tinymce');
+                        editor.remove();
+                    } else {
+                        // tinymce.init() is asynchronous, so the editor may not exist
+                        // yet. Leave a note for init_instance_callback to remove it.
+                        contentArea.data('ge-tinymce-pending-remove', true);
+                    }
+
+                    cleanUp(contentArea);
+                });
+            },
+        };
+    };
+})(jQuery);

package/dist/plugins/grideditor.tinymce.min.js

@@ -0,0 +1,2 @@
+(o=>{function a(e){e.removeClass("active").removeClass("ge-rte-active").removeAttr("id").removeAttr("style").removeAttr("spellcheck").removeAttr("contenteditable").removeAttr("data-mce-style")}var c="<p>Lorem ipsum dolores</p>";o.fn.gridEditor.texts.tinymce=function(n){return{initialContent:c,missingKey:"error.tinymce_missing",available:function(){return!!window.tinymce},start:function(e){var t=n.settings,i=t.tinymce&&t.tinymce.config?t.tinymce.config:{};e.each(function(){var e,t=o(this);t.hasClass("active")||(t.html()==c&&t.html(""),t.addClass("active"),delete(e=o.extend({promotion:!1},i,{target:this,inline:!0,init_instance_callback:function(e){t.data("ge-tinymce-pending-remove")?(t.removeData("ge-tinymce-pending-remove"),e.remove(),a(t)):(t.data("ge-tinymce",e),n.textReady(t),e.on("Undo Redo",function(){n.textReady(t)}),window.requestAnimationFrame(function(){!e.removed&&e.ui&&e.ui.show&&e.ui.show()}),e.on("focus",function(){window.requestAnimationFrame(function(){!e.removed&&e.ui&&e.ui.show&&e.ui.show()})}),e.focus(),i.init_instance_callback&&i.init_instance_callback.call(this,e),i.oninit&&i.oninit.call(this,e))}})).selector,window.tinymce.init(e))})},stop:function(e){e.filter(".active").each(function(){var e=o(this),t=e.data("ge-tinymce");t?(e.removeData("ge-tinymce"),t.remove()):e.data("ge-tinymce-pending-remove",!0),a(e)})}}}})(jQuery);
+//# sourceMappingURL=grideditor.tinymce.min.js.map

package/dist/plugins/grideditor.tinymce.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.tinymce.min.js","sources":["../../src/js/plugins/grideditor.tinymce.js"],"names":["$","cleanUp","contentArea","removeClass","removeAttr","INITIAL_CONTENT","fn","gridEditor","texts","tinymce","ge","initialContent","missingKey","available","window","start","contentAreas","settings","userConfig","config","each","configuration","this","hasClass","html","addClass","extend","promotion","target","inline","init_instance_callback","editor","data","removeData","remove","textReady","on","requestAnimationFrame","removed","ui","show","focus","call","oninit","selector","init","stop","filter","jQuery"],"mappings":"CAcUA,IAKN,SAASC,EAAQC,GACbA,EACKC,YAAY,QAAQ,EACpBA,YAAY,eAAe,EAC3BC,WAAW,IAAI,EACfA,WAAW,OAAO,EAClBA,WAAW,YAAY,EACvBA,WAAW,iBAAiB,EAC5BA,WAAW,gBAAgB,CAEpC,CAEA,IAAIC,EAAkB,6BAEtBL,EAAEM,GAAGC,WAAWC,MAAMC,QAAU,SAASC,GACrC,MAAO,CACHC,eAAgBN,EAChBO,WAAY,wBAEZC,UAAW,WAAa,MAAO,CAAC,CAACC,OAAOL,OAAS,EAEjDM,MAAO,SAASC,GACZ,IAAIC,EAAWP,EAAGO,SACdC,EAAcD,EAASR,SAAWQ,EAASR,QAAQU,OAAUF,EAASR,QAAQU,OAAS,GAE3FH,EAAaI,KAAK,WACd,IAQIC,EARAnB,EAAcF,EAAEsB,IAAI,EACpBpB,EAAYqB,SAAS,QAAQ,IAE7BrB,EAAYsB,KAAK,GAAKnB,GACtBH,EAAYsB,KAAK,EAAE,EAEvBtB,EAAYuB,SAAS,QAAQ,EAgF7B,OA9EIJ,EAAgBrB,EAAE0B,OAAO,CAKzBC,UAAW,CAAA,CACf,EAAGT,EAAY,CACXU,OAAQN,KACRO,OAAQ,CAAA,EACRC,uBAAwB,SAASC,GAEzB7B,EAAY8B,KAAK,2BAA2B,GAC5C9B,EAAY+B,WAAW,2BAA2B,EAClDF,EAAOG,OAAO,EAGdjC,EAAQC,CAAW,IAIvBA,EAAY8B,KAAK,aAAcD,CAAM,EAMrCrB,EAAGyB,UAAUjC,CAAW,EAMxB6B,EAAOK,GAAG,YAAa,WACnB1B,EAAGyB,UAAUjC,CAAW,CAC5B,CAAC,EAUDY,OAAOuB,sBAAsB,WACrBN,CAAAA,EAAOO,SAAYP,EAAOQ,IAAOR,EAAOQ,GAAGC,MAE/CT,EAAOQ,GAAGC,KAAK,CACnB,CAAC,EAODT,EAAOK,GAAG,QAAS,WACftB,OAAOuB,sBAAsB,WACrBN,CAAAA,EAAOO,SAAYP,EAAOQ,IAAOR,EAAOQ,GAAGC,MAE/CT,EAAOQ,GAAGC,KAAK,CACnB,CAAC,CACL,CAAC,EAGDT,EAAOU,MAAM,EAGTvB,EAAWY,wBACXZ,EAAWY,uBAAuBY,KAAKpB,KAAMS,CAAM,EAGnDb,EAAWyB,QACXzB,EAAWyB,OAAOD,KAAKpB,KAAMS,CAAM,EAE3C,CACJ,CAAC,GAGoBa,SAErB9B,OAAOL,QAAQoC,KAAKxB,CAAa,EACrC,CAAC,CACL,EAEAyB,KAAM,SAAS9B,GACXA,EAAa+B,OAAO,SAAS,EAAE3B,KAAK,WAChC,IAAIlB,EAAcF,EAAEsB,IAAI,EACpBS,EAAS7B,EAAY8B,KAAK,YAAY,EAEtCD,GACA7B,EAAY+B,WAAW,YAAY,EACnCF,EAAOG,OAAO,GAIdhC,EAAY8B,KAAK,4BAA6B,CAAA,CAAI,EAGtD/B,EAAQC,CAAW,CACvB,CAAC,CACL,CACJ,CACJ,CACH,GAAE8C,MAAM"}

package/docs/plugins.md

@@ -14,13 +14,15 @@ the one to read first if you are about to write your own.
 <script src="dist/plugins/grideditor.elements.min.js"></script>
 ```
 
-There are three kinds. A **container plugin** builds a type of container — it
+There are four kinds. A **container plugin** builds a type of container — it
 registers under `$.fn.gridEditor.containers`, and the toolbar offers a button
 for it. A **utility plugin** declares families of Bootstrap's responsive
 utility classes — `$.fn.gridEditor.utilities` — and the editor edits them per
-breakpoint. A **feature plugin** is anything else the editor can do —
+breakpoint. A **text editor plugin** edits content areas with a rich text
+editor — `$.fn.gridEditor.texts`, one per editor: tinyMCE, CKEditor,
+summernote. A **feature plugin** is anything else the editor can do —
 `$.fn.gridEditor.features`, hooks into the canvas, and may contribute methods.
-All three are factories called once per editor with the same handle.
+All four are factories called once per editor with the same handle.
 
 The `plugins` setting names which of the loaded ones to use:
 
@@ -124,6 +126,7 @@ not change without a major version.
 | `ge.setUtility(node, family, value, options?)` | Write one through the events. `options` is a view key or `{ view, source }` |
 | `ge.utilityField(node, family)` | A panel field for one family, for a plugin that builds its own panel |
 | `ge.rowFromLayout(layout)` | A detached row from a layout: `[8, 4]`, `['auto', 'equal']` or `{ row_cols, columns }` |
+| `ge.textReady(block)` | A text editor has rewritten a content area: whatever the editor and its plugins put in there goes back in |
 | `ge.nodeHtml(node)` | One node's markup as `getHtml` would give it. The canvas leaves editing to read it and comes back, as it does for `getHtml` |
 | `ge.toolbarItems(name)` | The toolbar buttons the feature plugin `name` declared, for showing and hiding them |
 | `ge.bareStyle(node, family, property)` | A css property's value on the node with none of the family's classes: what a preview shows when no class applies and that is not a constant |
@@ -251,6 +254,55 @@ plugin knows which of its parts move: the tabs plugin makes its strip sortable
 and puts the panes back in strip order in `afterPaneMove`.
 
 
+Text editor plugins
+-------------------
+
+A text editor plugin edits content areas with a rich text editor. It is
+registered under the content type it edits - the name `content_types` uses -
+and the three that ship, `grideditor.tinymce.js`, `grideditor.ckeditor.js` and
+`grideditor.summernote.js`, are the ones to read:
+
+```javascript
+$.fn.gridEditor.texts.mytext = function(ge) {
+    return {
+        initialContent: '<p>Write here</p>',   // what a new column's content area holds
+        missingKey: 'error.mytext_missing',    // the error when the library is not loaded, optional
+        available: function() { return !!window.MyText; },   // optional, true otherwise
+
+        start: function(block) { … },   // open the editor on this content area
+        stop: function(block) { … },    // close it, and leave the content area as it was
+    };
+};
+```
+
+- **`start(block)`** is called when the user clicks a content area of this
+  type. The editor marks it `ge-rte-active` first, and does not call `start`
+  again until it has been stopped. Once the library has taken the content
+  area over, call **`ge.textReady(block)`**: it rewrote what was inside, and
+  the editor and its plugins put their own furniture back - an element's
+  drawer, for one. Call it again whenever the library rewrites the content
+  area again, as tinyMCE's undo does.
+- **`stop(block)`** is called for every content area of this type on each
+  `deinit`, which `getHtml` runs: a content area whose editor never started is
+  the plugin's to ignore. Whatever the library and `start` added - classes,
+  `contenteditable`, inline styles, ids - comes off here.
+- **`available()`** false and the editor logs `missingKey`'s message and
+  starts nothing, without marking the content area, so a later click tries
+  again once the library is there.
+
+A text editor is chosen by `content_types`, never by the `plugins` setting: a
+page that names its containers there has named no editor.
+
+Up to 6.0 the main bundle carries a copy of the three shipped ones, marked
+`bundled`; editing with a copy warns once that 6.0 leaves them out. A plugin's
+own file, loaded after, registers itself again and is the one used.
+
+5.x's `$.fn.gridEditor.RTEs.mytext = { init, deinit, initialContent }` still
+works: `init(settings, contentAreas)` and `deinit(settings, contentAreas)` are
+wrapped as `start` and `stop`, with a warning that `RTEs` is deprecated. It goes
+in 7.0.
+
+
 Utility plugins
 ---------------
 

package/example/attributes.html

@@ -17,6 +17,8 @@
     <!-- Grid editor javascript -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
     <script src="../dist/plugins/grideditor.card.min.js"></script>
     <script src="../dist/plugins/grideditor.elements.min.js"></script>
 

package/example/autosave.html

@@ -18,6 +18,8 @@
     <!-- Grid editor javascript -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
 </head>
 <body>
     <!-- Back to the demo index -->

package/example/basic.html

@@ -18,6 +18,8 @@
     <!-- The editor with SortableJS inside it. Every other example loads the
          two files separately; a page does one or the other, never both. -->
     <script src="../dist/jquery.grideditor.bundle.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
     
     <script>
         $(function() {

package/example/ckeditor.html

@@ -19,6 +19,8 @@
     <!-- Grid editor javascript -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.ckeditor.min.js"></script>
     
     <script>
         $(function() {

package/example/clipboard.html

@@ -17,6 +17,8 @@
     <!-- Grid editor javascript -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
     <!-- Copy and paste is a plugin of its own. The others are here so there
          is a bit of everything to copy. -->
     <script src="../dist/plugins/grideditor.clipboard.min.js"></script>

package/example/containers.html

@@ -17,6 +17,8 @@
     <!-- Grid editor javascript -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
     <!-- One file per container type: load the ones this page offers -->
     <script src="../dist/plugins/grideditor.tabs.min.js"></script>
     <script src="../dist/plugins/grideditor.accordion.min.js"></script>

package/example/elements.html

@@ -17,6 +17,8 @@
     <!-- Grid editor javascript -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
     <script src="../dist/plugins/grideditor.elements.min.js"></script>
 
     <style>

package/example/summernote.html

@@ -21,6 +21,8 @@
     <!-- Grid editor javascript -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.summernote.min.js"></script>
     
     <script>
         $(function() {

package/example/wrap_content.html

@@ -17,6 +17,8 @@
     <!-- Grid editor javascript -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- The text editor is a plugin of its own, loaded after the editor -->
+    <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
 
     <script>
         $(function() {

package/package.json

@@ -34,7 +34,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "5.1.2",
+  "version": "5.2.0",
   "main": "dist/jquery.grideditor.js",
   "files": [
     "dist",

package/src/js/compat/bundled-texts.js

@@ -0,0 +1,14 @@
+/**
+ * Up to 6.0 the main bundle carries a copy of each text editor plugin, so a
+ * page that loaded only the editor keeps the editor it had. This marks those
+ * copies, and the editor warns once when a content area is edited with one:
+ * 6.0 leaves them out. Loaded on its own, a plugin's file registers itself
+ * again, unmarked, and is the one used.
+ *
+ * Only ever concatenated after the plugins it marks, never built on its own.
+ */
+(function($) {
+    ['tinymce', 'ckeditor', 'summernote'].forEach(function(type) {
+        if ($.fn.gridEditor.texts[type]) { $.fn.gridEditor.texts[type].bundled = true; }
+    });
+})(jQuery);

package/src/js/jquery.grideditor.js

@@ -1404,11 +1404,25 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             // its toolbar out against, and nothing anyone can type into
             if (!$(this).is(':visible')) { return; }
             
-            var rte = getRTE($(this).data('ge-content-type'));
-            if (rte) {
-                $(this).addClass('ge-rte-active', true);
-                rte.init(settings, $(this));
+            var type = $(this).data('ge-content-type');
+            var text = textFor(type);
+            if (!text) { return; }
+
+            // Not marked active, so the next click tries again: the library
+            // may be loaded by then
+            if (text.available && !text.available()) {
+                if (text.missingKey) { console.error(t(text.missingKey)); }
+                return;
+            }
+
+            if (text.bundled) {
+                warnOnceHere('text-bundled:' + type, 'the ' + type + ' text editor is the copy in the ' +
+                    'main bundle, which 6.0 will not include: load dist/plugins/grideditor.' + type +
+                    '.js after the editor');
             }
+
+            $(this).addClass('ge-rte-active');
+            text.start($(this));
         }
 
         function reset() {
@@ -1436,9 +1450,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             canvas.removeClass('ge-editing ge-drag-drawer ge-dropping');
             var contents = canvas.find('.ge-content').each(function() {
                 var content = $(this);
-                var rte = getRTE(content.data('ge-content-type'));
-                if (rte) {
-                    rte.deinit(settings, content);
+                var text = textFor(content.data('ge-content-type'));
+                if (text) {
+                    text.stop(content);
                 }
                 // Cleared after rte.deinit, not before: an editor can restore the
                 // class attribute it snapshotted when it was created, which would
@@ -1555,6 +1569,23 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 if (wanted(name)) { FEATURES[name] = factory(api); }
             });
 
+            // Text editors are chosen by content_types rather than by the
+            // plugins setting: a page that names its containers there has
+            // named no editor, and still wants the one it uses
+            $.each($.fn.gridEditor.texts, function(type, factory) {
+                TEXTS[type] = $.extend({ bundled: !!factory.bundled }, factory(api));
+            });
+
+            // 5.x's registry, for an integration a host wrote itself. One the
+            // plugins above already provide is theirs.
+            $.each($.fn.gridEditor.RTEs, function(type, rte) {
+                if (TEXTS[type]) { return; }
+
+                warnOnceHere('rtes:' + type, '$.fn.gridEditor.RTEs is deprecated and will be removed ' +
+                    'in 7.0: register "' + type + '" under $.fn.gridEditor.texts, see docs/plugins.md');
+                TEXTS[type] = legacyText(rte);
+            });
+
             $.each($.fn.gridEditor.utilities, function(name, factory) {
                 if (!wanted(name)) { return; }
 
@@ -1631,6 +1662,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 bareStyle: bareStyle,
                 rowFromLayout: rowFromLayoutValue,
                 nodeHtml: nodeHtml,
+                // A text editor has rewritten a content area, so whatever the
+                // editor and its plugins had put in there goes back in
+                textReady: function(block) { block.trigger('ge-rte-ready'); },
                 toolbarItems: function(name) {
                     return mainControls
                         ? mainControls.find('[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]')
@@ -2164,6 +2198,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * -------------------------------------------------------------- */
 
         var CONTAINERS = {}; // The container plugins in use, by the type each builds
+        var TEXTS = {}; // The text editor plugins, by the content type each edits
         var FEATURES = {}; // The feature plugins in use, by name
         var UTILITIES = {}; // The utility plugins in use, by name
         var featureMethods = {}; // The methods those features contribute
@@ -3770,9 +3805,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * the all view. `offset` indents it, within the same 12 unit budget.
          */
         function createColumn(size, offset) {
-            var rte = getRTE(settings.content_types[0]);
+            var text = textFor(settings.content_types[0]);
             var column = $('<div class="column"/>')
-                .append(createDefaultContentWrapper().html(rte ? rte.initialContent : ''))
+                .append(createDefaultContentWrapper().html(text ? text.initialContent : ''))
             ;
 
             // The tier being edited, or the base class in the all view
@@ -3915,8 +3950,21 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return curView;
         }
         
-        function getRTE(type) {
-            return $.fn.gridEditor.RTEs[type];
+        /** The text editor plugin for a content type, or null. */
+        function textFor(type) {
+            return TEXTS[type] || null;
+        }
+
+        /**
+         * An integration written to 5.x's contract - init and deinit over a
+         * set of content areas - as a text editor plugin.
+         */
+        function legacyText(rte) {
+            return {
+                initialContent: rte.initialContent,
+                start: function(block) { rte.init(settings, block); },
+                stop: function(block) { rte.deinit(settings, block); },
+            };
         }
 
         /**
@@ -3991,6 +4039,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
 };
 
+/**
+ * Text editor plugins: tinyMCE, CKEditor, summernote, and whatever a host
+ * writes. A factory registered under the content type it edits, called once
+ * per editor with the handle described in docs/plugins.md, returning
+ * { labelKey, initialContent, available, missingKey, start, stop }.
+ */
+$.fn.gridEditor.texts = {};
+
+/** 5.x's registry of text editors, adapted with a warning. Removed in 7.0. */
 $.fn.gridEditor.RTEs = {};
 
 /**

package/src/js/plugins/grideditor.ckeditor.js

@@ -0,0 +1,115 @@
+/**
+ * CKEditor for grid-editor's content areas.
+ *
+ * A text editor plugin: load this file after the editor, and CKEditor 4
+ * after or before it, and content_types: ['ckeditor'] edits each content area
+ * with an inline CKEditor. What it can ask the editor for is the handle its
+ * factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="ckeditor/ckeditor.js"></script>
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
+ *
+ * Up to 6.0 the main bundle carries a copy of this file too.
+ */
+(function($) {
+
+    var INITIAL_CONTENT = '<p>Lorem initius... </p>';
+
+    $.fn.gridEditor.texts.ckeditor = function(ge) {
+
+        /**
+         * The instance editing this content area. Kept in jQuery data when it
+         * is made, and looked for among CKEditor's own as a fallback, since
+         * an instance made by another version of this file has no data.
+         */
+        function instanceOf(contentArea) {
+            var kept = contentArea.data('ge-ckeditor');
+            if (kept) { return kept; }
+
+            var found = null;
+            $.each(window.CKEDITOR.instances, function(name, instance) {
+                if (instance.element && instance.element.$ === contentArea[0]) { found = instance; }
+            });
+
+            return found;
+        }
+
+        return {
+            initialContent: INITIAL_CONTENT,
+            missingKey: 'error.ckeditor_missing',
+
+            available: function() { return !!window.CKEDITOR; },
+
+            start: function(contentAreas) {
+                var settings = ge.settings;
+
+                contentAreas.each(function() {
+                    var contentArea = $(this);
+                    if (contentArea.hasClass('active')) { return; }
+
+                    if (contentArea.html() == INITIAL_CONTENT) {
+                        // CKEditor kills this '&nbsp' creating a non usable box :/
+                        contentArea.html('&nbsp;');
+                    }
+
+                    // Add the .attr('contenteditable',''true') or CKEditor loads readonly
+                    contentArea.addClass('active').attr('contenteditable', 'true');
+
+                    var configuration = $.extend(
+                        {},
+                        (settings.ckeditor && settings.ckeditor.config ? settings.ckeditor.config : {}),
+                        {
+                            // Focus editor on creation
+                            on: {
+                                instanceReady: function( evt ) {
+                                    // Call original instanceReady function, if one was passed in the config
+                                    var callback;
+                                    try {
+                                        callback = settings.ckeditor.config.on.instanceReady;
+                                    } catch (err) {
+                                        // No callback passed
+                                    }
+                                    if (callback) {
+                                        callback.call(this, evt);
+                                    }
+
+                                    // The editor owns what is inside the
+                                    // content area now, so the grid editor is
+                                    // told to put its own furniture back
+                                    ge.textReady(contentArea);
+
+                                    instance.focus();
+                                }
+                            }
+                        }
+                    );
+                    var instance = window.CKEDITOR.inline(contentArea.get(0), configuration);
+                    contentArea.data('ge-ckeditor', instance);
+                });
+            },
+
+            stop: function(contentAreas) {
+                contentAreas.filter('.active').each(function() {
+                    var contentArea = $(this);
+
+                    // This content area's instance, and no other: up to 5.x
+                    // closing one content area destroyed every CKEditor on
+                    // the page, other editors' and the host's own included
+                    var instance = window.CKEDITOR ? instanceOf(contentArea) : null;
+                    if (instance) { instance.destroy(); }
+                    contentArea.removeData('ge-ckeditor');
+
+                    // Cleanup
+                    contentArea
+                        .removeClass('active cke_focus')
+                        .removeAttr('id')
+                        .removeAttr('style')
+                        .removeAttr('spellcheck')
+                        .removeAttr('contenteditable')
+                    ;
+                });
+            },
+        };
+    };
+})(jQuery);