npm - @themarioga/grid-editor - Versions diffs - 3.1.0 - Mend

@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

package/AUTO_SAVE.md +30 -0
package/BUILDING.md +68 -0
package/CHANGELOG.md +362 -0
package/LICENSE +23 -0
package/README.md +521 -0
package/UPGRADING.md +88 -0
package/dist/grideditor.css +3875 -0
package/dist/grideditor.min.css +2 -0
package/dist/grideditor.min.css.map +1 -0
package/dist/jquery.grideditor.js +2996 -0
package/dist/jquery.grideditor.min.js +2 -0
package/dist/jquery.grideditor.min.js.map +1 -0
package/dist/locales/grideditor.es.js +74 -0
package/dist/locales/grideditor.es.min.js +2 -0
package/dist/locales/grideditor.es.min.js.map +1 -0
package/dist/plugins/grideditor.accordion.js +185 -0
package/dist/plugins/grideditor.accordion.min.js +2 -0
package/dist/plugins/grideditor.accordion.min.js.map +1 -0
package/dist/plugins/grideditor.elements.js +141 -0
package/dist/plugins/grideditor.elements.min.js +2 -0
package/dist/plugins/grideditor.elements.min.js.map +1 -0
package/dist/plugins/grideditor.popup.js +143 -0
package/dist/plugins/grideditor.popup.min.js +2 -0
package/dist/plugins/grideditor.popup.min.js.map +1 -0
package/dist/plugins/grideditor.tabs.js +140 -0
package/dist/plugins/grideditor.tabs.min.js +2 -0
package/dist/plugins/grideditor.tabs.min.js.map +1 -0
package/docs/events.md +158 -0
package/docs/locale-keys.md +140 -0
package/docs/plugins.md +163 -0
package/example/autosave.html +89 -0
package/example/basic.html +93 -0
package/example/breakpoints.html +94 -0
package/example/ckeditor.html +104 -0
package/example/containers.html +214 -0
package/example/elements.html +147 -0
package/example/index.html +119 -0
package/example/locale.html +84 -0
package/example/plugins.html +217 -0
package/example/summernote.html +106 -0
package/example/wrap_content.html +44 -0
package/package.json +66 -0
package/src/js/jquery.grideditor.ckeditor.js +77 -0
package/src/js/jquery.grideditor.js +2711 -0
package/src/js/jquery.grideditor.summernote.js +72 -0
package/src/js/jquery.grideditor.tinymce.js +135 -0
package/src/js/locales/grideditor.es.js +74 -0
package/src/js/plugins/grideditor.accordion.js +185 -0
package/src/js/plugins/grideditor.elements.js +141 -0
package/src/js/plugins/grideditor.popup.js +143 -0
package/src/js/plugins/grideditor.tabs.js +140 -0
package/src/less/grideditor.less +594 -0

package/example/locale.html ADDED Viewed

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>
+    <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>
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- Grid editor javascript, then the locales the page offers. English is
+         built into the plugin; every other language is a file of its own. -->
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <script src="../dist/locales/grideditor.es.js"></script>
+    <script>
+        $(function() {
+            $('#myGrid').gridEditor({
+                new_row_layouts: [[12], [6,6], [9,3]],
+                content_types: [],
+                locale: 'es',
+                // Individual keys can be overridden without a locale file,
+                // which is how a host uses its own word for something
+                locale_strings: {},
+            });
+            // Switching language at runtime re-renders the controls
+            $('#language').on('change', function() {
+                $('#myGrid').gridEditor('setLocale', this.value);
+            });
+        });
+    </script>
+    <title>Grid Editor locale example</title>
+</head>
+<body>
+    <div class="container">
+        <div class="row my-3">
+            <div class="col-lg-6">
+                <label class="form-label" for="language">Idioma / Language</label>
+                <select class="form-select" id="language">
+                    <option value="es" selected>Español</option>
+                    <option value="en">English</option>
+                </select>
+                <p class="form-text">
+                    The tool tooltips, the layout mode dropdown, the add row
+                    buttons, the settings panel and the delete confirms all
+                    follow this dropdown. Hover a tool to read its tooltip.
+                </p>
+            </div>
+        </div>
+        <div id="myGrid">
+            <div class="row">
+                <div class="col-lg-12">
+                    <h1>Editor de rejilla</h1>
+                    <p>Pasa el ratón por encima de las herramientas para ver los textos traducidos.</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-8">
+                    <p>Una columna de ocho unidades.</p>
+                </div>
+                <div class="col-lg-4">
+                    <p>Una columna de cuatro unidades.</p>
+                </div>
+            </div>
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container -->
+</body>
+</html>

