suneditor 2.41.3 → 2.42.0

package/src/lib/util.d.ts

@@ -263,6 +263,14 @@ declare interface util {
      */
     getArrayItem(array: any[] | HTMLCollection | NodeList, validation: Function | null, multi: boolean): any[] | Node | null;
     
+    /**
+     * @description Check if an array contains an element 
+     * @param {Array|HTMLCollection|NodeList} array element array
+     * @param {Node} element The element to find index
+     * @returns {Boolean}
+     */
+    arrayIncludes(array: any[] | HTMLCollection | NodeList, element: Node): boolean;
+
     /**
      * @description Get the index of the argument value in the element array
      * @param array element array
@@ -534,14 +542,21 @@ declare interface util {
      */
     toggleClass(element: Element, className: string): boolean | undefined;
 
+    /**
+     * @description Checks if element can't be easily enabled
+     * @param {Element} element Element to check for
+     */
+    isImportantDisabled(element: Element): boolean;
+
     /**
      * @description In the predefined code view mode, the buttons except the executable button are changed to the 'disabled' state.
      * core.codeViewDisabledButtons (An array of buttons whose class name is not "se-code-view-enabled")
      * core.resizingDisabledButtons (An array of buttons whose class name is not "se-resizing-enabled")
      * @param disabled Disabled value
      * @param buttonList Button array
+     * @param important If priveleged mode should be used (Necessary to switch importantDisabled buttons)
      */
-    setDisabledButtons(disabled: boolean, buttonList: Element[] | HTMLCollection | NodeList): void;
+    setDisabledButtons(disabled: boolean, buttonList: Element[] | HTMLCollection | NodeList, important: Boolean): void;
 
     /**
      * @description Delete argumenu value element
@@ -624,6 +639,14 @@ declare interface util {
      * @returns
      */
     createTagsWhitelist(list: string): RegExp;
+
+    /**
+     * @description Create blacklist RegExp object.
+     * Return RegExp format: new RegExp("<\\/?\\b(?:" + list + ")\\b[^>^<]*+>", "gi")
+     * @param list Tags list ("br|p|div|pre...")
+     * @returns
+     */
+    createTagsBlacklist(list: string): RegExp;
 }
 
 export default util;

package/src/lib/util.js

@@ -551,6 +551,21 @@ const util = {
         return !multi ? null : arr;
     },
 
+    /**
+     * @description Check if an array contains an element 
+     * @param {Array|HTMLCollection|NodeList} array element array
+     * @param {Node} element The element to check for
+     * @returns {Boolean}
+     */
+    arrayIncludes: function(array, element) {
+        for (let i = 0; i < array.length; i++) {
+            if (array[i] === element) {
+                return true;
+            }
+        }
+        return false;
+    },
+
     /**
      * @description Get the index of the argument value in the element array
      * @param {Array|HTMLCollection|NodeList} array element array
@@ -1173,16 +1188,33 @@ const util = {
         return result;
     },
 
+    /**
+     * @description Checks if element can't be easily enabled
+     * @param {Element} element Element to check for
+     */
+    isImportantDisabled: function (element) {
+        return element.hasAttribute('data-important-disabled');
+    },
+
     /**
      * @description In the predefined code view mode, the buttons except the executable button are changed to the 'disabled' state.
      * core.codeViewDisabledButtons (An array of buttons whose class name is not "se-code-view-enabled")
      * core.resizingDisabledButtons (An array of buttons whose class name is not "se-resizing-enabled")
      * @param {Boolean} disabled Disabled value
      * @param {Array|HTMLCollection|NodeList} buttonList Button array
+     * @param {Boolean} important If priveleged mode should be used (Necessary to switch importantDisabled buttons)
      */
