suneditor 2.43.5 → 2.43.8

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,11 +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

@@ -73,7 +73,7 @@ export default {
         let html = '' +
             '<form method="post" enctype="multipart/form-data">' +
                 '<div class="se-dialog-header">' +
-                    '<button type="button" data-command="close" class="se-btn se-dialog-close" aria-label="Close" title="' + lang.dialogBox.close + '">' +
+                    '<button type="button" data-command="close" class="se-btn se-dialog-close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
                         core.icons.cancel +
                     '</button>' +
                     '<span class="se-modal-title">' + lang.dialogBox.audioBox.title + '</span>' +
@@ -86,7 +86,7 @@ export default {
                             '<label>' + lang.dialogBox.audioBox.file + '</label>' +
                             '<div class="se-dialog-form-files">' +
                                 '<input class="se-input-form _se_audio_files" type="file" accept="' + option.audioAccept + '"' + (option.audioMultipleFile ? ' multiple="multiple"' : '') + '/>' +
-                                '<button type="button" data-command="filesRemove" class="se-btn se-dialog-files-edge-button se-file-remove" title="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' +
+                                '<button type="button" data-command="filesRemove" class="se-btn se-dialog-files-edge-button se-file-remove" title="' + lang.controller.remove + '" aria-label="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' +
                             '</div>' +
                         '</div>';
                 }
@@ -103,7 +103,7 @@ export default {
                 html += '' +
                 '</div>' +
                 '<div class="se-dialog-footer">' +
-                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
+                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
                 '</div>' +
             '</form>';
 
@@ -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

@@ -126,7 +126,7 @@ export default {
 
         let html = '' +
             '<div class="se-dialog-header">' +
-                '<button type="button" data-command="close" class="se-btn se-dialog-close" class="close" aria-label="Close" title="' + lang.dialogBox.close + '">' +
+                '<button type="button" data-command="close" class="se-btn se-dialog-close" class="close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
                     core.icons.cancel +
                 '</button>' +
                 '<span class="se-modal-title">' + lang.dialogBox.imageBox.title + '</span>' +
@@ -145,7 +145,7 @@ export default {
                                 '<label>' + lang.dialogBox.imageBox.file + '</label>' +
                                 '<div class="se-dialog-form-files">' +
                                     '<input class="se-input-form _se_image_file" type="file" accept="' + option.imageAccept + '"' + (option.imageMultipleFile ? ' multiple="multiple"' : '') + '/>' +
-                                    '<button type="button" class="se-btn se-dialog-files-edge-button se-file-remove" title="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' +
+                                    '<button type="button" class="se-btn se-dialog-files-edge-button se-file-remove" title="' + lang.controller.remove + '" aria-label="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' +
                                 '</div>' +
                             '</div>' ;
                     }
@@ -156,7 +156,7 @@ export default {
                                 '<label>' + lang.dialogBox.imageBox.url + '</label>' +
                                 '<div class="se-dialog-form-files">' +
                                     '<input class="se-input-form se-input-url _se_image_url" type="text" />' +
-                                    ((option.imageGalleryUrl && core.plugins.imageGallery) ? '<button type="button" class="se-btn se-dialog-files-edge-button __se__gallery" title="' + lang.toolbar.imageGallery + '">' + core.icons.image_gallery + '</button>' : '') +
+                                    ((option.imageGalleryUrl && core.plugins.imageGallery) ? '<button type="button" class="se-btn se-dialog-files-edge-button __se__gallery" title="' + lang.toolbar.imageGallery + '" aria-label="' + lang.toolbar.imageGallery + '">' + core.icons.image_gallery + '</button>' : '') +
                                 '</div>' +
                                 '<pre class="se-link-preview"></pre>' +
                             '</div>';
@@ -190,7 +190,7 @@ export default {
                             '<label class="se-dialog-size-x"' + heightDisplay + '>' + (onlyPercentage ? '%' : 'x') + '</label>' +
                             '<input type="text" class="se-input-control _se_image_size_y" placeholder="auto"' + onlyPercentDisplay + (onlyPercentage ? ' max="100"' : '') + heightDisplay + '/>' +
                             '<label' + onlyPercentDisplay + heightDisplay + '><input type="checkbox" class="se-dialog-btn-check _se_image_check_proportion" checked/>&nbsp;' + lang.dialogBox.proportion + '</label>' +
-                            '<button type="button" title="' + lang.dialogBox.revertButton + '" class="se-btn se-dialog-btn-revert" style="float: right;">' + core.icons.revert + '</button>' +
+                            '<button type="button" title="' + lang.dialogBox.revertButton + '" aria-label="' + lang.dialogBox.revertButton + '" class="se-btn se-dialog-btn-revert" style="float: right;">' + core.icons.revert + '</button>' +
                         '</div>' ;
             }
 
@@ -210,7 +210,7 @@ export default {
                         '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="center">' + lang.dialogBox.center + '</label>' +
                         '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="right">' + lang.dialogBox.right + '</label>' +
                     '</div>' +
-                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
+                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
                 '</div>' +
             '</form>';
 
@@ -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/link.js

@@ -59,14 +59,14 @@ export default {
         let html = '' +
             '<form>' +
                 '<div class="se-dialog-header">' +
-                    '<button type="button" data-command="close" class="se-btn se-dialog-close" aria-label="Close" title="' + lang.dialogBox.close + '">' +
+                    '<button type="button" data-command="close" class="se-btn se-dialog-close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
                         icons.cancel +
                     '</button>' +
                     '<span class="se-modal-title">' + lang.dialogBox.linkBox.title + '</span>' +
                 '</div>' +
                 core.context.anchor.forms.innerHTML +
                 '<div class="se-dialog-footer">' +
-                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
+                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
                 '</div>' +
             '</form>';
 

package/src/plugins/dialog/math.js

@@ -56,7 +56,7 @@ export default {
         let html = '' +
         '<form>' +
             '<div class="se-dialog-header">' +
-                '<button type="button" data-command="close" class="se-btn se-dialog-close" aria-label="Close" title="' + lang.dialogBox.close + '">' +
+                '<button type="button" data-command="close" class="se-btn se-dialog-close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
                     core.icons.cancel +
                 '</button>' +
                 '<span class="se-modal-title">' + lang.dialogBox.mathBox.title + '</span>' +
@@ -82,7 +82,7 @@ export default {
                 '</div>' +
             '</div>' +
             '<div class="se-dialog-footer">' +
-                '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
+                '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
             '</div>' +
         '</form>';
 

package/src/plugins/dialog/mention.js

@@ -89,7 +89,7 @@ export default {
     const html = `
       <form class="se-dialog-form">
         <div class="se-dialog-header">
-          <button type="button" data-command="close" class="se-btn se-dialog-close" aria-label="Close" title="${lang.dialogBox.close}">
+          <button type="button" data-command="close" class="se-btn se-dialog-close" title="${lang.dialogBox.close}" aria-label="${lang.dialogBox.close}">
             ${core.icons.cancel}
           </button>
           <span class="se-modal-title">${lang.dialogBox.mentionBox.title}</span>

package/src/plugins/dialog/video.js

@@ -114,7 +114,7 @@ export default {
         let html = '' +
             '<form method="post" enctype="multipart/form-data">' +
                 '<div class="se-dialog-header">' +
-                    '<button type="button" data-command="close" class="se-btn se-dialog-close" aria-label="Close" title="' + lang.dialogBox.close + '">' +
+                    '<button type="button" data-command="close" class="se-btn se-dialog-close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
                         core.icons.cancel +
                     '</button>' +
                     '<span class="se-modal-title">' + lang.dialogBox.videoBox.title + '</span>' +
@@ -127,7 +127,7 @@ export default {
                             '<label>' + lang.dialogBox.videoBox.file + '</label>' +
                             '<div class="se-dialog-form-files">' +
                                 '<input class="se-input-form _se_video_file" type="file" accept="' + option.videoAccept + '"' + (option.videoMultipleFile ? ' multiple="multiple"' : '') + '/>' +
-                                '<button type="button" data-command="filesRemove" class="se-btn se-dialog-files-edge-button se-file-remove" title="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' +
+                                '<button type="button" data-command="filesRemove" class="se-btn se-dialog-files-edge-button se-file-remove" title="' + lang.controller.remove + '" aria-label="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' +
                             '</div>' +
                         '</div>' ;
                 }
@@ -160,13 +160,13 @@ export default {
                         '<input class="se-input-control _se_video_size_x" placeholder="100%"' + (onlyPercentage ? ' type="number" min="1"' : 'type="text"') + (onlyPercentage ? ' max="100"' : '') + '/>' +
                         '<label class="se-dialog-size-x"' + onlyWidthDisplay + '>' + (onlyPercentage ? '%' : 'x') + '</label>' +
                         '<input class="se-input-control _se_video_size_y" placeholder="' + (option.videoRatio * 100) + '%"' + (onlyPercentage ? ' type="number" min="1"' : 'type="text"') + (onlyPercentage ? ' max="100"' : '') + heightDisplay + '/>' +
-                        '<select class="se-input-select se-video-ratio" title="' + lang.dialogBox.ratio + '"' + ratioDisplay + '>';
+                        '<select class="se-input-select se-video-ratio" title="' + lang.dialogBox.ratio + '" aria-label="' + lang.dialogBox.ratio + '"' + ratioDisplay + '>';
                             if (!heightDisplay) html += '<option value=""> - </option>';
                             for (let i = 0, len = ratioList.length; i < len; i++) {
                                 html += '<option value="' + ratioList[i].value + '"' + (ratio.toString() === ratioList[i].value.toString() ? ' selected' : '') + '>' + ratioList[i].name + '</option>';
                             }
                         html += '</select>' +
-                        '<button type="button" title="' + lang.dialogBox.revertButton + '" class="se-btn se-dialog-btn-revert" style="float: right;">' + core.icons.revert + '</button>' +
+                        '<button type="button" title="' + lang.dialogBox.revertButton + '" aria-label="' + lang.dialogBox.revertButton + '" class="se-btn se-dialog-btn-revert" style="float: right;">' + core.icons.revert + '</button>' +
                     '</div>' +
                     '<div class="se-dialog-form se-dialog-form-footer"' + onlyPercentDisplay + onlyWidthDisplay + '>' +
                         '<label><input type="checkbox" class="se-dialog-btn-check _se_video_check_proportion" checked/>&nbsp;' + lang.dialogBox.proportion + '</label>' +
@@ -182,7 +182,7 @@ export default {
                         '<label><input type="radio" name="suneditor_video_radio" class="se-dialog-btn-radio" value="center">' + lang.dialogBox.center + '</label>' +
                         '<label><input type="radio" name="suneditor_video_radio" class="se-dialog-btn-radio" value="right">' + lang.dialogBox.right + '</label>' +
                     '</div>' +
-                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
+                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
                 '</div>' +
             '</form>';
 
@@ -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 {

package/src/plugins/modules/_anchor.js

@@ -35,7 +35,7 @@ export default {
                 '<label>' + lang.dialogBox.linkBox.url + '</label>' +
                 '<div class="se-dialog-form-files">' +
                     '<input class="se-input-form se-input-url" type="text" placeholder="' + (core.options.protocol || '') + '" />' +
-                    '<button type="button" class="se-btn se-dialog-files-edge-button _se_bookmark_button" title="' + lang.dialogBox.linkBox.bookmark + '">' + icons.bookmark + '</button>' +
+                    '<button type="button" class="se-btn se-dialog-files-edge-button _se_bookmark_button" title="' + lang.dialogBox.linkBox.bookmark + '" aria-label="' + lang.dialogBox.linkBox.bookmark + '">' + icons.bookmark + '</button>' +
                     core.plugins.selectMenu.setForm() +
                 '</div>' +
                 '<div class="se-anchor-preview-form">' +
@@ -58,7 +58,7 @@ export default {
                             '<ul class="se-list-basic se-list-checked">';
                 for (let i = 0, len = relList.length, rel; i < len; i++) {
                     rel = relList[i];
-                    html += '<li><button type="button" class="se-btn-list' + (defaultRel.indexOf(rel) > -1 ? ' se-checked' : '') + '" data-command="' + rel + '" title="' + rel + '"><span class="se-svg">' + icons.checked + '</span>' + rel + '</button></li>';
+                    html += '<li><button type="button" class="se-btn-list' + (defaultRel.indexOf(rel) > -1 ? ' se-checked' : '') + '" data-command="' + rel + '" title="' + rel + '" aria-label="' + rel + '"><span class="se-svg">' + icons.checked + '</span>' + rel + '</button></li>';
                 }
                 html += '</ul></div></div></div>';
             }

package/src/plugins/modules/_colorPicker.js

@@ -68,10 +68,10 @@ export default {
             list += '' +
             '<form class="se-form-group">' +
                 '<input type="text" maxlength="9" class="_se_color_picker_input se-color-input"/>' +
-                '<button type="submit" class="se-btn-primary _se_color_picker_submit" title="' + lang.dialogBox.submitButton + '">' +
+                '<button type="submit" class="se-btn-primary _se_color_picker_submit" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '">' +
                     core.icons.checked +
                 '</button>' +
-                '<button type="button" class="se-btn _se_color_picker_remove" title="' + lang.toolbar.removeFormat + '">' +
+                '<button type="button" class="se-btn _se_color_picker_remove" title="' + lang.toolbar.removeFormat + '" aria-label="' + lang.toolbar.removeFormat + '">' +
                     core.icons.erase +
                 '</button>' +
             '</form>' +
@@ -93,7 +93,7 @@ export default {
             color = colorList[i];
             if (typeof color === 'string') {
                 list += '<li>' +
-                            '<button type="button" data-value="' + color + '" title="' + color + '" style="background-color:' + color + ';"></button>' +
+                            '<button type="button" data-value="' + color + '" title="' + color + '" aria-label="' + color + '" style="background-color:' + color + ';"></button>' +
                         '</li>';
             }
         }

package/src/plugins/modules/fileBrowser.js

@@ -87,7 +87,7 @@
 
             return '<div class="se-file-browser-content">' +
                     '<div class="se-file-browser-header">' +
-                        '<button type="button" data-command="close" class="se-btn se-file-browser-close" class="close" aria-label="Close" title="' + lang.dialogBox.close + '">' +
+                        '<button type="button" data-command="close" class="se-btn se-file-browser-close" class="close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
                         core.icons.cancel +
                         '</button>' +
                         '<span class="se-file-browser-title"></span>' +
@@ -281,7 +281,7 @@
                         tag = tags[t];
                         if (tag && _tags.indexOf(tag) === -1) {
                             _tags.push(tag);
-                            tagsHTML += '<a title="' + tag + '">' + tag + '</a>';
+                            tagsHTML += '<a title="' + tag + '" aria-label="' + tag + '">' + tag + '</a>';
                         }
                     }
                 }

package/src/plugins/submenu/align.js

@@ -53,7 +53,7 @@ export default {
             item = alignItems[i];
             text = lang.toolbar['align' + item.charAt(0).toUpperCase() + item.slice(1)];
             html += '<li>' +
-                '<button type="button" class="se-btn-list se-btn-align" data-value="' + item + '" title="' + text + '">' +
+                '<button type="button" class="se-btn-list se-btn-align" data-value="' + item + '" title="' + text + '" aria-label="' + text + '">' +
                     '<span class="se-list-icon">' + icons['align_' + item] + '</span>' + text +
                 '</button>' +
             '</li>';

package/src/plugins/submenu/font.js

@@ -35,32 +35,21 @@ export default {
     },
 
     setSubmenu: function (core) {
-        const option = core.options;
         const lang = core.lang;
         const listDiv = core.util.createElement('DIV');
 
         listDiv.className = 'se-submenu se-list-layer se-list-font-family';
 
         let font, text, i, len;
-        let fontList = !option.font ?
-            [
-                'Arial',
-                'Comic Sans MS',
-                'Courier New',
-                'Impact',
-                'Georgia',
-                'tahoma',
-                'Trebuchet MS',
-                'Verdana'
-            ] : option.font;
+        let fontList = core.options.font;
 
         let list = '<div class="se-list-inner">' +
                 '<ul class="se-list-basic">' +
-                    '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
+                    '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '" aria-label="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
         for (i = 0, len = fontList.length; i < len; i++) {
             font = fontList[i];
             text = font.split(',')[0];
-            list += '<li><button type="button" class="se-btn-list" data-value="' + font + '" data-txt="' + text + '" title="' + text + '" style="font-family:' + font + ';">' + text + '</button></li>';
+            list += '<li><button type="button" class="se-btn-list" data-value="' + font + '" data-txt="' + text + '" title="' + text + '" aria-label="' + text + '" style="font-family:' + font + ';">' + text + '</button></li>';
         }
         list += '</ul></div>';
         listDiv.innerHTML = list;

package/src/plugins/submenu/fontSize.js

@@ -44,10 +44,10 @@ export default {
 
         let list = '<div class="se-list-inner">' +
                 '<ul class="se-list-basic">' +
-                    '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
+                    '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '" aria-label="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
         for (let i = 0, unit = option.fontSizeUnit, len = sizeList.length, size; i < len; i++) {
             size = sizeList[i];
-            list += '<li><button type="button" class="se-btn-list" data-value="' + size + unit + '" title="' + size + unit + '" style="font-size:' + size + unit + ';">' + size + '</button></li>';
+            list += '<li><button type="button" class="se-btn-list" data-value="' + size + unit + '" title="' + size + unit + '" aria-label="' + size + unit + '" style="font-size:' + size + unit + ';">' + size + '</button></li>';
         }
         list += '</ul></div>';
 

package/src/plugins/submenu/formatBlock.js

@@ -62,7 +62,7 @@ export default {
             }
 
             list += '<li>' +
-                '<button type="button" class="se-btn-list" data-command="' + command + '" data-value="' + tagName + '" data-class="' + className + '" title="' + name + '">' +
+                '<button type="button" class="se-btn-list" data-command="' + command + '" data-value="' + tagName + '" data-class="' + className + '" title="' + name + '" aria-label="' + name + '">' +
                     '<' + tagName + attrs + '>' + name + '</' + tagName + '>' +
                 '</button></li>';
         }

package/src/plugins/submenu/horizontalRule.js

@@ -36,7 +36,7 @@ export default {
         let list = '';
         for (let i = 0, len = items.length; i < len; i++) {
             list += '<li>' +
-                '<button type="button" class="se-btn-list btn_line" data-command="horizontalRule" data-value="' + items[i].class + '" title="' + items[i].name + '">' +
+                '<button type="button" class="se-btn-list btn_line" data-command="horizontalRule" data-value="' + items[i].class + '" title="' + items[i].name + '" aria-label="' + items[i].name + '">' +
                     '<hr' + (items[i].class ? ' class="' + items[i].class + '"' : '') + (items[i].style ? ' style="' + items[i].style + '"' : '') + '/>' +
                 '</button>' +
             '</li>';

package/src/plugins/submenu/lineHeight.js

@@ -49,10 +49,10 @@ export default {
 
         let list = '<div class="se-list-inner">' +
                 '<ul class="se-list-basic">' +
-                    '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
+                    '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '" aria-label="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
         for (let i = 0, len = sizeList.length, size; i < len; i++) {
             size = sizeList[i];
-            list += '<li><button type="button" class="se-btn-list" data-value="' + size.value + '" title="' + size.text + '">' + size.text + '</button></li>';
+            list += '<li><button type="button" class="se-btn-list" data-value="' + size.value + '" title="' + size.text + '" aria-label="' + size.text + '">' + size.text + '</button></li>';
         }
         list += '</ul></div>';
 

package/src/plugins/submenu/list.js

@@ -45,10 +45,10 @@ export default {
         listDiv.innerHTML = '' +
             '<div class="se-list-inner">' +
                 '<ul class="se-list-basic">' +
-                    '<li><button type="button" class="se-btn-list se-tooltip" data-command="OL" title="' + lang.toolbar.orderList + '">' +
+                    '<li><button type="button" class="se-btn-list se-tooltip" data-command="OL" title="' + lang.toolbar.orderList + '" aria-label="' + lang.toolbar.orderList + '">' +
                         core.icons.list_number +
                     '</button></li>' +
-                    '<li><button type="button" class="se-btn-list se-tooltip" data-command="UL" title="' + lang.toolbar.unorderList + '">' +
+                    '<li><button type="button" class="se-btn-list se-tooltip" data-command="UL" title="' + lang.toolbar.unorderList + '" aria-label="' + lang.toolbar.unorderList + '">' +
                         core.icons.list_bullets +
                     '</button></li>' +
                 '</ul>' +

package/src/plugins/submenu/paragraphStyle.js

@@ -71,7 +71,7 @@ export default {
             _class = p._class;
 
             list += '<li>' +
-                '<button type="button" class="se-btn-list' + (_class ? ' ' + _class: '') + '" data-value="' + p.class + '" title="' + name + '">' +
+                '<button type="button" class="se-btn-list' + (_class ? ' ' + _class: '') + '" data-value="' + p.class + '" title="' + name + '" aria-label="' + name + '">' +
                     '<div' + attrs + '>' + name + '</div>' +
                 '</button></li>';
         }

package/src/plugins/submenu/table.js

@@ -176,9 +176,9 @@ export default {
                 '<div class="se-btn-group-sub sun-editor-common se-list-layer se-table-split">' +
                     '<div class="se-list-inner">' +
                         '<ul class="se-list-basic">' +
-                            '<li class="se-btn-list" data-command="split" data-value="vertical" style="line-height:32px;" title="' + lang.controller.VerticalSplit + '">' + 
+                            '<li class="se-btn-list" data-command="split" data-value="vertical" style="line-height:32px;" title="' + lang.controller.VerticalSplit + '" aria-label="' + lang.controller.VerticalSplit + '">' + 
                                 lang.controller.VerticalSplit + '</li>' +
-                            '<li class="se-btn-list" data-command="split" data-value="horizontal" style="line-height:32px;" title="' + lang.controller.HorizontalSplit + '">' + 
+                            '<li class="se-btn-list" data-command="split" data-value="horizontal" style="line-height:32px;" title="' + lang.controller.HorizontalSplit + '" aria-label="' + lang.controller.HorizontalSplit + '">' + 
                                 lang.controller.HorizontalSplit + '</li>' +
                         '</ul>' +
                     '</div>' +

package/src/plugins/submenu/template.js

@@ -42,7 +42,7 @@ export default {
                 '<ul class="se-list-basic">';
         for (let i = 0, len = templateList.length, t; i < len; i++) {
             t = templateList[i];
-            list += '<li><button type="button" class="se-btn-list" data-value="' + i + '" title="' + t.name + '">' + t.name + '</button></li>';
+            list += '<li><button type="button" class="se-btn-list" data-value="' + i + '" title="' + t.name + '" aria-label="' + t.name + '">' + t.name + '</button></li>';
         }
         list += '</ul></div>';
 

package/src/plugins/submenu/textStyle.js

@@ -85,7 +85,7 @@ export default {
             value = value.replace(/,$/, '');
 
             list += '<li>' +
-                '<button type="button" class="se-btn-list' + (_class ? ' ' + _class: '') + '" data-command="' + tag + '" data-value="' + value + '" title="' + name + '">' +
+                '<button type="button" class="se-btn-list' + (_class ? ' ' + _class: '') + '" data-command="' + tag + '" data-value="' + value + '" title="' + name + '" aria-label="' + name + '">' +
                     '<' + tag + attrs + '>' + name +  '</' + tag + '>' +
                 '</button></li>';
         }