package/example/plugins.html ADDED Viewed

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>
+    <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>
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- The editor, and the plugins this page offers. Loading a file is what
+         makes its feature available; nothing here is in the main bundle. -->
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <script src="../dist/plugins/grideditor.tabs.min.js"></script>
+    <script src="../dist/plugins/grideditor.accordion.min.js"></script>
+    <script src="../dist/plugins/grideditor.popup.min.js"></script>
+    <script src="../dist/plugins/grideditor.elements.min.js"></script>
+    <!-- And one written here, to show what a plugin of your own takes. It is
+         a container type: a bootstrap card whose body is an editable region. -->
+    <script id="card-plugin">
+        (function($) {
+            // A plugin brings its own strings
+            $.extend($.fn.gridEditor.locales.en, {
+                'container.add_card': 'Card',
+                'container.card_title': 'Card title',
+            });
+            // Registered under the type it builds, and called once per editor
+            // with the handle it works through
+            $.fn.gridEditor.containers.card = function(ge) {
+                return {
+                    // The toolbar button's label
+                    labelKey: 'container.add_card',
+                    // A detached container. data-ge-container is what the
+                    // editor recognises: never a class, so restyling is free.
+                    create: function(options) {
+                        var container = $('<div />').attr('data-ge-container', 'card');
+                        $('<div class="card" />')
+                            .append($('<div class="card-header" />')
+                                .text(options.title || ge.t('container.card_title')))
+                            .append($('<div class="card-body" />').append(ge.defaultRegion()))
+                            .appendTo(container)
+                        ;
+                        return container;
+                    },
+                    // Editing furniture on, and off again. Anything mark()
+                    // adds, unmark() has to take away: what is left is what
+                    // getHtml hands back.
+                    mark: function(container) {
+                        ge.makeLabelEditable(ge.labelIn(container.find('.card-header')));
+                    },
+                    unmark: function(container) {
+                        ge.unwrapLabels(container);
+                    },
+                };
+            };
+        })(jQuery);
+    </script>
+    <script>
+        $(function() {
+            // Show the plugin written above as the page's own source
+            $('#card-source').text($('#card-plugin').text().trim().replace(/^ {8}/gm, ''));
+            function activePlugins() {
+                return $('.plugin-choice:checked').map(function() { return this.value; }).get();
+            }
+            function start() {
+                $('#myGrid').gridEditor('destroy');
+                $('#myGrid').gridEditor({
+                    new_row_layouts: [[12], [6, 6]],
+                    content_types: [],
+                    // Which of the loaded plugins to use. Leave it out and
+                    // every one the page loaded is used.
+                    plugins: activePlugins(),
+                });
+                $('#in-use').text(activePlugins().join(', ') || 'none');
+                $('#registered').text(
+                    Object.keys($.fn.gridEditor.containers).concat(
+                        Object.keys($.fn.gridEditor.features)).sort().join(', ')
+                );
+            }
+            $('.plugin-choice').on('change', start);
+            $('#output').on('click', function() {
+                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            });
+            start();
+        });
+    </script>
+    <title>Grid Editor plugins example</title>
+</head>
+<body>
+    <div class="container">
+        <div class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">Plugins</h1>
+                <p class="form-text">
+                    Tabs, accordions, popups and the element level controls are
+                    not in the main bundle: each is a file loaded beside the
+                    editor, and loading it is what turns the feature on. This
+                    page loads all four, plus a fifth written in its own
+                    <code>&lt;script&gt;</code> below.
+                </p>
+                <p class="form-text">
+                    Tick and untick to change the <code>plugins</code> setting
+                    and re-initialize the editor. A container plugin puts a
+                    button in the toolbar; <strong>elements</strong> has no
+                    button &mdash; its effect is that the marked markup in the
+                    first row becomes a movable element.
+                </p>
+                <div class="mb-2">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input plugin-choice" type="checkbox" value="tabs" id="p-tabs" checked>
+                        <label class="form-check-label" for="p-tabs">tabs</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input plugin-choice" type="checkbox" value="accordion" id="p-accordion" checked>
+                        <label class="form-check-label" for="p-accordion">accordion</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input plugin-choice" type="checkbox" value="popup" id="p-popup" checked>
+                        <label class="form-check-label" for="p-popup">popup</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input plugin-choice" type="checkbox" value="elements" id="p-elements" checked>
+                        <label class="form-check-label" for="p-elements">elements</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input plugin-choice" type="checkbox" value="card" id="p-card" checked>
+                        <label class="form-check-label" for="p-card">card (written on this page)</label>
+                    </div>
+                </div>
+                <p class="form-text">
+                    Loaded: <code id="registered"></code><br>
+                    In use: <code id="in-use"></code>
+                </p>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+        <div id="myGrid">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="ge-content">
+                        <p>Ordinary text in a content area.</p>
+                        <blockquote data-ge-element="quote" data-ge-label="Pull quote">
+                            <p>A node the host marked: an element when the elements plugin is on,
+                            ordinary markup when it is off.</p>
+                        </blockquote>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-12">
+                    <div data-ge-container="card">
+                        <div class="card">
+                            <div class="card-header">A card, from the plugin written on this page</div>
+                            <div class="card-body">
+                                <div class="row"><div class="col-lg-12">
+                                    <div class="ge-content"><p>Its body is an ordinary region: rows, columns and elements nest in it.</p></div>
+                                </div></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div> <!-- /#myGrid -->
+        <div class="row my-4">
+            <div class="col-lg-10">
+                <h2 class="h5">The card plugin, in full</h2>
+                <p class="form-text">
+                    Thirty lines, and it moves, deletes, nests, takes an id and
+                    classes, and round-trips through <code>getHtml</code> like
+                    anything else. See <a href="../docs/plugins.md">docs/plugins.md</a>
+                    for the whole contract.
+                </p>
+                <pre class="border rounded p-3 bg-light"><code id="card-source"></code></pre>
+            </div>
+        </div>
+    </div> <!-- /.container -->
+</body>
+</html>

