@themarioga/grid-editor 3.2.1 → 4.0.0

package/dist/jquery.grideditor.js

@@ -111,13 +111,29 @@ var NESTED_SETTINGS = {
     },
     resize: {
         enabled: true,
-        handles: 'e', // Which edges carry a handle, as jQuery UI names them
+        handles: 'e', // Which edges carry a handle: 'e', 'w', or 'e, w'
         balance: 'next', // 'next' takes the units out of the following column
     },
+    drag: {
+        delay: 0, // Milliseconds to hold before a drag starts
+        touch_delay: 100, // The same for touch, where 0 eats the page's scrolling
+        threshold: 3, // Pixels of movement before a gesture counts as a drag
+        animation: 150, // Milliseconds of reordering animation, 0 for none
+        scroll: true, // Scroll the page when a drag reaches its edge
+    },
+};
+
+/** Settings 4.0 took away, and what a host should reach for instead. */
+var REMOVED_SETTINGS = {
+    sortable_options: 'drag',
+    resizable_options: 'resize',
 };
 
 var warned = {};
 
+/** Editors on the page, counted so each one's sortable groups are its own. */
+var editorCounter = 0;
+
 /**
  * Translate one key.
  *
@@ -252,13 +268,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             'layout_modes'      : VIEW_KEYS.slice(), // Which views the dropdown offers
             'default_view'      : ALL_VIEW,
             'resize'            : NESTED_SETTINGS.resize, // Resizing a column by dragging its edge
-            'resizable_options' : {}, // Merged into every jQuery UI resizable
             'source_textarea'   : '',
             'locale'            : 'en', // Code of a locale in $.fn.gridEditor.locales
             'locale_strings'    : {}, // Overrides for individual keys
             'callbacks'         : {}, // before_*/after_* functions, the events by another route
             'confirm_delete'    : true, // Ask before deleting a row or a column
-            'sortable_options'  : {} // Merged into every jQuery UI sortable
+            'drag'              : NESTED_SETTINGS.drag // How a drag behaves, whatever drives it
         }, optionsOrMethod);
 
         // Merged rather than replaced, so `elements: { auto: true }` keeps the
@@ -267,6 +282,18 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             settings[name] = $.extend({}, defaults, settings[name]);
         });
 
+        // Both handed out the drag toolkit's own options, which 4.0 stops
+        // promising: there is no widget underneath a host should be reaching
+        // for. What they were used for is a setting of the editor's now.
+        $.each(REMOVED_SETTINGS, function(name, replacement) {
+            if (optionsOrMethod && optionsOrMethod[name] !== undefined) {
+                warn($.fn.gridEditor.t(settings, 'warning.setting_removed', {
+                    setting: name,
+                    replacement: replacement,
+                }));
+            }
+        });
+
 
         // Elems
         var canvas,
@@ -282,6 +309,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         var sizePicker = null; // The open column size picker, if there is one
         var dropMarker = null; // The line showing where a dragged toolbar button would land
         var warnedHere = {}; // Deprecations are worth saying once per instance, not once per call
+        var sortables = []; // Every list made sortable, so deinit destroys exactly those
+        var instanceId = ++editorCounter; // Scopes the sortable groups to this editor
 
         // Before anything else, because the instance handle hands the canvas
         // to hosts and the rest of setup() runs at the end of this function
