suneditor 2.43.6 → 2.43.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.43.6",
+  "version": "2.43.9",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "author": "JiHong.Lee",
   "license": "MIT",

package/src/lib/constructor.js

@@ -396,6 +396,16 @@ export default {
      * @private
      */
     _initOptions: function (element, options) {
+        const plugins = {};
+        if (options.plugins) {
+            const _plugins = options.plugins;
+            const pluginsValues = _plugins.length ? _plugins : Object.keys(_plugins).map(function(name) { return _plugins[name]; });
+            for (let i = 0, len = pluginsValues.length, p; i < len; i++) {
+                p = pluginsValues[i].default || pluginsValues[i];
+                plugins[p.name] = p;
+            }
+        }
+        options.plugins = plugins;
         /** Values */
         options.lang = options.lang || _defaultLang;
         options.value = typeof options.value === 'string' ? options.value : null;
@@ -450,6 +460,7 @@ export default {
         options.toolbarWidth = options.toolbarWidth ? (util.isNumber(options.toolbarWidth) ? options.toolbarWidth + 'px' : options.toolbarWidth) : 'auto';
         options.toolbarContainer = typeof options.toolbarContainer === 'string' ? document.querySelector(options.toolbarContainer) : options.toolbarContainer;
         options.stickyToolbar = (/balloon/i.test(options.mode) || !!options.toolbarContainer) ? -1 : options.stickyToolbar === undefined ? 0 : (/^\d+/.test(options.stickyToolbar) ? util.getNumber(options.stickyToolbar, 0) : -1);
+        options.hideToolbar = !!options.hideToolbar;
         options.fullScreenOffset = options.fullScreenOffset === undefined ? 0 : (/^\d+/.test(options.fullScreenOffset) ? util.getNumber(options.fullScreenOffset, 0) : 0);
         options.fullPage = !!options.fullPage;
         options.iframe = options.fullPage || !!options.iframe;
@@ -493,7 +504,7 @@ export default {
         options.className = (typeof options.className === 'string' && options.className.length > 0) ? ' ' + options.className : '';
         options.defaultStyle = typeof options.defaultStyle === 'string' ? options.defaultStyle : '';
         /** Defining menu items */
-        options.font = !options.font ? null : options.font;
+        options.font = !options.font ? ['Arial', 'Comic Sans MS', 'Courier New', 'Impact', 'Georgia', 'tahoma', 'Trebuchet MS', 'Verdana'] : options.font;
         options.fontSize = !options.fontSize ? null : options.fontSize;
         options.formats = !options.formats ? null : options.formats;
         options.colorList = !options.colorList ? null : options.colorList;
@@ -756,12 +767,12 @@ export default {
      * @description Create editor HTML
      * @param {Array} doc document object
      * @param {Array} buttonList option.buttonList
-     * @param {Array|Object|null} _plugins Plugins
+     * @param {Object|null} plugins Plugins
      * @param {Array} options options
      * @returns {Object} { element: (Element) Toolbar element, plugins: (Array|null) Plugins Array, pluginCallButtons: (Object), responsiveButtons: (Array) }
      * @private
      */
-    _createToolBar: function (doc, buttonList, _plugins, options) {
+    _createToolBar: function (doc, buttonList, plugins, options) {
         const separator_vertical = doc.createElement('DIV');
         separator_vertical.className = 'se-toolbar-separator-vertical';
 
@@ -778,14 +789,6 @@ export default {
         const defaultButtonList = this._defaultButtons(options);
         const pluginCallButtons = {};
         const responsiveButtons = [];
-        const plugins = {};
-        if (_plugins) {
-            const pluginsValues = _plugins.length ? _plugins : Object.keys(_plugins).map(function(name) { return _plugins[name]; });
-            for (let i = 0, len = pluginsValues.length, p; i < len; i++) {
-                p = pluginsValues[i].default || pluginsValues[i];
-                plugins[p.name] = p;
-            }
-        }
 
         let module = null;
         let button = null;
@@ -926,6 +929,8 @@ export default {
         tool_cover.className = 'se-toolbar-cover';
         tool_bar.appendChild(tool_cover);
 
+        if (options.hideToolbar) tool_bar.style.display = 'none';
+
         return {
             'element': tool_bar,
             'plugins': plugins,

package/src/lib/core.js

@@ -41,6 +41,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         _parser: new _w.DOMParser(),
         _prevRtl: options.rtl,
         _editorHeight: 0,
+        _editorHeightPadding: 0,
         _listCamel: options.__listCommonStyle,
         _listKebab: util.camelToKebabCase(options.__listCommonStyle),
 
@@ -282,6 +283,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @private
          */
         _attributesWhitelistRegExp: null,
+        _attributesWhitelistRegExp_all_data: null,
 
         /**
          * @description Attributes blacklist used by the cleanHTML method
@@ -468,6 +470,14 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          */
         _styleCommandMap: null,
 
+        /**
+         * @private
+         */
+        _cleanStyleRegExp: {
+            span: new _w.RegExp('\s*(font-family|font-size|color|background-color)\s*:[^;]+(?!;)*', 'ig'),
+            format: new _w.RegExp('\s*(text-align|margin-left|margin-right)\s*:[^;]+(?!;)*', 'ig')
+        },
+
         /**
          * @description Variables used internally in editor operation
          * @property {Boolean} isCodeView State of code view
@@ -1500,7 +1510,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             const currentFormatEl = util.getFormatElement(this.getSelectionNode(), null);
             let oFormat = null;
-            if (util.isFreeFormatElement(currentFormatEl || element.parentNode)) {
+            if (!util.isFormatElement(element) && util.isFreeFormatElement(currentFormatEl || element.parentNode)) {
                 oFormat = util.createElement('BR');
             } else {
                 const oFormatName = formatNode ? (typeof formatNode === 'string' ? formatNode : formatNode.nodeName) : (util.isFormatElement(currentFormatEl) && !util.isRangeFormatElement(currentFormatEl) && !util.isFreeFormatElement(currentFormatEl)) ? currentFormatEl.nodeName : options.defaultTag;
@@ -1691,7 +1701,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 const isEdge = this.isEdgePoint(range.endContainer, range.endOffset, 'end');
                 const r = this.removeNode();
                 const container = r.container;
-                const prevContainer = r.prevContainer;
+                const prevContainer = (container === r.prevContainer && range.collapsed) ? null : r.prevContainer;
 
                 if (insertListCell && prevContainer) {
                     tempParentNode = prevContainer.nodeType === 3 ? prevContainer.parentNode : prevContainer;
@@ -1731,7 +1741,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                                     newCell.appendChild(line.lastElementChild);
                                 }
                                 if (newCell) {
-                                    tempParentNode.insertBefore(newCell, line.nextElementSibling);
+                                    line.parentNode.insertBefore(newCell, line.nextElementSibling);
                                     tempAfterNode = afterNode = newCell;
                                 }
                             }
@@ -5031,10 +5041,16 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             // element
             if (node.nodeType === 1) {
                 if (util._disallowedTags(node)) return '';
+
+                const ch = util.getListChildNodes(node, function(current) { return util.isSpanWithoutAttr(current); }) || [];
+                for (let i = ch.length - 1; i >= 0; i--) {
+                    ch[i].outerHTML = ch[i].innerHTML;
+                }
+
                 if (!requireFormat || (util.isFormatElement(node) || util.isRangeFormatElement(node) || util.isComponent(node) || util.isMedia(node) || (util.isAnchor(node) && util.isMedia(node.firstElementChild)))) {
-                    return node.outerHTML;
+                    return util.isSpanWithoutAttr(node) ? node.innerHTML : node.outerHTML;
                 } else {
-                    return '<' + defaultTag + '>' + node.outerHTML + '</' + defaultTag + '>';
+                    return '<' + defaultTag + '>' + (util.isSpanWithoutAttr(node) ? node.innerHTML : node.outerHTML) + '</' + defaultTag + '>';
                 }
             }
             // text
@@ -5086,6 +5102,46 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 .replace(this.editorTagsBlacklistRegExp, '');
         },
 
+        _cleanStyle: function (m, v, tagName) {
+            const sv = m.match(/style\s*=\s*(?:"|')[^"']*(?:"|')/);
+            if (sv) {
+                if (!v) v = [];
+                const style = sv[0].replace(/&quot;/g, '').match(this._cleanStyleRegExp[tagName]);
+                if (style) {
+                    const allowedStyle = [];
+                    for (let i = 0, len = style.length, r; i < len; i++) {
+                        r = style[i].match(/(.+)(:)([^:]+$)/);
+                        if (r && !/inherit|initial/i.test(r[3])) {
+                            const k = util.kebabToCamelCase(r[1].trim());
+                            const v = this.wwComputedStyle[k].replace(/"/g, '');
+                            const c = r[3].trim();
+                            switch (k) {
+                                case 'fontFamily':
+                                    if (!options.plugins.font || options.font.indexOf(c) === -1) continue;
+                                    break;
+                                case 'fontSize':
+                                    if (!options.plugins.fontSize) continue;
+                                    break;
+                                case 'color':
+                                    if (!options.plugins.fontColor) continue;
+                                    break;
+                                case 'backgroundColor':
+                                    if (!options.plugins.hiliteColor) continue;
+                                    break;
+                            }
+                            
+                            if (v !== c) {
+                                allowedStyle.push(r[0]);
+                            }
+                        }
+                    }
+                    if (allowedStyle.length > 0) v.push('style="' + allowedStyle.join(';') + '"');
+                }
+            }
+
+            return v;
+        },
+
         /**
          * @description Tag and tag attribute check RegExp function. (used by "cleanHTML" and "convertContentsForEditor")
          * @param {Boolean} lowLevelCheck Row level check
@@ -5102,34 +5158,38 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             // blacklist
             const bAttr = this._attributesTagsBlacklist[tagName];
+            m = m.replace(/\s(?:on[a-z]+)\s*=\s*(")[^"]*\1/ig, '');
             if (bAttr) m = m.replace(bAttr, '');
             else m = m.replace(this._attributesBlacklistRegExp, '');
 
             // whitelist
             const wAttr = this._attributesTagsWhitelist[tagName];
             if (wAttr) v = m.match(wAttr);
-            else v = m.match(this._attributesWhitelistRegExp);
+            else v = m.match(lowLevelCheck ? this._attributesWhitelistRegExp : this._attributesWhitelistRegExp_all_data);
 
-            // anchor
-            if (!lowLevelCheck || /<a\b/i.test(t)) {
-                const sv = m.match(/(?:(?:id|name)\s*=\s*(?:"|')[^"']*(?:"|'))/g);
-                if (sv) {
-                    if (!v) v = [];
-                    v.push(sv[0]);
+            // attribute
+            if (lowLevelCheck) {
+                if (tagName === 'a') {
+                    const sv = m.match(/(?:(?:id|name)\s*=\s*(?:"|')[^"']*(?:"|'))/g);
+                    if (sv) {
+                        if (!v) v = [];
+                        v.push(sv[0]);
+                    }
+                } else if (!v || !/style=/i.test(v.toString())) {
+                    if (tagName === 'span') {
+                        v = this._cleanStyle(m, v, 'span');
+                    } else if (/^(P|DIV|H[1-6]|PRE)$/i.test(tagName)) {
+                        v = this._cleanStyle(m, v, 'format');
+                    }
                 }
-            }
-
-            // span
-            if ((!lowLevelCheck || /<span/i.test(t)) && (!v || !/style=/i.test(v.toString()))) {
+            } else {
                 const sv = m.match(/style\s*=\s*(?:"|')[^"']*(?:"|')/);
-                if (sv) {
-                    if (!v) v = [];
-                    v.push(sv[0]);
-                }
+                if (sv && !v) v = [sv[0]];
+                else if (sv && !v.some(function (v) { return /^style/.test(v.trim()); })) v.push(sv[0]);
             }
 
             // img
-            if (/<img/i.test(t)) {
+            if (tagName === 'img') {
                 let w = '', h = '';
                 const sv = m.match(/style\s*=\s*(?:"|')[^"']*(?:"|')/);
                 if (!v) v = [];
@@ -5153,14 +5213,82 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             if (v) {
                 for (let i = 0, len = v.length; i < len; i++) {
-                    if (lowLevelCheck && /^class="(?!(__se__|se-|katex))/.test(v[i])) continue;
-                    t += ' ' + (/^(?:href|src)\s*=\s*('|"|\s)*javascript\s*\:/i.test(v[i]) ? '' : v[i]);
+                    if (lowLevelCheck && /^class="(?!(__se__|se-|katex))/.test(v[i].trim())) continue;
+                    t += ' ' + (/^(?:href|src)\s*=\s*('|"|\s)*javascript\s*\:/i.test(v[i].trim()) ? '' : v[i]);
                 }
             }
 
             return t;
         },
 
+        /**
+         * @description Determines if formatting is required and returns a domTree
+         * @param {Element} dom documentFragment
+         * @returns {Element}
+         * @private
+         */
+        _editFormat: function (dom) {
+            let value = '', f;
+            const tempTree = dom.childNodes;
+            for (let i = 0, len = tempTree.length, n; i < len; i++) {
+                n = tempTree[i];
+                if (!util.isFormatElement(n) && !util.isRangeFormatElement(n) && !util.isComponent(n) && !/meta/i.test(n.nodeName)) {
+                    if (!f) f = util.createElement(options.defaultTag);
+                    f.appendChild(n);
+                    i--; len--;
+                } else {
+                    if (f) {
+                        value += f.outerHTML;
+                        f = null;
+                    }
+                    value += n.outerHTML;
+                }
+            }
+
+            if (f) value += f.outerHTML;
+
+            return _d.createRange().createContextualFragment(value);
+        },
+
+        _convertListCell: function (domTree) {
+            let html = '';
+
+            for (let i = 0, len = domTree.length, node; i < len; i++) {
+                node = domTree[i];
+                if (node.nodeType === 1) {
+                    if (util.isList(node)) {
+                        html += node.innerHTML;
+                    } else if (util.isListCell(node)) {
+                        html += node.outerHTML;
+                    } else if (util.isFormatElement(node)) {
+                        html += '<li>' +(node.innerHTML.trim() || '<br>') + '</li>';
+                    } else if (util.isRangeFormatElement(node) && !util.isTable(node)) {
+                        html += this._convertListCell(node);
+                    } else {
+                        html += '<li>' + node.outerHTML + '</li>';
+                    }
+                } else {
+                    html += '<li>' + (node.textContent || '<br>') + '</li>';
+                }
+            }
+
+            return html;
+        },
+
+        _isFormatData: function (domTree) {
+            let requireFormat = false;
+
+            for (let i = 0, len = domTree.length, t; i < len; i++) {
+                t = domTree[i];
+                if (t.nodeType === 1 && !util.isTextStyleElement(t) && !util.isBreak(t) && !util._disallowedTags(t)) {
+                    requireFormat = true;
+                    break;
+                }
+            }
+
+            return requireFormat;
+        },
+
         /**
          * @description Gets the clean HTML code for editor
          * @param {String} html HTML string
@@ -5194,16 +5322,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 }
             }
 
-            const domTree = dom.childNodes;
+            let domTree = dom.childNodes;
             let cleanHTML = '';
-            let requireFormat = false;
+            const requireFormat = this._isFormatData(domTree);
 
-            for (let i = 0, len = domTree.length, t; i < len; i++) {
-                t = domTree[i];
-                if (t.nodeType === 1 && !util.isTextStyleElement(t) && !util.isBreak(t) && !util._disallowedTags(t)) {
-                    requireFormat = true;
-                    break;
-                }
+            if(requireFormat) {
+                domTree = this._editFormat(dom).childNodes;
             }
 
             for (let i = 0, len = domTree.length; i < len; i++) {
@@ -5566,6 +5690,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             this._charTypeHTML = options.charCounterType === 'byte-html';
             this.wwComputedStyle = _w.getComputedStyle(context.element.wysiwyg);
             this._editorHeight = context.element.wysiwygFrame.offsetHeight;
+            this._editorHeightPadding = util.getNumber(this.wwComputedStyle.getPropertyValue('padding-top')) + util.getNumber(this.wwComputedStyle.getPropertyValue('padding-bottom'));
 
             if (!options.iframe && typeof _w.ShadowRoot === 'function') {
                 let child = context.element.wysiwygFrame;
@@ -5593,7 +5718,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             // set whitelist
             const getRegList = function (str, str2) { return !str ? '^' : (str === '*' ? '[a-z-]+' : (!str2 ? str : (str + '|' + str2))); };
             // tags
-            const defaultAttr = 'contenteditable|colspan|rowspan|target|href|download|rel|src|alt|class|type|controls|data-format|data-size|data-file-size|data-file-name|data-origin|data-align|data-image-link|data-rotate|data-proportion|data-percentage|origin-size|data-exp|data-font-size';
+            const defaultAttr = 'contenteditable|colspan|rowspan|target|href|download|rel|src|alt|class|type|controls|origin-size';
+            const dataAttr = 'data-format|data-size|data-file-size|data-file-name|data-origin|data-align|data-image-link|data-rotate|data-proportion|data-percentage|data-exp|data-font-size';
             this._allowHTMLComments = options._editorTagsWhitelist.indexOf('//') > -1 || options._editorTagsWhitelist === '*';
             // html check
             this._htmlCheckWhitelistRegExp = new wRegExp('^(' + getRegList(options._editorTagsWhitelist.replace('|//', ''), '') + ')$', 'i');
@@ -5620,7 +5746,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 }
             }
             
-            this._attributesWhitelistRegExp = new wRegExp('\\s(?:' + (allAttr || defaultAttr) + ')' + regEndStr, 'ig');
+            this._attributesWhitelistRegExp = new wRegExp('\\s(?:' + (allAttr || defaultAttr + '|' + dataAttr) + ')' + regEndStr, 'ig');
+            this._attributesWhitelistRegExp_all_data = new wRegExp('\\s(?:' + ((allAttr || defaultAttr) + '|data-[a-z0-9\\-]+') + ')' + regEndStr, 'ig');
             this._attributesTagsWhitelist = tagsAttr;
 
             // blacklist
@@ -5799,7 +5926,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         },
 
         __callResizeFunction: function (h, resizeObserverEntry) {
-            h = h === -1 ? resizeObserverEntry.borderBoxSize[0].blockSize : h;
+            h = h === -1 ? (resizeObserverEntry.borderBoxSize ? resizeObserverEntry.borderBoxSize[0].blockSize : (resizeObserverEntry.contentRect.height + this._editorHeightPadding)) : h;
             if (this._editorHeight !== h) {
                 if (typeof functions.onResizeEditor === 'function') functions.onResizeEditor(h, this._editorHeight, core, resizeObserverEntry);
                 this._editorHeight = h;
@@ -7691,39 +7818,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             if (cleanData) {
-                if (util.isListCell(util.getFormatElement(core.getSelectionNode(), null))) {
-                    const dom = (_d.createRange().createContextualFragment(cleanData));
-                    const domTree = dom.childNodes;
-                    if (domTree.length > 1 && domTree[0].nodeType === 1) cleanData = event._convertListCell(domTree);
-                }
                 functions.insertHTML(cleanData, true, false);
                 return false;
             }
         },
 
-        _convertListCell: function (domTree) {
-            let html = '';
-
-            for (let i = 0, len = domTree.length, node; i < len; i++) {
-                node = domTree[i];
-                if (node.nodeType === 1) {
-                    if (util.isListCell(node) || util.isList(node)) {
-                        html += node.outerHTML;
-                    } else if (util.isFormatElement(node)) {
-                        html += '<li>' +(node.innerHTML.trim() || '<br>') + '</li>';
-                    } else if (util.isRangeFormatElement(node) && !util.isTable(node)) {
-                        html += event._convertListCell(node);
-                    } else {
-                        html += '<li>' + node.outerHTML + '</li>';
-                    }
-                } else {
-                    html += '<li>' + (node.textContent || '<br>') + '</li>';
-                }
-            }
-
-            return html;
-        },
-
         onMouseMove_wysiwyg: function (e) {
             if (core.isDisabled || core.isReadOnly) return false;
             const component = util.getParentElement(e.target, util.isComponent);
@@ -8439,10 +8538,16 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          */
         insertHTML: function (html, notCleaningData, checkCharCount, rangeSelection) {
             if (!context.element.wysiwygFrame.contains(core.getSelection().focusNode)) core.focus();
-            
+
             if (typeof html === 'string') {
                 if (!notCleaningData) html = core.cleanHTML(html, null, null);
                 try {
+                    if (util.isListCell(util.getFormatElement(core.getSelectionNode(), null))) {
+                        const dom = _d.createRange().createContextualFragment(html);
+                        const domTree = dom.childNodes;
+                        if (core._isFormatData(domTree)) html = core._convertListCell(domTree);
+                    }
+
                     const dom = _d.createRange().createContextualFragment(html);
                     const domTree = dom.childNodes;
 

package/src/lib/util.d.ts

@@ -42,6 +42,12 @@ declare interface util {
      */
     camelToKebabCase(param: string | string[]): string | string[],
 
+    /**
+     * @description Convert the KebabCase To the CamelCase.
+     * @param {String|Array} param [KebabCase string]
+     */
+    kebabToCamelCase(param: string | string[]): string | string[],
+
     /**
      * @description Create Element node
      * @param elementName Element name
@@ -351,6 +357,13 @@ declare interface util {
      */
     isEmptyLine(element: Element): boolean;
 
+    /**
+     * @description Check the span's attributes are empty.
+     * @param {Element} element Element node
+     * @returns {Boolean}
+     */
+    isSpanWithoutAttr(element: Element|null): boolean;
+
     /**
      * @description Check the node is a list (ol, ul)
      * @param node The element or element name to check

package/src/lib/util.js

@@ -119,6 +119,19 @@ const util = {
         }
     },
 
+    /**
+     * @description Convert the KebabCase To the CamelCase.
+     * @param {String|Array} param [KebabCase string]
+     * @returns {String|Array}
+     */
+    kebabToCamelCase: function (param) {
+        if (typeof param === 'string') {
+            return param.replace(/-[a-zA-Z]/g, function (letter) { return letter.replace('-', '').toUpperCase(); });
+        } else {
+            return param.map(function(str) { return util.camelToKebabCase(str); });
+        }
+    },
+
     /**
      * @description Create Element node
      * @param {String} elementName Element name
@@ -763,6 +776,15 @@ const util = {
         return !element || !element.parentNode || (!element.querySelector('IMG, IFRAME, AUDIO, VIDEO, CANVAS, TABLE') && this.onlyZeroWidthSpace(element.textContent));
     },
 
+    /**
+     * @description Check the span's attributes are empty.
+     * @param {Element|null} element Element node
+     * @returns {Boolean}
+     */
+    isSpanWithoutAttr: function (element) {
+        return !!element && element.nodeType === 1 && /^SPAN$/i.test(element.nodeName) && !element.className && !element.style.cssText;
+    },
+
     /**
      * @description Check the node is a list (ol, ul)
      * @param {Node|String} node The element or element name to check
@@ -1375,12 +1397,33 @@ const util = {
      * @description Split all tags based on "baseNode"
      * Returns the last element of the splited tag.
      * @param {Node} baseNode Element or text node on which to base
-     * @param {Number|null} offset Text offset of "baseNode" (Only valid when "baseNode" is a text node)
+     * @param {Number|Node|null} offset Text offset of "baseNode" (Only valid when "baseNode" is a text node)
      * @param {Number} depth The nesting depth of the element being split. (default: 0)
      * @returns {Element}
      */
     splitElement: function (baseNode, offset, depth) {
         if (this.isWysiwygDiv(baseNode)) return baseNode;
+
+        if (!!offset && !this.isNumber(offset)) {
+            const children =  baseNode.childNodes;
+            let index = this.getPositionIndex(offset);
+            const prev = baseNode.cloneNode(false);
+            const next = baseNode.cloneNode(false);
+            for (let i = 0, len = children.length; i < len; i++) {
+                if (i < index) prev.appendChild(children[i]);
+                else if (i > index) next.appendChild(children[i]);
+                else continue;
+                i--;
+                len--;
+                index--;
+            }
+
+            if (prev.childNodes.length > 0) baseNode.parentNode.insertBefore(prev, baseNode);
+            if (next.childNodes.length > 0) baseNode.parentNode.insertBefore(next, baseNode.nextElementSibling);
+
+            return baseNode;
+        }
+
         const bp = baseNode.parentNode;
         let index = 0, newEl, children, temp;
         let next = true;

package/src/plugins/dialog/audio.js

@@ -454,7 +454,7 @@ export default {
         this.plugins.audio._setTagAttrs.call(this, element);
         
         // find component element
-        const existElement = (this.util.isRangeFormatElement(element.parentNode) || this.util.isWysiwygDiv(element.parentNode)) ? 
+        let existElement = (this.util.isRangeFormatElement(element.parentNode) || this.util.isWysiwygDiv(element.parentNode)) ? 
             element : this.util.getFormatElement(element) || element;
 
         // clone element
@@ -464,12 +464,16 @@ export default {
         const container = this.plugins.component.set_container.call(this, cover, 'se-audio-container');
 
         try {
-            if (this.util.isListCell(existElement) || this.util.isFormatElement(existElement)) {
-                prevElement.parentNode.replaceChild(container, prevElement);
-            } else if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
+            if (this.util.isListCell(existElement)) {
+                const refer = this.util.getParentElement(prevElement, function (current) { return current.parentNode === existElement; });
+                existElement.insertBefore(container, refer);
+                this.util.removeItem(prevElement);
+                this.util.removeEmptyNode(refer, null);
+            } else if (this.util.isFormatElement(existElement)) {
+                const refer = this.util.getParentElement(prevElement, function (current) { return current.parentNode === existElement; });
+                existElement = this.util.splitElement(existElement, refer);
                 existElement.parentNode.insertBefore(container, existElement);
                 this.util.removeItem(prevElement);
-                // clean format tag
                 this.util.removeEmptyNode(existElement, null);
                 if (existElement.children.length === 0) existElement.innerHTML = this.util.htmlRemoveWhiteSpace(existElement.innerHTML);
             } else {

package/src/plugins/dialog/image.js

@@ -768,16 +768,20 @@ export default {
         }
 
         if (isNewContainer) {
-            const existElement = (this.util.isRangeFormatElement(contextImage._element.parentNode) || this.util.isWysiwygDiv(contextImage._element.parentNode)) ? 
+            let existElement = (this.util.isRangeFormatElement(contextImage._element.parentNode) || this.util.isWysiwygDiv(contextImage._element.parentNode)) ? 
                 contextImage._element : 
                 /^A$/i.test(contextImage._element.parentNode.nodeName) ? contextImage._element.parentNode : this.util.getFormatElement(contextImage._element) || contextImage._element;
                 
-            if (this.util.isListCell(existElement) || this.util.isFormatElement(existElement)) {
-                contextImage._element.parentNode.replaceChild(container, contextImage._element);
-            } else if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
+            if (this.util.isListCell(existElement)) {
+                const refer = this.util.getParentElement(contextImage._element, function (current) { return current.parentNode === existElement; });
+                existElement.insertBefore(container, refer);
+                this.util.removeItem(contextImage._element);
+                this.util.removeEmptyNode(refer, null);
+            } else if (this.util.isFormatElement(existElement)) {
+                const refer = this.util.getParentElement(contextImage._element, function (current) { return current.parentNode === existElement; });
+                existElement = this.util.splitElement(existElement, refer);
                 existElement.parentNode.insertBefore(container, existElement);
                 this.util.removeItem(contextImage._element);
-                // clean format tag
                 this.util.removeEmptyNode(existElement, null);
                 if (existElement.children.length === 0) existElement.innerHTML = this.util.htmlRemoveWhiteSpace(existElement.innerHTML);
             } else {

package/src/plugins/dialog/video.js

@@ -645,7 +645,7 @@ export default {
         if (/^video$/i.test(oFrame.nodeName)) this.plugins.video._setTagAttrs.call(this, oFrame);
         else this.plugins.video._setIframeAttrs.call(this, oFrame);
         
-        const existElement = (this.util.isRangeFormatElement(oFrame.parentNode) || this.util.isWysiwygDiv(oFrame.parentNode)) ? 
+        let existElement = (this.util.isRangeFormatElement(oFrame.parentNode) || this.util.isWysiwygDiv(oFrame.parentNode)) ? 
             oFrame : this.util.getFormatElement(oFrame) || oFrame;
 
         const prevFrame = oFrame;
@@ -671,12 +671,16 @@ export default {
             if (format) contextVideo._align = format.style.textAlign || format.style.float;
             this.plugins.video.setAlign.call(this, null, oFrame, cover, container);
 
-            if (this.util.isListCell(existElement) || this.util.isFormatElement(existElement)) {
-                prevFrame.parentNode.replaceChild(container, prevFrame);
-            } else if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
+            if (this.util.isListCell(existElement)) {
+                const refer = this.util.getParentElement(prevFrame, function (current) { return current.parentNode === existElement; });
+                existElement.insertBefore(container, refer);
+                this.util.removeItem(prevFrame);
+                this.util.removeEmptyNode(refer, null);
+            } else if (this.util.isFormatElement(existElement)) {
+                const refer = this.util.getParentElement(prevFrame, function (current) { return current.parentNode === existElement; });
+                existElement = this.util.splitElement(existElement, refer);
                 existElement.parentNode.insertBefore(container, existElement);
                 this.util.removeItem(prevFrame);
-                // clean format tag
                 this.util.removeEmptyNode(existElement, null);
                 if (existElement.children.length === 0) existElement.innerHTML = this.util.htmlRemoveWhiteSpace(existElement.innerHTML);
             } else {