package/example/summernote.html ADDED Viewed

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>
+    <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>
+    <!-- Summernote CSS -->
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.9.1/summernote-bs5.min.css" />
+    <!-- Summernote js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.9.1/summernote-bs5.min.js"></script>
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- Grid editor javascript -->
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <script>
+        $(function() {
+            // Initialize grid editor
+            $('#myGrid').gridEditor({
+                new_row_layouts: [[12], [6, 6], [9, 3], [3, 9]],
+                content_types: ['summernote'],
+                summernote: {
+                    config: {
+                        callbacks: {
+                            onInit: function() {
+                                var element = this;
+                                console.log('init done', element);
+                            }
+                        }
+                    }
+                }
+            });
+            // Get resulting html
+            var html = $('#myGrid').gridEditor('getHtml');
+            console.log(html);
+        });
+    </script>
+    <title>Grid Editor example</title>
+</head>
+<body>
+    <div class="container">
+        <div id="myGrid">
+            <div class="row">
+                <div class="col-md-12">
+                    <h1>Lorem ipsum dolor sit amet, consectetur</h1>
+                    <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>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae laboriosam, excepturi quas.</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">
+                    <h2>Lorem ipsum dolor</h2>
+                    <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>
+                </div>
+                <div class="col-md-4">
+                    <h2>Pariatur reprehenderit</h2>
+                    <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>
+                </div>
+                <div class="col-md-4">
+                    <h2>Pariatur reprehenderit</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea excepturi ducimus numquam aut error corporis aspernatur ipsum quos eius culpa!</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-8">
+                    <h2>Lorem ipsum dolor.</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro distinctio atque molestiae optio, consequuntur? Iusto ratione cumque dolor aut dolore!</p>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <hr>
+                            <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>
+                        </div>
+                        <div class="col-md-6">
+                            <hr>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestiae quaerat illum, consequuntur iusto aspernatur quam provident? Possimus!</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <h2>Lusto ratione</h2>
+                    <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>
+                </div>
+            </div>
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container -->
+</body>
+</html>