-    setDisabledButtons: function (disabled, buttonList) {
+    setDisabledButtons: function (disabled, buttonList, important) {
         for (let i = 0, len = buttonList.length; i < len; i++) {
-            buttonList[i].disabled = disabled;
+            let button = buttonList[i];
+            if (important || !this.isImportantDisabled(button)) button.disabled = disabled;
+            if (important) {
+                if (disabled) { 
+                    button.setAttribute('data-important-disabled', '');
+                } else {
+                    button.removeAttribute('data-important-disabled');
+                }
+            }
         }
     },
 
@@ -1594,7 +1626,7 @@ const util = {
      */
     htmlRemoveWhiteSpace: function (html) {
         if (!html) return '';
-        return html.trim().replace(/<\/?(?!strong|span|font|b|var|i|em|u|ins|s|strike|del|sub|sup|mark|a|label|code|summary)[^>^<]+>\s+(?=<)/ig, function (m) { return m.trim(); });
+        return html.trim().replace(/<\/?(?!strong|span|font|b|var|i|em|u|ins|s|strike|del|sub|sup|mark|a|label|code|summary)[^>^<]+>\s+(?=<)/ig, function (m) { return m.replace(/\n/g, '').replace(/\s+/, ' '); });
     },
 
     /**
@@ -1671,17 +1703,28 @@ const util = {
      * @returns {RegExp}
      */
     createTagsWhitelist: function (list) {
-        return new RegExp('<\\/?\\b(?!\\b' + list.replace(/\|/g, '\\b|\\b') + '\\b)[^>]*>', 'gi');
+        return new RegExp('<\\/?\\b(?!\\b' + (list || '').replace(/\|/g, '\\b|\\b') + '\\b)[^>]*>', 'gi');
+    },
+
+    /**
+     * @description Create blacklist RegExp object.
+     * Return RegExp format: new RegExp("<\\/?\\b(?:" + list + ")\\b[^>^<]*+>", "gi")
+     * @param {String} list Tags list ("br|p|div|pre...")
+     * @returns {RegExp}
+     */
+    createTagsBlacklist: function (list) {
+        return new RegExp('<\\/?\\b(?:\\b' + (list || '^').replace(/\|/g, '\\b|\\b') + '\\b)[^>]*>', 'gi');
     },
 
     /**
      * @description Fix tags that do not fit the editor format.
      * @param {Element} documentFragment Document fragment "DOCUMENT_FRAGMENT_NODE" (nodeType === 11)
      * @param {RegExp} htmlCheckWhitelistRegExp Editor tags whitelist (core._htmlCheckWhitelistRegExp)
+     * @param {RegExp} htmlCheckBlacklistRegExp Editor tags blacklist (core._htmlCheckBlacklistRegExp)
      * @param {Boolean} lowLevelCheck Row level check
      * @private
      */
-    _consistencyCheckOfHTML: function (documentFragment, htmlCheckWhitelistRegExp, lowLevelCheck) {
+    _consistencyCheckOfHTML: function (documentFragment, htmlCheckWhitelistRegExp, htmlCheckBlacklistRegExp, lowLevelCheck) {
         /**
          * It is can use ".children(util.getListChildren)" to exclude text nodes, but "documentFragment.children" is not supported in IE.
          * So check the node type and exclude the text no (current.nodeType !== 1)
@@ -1693,14 +1736,14 @@ const util = {
             if (current.nodeType !== 1) return false;
 
             // white list
-            if (!htmlCheckWhitelistRegExp.test(current.nodeName) && current.childNodes.length === 0 && this.isNotCheckingNode(current)) {
+            if (htmlCheckBlacklistRegExp.test(current.nodeName) || (!htmlCheckWhitelistRegExp.test(current.nodeName) && current.childNodes.length === 0 && this.isNotCheckingNode(current))) {
                 removeTags.push(current);
                 return false;
             }
 
             const nrtag = !this.getParentElement(current, this.isNotCheckingNode);
             // empty tags
-            if ((!this.isTable(current) && !this.isListCell(current)) && (this.isFormatElement(current) || this.isRangeFormatElement(current) || this.isTextStyleElement(current)) && current.childNodes.length === 0 && nrtag) {
+            if ((!this.isTable(current) && !this.isListCell(current) && !this.isAnchor(current)) && (this.isFormatElement(current) || this.isRangeFormatElement(current) || this.isTextStyleElement(current)) && current.childNodes.length === 0 && nrtag) {
                 emptyTags.push(current);
                 return false;
             }
@@ -1762,17 +1805,23 @@ const util = {
 
         for (let i = 0, len = wrongList.length, t, tp, children, p; i < len; i++) {
             t = wrongList[i];
+            p = t.parentNode;
+            if (!p) continue;
 
             tp = this.createElement('LI');
-            children = t.childNodes;
-            while (children[0]) {
-                tp.appendChild(children[0]);
+
+            if (this.isFormatElement(t)) {
+                children = t.childNodes;
+                while (children[0]) {
+                    tp.appendChild(children[0]);
+                }
+                p.insertBefore(tp, t);
+                this.removeItem(t);
+            } else {
+                t = t.nextSibling;
+                tp.appendChild(wrongList[i]);
+                p.insertBefore(tp, t);
             }
-            
-            p = t.parentNode;
-            if (!p) continue;
-            p.insertBefore(tp, t);
-            this.removeItem(t);
         }
 
         for (let i = 0, len = withoutFormatCells.length, t, f; i < len; i++) {

package/src/options.d.ts

@@ -31,15 +31,15 @@ export interface SunEditorOptions {
     /**
      * Add tags to the default tags whitelist of editor.
      */
-    addTagsWhitelist?: string;
-    /**
-     * Whitelist of tags when pasting.
-     */
-    pasteTagsWhitelist?: string;
+    addTagsWhitelist?: string | '*';
     /**
      * Blacklist of the editor default tags.
      */
     tagsBlacklist?: string;
+    /**
+     * Whitelist of tags when pasting.
+     */
+    pasteTagsWhitelist?: string | '*';
     /**
      * Blacklist of tags when pasting.
      */
@@ -47,7 +47,11 @@ export interface SunEditorOptions {
     /**
      * Add attributes whitelist of tags that should be kept undeleted from the editor.
      */
-    attributesWhitelist?: Record<string, string>;
+    attributesWhitelist?: Record<string, string | '*'>;
+    /**
+     * Add attribute blacklist of tags that should be deleted in editor.
+     */
+    attributesBlacklist?: Record<string, string | '*'>;
     /**
      * Layout
      * ======
@@ -60,6 +64,13 @@ export interface SunEditorOptions {
      * If true, the editor is set to RTL(Right To Left) mode.
      */
     rtl?: boolean;
+    /**
+     * Deletes other attributes except for the property set at the time of line break.
+     * If there is no value, no all attribute is deleted.
+     * @example 'class|style': Attributes other than "class" and "style" are deleted at line break.
+     * '*': All attributes are deleted at line break.
+     */
+    lineAttrReset?: string;
     /**
      * Button List
      */
@@ -91,6 +102,10 @@ export interface SunEditorOptions {
      * Allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration
      */
     fullPage?: boolean;
+    /**
+     * Attributes of the iframe.
+     */
+    iframeAttributes?: Record<string, string>;
     /**
      * Name of the CSS file(s) to apply inside the iframe.
      */
@@ -147,6 +162,16 @@ export interface SunEditorOptions {
      * Displays the current node structure to resizingBar
      */
     showPathLabel?: boolean;
+    /**
+     * Enable/disable resize function of bottom resizing bar.
+     */
+    resizeEnable?: boolean;
+    /**
+     * A custom HTML selector placing the resizing bar inside.
+     The class name of the element must be 'sun-editor'.
+     Element or querySelector argument.
+     */
+    resizingBarContainer?: HTMLElement | string;
     /**
      * Character count
      * ===============
@@ -212,9 +237,13 @@ export interface SunEditorOptions {
      */
     fontSize?: number[];
     /**
-     *
+     * The font size unit
      */
     fontSizeUnit?: string;
+    /**
+     * A list of drop-down options for the 'align' plugin.
+     */
+    alignItems?: ('left' | 'center' | 'right' | 'justify')[];
     /**
      * Change default formatBlock array
      */
@@ -247,6 +276,10 @@ export interface SunEditorOptions {
      * Choose whether the image height input is visible.
      */
     imageHeightShow?: boolean;
+    /**
+     * Choose whether the image align radio buttons are visible.
+     */
+    imageAlignShow?: boolean;
     /**
      * The default width size of the image frame
      */
@@ -296,7 +329,7 @@ export interface SunEditorOptions {
     imageMultipleFile?: boolean;
     /**
      * Define the "accept" attribute of the input.
-     * ex) "*" or ".jpg, .png .."
+     * @example "*" or ".jpg, .png .."
      */
     imageAccept?: string;               
     /**
@@ -323,6 +356,10 @@ export interface SunEditorOptions {
      * Choose whether the video height input is visible.
      */
     videoHeightShow?: boolean;
+    /**
+     * Choose whether the video align radio buttons are visible.
+     */
+    videoAlignShow?: boolean;
     /**
      * Choose whether the video ratio options is visible.
      */
@@ -455,6 +492,10 @@ export interface SunEditorOptions {
      * Link
      * =====
      */
+    /**
+     * Default checked value of the "Open in new window" checkbox.
+     */
+    linkTargetNewWindow?: boolean;
     /**
      * Protocol for the links (if link has been added without any protocol this one will be used).
      */
@@ -467,6 +508,20 @@ export interface SunEditorOptions {
      * Defines default "rel" attribute list of anchor tag.
      */
     linkRelDefault?: {default?: string; check_new_window?: string; check_bookmark?: string;};
+    /**
+     * If true, disables the automatic prefixing of the host URL to the value of the link. default: false {Boolean}
+     */
+    linkNoPrefix?: boolean;
+    /*
+     * HR
+     * =====
+     */
+    /**
+     * Defines the hr items.
+     * "class" or "style" must be specified.
+     * @example [{name: "solid", class: "__se__xxx", style: "border-style: outset;"}]
+     */
+    hrItems?: { name: string; class?: string; style?: string }[];
     /**
      * Key actions
      * =====

package/src/plugins/dialog/audio.js

@@ -454,10 +454,8 @@ export default {
         this.plugins.audio._setTagAttrs.call(this, element);
         
         // find component element
-        const existElement = this.util.getParentElement(element, this.util.isMediaComponent) || 
-            this.util.getParentElement(element, function (current) {
-                return this.isWysiwygDiv(current.parentNode);
-            }.bind(this.util));
+        const existElement = (this.util.isRangeFormatElement(element.parentNode) || this.util.isWysiwygDiv(element.parentNode)) ? 
+            element : this.util.getFormatElement(element) || element;
 
         // clone element
         const prevElement = element;
@@ -466,7 +464,9 @@ export default {
         const container = this.plugins.component.set_container.call(this, cover, 'se-audio-container');
 
         try {
-            if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
+            if (this.util.isListCell(existElement) || this.util.isFormatElement(existElement)) {
+                prevElement.parentNode.replaceChild(container, prevElement);
+            } else if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
                 existElement.parentNode.insertBefore(container, existElement);
                 this.util.removeItem(prevElement);
                 // clean format tag

package/src/plugins/dialog/image.js

@@ -53,6 +53,7 @@ export default {
             _resizing: options.imageResizing,
             _resizeDotHide: !options.imageHeightShow,
             _rotation: options.imageRotation,
+            _alignHide: !options.imageAlignShow,
             _onlyPercentage: options.imageSizeOnlyPercentage,
             _ratio: false,
             _ratioX: 1,
@@ -203,7 +204,7 @@ export default {
                     core.context.anchor.forms.innerHTML +
                 '</div>' +
                 '<div class="se-dialog-footer">' +
-                    '<div>' +
+                    '<div' + (option.imageAlignShow ? '' : ' style="display: none"') + '>' +
                         '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="none" checked>' + lang.dialogBox.basic + '</label>' +
                         '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="left">' + lang.dialogBox.left + '</label>' +
                         '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="center">' + lang.dialogBox.center + '</label>' +
@@ -375,7 +376,7 @@ export default {
                 imagePlugin.submitAction.call(this, this.context.image.imgInputFile.files);
             } else if (contextImage.imgUrlFile && contextImage._v_src._linkValue.length > 0) {
                 this.showLoading();
-                imagePlugin.onRender_imgUrl.call(this);
+                imagePlugin.onRender_imgUrl.call(this, contextImage._v_src._linkValue);
             }
         } catch (error) {
             this.closeLoading();
@@ -427,6 +428,7 @@ export default {
             inputHeight: contextImage.inputY.value,
             align: contextImage._align,
             isUpdate: this.context.dialog.updateModal,
+            alt: contextImage._altText,
             element: contextImage._element
         };
 
@@ -479,7 +481,7 @@ export default {
             }
             this.plugins.fileManager.upload.call(this, imageUploadUrl, this.options.imageUploadHeader, formData, this.plugins.image.callBack_imgUpload.bind(this, info), this.functions.onImageUploadError);
         } else { // base64
-            this.plugins.image.setup_reader.call(this, files, info.anchor, info.inputWidth, info.inputHeight, info.align, filesLen, info.isUpdate);
+            this.plugins.image.setup_reader.call(this, files, info.anchor, info.inputWidth, info.inputHeight, info.align, info.alt, filesLen, info.isUpdate);
         }
     },
 
@@ -505,14 +507,14 @@ export default {
                 this.plugins.image.update_src.call(this, fileList[i].url, info.element, file);
                 break;
             } else {
-                this.plugins.image.create_image.call(this, fileList[i].url, info.anchor, info.inputWidth, info.inputHeight, info.align, file);
+                this.plugins.image.create_image.call(this, fileList[i].url, info.anchor, info.inputWidth, info.inputHeight, info.align, file, info.alt);
             }
         }
         
         this.closeLoading();
     },
 
-    setup_reader: function (files, anchor, width, height, align, filesLen, isUpdate) {
+    setup_reader: function (files, anchor, width, height, align, alt, filesLen, isUpdate) {
         try {
             this.context.image.base64RenderIndex = filesLen;
             const wFileReader = this._w.FileReader;
@@ -528,7 +530,7 @@ export default {
                     filesStack[index] = { result: reader.result, file: file };
 
                     if (--this.context.image.base64RenderIndex === 0) {
-                        this.plugins.image.onRender_imgBase64.call(this, update, filesStack, updateElement, anchor, width, height, align);
+                        this.plugins.image.onRender_imgBase64.call(this, update, filesStack, updateElement, anchor, width, height, align, alt);
                         this.closeLoading();
                     }
                 }.bind(this, reader, isUpdate, this.context.image._element, file, i);
@@ -541,7 +543,7 @@ export default {
         }
     },
 
-    onRender_imgBase64: function (update, filesStack, updateElement, anchor, width, height, align) {
+    onRender_imgBase64: function (update, filesStack, updateElement, anchor, width, height, align, alt) {
         const updateMethod = this.plugins.image.update_src;
         const createMethod = this.plugins.image.create_image;
         
@@ -551,19 +553,20 @@ export default {
                 this.context.image._element.setAttribute('data-file-size', filesStack[i].file.size);
                 updateMethod.call(this, filesStack[i].result, updateElement, filesStack[i].file);
             } else {
-                createMethod.call(this, filesStack[i].result, anchor, width, height, align, filesStack[i].file);
+                createMethod.call(this, filesStack[i].result, anchor, width, height, align, filesStack[i].file, alt);
             }
         }
     },
 
-    onRender_imgUrl: function () {
+    onRender_imgUrl: function (url) {
+        if (!url) url = this.context.image._v_src._linkValue;
+        if (!url) return false;
         const contextImage = this.context.image;
-        if (contextImage._v_src._linkValue.length === 0) return false;
 
         try {
-            const file = {name: contextImage._v_src._linkValue.split('/').pop(), size: 0};
-            if (this.context.dialog.updateModal) this.plugins.image.update_src.call(this, contextImage._v_src._linkValue, contextImage._element, file);
-            else this.plugins.image.create_image.call(this, contextImage._v_src._linkValue, this.plugins.anchor.createAnchor.call(this, contextImage.anchorCtx, true), contextImage.inputX.value, contextImage.inputY.value, contextImage._align, file);
+            const file = {name: url.split('/').pop(), size: 0};
+            if (this.context.dialog.updateModal) this.plugins.image.update_src.call(this, url, contextImage._element, file);
+            else this.plugins.image.create_image.call(this, url, this.plugins.anchor.createAnchor.call(this, contextImage.anchorCtx, true), contextImage.inputX.value, contextImage.inputY.value, contextImage._align, file, contextImage._altText);
         } catch (e) {
             throw Error('[SUNEDITOR.image.URLRendering.fail] cause : "' + e.message + '"');
         } finally {
@@ -637,14 +640,14 @@ export default {
         this.plugins.fileManager.resetInfo.call(this, 'image', this.functions.onImageUpload);
     },
 
-    create_image: function (src, anchor, width, height, align, file) {
+    create_image: function (src, anchor, width, height, align, file, alt) {
         const imagePlugin = this.plugins.image;
         const contextImage = this.context.image;
         this.context.resizing._resize_plugin = 'image';
 
         let oImg = this.util.createElement('IMG');
         oImg.src = src;
-        oImg.alt = contextImage._altText;
+        oImg.alt = alt;
         oImg.setAttribute('data-rotate', '0');
         anchor = imagePlugin.onRender_link.call(this, oImg, anchor);
 
@@ -746,8 +749,13 @@ export default {
         // link
         const anchor = this.plugins.anchor.createAnchor.call(this, contextImage.anchorCtx, true);
         if (anchor) {
-            contextImage._linkElement = contextImage._linkElement === anchor ? anchor.cloneNode(false) : anchor;
-            cover.insertBefore(this.plugins.image.onRender_link.call(this, imageEl, contextImage._linkElement), contextImage._caption);
+            if (contextImage._linkElement !== anchor) {
+                contextImage._linkElement = anchor.cloneNode(false);
+                cover.insertBefore(this.plugins.image.onRender_link.call(this, imageEl, contextImage._linkElement), contextImage._caption);
+                this.util.removeItem(anchor);
+            } else {
+                contextImage._linkElement.setAttribute('data-image-link', 'image');
+            }
         } else if (contextImage._linkElement !== null) {
             const imageElement = imageEl;
             imageElement.setAttribute('data-image-link', '');
@@ -755,7 +763,7 @@ export default {
                 const newEl = imageElement.cloneNode(true);
                 cover.removeChild(contextImage._linkElement);
                 cover.insertBefore(newEl, contextImage._caption);
-                imageEl = newEl;
+                contextImage._element = imageEl = newEl;
             }
         }
 
@@ -764,7 +772,9 @@ export default {
                 contextImage._element : 
                 /^A$/i.test(contextImage._element.parentNode.nodeName) ? contextImage._element.parentNode : this.util.getFormatElement(contextImage._element) || contextImage._element;
                 
-            if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
+            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) {
                 existElement.parentNode.insertBefore(container, existElement);
                 this.util.removeItem(contextImage._element);
                 // clean format tag
@@ -875,7 +885,7 @@ export default {
             contextImage._v_src._linkValue = contextImage.previewSrc.textContent = contextImage.imgUrlFile.value = contextImage._element.src;
         }
         contextImage._altText = contextImage.altText.value = contextImage._element.alt;
-        contextImage.modal.querySelector('input[name="suneditor_image_radio"][value="' + contextImage._align + '"]').checked = true;
+        (contextImage.modal.querySelector('input[name="suneditor_image_radio"][value="' + contextImage._align + '"]') || contextImage.modal.querySelector('input[name="suneditor_image_radio"][value="none"]')).checked = true;
         contextImage._align = contextImage.modal.querySelector('input[name="suneditor_image_radio"]:checked').value;
         contextImage._captionChecked = contextImage.captionCheckEl.checked = !!contextImage._caption;
         

package/src/plugins/dialog/video.js

@@ -51,6 +51,7 @@ export default {
             _resizing: options.videoResizing,
             _resizeDotHide: !options.videoHeightShow,
             _rotation: options.videoRotation,
+            _alignHide: !options.videoAlignShow,
             _onlyPercentage: options.videoSizeOnlyPercentage,
             _ratio: false,
             _ratioX: 1,
@@ -175,7 +176,7 @@ export default {
             html += '' +
                 '</div>' +
                 '<div class="se-dialog-footer">' +
-                    '<div>' +
+                    '<div' + (option.videoAlignShow ? '' : ' style="display: none"') + '>' +
                         '<label><input type="radio" name="suneditor_video_radio" class="se-dialog-btn-radio" value="none" checked>' + lang.dialogBox.basic + '</label>' +
                         '<label><input type="radio" name="suneditor_video_radio" class="se-dialog-btn-radio" value="left">' + lang.dialogBox.left + '</label>' +
                         '<label><input type="radio" name="suneditor_video_radio" class="se-dialog-btn-radio" value="center">' + lang.dialogBox.center + '</label>' +
@@ -372,7 +373,7 @@ export default {
                 videoPlugin.submitAction.call(this, this.context.video.videoInputFile.files);
             } else if (contextVideo.videoUrlFile && contextVideo._linkValue.length > 0) {
                 this.showLoading();
-                videoPlugin.setup_url.call(this);
+                videoPlugin.setup_url.call(this, contextVideo._linkValue);
             }
         } catch (error) {
             this.closeLoading();
@@ -503,12 +504,11 @@ export default {
         this.closeLoading();
     },
 
-    setup_url: function () {
+    setup_url: function (url) {
         try {
             const contextVideo = this.context.video;
-            let url = contextVideo._linkValue;
-
-            if (url.length === 0) return false;
+            if (!url) url = contextVideo._linkValue;
+            if (!url) return false;
 
             /** iframe source */
             if (/^<iframe.*\/iframe>$/.test(url)) {
@@ -540,7 +540,7 @@ export default {
                 url = 'https://player.vimeo.com/video/' + url.slice(url.lastIndexOf('/') + 1);
             }
 
-            this.plugins.video.create_video.call(this, this.plugins.video.createIframeTag.call(this), url, contextVideo.inputX.value, contextVideo.inputY.value, contextVideo._align, null, this.context.dialog.updateModal);
+            this.plugins.video.create_video.call(this, this.plugins.video[(!/youtu\.?be/.test(url) && !/vimeo\.com/.test(url) ? "createVideoTag" : "createIframeTag")].call(this), url, contextVideo.inputX.value, contextVideo.inputY.value, contextVideo._align, null, this.context.dialog.updateModal);
         } catch (error) {
             throw Error('[SUNEDITOR.video.upload.fail] cause : "' + error.message + '"');
         } finally {
@@ -645,10 +645,8 @@ 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.getParentElement(oFrame, this.util.isMediaComponent) || 
-            this.util.getParentElement(oFrame, function (current) {
-                return this.isWysiwygDiv(current.parentNode);
-            }.bind(this.util));
+        const existElement = (this.util.isRangeFormatElement(oFrame.parentNode) || this.util.isWysiwygDiv(oFrame.parentNode)) ? 
+            oFrame : this.util.getFormatElement(oFrame) || oFrame;
 
         const prevFrame = oFrame;
         contextVideo._element = oFrame = oFrame.cloneNode(true);
@@ -673,7 +671,9 @@ 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.isFormatElement(existElement) && existElement.childNodes.length > 0) {
+            if (this.util.isListCell(existElement) || this.util.isFormatElement(existElement)) {
+                prevFrame.parentNode.replaceChild(container, prevFrame);
+            } else if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
                 existElement.parentNode.insertBefore(container, existElement);
                 this.util.removeItem(prevFrame);
                 // clean format tag
@@ -732,7 +732,7 @@ export default {
         const contextVideo = this.context.video;
 
         if (contextVideo.videoUrlFile) contextVideo._linkValue = contextVideo.preview.textContent = contextVideo.videoUrlFile.value = (contextVideo._element.src || (contextVideo._element.querySelector('source') || '').src || '');
-        contextVideo.modal.querySelector('input[name="suneditor_video_radio"][value="' + contextVideo._align + '"]').checked = true;
+        (contextVideo.modal.querySelector('input[name="suneditor_video_radio"][value="' + contextVideo._align + '"]') || contextVideo.modal.querySelector('input[name="suneditor_video_radio"][value="none"]')).checked = true;
 
         if (contextVideo._resizing) {
             this.plugins.resizing._module_setModifyInputSize.call(this, contextVideo, this.plugins.video);

package/src/plugins/fileBrowser/imageGallery.js

@@ -49,7 +49,7 @@ export default {
      */
     drawItems: function (item) {
         const srcName = item.src.split('/').pop();
-        return  '<div class="se-file-item-img"><img src="' + item.src + '" alt="' + (item.alt || srcName) + '" data-command="pick">' +
+        return  '<div class="se-file-item-img"><img src="' + (item.thumbnail || item.src) + '" alt="' + (item.alt || srcName) + '" data-command="pick" data-value="' + (item.src || item.thumbnail) + '">' +
                     '<div class="se-file-img-name se-file-name-back"></div>' +
                     '<div class="se-file-img-name __se__img_name">' + (item.name || srcName) + '</div>' +
                 '</div>';
@@ -58,8 +58,7 @@ export default {
     setImage: function (target) {
         this.callPlugin('image', function () {
             const file = {name: target.parentNode.querySelector('.__se__img_name').textContent, size: 0};
-            this.context.image._altText = target.alt;
-            this.plugins.image.create_image.call(this, target.src, null, this.context.image._origin_w, this.context.image._origin_h, 'none', file);
+            this.plugins.image.create_image.call(this, target.getAttribute('data-value'), null, this.context.image._origin_w, this.context.image._origin_h, 'none', file, target.alt);
         }.bind(this), null);
     }
 };