@@ -874,26 +903,82 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         function makeToolbarDraggable() {
+            var buttons = mainControls.find('[data-ge-toolbar]')
+                .removeClass('ge-palette-button')
+                .off('pointerdown.ge-palette')
+            ;
+
             if (!toolbarDrags()) { return; }
 
-            mainControls.find('[data-ge-toolbar]').draggable({
-                helper: function() { return $(this).clone().addClass('ge-toolbar-helper'); },
-                appendTo: 'body',
-                zIndex: 1000,
-                cursorAt: { top: 14, left: 14 },
+            buttons.addClass('ge-palette-button').on('pointerdown.ge-palette', startToolbarDrag);
+        }
 
-                start: function() { canvas.addClass('ge-dropping'); },
-                drag: function(e) { showDropMarker(e.pageX, e.pageY); },
+        /**
+         * A toolbar button carried onto the canvas.
+         *
+         * Nothing happens until the pointer has moved far enough to mean it:
+         * below that the gesture is a click, and the button's own handler
+         * adds the block at the end of the canvas as it always has - which is
+         * also what keeps the add column tool's hold-to-pick working.
+         */
+        function startToolbarDrag(e) {
+            var button = $(e.currentTarget);
+            var startX = e.pageX;
+            var startY = e.pageY;
+            var helper = null;
 
-                stop: function(e) {
-                    var where = dropPlaceAt(e.pageX, e.pageY);
+            if (e.button) { return; }
 
-                    canvas.removeClass('ge-dropping');
-                    hideDropMarker();
+            function far(move) {
+                return Math.abs(move.pageX - startX) + Math.abs(move.pageY - startY) >
+                    settings.drag.threshold;
+            }
 
-                    if (where) { insertFromToolbar($(this), where); }
-                },
-            });
+            function onMove(move) {
+                if (!helper) {
+                    if (!far(move)) { return; }
+
+                    helper = button.clone()
+                        .addClass('ge-toolbar-helper')
+                        .appendTo('body')
+                    ;
+                    canvas.addClass('ge-dropping');
+                }
+
+                helper.css({ left: move.pageX - 14, top: move.pageY - 14 });
+                showDropMarker(move.pageX, move.pageY);
+            }
+
+            function onUp(up) {
+                $(document)
+                    .off('pointermove.ge-toolbar', onMove)
+                    .off('pointerup.ge-toolbar pointercancel.ge-toolbar', onUp)
+                ;
+
+                if (!helper) { return; }
+
+                helper.remove();
+                canvas.removeClass('ge-dropping');
+                hideDropMarker();
+
+                // The click that follows a drag would add the block a second
+                // time, at the end of the canvas
+                button.one('click', function(click) {
+                    click.preventDefault();
+                    click.stopImmediatePropagation();
+                });
+
+                var where = dropPlaceAt(up.pageX, up.pageY);
+                if (where) { insertFromToolbar(button, where); }
+            }
+
+            // On the document, not on the button: until the gesture is far
+            // enough along to be a drag there is nothing to capture the
+            // pointer with, and the pointer has left the button by then
+            $(document)
+                .on('pointermove.ge-toolbar', onMove)
+                .on('pointerup.ge-toolbar pointercancel.ge-toolbar', onUp)
+            ;
         }
 
         /**
@@ -1526,9 +1611,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             var room = spare(row, leadingTier());
 
-            // The drawer it hangs off is raised while it is open: every
-            // drawer sits above jQuery UI's handles, so without this the
-            // drawer of the column below takes the clicks meant for the picker
+            // The drawer it hangs off is raised while it is open: drawers sit
+            // below the resize handles, so without this the drawer of the
+            // column below takes the clicks meant for the picker
             tool.closest('.ge-tools-drawer').addClass('ge-picker-open');
 
             sizePicker = $('<div class="ge-size-picker" />').appendTo(tool);
@@ -1981,9 +2066,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * Drag resize leaves an inline pixel width behind, and jQuery UI adds
-         * its own. Neither belongs in the markup a host saves, or in the
-         * canvas once the size class has been written.
+         * Drag resize leaves an inline pixel width behind: the column follows
+         * the pointer in pixels while the gesture lasts. It does not belong in
+         * the markup a host saves, or in the canvas once the size class has
+         * been written.
          */
         function stripPixelWidths(scope) {
             scope.find('.column').addBack('.column').each(function() {
@@ -1997,112 +2083,196 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
         }
 
-        function makeSortable() {
-            var wholeDrawer = settings.drag_handle === 'drawer';
-
-            var shared = {
-                handle: wholeDrawer ? '> .ge-tools-drawer' : '> .ge-tools-drawer .ge-move',
+        /**
+         * A group name, scoped to this editor.
+         *
+         * Two editors on one page must not drag into each other, since a node
+         * carries its drawer - and the events that go with it - from the
+         * editor that made it.
+         */
+        function groupName(name) {
+            return 'ge-' + name + '-' + instanceId;
+        }
 
+        /** What must never start a drag, whatever the handle is. */
+        function dragCancelSelector() {
+            return settings.drag_handle === 'drawer'
                 // With the whole drawer as the handle, the tools inside it are
                 // still tools: a drag starting on one would swallow its click,
                 // and the settings panel has fields to type in
-                cancel: wholeDrawer
-                    ? '.ge-tools-drawer > a, .ge-details, input, textarea, button, select, option'
-                    : 'input, textarea, button, select, option',
+                ? '.ge-tools-drawer > a, .ge-details, input, textarea, button, select, option'
+                : 'input, textarea, button, select, option';
+        }
 
-                start: sortStart,
-                stop: sortStop,
-                helper: 'clone',
-            };
+        /**
+         * Every sortable list the editor makes, core's and a plugin's alike,
+         * is made here.
+         *
+         * A caller says what moves (`draggable`) and what the list connects to
+         * (`group`, or none for a list that sorts only within itself); the
+         * handle, the filter, the callbacks and the drag settings are this
+         * function's business. That is the whole point of it: the toolkit
+         * underneath is named in one place, so replacing it is one function
+         * and not thirty call sites.
+         */
+        function sortable(lists, options) {
+            if (!lists.length || !window.Sortable) { return; }
 
-            canvas.find('.row').sortable($.extend({
-                items: '> .column',
-                connectWith: '.ge-canvas .row',
-                tolerance: 'pointer',
-            }, shared, settings.sortable_options));
+            var wholeDrawer = settings.drag_handle === 'drawer';
+            var cancel = dragCancelSelector();
+            var soloGroup = 0;
+
+            lists.each(function() {
+                var list = this;
+
+                // A list with no group sorts only within itself, which is what
+                // a tab strip wants: a name of its own, closed both ways
+                var group = options.group
+                    ? { name: groupName(options.group) }
+                    : { name: groupName(options.draggable + '-' + (++soloGroup)), pull: false, put: false };
+
+                sortables.push(window.Sortable.create(list, $.extend({
+                    group: group,
+                    draggable: options.draggable,
+                    handle: wholeDrawer ? '.ge-tools-drawer' : '.ge-tools-drawer .ge-move',
+
+                    /**
+                     * Two refusals in one, because SortableJS asks once.
+                     *
+                     * A tool or a form field never starts a drag, as the
+                     * cancel list said before. And only a direct child of
+                     * this list moves: the selector is matched against every
+                     * descendant, so without this the canvas would pick up a
+                     * row nested three columns down and drag that.
+                     */
+                    filter: function(e, item) {
+                        if ($(e.target).closest(cancel, list).length) { return true; }
+
+                        return !item || item.parentNode !== list;
+                    },
+
+                    // A filtered pointerdown is still a click on a tool
+                    preventOnFilter: false,
+
+                    // The HTML5 drag and drop API cannot be driven by
+                    // synthetic events, so the tests could not exist without
+                    // this; it also gives one helper across browsers
+                    forceFallback: true,
+                    fallbackOnBody: true,
+
+                    ghostClass: 'ge-drag-placeholder',
+                    chosenClass: 'ge-drag-chosen',
+                    dragClass: 'ge-drag-helper',
+                    fallbackClass: 'ge-drag-helper',
+
+                    animation: settings.drag.animation,
+
+                    // One delay, which applies to both gestures or to touch
+                    // alone: a touch drag that starts instantly takes the
+                    // page's scrolling with it, a mouse drag has no such
+                    // problem, and asking for `delay` means asking for both
+                    delay: settings.drag.delay || settings.drag.touch_delay,
+                    delayOnTouchOnly: !settings.drag.delay,
+
+                    touchStartThreshold: settings.drag.threshold,
+                    scroll: settings.drag.scroll,
+
+                    onStart: sortStart,
+                    onEnd: sortEnd,
+                }, options.options || {})));
+            });
+        }
 
-            canvas.add(canvas.find('.column')).sortable($.extend({
-                items: '> .row, > .ge-content',
-                connectWith: '.ge-canvas, .ge-canvas .column',
-            }, shared, settings.sortable_options));
+        function makeSortable() {
+            if (!window.Sortable) {
+                warnOnceHere('sortable_missing', t('error.sortable_missing'));
+                return;
+            }
 
-            // A tab strip sorts its own tabs, and the panes follow them
-            canvas.find('.ge-container-tabs > .nav-tabs').sortable($.extend({
-                items: '> .ge-tab',
-            }, shared, settings.sortable_options));
+            sortable(canvas.find('.row'), {
+                draggable: '.column',
+                group: 'column',
+            });
 
-            // Accordion items sort within their accordion and into any other
-            canvas.find('.ge-container-accordion > .accordion').sortable($.extend({
-                items: '> .ge-accordion-item',
-                connectWith: '.ge-canvas .ge-container-accordion > .accordion',
-            }, shared, settings.sortable_options));
+            sortable(canvas.add(canvas.find('.column')), {
+                draggable: '.row, .ge-content, [data-ge-container]',
+                group: 'block',
+            });
 
             // A plugin makes its own: only it knows which of its parts move
-            plugins('onSortable', shared);
-
-            /**
-             * jQuery UI cannot refuse a drag once it has started, so a
-             * canceled before-move is remembered here and undone on drop
-             * (spec 2.4). The node carries the mark, because with connected
-             * lists the drop is not always reported by the list that started
-             * the drag.
-             */
-            function sortStart(e, ui) {
-                ui.placeholder.css({ height: ui.item.outerHeight()});
-
-                var node = ui.item;
-                var from = positionOf(node);
-
-                node.data('ge-move-from', from);
-                node.removeData('ge-move-canceled');
+            plugins('onSortable', sortable);
+        }
 
-                operate(function() {
-                    var moving = emit('before-move', payloadFor(kindOf(node), node, {
-                        parent: from.parent,
-                        source: 'dragdrop',
-                        from: from,
-                    }));
+        /**
+         * A drag cannot be refused once it has started, so a canceled
+         * before-move is remembered here and undone on drop (spec 2.4). The
+         * node carries the mark, because with connected lists the drop is not
+         * always reported by the list that started the drag.
+         */
+        function sortStart(e) {
+            var node = $(e.item);
+            var from = positionOf(node);
 
-                    if (!moving) { node.data('ge-move-canceled', true); }
-                });
-            }
+            node.data('ge-move-from', from);
+            node.removeData('ge-move-canceled');
 
-            function sortStop(e, ui) {
-                var node = ui.item;
-                var from = node.data('ge-move-from') || positionOf(node);
+            operate(function() {
+                var moving = emit('before-move', payloadFor(kindOf(node), node, {
+                    parent: from.parent,
+                    source: 'dragdrop',
+                    from: from,
+                }));
 
-                node.removeData('ge-move-from');
+                if (!moving) { node.data('ge-move-canceled', true); }
+            });
+        }
 
-                if (node.data('ge-move-canceled')) {
-                    node.removeData('ge-move-canceled');
-                    $(this).sortable('cancel');
-                    return;
-                }
+        /** Put a node back where a refused drag found it. */
+        function putBack(node, from) {
+            var siblings = from.parent.children().not('.ge-tools-drawer').not(node);
 
-                var to = positionOf(node);
-                if (to.parent[0] === from.parent[0] && to.index === from.index) {
-                    return; // A drag that went nowhere is not a move
-                }
+            if (!siblings.length || from.index >= siblings.length) {
+                node.appendTo(from.parent);
+            } else {
+                node.insertBefore(siblings.eq(from.index));
+            }
+        }
 
-                var container = node.closest('[data-ge-container]');
-                var definition = CONTAINERS[containerTypeOf(container)];
-                if (definition && definition.afterPaneMove) {
-                    definition.afterPaneMove(container, node, from);
-                }
+        function sortEnd(e) {
+            var node = $(e.item);
+            var from = node.data('ge-move-from') || positionOf(node);
 
-                // No init() here, unlike an add: the node brought its drawer
-                // with it, and jQuery UI is still finishing the drag, so this
-                // is the wrong moment to rebuild the widgets it is using.
-                operate(function() {
-                    emit('after-move', payloadFor(kindOf(node), node, {
-                        parent: to.parent,
-                        source: 'dragdrop',
-                        from: from,
-                        to: to,
-                        container: container.length ? container : undefined,
-                    }));
-                });
+            node.removeData('ge-move-from');
+
+            if (node.data('ge-move-canceled')) {
+                node.removeData('ge-move-canceled');
+                putBack(node, from);
+                return;
+            }
+
+            var to = positionOf(node);
+            if (to.parent[0] === from.parent[0] && to.index === from.index) {
+                return; // A drag that went nowhere is not a move
+            }
+
+            var container = node.closest('[data-ge-container]');
+            var definition = CONTAINERS[containerTypeOf(container)];
+            if (definition && definition.afterPaneMove) {
+                definition.afterPaneMove(container, node, from);
             }
+
+            // No init() here, unlike an add: the node brought its drawer
+            // with it, and the drag is still being finished, so this is the
+            // wrong moment to rebuild the lists it is using.
+            operate(function() {
+                emit('after-move', payloadFor(kindOf(node), node, {
+                    parent: to.parent,
+                    source: 'dragdrop',
+                    from: from,
+                    to: to,
+                    container: container.length ? container : undefined,
+                }));
+            });
         }
 
         /**
@@ -2119,24 +2289,74 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             canvas.find('.column').each(function() {
                 var col = $(this);
-                if (col.data('ui-resizable')) { return; }
+                if (col.find('> .ge-resize-handle').length) { return; }
 
                 $('<span class="ge-resize-size" />').appendTo(col.find('> .ge-tools-drawer'));
 
-                col.resizable($.extend({
-                    handles: settings.resize.handles,
-                    start: resizeStart,
-                    resize: resizeMove,
-                    stop: resizeStop,
-                }, settings.resizable_options));
+                $.each(resizeEdges(), function(_, edge) {
+                    $('<span class="ge-resize-handle" />')
+                        .addClass('ge-resize-' + edge)
+                        .attr('data-ge-edge', edge)
+                        .on('pointerdown', startResizeDrag)
+                        .appendTo(col)
+                    ;
+                });
             });
         }
 
+        /** Which edges carry a handle: 'e', 'w', or both. */
+        function resizeEdges() {
+            return String(settings.resize.handles).split(',')
+                .map(function(edge) { return edge.trim(); })
+                .filter(function(edge) { return edge === 'e' || edge === 'w'; });
+        }
+
+        /**
+         * One resize gesture, from the pointer going down on a handle to it
+         * coming up again.
+         *
+         * The pointer is captured, so a fast drag that leaves the column
+         * behind keeps resizing it, and a refused before-resize simply never
+         * starts: nothing is written and the column does not move.
+         */
+        function startResizeDrag(e) {
+            var handle = $(e.currentTarget);
+            var col = handle.parent();
+            var west = handle.attr('data-ge-edge') === 'w';
+            var startX = e.pageX;
+            var startWidth = col.outerWidth();
+
+            e.preventDefault();
+
+            if (!resizeStart(col)) { return; }
+
+            col.addClass('ge-resizing');
+            if (e.pointerId !== undefined && handle[0].setPointerCapture) {
+                handle[0].setPointerCapture(e.pointerId);
+            }
+
+            function widthAt(move) {
+                var delta = move.pageX - startX;
+
+                return Math.max(1, startWidth + (west ? -delta : delta));
+            }
+
+            function onMove(move) {
+                col.css('width', widthAt(move) + 'px');
+                resizeMove(col, widthAt(move));
+            }
+
+            function onUp(up) {
+                handle.off('pointermove', onMove).off('pointerup pointercancel', onUp);
+                col.removeClass('ge-resizing');
+                resizeStop(col, widthAt(up));
+            }
+
+            handle.on('pointermove', onMove).on('pointerup pointercancel', onUp);
+        }
+
         function removeResizable() {
-            canvas.find('.column').each(function() {
-                var col = $(this);
-                if (col.data('ui-resizable')) { col.resizable('destroy'); }
-            });
+            canvas.find('.ge-resize-handle').remove();
 
             canvas.find('.ge-resize-size').remove();
             stripPixelWidths(canvas);
@@ -2189,16 +2409,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * A canceled before-resize refuses the drag.
-         *
-         * jQuery UI's resizable ignores false from its start handler - unlike
-         * draggable, and unlike what the spec assumed - so the refusal is
-         * carried on the column and every step of the drag returns false,
-         * which the widget does honour. Nothing is written and the column ends
-         * where it began.
-         */
-        function resizeStart(e, ui) {
-            var col = $(this);
+         * A canceled before-resize refuses the gesture before it begins, so
+         * nothing is written and the column does not move. Under jQuery UI
+         * this took a flag on the column and a refusal from every step of the
+         * drag, because resizable ignores false from its start handler.
+         */
+        function resizeStart(col) {
             var from = currentSize(col);
 
             var allowed = operate(function() {
@@ -2209,40 +2425,27 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 }));
             });
 
-            if (!allowed) {
-                col.data('ge-resize-refused', true);
-                return false;
-            }
+            if (!allowed) { return false; }
 
             col.data('ge-resize-from', from);
             resizeReadout(col, sizeLabel(from));
 
-            return undefined;
+            return true;
         }
 
-        function resizeMove(e, ui) {
-            var col = $(this);
-
-            if (col.data('ge-resize-refused')) { return false; }
-
-            resizeReadout(col, sizeLabel(snapUnits(col, ui.size.width)));
-
-            return undefined;
+        function resizeMove(col, width) {
+            resizeReadout(col, sizeLabel(snapUnits(col, width)));
         }
 
-        function resizeStop(e, ui) {
-            var col = $(this);
+        function resizeStop(col, width) {
             var from = col.data('ge-resize-from');
-            var units = snapUnits(col, ui.size.width);
+            var units = snapUnits(col, width);
 
             col.removeData('ge-resize-from');
             resizeReadout(col, '');
             stripPixelWidths(col);
 
-            if (col.data('ge-resize-refused') || from === undefined) {
-                col.removeData('ge-resize-refused');
-                return;
-            }
+            if (from === undefined) { return; }
 
             // A drag of a couple of pixels lands on the size it started from,
             // and is not a resize
@@ -2275,18 +2478,17 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             if (plan) { writeSize(next, plan); }
         }
 
+        /**
+         * Undo every list `sortable()` made, and only those.
+         *
+         * The registry is what makes that exact: deinit() is a public method,
+         * so it can be called twice, and a list the host made sortable itself
+         * is none of the editor's business.
+         */
         function removeSortable() {
-            // Only where a sortable was actually made: deinit() is a public
-            // method now, and jQuery UI throws when asked to destroy a widget
-            // that is not there, so calling deinit() twice would fail.
-            // jQuery UI marks what it made, so a plugin's sortables come
-            // away with the editor's without the core knowing about them
-            canvas.find('.ui-sortable').addBack('.ui-sortable').each(function() {
-                var node = $(this);
-                if (node.data('ui-sortable')) {
-                    node.sortable('destroy');
-                }
-            });
+            $.each(sortables, function(_, instance) { instance.destroy(); });
+
+            sortables = [];
         }
 
         function createRow() {
@@ -2476,10 +2678,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     var child = $(this);
 
                     // The editor's own furniture is not content and not a
-                    // boundary either. jQuery UI's resize handle used to be
-                    // treated as content and wrapped into a content area of
-                    // its own on the next init.
-                    if (child.is('.ge-tools-drawer, .ui-resizable-handle')) { return; }
+                    // boundary either. The resize handle used to be treated as
+                    // content and wrapped into a content area of its own on
+                    // the next init.
+                    if (child.is('.ge-tools-drawer, .ge-resize-handle')) { return; }
 
                     // A container sits in the column beside the content
                     // areas, not inside one, so it ends a run of loose
@@ -2702,6 +2904,8 @@ $.fn.gridEditor.locales = {
         'view.lg': 'Desktop',
         'view.xl': 'Large desktop',
         'view.xxl': 'Widescreen',
+        'error.sortable_missing': 'SortableJS not available! Make sure you loaded the Sortable js file; dragging is off without it.',
+        'warning.setting_removed': 'The {setting} setting was removed in 4.0. Use {replacement} instead.',
         'error.tinymce_missing': 'tinyMCE not available! Make sure you loaded the tinyMCE js file.',
         'error.ckeditor_missing': 'CKEditor not available! Make sure you loaded the ckeditor and jquery adapter js files.',
         'error.summernote_missing': 'Summernote not available! Make sure you loaded the Summernote js file.',