package/example/wrap_content.html ADDED Viewed

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>
+    <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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- Grid editor javascript -->
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <script>
+        $(function() {
+            // Initialize grid editor
+            $('#myGrid').gridEditor({
+                new_row_layouts: [[12], [6, 6], [9, 3], [3, 9]],
+                content_types: ['tinymce'],
+            });
+            // Get resulting html
+            var html = $('#myGrid').gridEditor('getHtml');
+            console.log(html);
+        });
+    </script>
+    <title>Grid Editor example</title>
+</head>
+<body>
+    <div id="myGrid">
+        <h1>Hello!</h1>
+        <p>Test</p>
+    </div>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "scripts": {
+    "build": "grunt",
+    "lint": "eslint .",
+    "start": "npm run watch",
+    "test": "node test/run.js",
+    "test:vendor": "node test/vendor/update.js",
+    "watch": "grunt watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/themarioga/grid-editor.git"
+  },
+  "devDependencies": {
+    "eslint": "^9.39.5",
+    "grunt": "^1.6.3",
+    "grunt-cli": "^1.5.0",
+    "grunt-contrib-clean": "^2.0.1",
+    "grunt-contrib-concat": "^2.1.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-cssmin": "^5.0.0",
+    "grunt-contrib-less": "^3.0.0",
+    "grunt-contrib-uglify": "^5.2.2",
+    "grunt-contrib-watch": "^1.1.0"
+  },
+  "name": "@themarioga/grid-editor",
+  "description": "Visual javascript editor for the bootstrap grid system, written as a jQuery plugin.",
+  "bugs": {
+    "url": "https://github.com/themarioga/grid-editor/issues"
+  },
+  "homepage": "https://github.com/themarioga/grid-editor#readme",
+  "publishConfig": {
+    "comment": "A scoped package publishes restricted unless it is told otherwise.",
+    "access": "public"
+  },
+  "version": "3.1.0",
+  "main": "dist/jquery.grideditor.js",
+  "files": [
+    "dist",
+    "src",
+    "docs",
+    "example",
+    "AUTO_SAVE.md",
+    "BUILDING.md",
+    "CHANGELOG.md",
+    "UPGRADING.md"
+  ],
+  "directories": {
+    "example": "example"
+  },
+  "keywords": [
+    "jquery-plugin",
+    "ecosystem:jquery",
+    "bootstrap5",
+    "grid",
+    "bootstrap-grid",
+    "css grid",
+    "editor",
+    "wysiwyg"
+  ],
+  "author": "Mario Gonzalez",
+  "contributors": [
+    "Simon Epskamp (https://github.com/Friendly-Pixel)"
+  ],
+  "license": "MIT"
+}

package/src/js/jquery.grideditor.ckeditor.js ADDED Viewed

@@ -0,0 +1,77 @@
+(function($) {
+    $.fn.gridEditor.RTEs.ckeditor = {
+        init: function(settings, contentAreas) {
+            if (!window.CKEDITOR) {
+                console.error($.fn.gridEditor.t(settings, 'error.ckeditor_missing'));
+            }
+            var self = this;
+            contentAreas.each(function() {
+                var contentArea = $(this);
+                if (!contentArea.hasClass('active')) {
+                    if (contentArea.html() == self.initialContent) {
+                        // 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
+                                    contentArea.trigger('ge-rte-ready');
+                                    instance.focus();
+                                }
+                            }
+                        }
+                    );
+                    var instance = CKEDITOR.inline(contentArea.get(0), configuration);
+                }
+            });
+        },
+        deinit: function(settings, contentAreas) {
+            contentAreas.filter('.active').each(function() {
+                var contentArea = $(this);
+                // Destroy all CKEditor instances
+                $.each(CKEDITOR.instances, function(_, instance) {
+                    instance.destroy();
+                });
+                // Cleanup
+                contentArea
+                    .removeClass('active cke_focus')
+                    .removeAttr('id')
+                    .removeAttr('style')
+                    .removeAttr('spellcheck')
+                    .removeAttr('contenteditable')
+                ;
+            });
+        },
+        initialContent: '<p>Lorem initius... </p>',
+    };
+})(jQuery);