@syncfusion/ej2-richtexteditor 20.1.59 → 20.2.36

package/dist/es6/ej2-richtexteditor.es2015.js

@@ -524,11 +524,41 @@ const imageUploadFailed = 'imageUploadFailed';
  * @deprecated
  */
 const imageRemoving = 'imageRemoving';
+/**
+ * @hidden
+ * @deprecated
+ */
+const mediaSelected = 'mediaSelected';
+/**
+ * @hidden
+ * @deprecated
+ */
+const mediaUploading = 'mediaUploading';
+/**
+ * @hidden
+ * @deprecated
+ */
+const mediaUploadSuccess = 'mediaUploadSuccess';
+/**
+ * @hidden
+ * @deprecated
+ */
+const mediaUploadFailed = 'mediaUploadFailed';
+/**
+ * @hidden
+ * @deprecated
+ */
+const mediaRemoving = 'mediaRemoving';
 /**
  * @hidden
  * @deprecated
  */
 const afterImageDelete = 'afterImageDelete';
+/**
+ * @hidden
+ * @deprecated
+ */
+const afterMediaDelete = 'afterMediaaDelete';
 /**
  * @hidden
  * @deprecated
@@ -544,6 +574,11 @@ const xhtmlValidation = 'xhtmlValidation';
  * @deprecated
  */
 const beforeImageUpload = 'beforeImageUpload';
+/**
+ * @hidden
+ * @deprecated
+ */
+const beforeMediaUpload = 'beforeMediaUpload';
 /**
  * @hidden
  * @deprecated
@@ -599,6 +634,11 @@ const showImageDialog = 'showImageDialog';
  * @deprecated
  */
 const closeImageDialog = 'closeImageDialog';
+/**
+ * @hidden
+ * @deprecated
+ */
+const closeAudioDialog = 'closeAudioDialog';
 /**
  * @hidden
  * @deprecated
@@ -619,14 +659,14 @@ const bindCssClass = 'closeTableDialog';
  * @deprecated
  */
 const blockInlineEmptyNodes = `address:empty, article:empty, aside:empty, blockquote:empty,
-details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,
-h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, hr:empty, li:empty, main:empty, nav:empty,
-noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty,
-a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,
-canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,
-ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,
-q:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,
-template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty`;
+ details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,
+ h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, hr:empty, li:empty, main:empty, nav:empty,
+ noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty,
+ a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,
+ canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,
+ ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,
+ q:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,
+ template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty`;
 
 /**
  * Rich Text Editor classes defined here.
@@ -1171,6 +1211,11 @@ const CLS_RTE_FIXED_TB_EXPAND = 'e-rte-fixed-tb-expand';
  * @deprecated
  */
 const CLS_RTE_TB_ENABLED = 'e-rte-toolbar-enabled';
+/**
+ * @hidden
+ * @deprecated
+ */
+const CLS_RTE_RES_WEST = 'e-south-west';
 
 /**
  * Defines types of Render
@@ -2315,7 +2360,7 @@ function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(formatItems$$1, value, 'subCommand', 'text');
                             dropDown.formatDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.format.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + (isNullOrUndefined(result) ? formatContent : result) +
                                 '</span></span>');
                             dropDown.formatDropDown.dataBind();
@@ -2345,7 +2390,7 @@ function setToolbarStatus(e, isPopToolbar, self) {
                             e.tbElements[j].title = name;
                             dropDown.fontNameDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontFamily.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + name + '</span></span>');
                             dropDown.fontNameDropDown.dataBind();
                             break;
@@ -2361,7 +2406,7 @@ function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), 'value', 'text');
                             dropDown.fontSizeDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontSize.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + getFormattedFontSize(result) + '</span></span>');
                             dropDown.fontSizeDropDown.dataBind();
                             break;
@@ -2998,6 +3043,7 @@ class ToolbarRenderer {
         const proxy = this;
         let css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');
         css += (' ' + ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_DROPDOWN : CLS_FONT_COLOR_DROPDOWN));
+        css += ' ' + this.parent.cssClass;
         const content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });
         const inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
         let range;
@@ -3185,6 +3231,14 @@ class ToolbarRenderer {
             beforeTileRender: (args) => {
                 args.element.classList.add(CLS_COLOR_PALETTE);
                 args.element.classList.add(CLS_CUSTOM_TILE);
+                if (!isNullOrUndefined(this.parent.cssClass)) {
+                    const allClassName = this.parent.cssClass.split(' ');
+                    for (let i = 0; i < allClassName.length; i++) {
+                        if (allClassName[i].trim() !== '') {
+                            args.element.classList.add(allClassName[i]);
+                        }
+                    }
+                }
                 if (args.value === '') {
                     args.element.classList.add(CLS_NOCOLOR_ITEM);
                 }
@@ -3220,7 +3274,7 @@ class ToolbarRenderer {
         colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
         colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
             this.parent.fontColor.colorCode;
-        colorPicker.cssClass = (item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER;
+        colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
         colorPicker.createElement = this.parent.createElement;
         colorPicker.appendTo(document.getElementById(args.target));
         return colorPicker;
@@ -4203,7 +4257,8 @@ class Toolbar$2 {
             container: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),
             items: this.parent.toolbarSettings.items,
             mode: tBarMode,
-            target: ele
+            target: ele,
+            cssClass: this.parent.cssClass
         });
         if (this.parent.toolbarSettings.type === ToolbarType.Expand) {
             addClass([ele], ['e-rte-tb-mobile']);
@@ -4320,7 +4375,8 @@ class Toolbar$2 {
                 container: 'toolbar',
                 items: this.parent.toolbarSettings.items,
                 mode: this.getToolbarMode(),
-                target: this.tbElement
+                target: this.tbElement,
+                cssClass: this.parent.cssClass
             });
             if (!this.parent.inlineMode.enable) {
                 if (this.parent.toolbarSettings.enableFloating) {
@@ -5038,10 +5094,18 @@ class ColorPickerInput {
                         const fontNode = this.parent.createElement('input');
                         fontNode.id = targetID;
                         fontNode.classList.add(CLS_FONT_COLOR_TARGET);
+                        if (!isNullOrUndefined(this.parent.cssClass)) {
+                            const allClassName = this.parent.cssClass.split(' ');
+                            for (let i = 0; i < allClassName.length; i++) {
+                                if (allClassName[i].trim() !== '') {
+                                    fontNode.classList.add(allClassName[i]);
+                                }
+                            }
+                        }
                         document.body.appendChild(fontNode);
                         options = {
                             cssClass: this.tools[item.toLocaleLowerCase()].icon
-                                + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_ICONS,
+                                + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_ICONS + ' ' + this.parent.cssClass,
                             value: this.tools[item.toLocaleLowerCase()].value,
                             command: this.tools[item.toLocaleLowerCase()].command,
                             subCommand: this.tools[item.toLocaleLowerCase()].subCommand,
@@ -5057,10 +5121,18 @@ class ColorPickerInput {
                         const backNode = this.parent.createElement('input');
                         backNode.id = targetID;
                         backNode.classList.add(CLS_BACKGROUND_COLOR_TARGET);
+                        if (!isNullOrUndefined(this.parent.cssClass)) {
+                            const allClassName = this.parent.cssClass.split(' ');
+                            for (let i = 0; i < allClassName.length; i++) {
+                                if (allClassName[i].trim() !== '') {
+                                    backNode.classList.add(allClassName[i]);
+                                }
+                            }
+                        }
                         document.body.appendChild(backNode);
                         options = {
                             cssClass: this.tools[item.toLocaleLowerCase()].icon
-                                + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_ICONS,
+                                + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_ICONS + ' ' + this.parent.cssClass,
                             value: this.tools[item.toLocaleLowerCase()].value,
                             command: this.tools[item.toLocaleLowerCase()].command,
                             subCommand: this.tools[item.toLocaleLowerCase()].subCommand,
@@ -5133,8 +5205,8 @@ class ColorPickerInput {
                 dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
             }
             else {
-                colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
-                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+                colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').replace('  ', ' ').trim() + ' ' + e.cssClass).trim() });
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').replace('  ', ' ').trim() + ' ' + e.cssClass).trim() });
             }
         }
     }
@@ -6586,18 +6658,18 @@ function updateTextNode$1(value) {
                     tdElm[j].style.removeProperty('border');
                 }
             }
-            if (!tableElm[i].classList.contains(CLS_TABLE)) {
-                tableElm[i].classList.add(CLS_TABLE);
+            if (!tableElm[i].classList.contains('e-rte-table')) {
+                tableElm[i].classList.add('e-rte-table');
             }
         }
         const imageElm = resultElm.querySelectorAll('img');
         for (let i = 0; i < imageElm.length; i++) {
-            if (!imageElm[i].classList.contains(CLS_RTE_IMAGE)) {
-                imageElm[i].classList.add(CLS_RTE_IMAGE);
+            if (!imageElm[i].classList.contains('e-rte-image')) {
+                imageElm[i].classList.add('e-rte-image');
             }
-            if (!(imageElm[i].classList.contains(CLS_IMGINLINE) ||
-                imageElm[i].classList.contains(CLS_IMGBREAK))) {
-                imageElm[i].classList.add(CLS_IMGINLINE);
+            if (!(imageElm[i].classList.contains('e-imginline') ||
+                imageElm[i].classList.contains('e-imgbreak'))) {
+                imageElm[i].classList.add('e-imginline');
             }
         }
     }
@@ -7053,7 +7125,7 @@ class Formatter {
         }
         self.trigger(actionComplete, events, (callbackArgs) => {
             self.setPlaceHolder();
-            if (callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links' && self.editorMode === 'HTML') {
+            if ((callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links') && self.editorMode === 'HTML') {
                 const args = callbackArgs;
                 if (callbackArgs.requestType === 'Links' && callbackArgs.event &&
                     callbackArgs.event.type === 'keydown' &&
@@ -7156,6 +7228,12 @@ const CLEAR_COMMAND = 'clear-commands';
  * @hidden
  */
 const MD_TABLE = 'insert-table';
+/**
+ * insertText plugin events
+ *
+ * @hidden
+ */
+const INSERT_TEXT_COMMAND = 'insert-text';
 
 /**
  * Lists internal component
@@ -8884,6 +8962,55 @@ class ClearFormat {
     }
 }
 
+/**
+ * Link internal component
+ *
+ * @hidden
+ * @deprecated
+ */
+class MDInsertText {
+    /**
+     * Constructor for creating the insert text plugin
+     *
+     * @param {MarkdownParser} parent - specifies the parent element
+     * @hidden
+     * @deprecated
+     */
+    constructor(parent) {
+        this.parent = parent;
+        this.selection = this.parent.markdownSelection;
+        this.addEventListener();
+    }
+    addEventListener() {
+        this.parent.observer.on(INSERT_TEXT_COMMAND, this.InsertTextExec, this);
+    }
+    InsertTextExec(e) {
+        const textArea = this.parent.element;
+        textArea.focus();
+        const start = textArea.selectionStart;
+        const end = textArea.selectionEnd;
+        const text = e.value.text;
+        const startOffset = start + text.length;
+        const endOffset = end + text.length;
+        textArea.value = textArea.value.substr(0, start)
+            + text + textArea.value.substr(end, textArea.value.length);
+        this.parent.markdownSelection.setSelection(textArea, startOffset, endOffset);
+        this.restore(textArea, startOffset, endOffset, e);
+    }
+    restore(textArea, start, end, event) {
+        this.selection.save(start, end);
+        this.selection.restore(textArea);
+        if (event && event.callBack) {
+            event.callBack({
+                requestType: event.subCommand,
+                selectedText: this.selection.getSelectedText(textArea),
+                editorMode: 'Markdown',
+                event: event.event
+            });
+        }
+    }
+}
+
 /**
  * MarkdownParser internal component
  *
@@ -8910,6 +9037,7 @@ class MarkdownParser {
         this.linkObj = new MDLink(this);
         this.tableObj = new MDTable({ parent: this, syntaxTag: ({ Formats: this.formatTags, List: this.listTags }) });
         this.clearObj = new ClearFormat(this);
+        this.insertTextObj = new MDInsertText(this);
         this.wireEvents();
     }
     initialize() {
@@ -8976,6 +9104,10 @@ class MarkdownParser {
             case 'clear':
                 this.observer.notify(CLEAR_COMMAND, { subCommand: value, event: event, callBack: callBack });
                 break;
+            case 'inserttext':
+                this.observer.notify(INSERT_TEXT_COMMAND, { subCommand: value, event: event, callBack: callBack,
+                    value: { text: exeValue } });
+                break;
         }
     }
 }
@@ -9051,7 +9183,8 @@ class MarkdownRender {
         const div = this.parent.createElement('div', { id: this.parent.getID() + '_view', className: 'e-rte-content' });
         this.editableElement = this.parent.createElement('textarea', {
             className: 'e-content',
-            id: this.parent.getID() + '_editable-content'
+            id: this.parent.getID() + '_editable-content',
+            attrs: { 'aria-labelledby': this.parent.getID() + '_view' }
         });
         div.appendChild(this.editableElement);
         this.setPanel(div);
@@ -11137,7 +11270,7 @@ class Lists {
         }
     }
     applyLists(elements, type, selector, item, e) {
-        if (this.isRevert(elements, type) && isNullOrUndefined(item)) {
+        if (this.isRevert(elements, type, item) && isNullOrUndefined(item)) {
             this.revertList(elements, e);
             this.removeEmptyListElements();
         }
@@ -11200,13 +11333,14 @@ class Lists {
             }
         }
     }
-    isRevert(nodes, tagName) {
+    isRevert(nodes, tagName, item) {
         let isRevert = true;
         for (let i = 0; i < nodes.length; i++) {
             if (nodes[i].tagName !== 'LI') {
                 return false;
             }
-            if (nodes[i].parentNode.tagName !== tagName) {
+            if (nodes[i].parentNode.tagName !== tagName ||
+                isNullOrUndefined(item) && nodes[i].parentNode.style.listStyleType !== '') {
                 isRevert = false;
             }
         }
@@ -11229,6 +11363,12 @@ class Lists {
                 (nodes[i].tagName === 'LI' && node.tagName === tagName && nodesTemp.indexOf(node) < 0 && item !== null)) {
                 nodesTemp.push(node);
             }
+            if (isNullOrUndefined(item) && (node.tagName === tagName ||
+                ((node.tagName === 'UL' || node.tagName === 'OL') && node.hasAttribute('style')))) {
+                if (node.hasAttribute('style')) {
+                    node.removeAttribute('style');
+                }
+            }
         }
         for (let j = nodesTemp.length - 1; j >= 0; j--) {
             const h = nodesTemp[j];
@@ -11330,7 +11470,8 @@ class Lists {
                     }
                 }
             }
-            if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element), 'LI' === parentNode.parentNode.tagName) {
+            if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element), 'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
+                    'UL' === parentNode.parentNode.tagName) {
                 element.parentNode.insertBefore(this.closeTag('LI'), element);
             }
             else {
@@ -12288,7 +12429,9 @@ class InsertHtml {
             let isPreviousInlineElem;
             let paraElm;
             let previousParent;
-            range.deleteContents();
+            if (!this.contentsDeleted) {
+                range.deleteContents();
+            }
             while (node.firstChild) {
                 if (node.firstChild.nodeName === '#text' && node.firstChild.textContent.trim() === '') {
                     detach(node.firstChild);
@@ -12416,9 +12559,28 @@ class InsertHtml {
                 const nodeSelection = new NodeSelection();
                 let currentNode = this.getNodeCollection(range, nodeSelection, node)[this.getNodeCollection(range, nodeSelection, node).length - 1];
                 let splitedElm;
-                if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR') && !isNullOrUndefined(currentNode.parentElement) &&
-                    currentNode.parentElement.textContent.trim().length === 0) {
+                if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR' ||
+                    (currentNode.nodeName === '#text' && !isNullOrUndefined(currentNode.parentElement) && currentNode.parentElement.nodeName === 'LI')) &&
+                    (!isNullOrUndefined(currentNode.parentElement) && currentNode.parentElement.textContent.trim().length === 0)) {
                     splitedElm = currentNode;
+                    if (currentNode.parentElement.nodeName === 'LI' && !isNullOrUndefined(currentNode.nextSibling) &&
+                        currentNode.nextSibling.nodeName === 'BR') {
+                        detach(currentNode.nextSibling);
+                    }
+                }
+                else if (currentNode.nodeName === '#text' && !isNullOrUndefined(currentNode.parentElement) &&
+                    currentNode.parentElement.nodeName === 'LI' && currentNode.parentElement.textContent.trim().length > 0) {
+                    splitedElm = currentNode;
+                    if (currentNode.parentElement.nodeName === 'LI' && !isNullOrUndefined(currentNode.nextSibling) &&
+                        currentNode.nextSibling.nodeName === 'BR') {
+                        detach(currentNode.nextSibling);
+                    }
+                    if (!range.collapsed) {
+                        range.deleteContents();
+                    }
+                    range.insertNode(node);
+                    this.contentsDeleted = true;
+                    return;
                 }
                 else {
                     splitedElm = nodeCutter.GetSpliceNode(range, blockNode);
@@ -12506,6 +12668,7 @@ InsertHtml.inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'bi
     'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',
     'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg',
     'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];
+InsertHtml.contentsDeleted = false;
 
 /**
  * Link internal component
@@ -15745,7 +15908,7 @@ class MsWordPaste {
         this.checkVShape(elm);
         let imgElem = elm.querySelectorAll('img');
         for (let i = 0; i < imgElem.length; i++) {
-            if (!isNullOrUndefined(imgElem[i].getAttribute('v:shapes')) && imgElem[i].getAttribute('v:shapes').indexOf('Picture') < 0) {
+            if (!isNullOrUndefined(imgElem[i].getAttribute('v:shapes')) && imgElem[i].getAttribute('v:shapes').indexOf('Picture') < 0 && imgElem[i].getAttribute('v:shapes').indexOf('Image') < 0) {
                 detach(imgElem[i]);
             }
         }
@@ -17066,6 +17229,10 @@ const IFRAMEHEADER = `
                 body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}
                 .e-rte-image {border: 0;cursor: pointer;display:
                     block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}
+                .e-rte-image.e-imginline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}
+                .e-rte-image.e-imgcenter {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}
+                .e-rte-image.e-imgright { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}
+                .e-rte-image.e-imgleft {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}
                 .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}
                 .e-img-caption.e-caption-inline {display: inline-block;float: none;
                     margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));
@@ -17114,7 +17281,7 @@ const IFRAMEHEADER = `
                 h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}
                 ul:last-child{margin-bottom: 0;}
                 table { border-collapse: collapse; empty-cells: show;}
-                table td,table th {border: 1px solid #BDBDBD; height: 20px; vertical-align: middle;}
+                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}
                 table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}
                 table th {background-color: #E0E0E0;}
                 table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} 
@@ -19030,9 +19197,10 @@ class Resize {
         this.parent.on(destroy, this.destroy, this);
     }
     renderResizable() {
+        let enableRtlClass = (this.parent.enableRtl) ? CLS_RTE_RES_WEST : CLS_RTE_RES_EAST;
         this.resizer = this.parent.createElement('div', {
             id: this.parent.getID() + '-resizable', className: 'e-icons'
-                + ' ' + CLS_RTE_RES_HANDLE + ' ' + CLS_RTE_RES_EAST
+                + ' ' + CLS_RTE_RES_HANDLE + ' ' + enableRtlClass
         });
         this.parent.element.classList.add(CLS_RTE_RES_CNT);
         this.parent.element.appendChild(this.resizer);
@@ -19063,12 +19231,12 @@ class Resize {
         const boundRect = this.parent.element.getBoundingClientRect();
         if (this.isMouseEvent(e)) {
             this.parent.element.style.height = e.clientY - boundRect.top + 'px';
-            this.parent.element.style.width = e.clientX - boundRect.left + 'px';
+            this.parent.element.style.width = (!this.parent.enableRtl) ? e.clientX - boundRect.left + 'px' : boundRect.right - e.clientX + 'px';
         }
         else {
             const eventType = Browser.info.name !== 'msie' ? e.touches[0] : e;
             this.parent.element.style.height = eventType.clientY - boundRect.top + 'px';
-            this.parent.element.style.width = eventType.clientX - boundRect.left + 'px';
+            this.parent.element.style.width = (!this.parent.enableRtl) ? e.clientX - boundRect.left + 'px' : boundRect.right - e.clientX + 'px';
         }
         if (!this.parent.toolbarSettings.enable) {
             this.parent.setContentHeight('', false);
@@ -19934,22 +20102,22 @@ class Link {
         const textPlace = this.i10n.getConstant('textPlaceholder');
         const title = this.i10n.getConstant('linkTitle');
         const linkDialogEle = this.parent.createElement('div', {
-            className: 'e-rte-link-dialog', id: this.rteID + '_rtelink'
+            className: 'e-rte-link-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_rtelink'
         });
         this.parent.element.appendChild(linkDialogEle);
         const linkContent = this.parent.createElement('div', {
-            className: 'e-rte-linkcontent', id: this.rteID + '_linkContent'
+            className: 'e-rte-linkcontent' + ' ' + this.parent.cssClass, id: this.rteID + '_linkContent'
         });
         const htmlTextbox = (this.parent.editorMode === 'HTML') ? '<label>' + linkTooltip +
-            '</label></div><div class="e-rte-field">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '" class="e-input e-rte-linkTitle"></div>' +
-            '<div class="e-rte-label"></div>' + '<div class="e-rte-field">' +
-            '<input type="checkbox" class="e-rte-linkTarget"  data-role ="none"></div>' : '';
-        const content = '<div class="e-rte-label"><label>' + linkWebAddress + '</label></div>' + '<div class="e-rte-field">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '" class="e-input e-rte-linkurl"/></div>' +
-            '<div class="e-rte-label">' + '<label>' + linkDisplayText + '</label></div><div class="e-rte-field"> ' +
-            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText" placeholder="' + textPlace + '">' +
-            '</div><div class="e-rte-label">' + htmlTextbox;
+            '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '" class="e-input e-rte-linkTitle' + ' ' + this.parent.cssClass + '"></div>' +
+            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="checkbox" class="e-rte-linkTarget' + ' ' + this.parent.cssClass + '"  data-role ="none"></div>' : '';
+        const content = '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"><label>' + linkWebAddress + '</label></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '" class="e-input e-rte-linkurl' + ' ' + this.parent.cssClass + '"/></div>' +
+            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + '<label>' + linkDisplayText + '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"> ' +
+            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText' + ' ' + this.parent.cssClass + '" placeholder="' + textPlace + '">' +
+            '</div><div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + htmlTextbox;
         const contentElem = parseHtml(content);
         linkContent.appendChild(contentElem);
         const linkTarget = linkContent.querySelector('.e-rte-linkTarget');
@@ -19977,9 +20145,9 @@ class Link {
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertlink.bind(selectObj),
-                    buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink', isPrimary: true }
+                    buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
-                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat', content: linkCancel } }],
+                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat' + ' ' + this.parent.cssClass, content: linkCancel } }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
             close: (event) => {
@@ -20123,8 +20291,10 @@ class Link {
         if (this.parent.formatter.getUndoRedoStack().length === 0) {
             this.parent.formatter.saveData();
         }
+        const selectParentEle = this.getAnchorNode(e.selectParent[0]);
         this.parent.formatter.process(this.parent, e.args, e.args, {
             selectNode: e.selectNode, selectParent: e.selectParent, selection: e.selection,
+            text: selectParentEle.innerText,
             subCommand: e.args.item.subCommand
         });
         if (isIDevice$1() && this.parent.iframeSettings.enable) {
@@ -20139,7 +20309,7 @@ class Link {
         const selectParentEle = this.getAnchorNode(e.selectParent[0]);
         if (selectParentEle.classList.contains('e-rte-anchor') || selectParentEle.tagName === 'A') {
             this.parent.formatter.process(this.parent, e.args, e.args, {
-                url: selectParentEle.href,
+                url: selectParentEle.href, text: selectParentEle.innerText,
                 target: selectParentEle.target === '' ? '_self' : '_blank', selectNode: e.selectNode,
                 subCommand: e.args.item.subCommand
             });
@@ -20457,18 +20627,18 @@ class Image {
         this.resizeBtnInit();
         this.imgEle = e;
         addClass([this.imgEle], 'e-resize');
-        this.imgResizeDiv = this.parent.createElement('span', { className: 'e-img-resize', id: this.rteID + '_imgResize' });
+        this.imgResizeDiv = this.parent.createElement('span', { className: 'e-img-resize' + ' ' + this.parent.cssClass, id: this.rteID + '_imgResize' });
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-topLeft', styles: 'cursor: nwse-resize'
+            className: 'e-rte-imageboxmark e-rte-topLeft' + ' ' + this.parent.cssClass, styles: 'cursor: nwse-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-topRight', styles: 'cursor: nesw-resize'
+            className: 'e-rte-imageboxmark e-rte-topRight' + ' ' + this.parent.cssClass, styles: 'cursor: nesw-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-botLeft', styles: 'cursor: nesw-resize'
+            className: 'e-rte-imageboxmark e-rte-botLeft' + ' ' + this.parent.cssClass, styles: 'cursor: nesw-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-botRight', styles: 'cursor: nwse-resize'
+            className: 'e-rte-imageboxmark e-rte-botRight' + ' ' + this.parent.cssClass, styles: 'cursor: nwse-resize'
         }));
         if (Browser.isDevice) {
             addClass([this.imgResizeDiv], 'e-mob-rte');
@@ -21130,12 +21300,12 @@ class Image {
         }
         this.imagDialog(e);
         if (!isNullOrUndefined(this.dialogObj)) {
-            const linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' });
+            const linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' + ' ' + this.parent.cssClass });
             const linkUrl = this.i10n.getConstant('linkurl');
-            const content = '<div class="e-rte-field">' +
-                '<input type="text" data-role ="none" class="e-input e-img-link" spellcheck="false" placeholder="' + linkUrl + '"/></div>' +
+            const content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+                '<input type="text" data-role ="none" class="e-input e-img-link' + ' ' + this.parent.cssClass + '" spellcheck="false" placeholder="' + linkUrl + '"/></div>' +
                 '<div class="e-rte-label"></div>' + '<div class="e-rte-field">' +
-                '<input type="checkbox" class="e-rte-linkTarget"  data-role ="none"></div>';
+                '<input type="checkbox" class="e-rte-linkTarget' + ' ' + this.parent.cssClass + '"  data-role ="none"></div>';
             const contentElem = parseHtml(content);
             linkWrap.appendChild(contentElem);
             const linkTarget = linkWrap.querySelector('.e-rte-linkTarget');
@@ -21174,7 +21344,7 @@ class Image {
                             this.insertlink(linkargs);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-link', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-link' + ' ' + this.parent.cssClass, isPrimary: true
                         }
                     }]
             });
@@ -21198,13 +21368,13 @@ class Image {
         this.imagDialog(e);
         const altText = this.i10n.getConstant('altText');
         if (!isNullOrUndefined(this.dialogObj)) {
-            const altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' });
+            const altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' + ' ' + this.parent.cssClass });
             const altHeader = this.i10n.getConstant('alternateHeader');
             const linkUpdate = this.i10n.getConstant('dialogUpdate');
             const getAlt = (e.selectNode[0].getAttribute('alt') === null) ? '' :
                 e.selectNode[0].getAttribute('alt');
-            const content = '<div class="e-rte-field">' +
-                '<input type="text" spellcheck="false" value="' + getAlt + '" class="e-input e-img-alt" placeholder="' + altText + '"/>' +
+            const content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+                '<input type="text" spellcheck="false" value="' + getAlt + '" class="e-input e-img-alt' + ' ' + this.parent.cssClass + '" placeholder="' + altText + '"/>' +
                 '</div>';
             const contentElem = parseHtml(content);
             altWrap.appendChild(contentElem);
@@ -21221,7 +21391,7 @@ class Image {
                             this.insertAlt(altArgs);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-alt', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-alt' + ' ' + this.parent.cssClass, isPrimary: true
                         }
                     }]
             });
@@ -21387,11 +21557,11 @@ class Image {
         }
         else {
             this.captionEle = this.parent.createElement('span', {
-                className: CLS_CAPTION + ' ' + CLS_RTE_CAPTION,
+                className: CLS_CAPTION + ' ' + CLS_RTE_CAPTION + ' ' + this.parent.cssClass,
                 attrs: { contenteditable: 'false', draggable: 'false', style: 'width:' + this.parent.insertImageSettings.width }
             });
-            const imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' });
-            const imgInner = this.parent.createElement('span', { className: 'e-img-inner',
+            const imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' + ' ' + this.parent.cssClass });
+            const imgInner = this.parent.createElement('span', { className: 'e-img-inner' + ' ' + this.parent.cssClass,
                 attrs: { contenteditable: 'true' } });
             const parent = e.selectNode[0].parentElement;
             if (parent.tagName === 'A') {
@@ -21443,7 +21613,7 @@ class Image {
                             this.insertSize(selectObj);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-size', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-size' + ' ' + this.parent.cssClass, isPrimary: true
                         }
                     }]
             });
@@ -21487,7 +21657,7 @@ class Image {
             this.dialogObj.hide({ returnValue: true });
             return;
         }
-        const imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog', id: this.rteID + '_image' });
+        const imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_image' });
         this.parent.element.appendChild(imgDialog);
         const imgInsert = this.i10n.getConstant('dialogInsert');
         const imglinkCancel = this.i10n.getConstant('dialogCancel');
@@ -21496,7 +21666,7 @@ class Image {
         const selectObj = { selfImage: this, selection: e.selection, args: e.args, selectParent: e.selectParent };
         const dialogModel = {
             header: imgHeader,
-            cssClass: CLS_RTE_ELEMENTS,
+            cssClass: CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'inherit',
@@ -21504,13 +21674,13 @@ class Image {
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertImageUrl.bind(selectObj),
-                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage', isPrimary: true, disabled: true }
+                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage' + ' ' + this.parent.cssClass, isPrimary: true, disabled: true }
                 },
                 {
                     click: (e) => {
                         this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: imglinkCancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: imglinkCancel }
                 }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
@@ -21533,12 +21703,12 @@ class Image {
                 this.dialogObj = null;
             }
         };
-        const dialogContent = this.parent.createElement('div', { className: 'e-img-content' });
+        const dialogContent = this.parent.createElement('div', { className: 'e-img-content' + ' ' + this.parent.cssClass });
         if ((!isNullOrUndefined(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')
             || this.parent.editorMode === 'HTML') {
             dialogContent.appendChild(this.imgUpload(e));
         }
-        const linkHeader = this.parent.createElement('div', { className: 'e-linkheader' });
+        const linkHeader = this.parent.createElement('div', { className: 'e-linkheader' + ' ' + this.parent.cssClass });
         const linkHeaderText = this.i10n.getConstant('imageLinkHeader');
         if (this.parent.editorMode === 'HTML') {
             linkHeader.innerHTML = linkHeaderText;
@@ -21590,6 +21760,9 @@ class Image {
         if (target.nodeName === 'IMG') {
             this.imgEle = target;
         }
+        if (target.nodeName !== '#document') {
+            this.parent.currentTarget = e.target;
+        }
         if (!isNullOrUndefined(this.dialogObj) && ((
         // eslint-disable-next-line
         !closest(target, '[id=' + "'" + this.dialogObj.element.id + "'" + ']') && this.parent.toolbarSettings.enable && this.parent.getToolbarElement() &&
@@ -21607,12 +21780,13 @@ class Image {
             }
             /* eslint-enable */
         }
-        if (e.target.tagName !== 'IMG' && this.imgResizeDiv && !(this.quickToolObj &&
+        if (!(this.parent.iframeSettings.enable && !isNullOrUndefined(this.parent.currentTarget) && this.parent.currentTarget.nodeName === 'IMG') &&
+            e.target.tagName !== 'IMG' && this.imgResizeDiv && !(this.quickToolObj &&
             this.quickToolObj.imageQTBar && this.quickToolObj.imageQTBar.element.contains(e.target)) &&
             this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {
             this.cancelResizeAction();
         }
-        if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {
+        if (this.contentModule.getEditPanel().querySelector('.e-img-resize') && !(this.parent.iframeSettings.enable && this.parent.currentTarget.nodeName === 'IMG')) {
             if (target.tagName !== 'IMG') {
                 this.removeResizeEle();
             }
@@ -21636,10 +21810,10 @@ class Image {
     }
     // eslint-disable-next-line
     imageUrlPopup(e) {
-        const imgUrl = this.parent.createElement('div', { className: 'imgUrl' });
+        const imgUrl = this.parent.createElement('div', { className: 'imgUrl' + ' ' + this.parent.cssClass });
         const placeUrl = this.i10n.getConstant('imageUrl');
         this.inputUrl = this.parent.createElement('input', {
-            className: 'e-input e-img-url',
+            className: 'e-input e-img-url' + ' ' + this.parent.cssClass,
             attrs: { placeholder: placeUrl, spellcheck: 'false' }
         });
         this.inputUrl.addEventListener('input', () => {
@@ -21705,7 +21879,7 @@ class Image {
         const selectNode = e.selectNode[0];
         const imgHeight = this.i10n.getConstant('imageHeight');
         const imgWidth = this.i10n.getConstant('imageWidth');
-        const imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' });
+        const imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' + ' ' + this.parent.cssClass });
         const widthVal = isNullOrUndefined(this.changedWidthValue) && (selectNode.style.width.toString() === 'auto' ||
             selectNode.style.width !== '') ? selectNode.style.width : !isNullOrUndefined(this.changedWidthValue) ?
             this.changedWidthValue : (parseInt(selectNode.getClientRects()[0].width.toString(), 10)).toString();
@@ -21714,12 +21888,12 @@ class Image {
             this.changedHeightValue : (parseInt(selectNode.getClientRects()[0].height.toString(), 10)).toString();
         this.changedWidthValue = null;
         this.changedHeightValue = null;
-        const content = '<div class="e-rte-label"><label>' + imgWidth +
-            '</label></div><div class="e-rte-field"><input type="text" id="imgwidth" class="e-img-width" value=' +
+        const content = '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"><label>' + imgWidth +
+            '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" id="imgwidth" class="e-img-width' + ' ' + this.parent.cssClass + '" value=' +
             widthVal
             + ' /></div>' +
-            '<div class="e-rte-label">' + '<label>' + imgHeight + '</label></div><div class="e-rte-field"> ' +
-            '<input type="text" id="imgheight" class="e-img-height" value=' +
+            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + '<label>' + imgHeight + '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"> ' +
+            '<input type="text" id="imgheight" class="e-img-height' + ' ' + this.parent.cssClass + '" value=' +
             heightVal
             + ' /></div>';
         const contentElem = parseHtml(content);
@@ -21808,16 +21982,16 @@ class Image {
             save = e.selection;
             selectParent = e.selectParent;
         }
-        const uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' });
+        const uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' + ' ' + this.parent.cssClass });
         const deviceImgUpMsg = this.i10n.getConstant('imageDeviceUploadMessage');
         const imgUpMsg = this.i10n.getConstant('imageUploadMessage');
-        const span = this.parent.createElement('span', { className: 'e-droptext' });
+        const span = this.parent.createElement('span', { className: 'e-droptext' + ' ' + this.parent.cssClass });
         const spanMsg = this.parent.createElement('span', {
-            className: 'e-rte-upload-text', innerHTML: ((Browser.isDevice) ? deviceImgUpMsg : imgUpMsg)
+            className: 'e-rte-upload-text' + ' ' + this.parent.cssClass, innerHTML: ((Browser.isDevice) ? deviceImgUpMsg : imgUpMsg)
         });
         span.appendChild(spanMsg);
         const btnEle = this.parent.createElement('button', {
-            className: 'e-browsebtn', id: this.rteID + '_insertImage', attrs: { autofocus: 'true', type: 'button' }
+            className: 'e-browsebtn' + ' ' + this.parent.cssClass, id: this.rteID + '_insertImage', attrs: { autofocus: 'true', type: 'button' }
         });
         span.appendChild(btnEle);
         uploadParentEle.appendChild(span);
@@ -21829,7 +22003,7 @@ class Image {
         const btnClick = (Browser.isDevice) ? span : btnEle;
         EventHandler.add(btnClick, 'click', this.fileSelect, this);
         const uploadEle = this.parent.createElement('input', {
-            id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
+            id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }, className: this.parent.cssClass
         });
         uploadParentEle.appendChild(uploadEle);
         let altText;
@@ -22511,7 +22685,7 @@ class ViewSource {
         this.parent.formatter.editorManager.observer.off(KEY_DOWN_HANDLER, this.onKeyDown);
     }
     getSourceCode() {
-        return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' });
+        return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' + ' ' + this.parent.cssClass });
     }
     wireEvent(element) {
         this.keyboardModule = new KeyboardEvents$1(element, {
@@ -22742,6 +22916,8 @@ class Table {
         this.pageX = null;
         this.pageY = null;
         this.moveEle = null;
+        this.currentColumnResize = '';
+        this.currentMarginLeft = 0;
         this.parent = parent;
         this.rteID = parent.element.id;
         this.l10n = serviceLocator.getService('rteLocale');
@@ -22909,6 +23085,7 @@ class Table {
                 }
                 else if (ele && ele.querySelectorAll('table').length > 0) {
                     this.removeResizeElement();
+                    this.hideTableQuickToolbar();
                 }
             }
             if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
@@ -23285,7 +23462,7 @@ class Table {
     }
     tableResizeEleCreation(table, e) {
         this.parent.preventDefaultResize(e);
-        const columns = Array.prototype.slice.call(table.rows[this.calMaxCol(table)].cells, 1);
+        const columns = table.rows[this.calMaxCol(table)].cells;
         const rows = [];
         for (let i = 0; i < table.rows.length; i++) {
             rows.push(Array.prototype.slice.call(table.rows[i].cells, 0, 1)[0]);
@@ -23293,15 +23470,21 @@ class Table {
         const height = parseInt(getComputedStyle(table).height, 10);
         const width = parseInt(getComputedStyle(table).width, 10);
         const pos = this.calcPos(table);
-        for (let i = 0; columns.length > i; i++) {
+        for (let i = 0; columns.length >= i; i++) {
             const colReEle = this.parent.createElement('span', {
                 attrs: {
-                    'data-col': (i + 1).toString(), 'unselectable': 'on', 'contenteditable': 'false'
+                    'data-col': (i).toString(), 'unselectable': 'on', 'contenteditable': 'false'
                 }
             });
             colReEle.classList.add(CLS_RTE_TABLE_RESIZE, CLS_TB_COL_RES);
-            colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
-                'px; left:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
+            if (columns.length === i) {
+                colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
+                    'px; left:' + (pos.left + this.calcPos(columns[i - 1]).left + columns[i - 1].offsetWidth) + 'px;';
+            }
+            else {
+                colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
+                    'px; left:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
+            }
             this.contentModule.getEditPanel().appendChild(colReEle);
         }
         for (let i = 0; rows.length > i; i++) {
@@ -23319,7 +23502,7 @@ class Table {
             this.contentModule.getEditPanel().appendChild(rowReEle);
         }
         const tableReBox = this.parent.createElement('span', {
-            className: CLS_TB_BOX_RES, attrs: {
+            className: CLS_TB_BOX_RES + ' ' + this.parent.cssClass, attrs: {
                 'data-col': columns.length.toString(), 'unselectable': 'on', 'contenteditable': 'false'
             }
         });
@@ -23417,7 +23600,19 @@ class Table {
             this.hideTableQuickToolbar();
             if (target.classList.contains(CLS_TB_COL_RES)) {
                 this.resizeBtnStat.column = true;
-                this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
+                if (parseInt(target.getAttribute('data-col'), 10) === this.curTable.rows[this.calMaxCol(this.curTable)].cells.length) {
+                    this.currentColumnResize = 'last';
+                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10) - 1];
+                }
+                else {
+                    if (parseInt(target.getAttribute('data-col'), 10) === 0) {
+                        this.currentColumnResize = 'first';
+                    }
+                    else {
+                        this.currentColumnResize = 'middle';
+                    }
+                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
+                }
                 this.colIndex = this.columnEle.cellIndex;
                 this.moveEle = e.target;
                 this.appendHelper();
@@ -23461,7 +23656,7 @@ class Table {
     }
     appendHelper() {
         this.helper = this.parent.createElement('div', {
-            className: 'e-table-rhelper'
+            className: 'e-table-rhelper' + ' ' + this.parent.cssClass
         });
         if (Browser.isDevice) {
             this.helper.classList.add('e-reicon');
@@ -23474,7 +23669,8 @@ class Table {
         if (this.resizeBtnStat.column) {
             this.helper.classList.add('e-column-helper');
             this.helper.style.cssText = 'height: ' + getComputedStyle(this.curTable).height + '; top: ' +
-                pos.top + 'px; left:' + (pos.left + this.calcPos(this.columnEle).left - 1) + 'px;';
+                pos.top + 'px; left:' + ((pos.left + this.calcPos(this.columnEle).left) +
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 0) - 1) + 'px;';
         }
         else {
             this.helper.classList.add('e-row-helper');
@@ -23486,7 +23682,8 @@ class Table {
     updateHelper() {
         const pos = this.calcPos(this.curTable);
         if (this.resizeBtnStat.column) {
-            const left = pos.left + this.calcPos(this.columnEle).left - 1;
+            const left = (pos.left + this.calcPos(this.columnEle).left) +
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 0) - 1;
             this.helper.style.left = left + 'px';
         }
         else {
@@ -23508,7 +23705,7 @@ class Table {
     resizing(e) {
         const pageX = this.getPointX(e);
         const pageY = this.getPointY(e);
-        const mouseX = (this.parent.enableRtl) ? -(pageX - this.pageX) : (pageX - this.pageX);
+        let mouseX = (this.parent.enableRtl) ? -(pageX - this.pageX) : (pageX - this.pageX);
         const mouseY = (this.parent.enableRtl) ? -(pageY - this.pageY) : (pageY - this.pageY);
         this.pageX = pageX;
         this.pageY = pageY;
@@ -23524,23 +23721,66 @@ class Table {
                 const paddingSize = +getComputedStyle(this.contentModule.getEditPanel()).paddingRight.match(/\d/g).join('');
                 const rteWidth = this.contentModule.getEditPanel().offsetWidth - (this.contentModule.getEditPanel().offsetWidth -
                     this.contentModule.getEditPanel().clientWidth) - paddingSize * 2;
+                let widthCompare;
+                if (!isNullOrUndefined(this.curTable.parentElement.closest('table'))) {
+                    const currentTd = this.curTable.closest('td');
+                    const currentTDPad = +getComputedStyle(currentTd).paddingRight.match(/\d/g).join('');
+                    // Padding of the current table with the parent element multiply with 2.
+                    widthCompare = currentTd.offsetWidth - (currentTd.offsetWidth - currentTd.clientWidth) - currentTDPad * 2;
+                }
+                else {
+                    widthCompare = rteWidth;
+                }
                 if (this.resizeBtnStat.column) {
-                    const cellColl = this.curTable.rows[this.calMaxCol(this.curTable)].cells;
                     const width = parseFloat(this.columnEle.offsetWidth.toString());
-                    const actualwid = width - mouseX;
-                    const totalwid = parseFloat(this.columnEle.offsetWidth.toString()) +
-                        parseFloat(cellColl[this.colIndex - 1].offsetWidth.toString());
-                    for (let i = 0; i < this.curTable.rows.length; i++) {
-                        if ((totalwid - actualwid) > 20 && actualwid > 20) {
-                            const leftColumnWidth = totalwid - actualwid;
-                            const rightColWidth = actualwid;
-                            if (!isNullOrUndefined(this.curTable.rows[i].cells[this.colIndex - 1])) {
-                                this.curTable.rows[i].cells[this.colIndex - 1].style.width =
-                                    this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
+                    let cellRow = this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
+                    let currentTableWidth = parseFloat(this.curTable.style.width.split('%')[0]);
+                    let currentColumnCellWidth = parseFloat(this.curTable.rows[cellRow].cells[this.colIndex].style.width.split('%')[0]);
+                    if (this.currentColumnResize === 'first') {
+                        mouseX = mouseX - 0.75; //This was done for to make the gripper and the table first/last column will be close.
+                        this.removeResizeElement();
+                        // Below the value '100' is the 100% width of the parent element.
+                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX < 0) && currentTableWidth <= 100 && this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) <= 100) {
+                            const firstColumnsCell = this.findFirstLastColCells(this.curTable, true);
+                            this.curTable.style.width = this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) > 100 ? (100 + '%') : (this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) + '%');
+                            let differenceWidth = currentTableWidth - this.convertPixelToPercentage(tableWidth - mouseX, widthCompare);
+                            this.currentMarginLeft = this.currentMarginLeft + differenceWidth;
+                            this.curTable.style.marginLeft = 'calc(' + (this.curTable.style.width === '100%' ? 0 : this.currentMarginLeft) + '%)';
+                            for (let i = 0; i < firstColumnsCell.length; i++) {
+                                this.curTable.rows[i].cells[this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
                             }
-                            if (!isNullOrUndefined(this.curTable.rows[i].cells[this.colIndex])) {
-                                this.curTable.rows[i].cells[this.colIndex].style.width =
-                                    this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
+                        }
+                    }
+                    else if (this.currentColumnResize === 'last') {
+                        mouseX = mouseX + 0.75; //This was done for to make the gripper and the table first/last column will be close.
+                        this.removeResizeElement();
+                        // Below the value '100' is the 100% width of the parent element.
+                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX > 0) && currentTableWidth <= 100 && this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) <= 100) {
+                            const lastColumnsCell = this.findFirstLastColCells(this.curTable, false);
+                            this.curTable.style.width = this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) > 100 ? (100 + '%') : (this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%');
+                            let differenceWidth = currentTableWidth - this.convertPixelToPercentage(tableWidth + mouseX, widthCompare);
+                            for (let i = 0; i < lastColumnsCell.length; i++) {
+                                this.curTable.rows[i].cells[this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
+                            }
+                        }
+                    }
+                    else {
+                        const cellColl = this.curTable.rows[this.calMaxCol(this.curTable)].cells;
+                        const actualwid = width - mouseX;
+                        const totalwid = parseFloat(this.columnEle.offsetWidth.toString()) +
+                            parseFloat(cellColl[this.colIndex - 1].offsetWidth.toString());
+                        for (let i = 0; i < this.curTable.rows.length; i++) {
+                            if ((totalwid - actualwid) > 20 && actualwid > 20) {
+                                const leftColumnWidth = totalwid - actualwid;
+                                const rightColWidth = actualwid;
+                                if (!isNullOrUndefined(this.curTable.rows[i].cells[this.colIndex - 1])) {
+                                    this.curTable.rows[i].cells[this.colIndex - 1].style.width =
+                                        this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
+                                }
+                                if (!isNullOrUndefined(this.curTable.rows[i].cells[this.colIndex])) {
+                                    this.curTable.rows[i].cells[this.colIndex].style.width =
+                                        this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
+                                }
                             }
                         }
                     }
@@ -23564,7 +23804,7 @@ class Table {
                         EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
                     }
                     const widthType = this.curTable.style.width.indexOf('%') > -1;
-                    this.curTable.style.width = widthType ? this.convertPixelToPercentage(tableWidth + mouseX, rteWidth) + '%'
+                    this.curTable.style.width = widthType ? this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
                         : tableWidth + mouseX + 'px';
                     this.curTable.style.height = tableHeight + mouseY + 'px';
                     tableReBox.classList.add('e-rbox-select');
@@ -23574,6 +23814,17 @@ class Table {
             }
         });
     }
+    findFirstLastColCells(table, isFirst) {
+        let resultColumns = [];
+        const rows = table.querySelectorAll('tr');
+        for (let i = 0; i < rows.length; i++) {
+            if (rows[i].closest('table') === table) {
+                const columns = rows[i].querySelectorAll('th, td');
+                resultColumns.push(isFirst ? columns[0] : columns[columns.length - 1]);
+            }
+        }
+        return resultColumns;
+    }
     convertPixelToPercentage(value, offsetValue) {
         return (value / offsetValue) * 100;
     }
@@ -23592,14 +23843,14 @@ class Table {
                 EventHandler.add(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper, this);
             }
             this.removeResizeElement();
-            if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
-                detach(this.helper);
-                this.helper = null;
-            }
-            this.pageX = null;
-            this.pageY = null;
-            this.moveEle = null;
         }
+        if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
+            detach(this.helper);
+            this.helper = null;
+        }
+        this.pageX = null;
+        this.pageY = null;
+        this.moveEle = null;
         const args = { event: e, requestType: 'table' };
         this.parent.trigger(resizeStop, args);
         this.parent.formatter.saveData();
@@ -23653,16 +23904,16 @@ class Table {
         this.hideTableQuickToolbar();
         const header = '1X1';
         const insertbtn = this.l10n.getConstant('inserttablebtn');
-        this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup', id: this.rteID + '_table' });
-        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' });
+        this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + ' ' + this.parent.cssClass, id: this.rteID + '_table' });
+        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + ' ' + this.parent.cssClass });
         this.tblHeader.innerHTML = header;
         this.dlgDiv.appendChild(this.tblHeader);
-        const tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' });
+        const tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' + ' ' + this.parent.cssClass });
         this.drawTable(tableDiv, args);
         this.dlgDiv.appendChild(tableDiv);
-        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' }));
+        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' + ' ' + this.parent.cssClass }));
         const btnEle = this.parent.createElement('button', {
-            className: 'e-insert-table-btn', id: this.rteID + '_insertTable',
+            className: 'e-insert-table-btn' + ' ' + this.parent.cssClass, id: this.rteID + '_insertTable',
             attrs: { type: 'button', tabindex: '0' }
         });
         if (!isNullOrUndefined(this.parent.getToolbarElement().querySelector('.e-expended-nav'))) {
@@ -23724,7 +23975,7 @@ class Table {
             !target.offsetParent.classList.contains('e-quick-dropdown') &&
             !target.offsetParent.classList.contains('e-rte-backgroundcolor-dropdown') && !closest(target, '.e-rte-dropdown-popup')
             && !closest(target, '.e-rte-elements')) {
-            removeClass(this.parent.element.querySelectorAll('table td'), CLS_TABLE_SEL);
+            removeClass(this.parent.inputElement.querySelectorAll('table td'), CLS_TABLE_SEL);
             if (!Browser.isIE) {
                 this.hideTableQuickToolbar();
             }
@@ -23738,10 +23989,10 @@ class Table {
         let rowDiv;
         let tableCell;
         for (let row = 0; row < 3; row++) {
-            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row', attrs: { 'data-column': '' + row } });
+            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row' + ' ' + this.parent.cssClass, attrs: { 'data-column': '' + row } });
             for (let col = 0; col < 10; col++) {
                 const display = (row > 2) ? 'none' : 'inline-block';
-                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default', attrs: { 'data-cell': '' + col } });
+                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default' + ' ' + this.parent.cssClass, attrs: { 'data-cell': '' + col } });
                 rowDiv.appendChild(tableCell);
                 tableCell.style.display = display;
                 if (col === 0 && row === 0) {
@@ -23764,13 +24015,13 @@ class Table {
             height: 'initial', width: '290px', content: editContent, header: editHeader,
             buttons: [{
                     click: this.applyProperties.bind(this, args),
-                    buttonModel: { content: update, cssClass: 'e-flat e-size-update', isPrimary: true }
+                    buttonModel: { content: update, cssClass: 'e-flat e-size-update' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: (e) => {
                         this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
                 }],
             cssClass: this.parent.cssClass
         });
@@ -23794,13 +24045,13 @@ class Table {
             height: 'initial', width: '290px', content: dlgContent,
             buttons: [{
                     click: proxy.customTable.bind(this, args),
-                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table', isPrimary: true }
+                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + proxy.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: (e) => {
                         proxy.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + proxy.parent.cssClass, content: cancel }
                 }]
         });
         if (!isNullOrUndefined(proxy.parent.cssClass)) {
@@ -23812,10 +24063,10 @@ class Table {
     tableCellDlgContent() {
         const tableColumn = this.l10n.getConstant('columns');
         const tableRow = this.l10n.getConstant('rows');
-        const tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' });
-        const content = '<div class="e-rte-field"><input type="text" '
-            + ' data-role ="none" id="tableColumn" class="e-table-column"/></div>'
-            + '<div class="e-rte-field"><input type="text" data-role ="none" id="tableRow" class="e-table-row" /></div>';
+        const tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' + ' ' + this.parent.cssClass });
+        const content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" '
+            + ' data-role ="none" id="tableColumn" class="e-table-column' + ' ' + this.parent.cssClass + '"/></div>'
+            + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="tableRow" class="e-table-row' + ' ' + this.parent.cssClass + '" /></div>';
         const contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.columnTextBox = new NumericTextBox({
@@ -23858,7 +24109,7 @@ class Table {
             return;
         }
         const tableDialog = this.parent.createElement('div', {
-            className: 'e-rte-edit-table', id: this.rteID + '_tabledialog'
+            className: 'e-rte-edit-table' + ' ' + this.parent.cssClass, id: this.rteID + '_tabledialog'
         });
         this.parent.element.appendChild(tableDialog);
         const insert = this.l10n.getConstant('dialogInsert');
@@ -23873,13 +24124,13 @@ class Table {
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
-                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table', isPrimary: true }
+                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: (e) => {
                         this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
                 }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
@@ -23947,13 +24198,13 @@ class Table {
         const tableWidth = this.l10n.getConstant('tableWidth');
         const cellPadding = this.l10n.getConstant('cellpadding');
         const cellSpacing = this.l10n.getConstant('cellspacing');
-        const tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' });
+        const tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' + ' ' + this.parent.cssClass });
         const widthVal = closest(selectNode, 'table').getClientRects()[0].width;
         const padVal = closest(selectNode, 'td').style.padding;
         const brdSpcVal = closest(selectNode, 'table').getAttribute('cellspacing');
-        const content = '<div class="e-rte-field"><input type="text" data-role ="none" id="tableWidth" class="e-table-width" '
-            + ' /></div>' + '<div class="e-rte-field"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding" />'
-            + ' </div><div class="e-rte-field"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing" /></div>';
+        const content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="tableWidth" class="e-table-width' + ' ' + this.parent.cssClass + '" '
+            + ' /></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding' + ' ' + this.parent.cssClass + '" />'
+            + ' </div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing' + ' ' + this.parent.cssClass + '" /></div>';
         const contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.tableWidthNum = new NumericTextBox({
@@ -24951,24 +25202,6 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
 let RichTextEditor = class RichTextEditor extends Component {
     constructor(options, element) {
         super(options, element);
-        this.defaultResetValue = null;
-        this.isResizeInitialized = false;
-        /**
-         * @hidden
-         * @deprecated
-         */
-        this.isFocusOut = false;
-        /**
-         * @hidden
-         * @deprecated
-         */
-        this.isRTE = false;
-        /**
-         * @hidden
-         * @deprecated
-         */
-        this.isBlur = true;
-        this.needsID = true;
     }
     /**
      * To provide the array of modules needed for component rendering
@@ -25049,6 +25282,14 @@ let RichTextEditor = class RichTextEditor extends Component {
         // eslint-disable-next-line
         (this.enabled) ? this.eventInitializer() : this.unWireEvents();
     }
+    initializeValue() {
+        this.isFocusOut = false;
+        this.isRTE = false;
+        this.isBlur = true;
+        this.needsID = true;
+        this.defaultResetValue = null;
+        this.isResizeInitialized = false;
+    }
     /**
      * For internal use only - Initialize the event handler;
      *
@@ -25057,6 +25298,7 @@ let RichTextEditor = class RichTextEditor extends Component {
      * @private
      */
     preRender() {
+        this.initializeValue();
         this.onBlurHandler = this.blurHandler.bind(this);
         this.onFocusHandler = this.focusHandler.bind(this);
         this.onResizeHandler = this.resizeHandler.bind(this);
@@ -25113,11 +25355,18 @@ let RichTextEditor = class RichTextEditor extends Component {
         }
         else {
             this.valueContainer = this.createElement('textarea', {
-                id: this.getID() + '-value'
+                id: this.getID() + '-value',
+                attrs: { 'aria-labelledby': this.getID() }
             });
         }
         this.valueContainer.name = this.getID();
         addClass([this.valueContainer], CLS_RTE_HIDDEN);
+        if (!isNullOrUndefined(this.cssClass)) {
+            let currentClassList = this.cssClass.split(' ');
+            for (let i = 0; i < currentClassList.length; i++) {
+                addClass([this.valueContainer], currentClassList[i]);
+            }
+        }
         this.element.appendChild(this.valueContainer);
     }
     /**
@@ -25376,12 +25625,12 @@ let RichTextEditor = class RichTextEditor extends Component {
         const range = this.getRange();
         const currentStartContainer = range.startContainer;
         const currentEndContainer = range.endContainer;
-        let currentStartOffset = range.startOffset;
-        let isSameContainer = currentStartContainer === currentEndContainer ? true : false;
+        const currentStartOffset = range.startOffset;
+        const isSameContainer = currentStartContainer === currentEndContainer ? true : false;
         let currentEndOffset;
         const endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :
             range.endContainer;
-        let closestLI = closest(endNode, 'LI');
+        const closestLI = closest(endNode, 'LI');
         if (!isNullOrUndefined(closestLI) && endNode.textContent.length === range.endOffset &&
             !range.collapsed && isNullOrUndefined(endNode.nextElementSibling)) {
             closestLI.textContent = closestLI.textContent.trim();
@@ -25755,6 +26004,12 @@ let RichTextEditor = class RichTextEditor extends Component {
             for (let i = 0; i < this.originalElement.classList.length; i++) {
                 addClass([this.element], this.originalElement.classList[i]);
             }
+            if (!isNullOrUndefined(this.cssClass)) {
+                let currentClassList = this.cssClass.split(' ');
+                for (let i = 0; i < currentClassList.length; i++) {
+                    addClass([this.element], currentClassList[i]);
+                }
+            }
             removeClass([this.element], CLS_RTE_HIDDEN);
         }
         else {
@@ -26129,7 +26384,7 @@ let RichTextEditor = class RichTextEditor extends Component {
         if (this.inputElement && this.placeholder && this.iframeSettings.enable !== true) {
             if (this.editorMode !== 'Markdown') {
                 if (!this.placeHolderWrapper) {
-                    this.placeHolderWrapper = this.createElement('span', { className: 'rte-placeholder e-rte-placeholder' });
+                    this.placeHolderWrapper = this.createElement('span', { className: 'rte-placeholder e-rte-placeholder' + ' ' + this.cssClass });
                     if (this.inputElement) {
                         this.inputElement.parentElement.insertBefore(this.placeHolderWrapper, this.inputElement);
                     }
@@ -26378,7 +26633,7 @@ let RichTextEditor = class RichTextEditor extends Component {
                 this.setProperties({ value: this.valueTemplate });
             }
             else {
-                const compiledTemplate = compile(this.valueTemplate)("", this, 'valueTemplate');
+                const compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
                 for (let i = 0; i < compiledTemplate.length; i++) {
                     const item = compiledTemplate[i];
                     append([item], this.element);
@@ -27001,6 +27256,7 @@ let RichTextEditor = class RichTextEditor extends Component {
     }
     onIframeMouseDown(e) {
         this.isBlur = false;
+        this.currentTarget = e.target;
         this.notify(iframeMouseDown, e);
     }
     editorKeyDown(e) {
@@ -27327,5 +27583,5 @@ RichTextEditor = __decorate$1([
  * Rich Text Editor component exported items
  */
 
-export { Toolbar$2 as Toolbar, KeyboardEvents$1 as KeyboardEvents, BaseToolbar, BaseQuickToolbar, QuickToolbar, Count, ColorPickerInput, MarkdownToolbarStatus, ExecCommandCallBack, ToolbarAction, MarkdownEditor, HtmlEditor, PasteCleanup, Resize, DropDownButtons, FileManager$1 as FileManager, FullScreen, setAttributes, HtmlToolbarStatus, XhtmlValidation, HTMLFormatter, Formatter, MarkdownFormatter, ContentRender, Render, ToolbarRenderer, Link, Image, ViewSource, Table, DialogRenderer, IframeContentRender, MarkdownRender, PopupRenderer, RichTextEditor, RenderType, ToolbarType, DialogType, executeGroup, created, destroyed, load, initialLoad, contentChanged, initialEnd, iframeMouseDown, destroy, toolbarClick, toolbarRefresh, refreshBegin, toolbarUpdated, bindOnEnd, renderColorPicker, htmlToolbarClick, markdownToolbarClick, destroyColorPicker, modelChanged, keyUp, keyDown, mouseUp, toolbarCreated, toolbarRenderComplete, enableFullScreen, disableFullScreen, dropDownSelect, beforeDropDownItemRender, execCommandCallBack, imageToolbarAction, linkToolbarAction, windowResize, resizeStart, onResize, resizeStop, undo, redo, insertLink, unLink, editLink, openLink, actionBegin, actionComplete, updatedToolbarStatus, actionSuccess, updateToolbarItem, insertImage, insertCompleted, imageLeft, imageRight, imageCenter, imageBreak, imageInline, imageLink, imageAlt, imageDelete, imageCaption, imageSize, sourceCode, updateSource, toolbarOpen, beforeDropDownOpen, selectionSave, selectionRestore, expandPopupClick, count, contentFocus, contentBlur, mouseDown, sourceCodeMouseDown, editAreaClick, scroll, contentscroll, colorPickerChanged, tableColorPickerChanged, focusChange, selectAll$1 as selectAll, selectRange, getSelectedHtml, renderInlineToolbar, paste, imgModule, rtlMode, createTable, docClick, tableToolbarAction, checkUndo, readOnlyMode, pasteClean, enterHandler, beforeDialogOpen, clearDialogObj, dialogOpen, beforeDialogClose, dialogClose, beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose, popupHide, imageSelected, imageUploading, imageUploadSuccess, imageUploadFailed, imageRemoving, afterImageDelete, drop, xhtmlValidation, beforeImageUpload, resizeInitialized, renderFileManager, beforeImageDrop, dynamicModule, beforePasteCleanup, afterPasteCleanup, updateTbItemsStatus, showLinkDialog, closeLinkDialog, showImageDialog, closeImageDialog, showTableDialog, closeTableDialog, bindCssClass, blockInlineEmptyNodes, CLS_RTE, CLS_RTL, CLS_CONTENT, CLS_DISABLED, CLS_SCRIPT_SHEET, CLS_STYLE_SHEET, CLS_TOOLBAR, CLS_TB_FIXED, CLS_TB_FLOAT, CLS_TB_ABS_FLOAT, CLS_INLINE, CLS_TB_INLINE, CLS_RTE_EXPAND_TB, CLS_FULL_SCREEN, CLS_QUICK_TB, CLS_POP, CLS_TB_STATIC, CLS_QUICK_POP, CLS_QUICK_DROPDOWN, CLS_IMAGE_POP, CLS_INLINE_POP, CLS_INLINE_DROPDOWN, CLS_DROPDOWN_POPUP, CLS_DROPDOWN_ICONS, CLS_DROPDOWN_ITEMS, CLS_DROPDOWN_BTN, CLS_RTE_CONTENT, CLS_TB_ITEM, CLS_TB_EXTENDED, CLS_TB_WRAP, CLS_POPUP, CLS_SEPARATOR, CLS_MINIMIZE, CLS_MAXIMIZE, CLS_BACK, CLS_SHOW, CLS_HIDE, CLS_VISIBLE, CLS_FOCUS, CLS_RM_WHITE_SPACE, CLS_IMGRIGHT, CLS_IMGLEFT, CLS_IMGCENTER, CLS_IMGBREAK, CLS_CAPTION, CLS_RTE_CAPTION, CLS_CAPINLINE, CLS_IMGINLINE, CLS_COUNT, CLS_WARNING, CLS_ERROR, CLS_ICONS, CLS_ACTIVE, CLS_EXPAND_OPEN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_HR_SEPARATOR, CLS_TB_IOS_FIX, CLS_LIST_PRIMARY_CONTENT, CLS_NUMBERFORMATLIST_TB_BTN, CLS_BULLETFORMATLIST_TB_BTN, CLS_FORMATS_TB_BTN, CLS_FONT_NAME_TB_BTN, CLS_FONT_SIZE_TB_BTN, CLS_ALIGN_TB_BTN, CLS_FONT_COLOR_TARGET, CLS_BACKGROUND_COLOR_TARGET, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_RTE_READONLY, CLS_TABLE_SEL, CLS_TB_DASH_BOR, CLS_TB_ALT_BOR, CLS_TB_COL_RES, CLS_TB_ROW_RES, CLS_TB_BOX_RES, CLS_RTE_HIDDEN, CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT, CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT, CLS_RTE_RES_HANDLE, CLS_RTE_RES_EAST, CLS_RTE_IMAGE, CLS_RESIZE, CLS_IMG_FOCUS, CLS_RTE_DRAG_IMAGE, CLS_RTE_UPLOAD_POPUP, CLS_POPUP_OPEN, CLS_IMG_RESIZE, CLS_DROPAREA, CLS_IMG_INNER, CLS_UPLOAD_FILES, CLS_RTE_DIALOG_UPLOAD, CLS_RTE_RES_CNT, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_TABLE, CLS_TABLE_BORDER, CLS_RTE_TABLE_RESIZE, CLS_RTE_FIXED_TB_EXPAND, CLS_RTE_TB_ENABLED, getIndex, hasClass, getDropDownValue, isIDevice, getFormattedFontSize, pageYOffset, getTooltipText, setToolbarStatus, getCollection, getTBarItemsIndex, updateUndoRedoStatus, dispatchEvent, parseHtml, getTextNodesUnder, toObjectLowerCase, getEditValue, updateTextNode, getDefaultValue, isEditableValueEmpty, decode, sanitizeHelper, convertToBlob, getLocaleFontFormat, updateDropDownFontFormatLocale, ServiceLocator, RendererFactory, EditorManager, IMAGE, TABLE, LINK, INSERT_ROW, INSERT_COLUMN, DELETEROW, DELETECOLUMN, REMOVETABLE, TABLEHEADER, TABLE_VERTICAL_ALIGN, TABLE_MERGE, TABLE_VERTICAL_SPLIT, TABLE_HORIZONTAL_SPLIT, TABLE_MOVE, ALIGNMENT_TYPE, INDENT_TYPE, DEFAULT_TAG, BLOCK_TAGS, IGNORE_BLOCK_TAGS, TABLE_BLOCK_TAGS, SELECTION_TYPE, INSERTHTML_TYPE, INSERT_TEXT_TYPE, CLEAR_TYPE, SELF_CLOSING_TAGS, CLASS_IMAGE_RIGHT, CLASS_IMAGE_LEFT, CLASS_IMAGE_CENTER, CLASS_IMAGE_BREAK, CLASS_CAPTION, CLASS_RTE_CAPTION, CLASS_CAPTION_INLINE, CLASS_IMAGE_INLINE, Lists, markerClassName, DOMNode, Alignments, Indents, Formats, LinkCommand, InsertMethods, InsertTextExec, InsertHtmlExec, InsertHtml, IsFormatted, MsWordPaste, NodeCutter, ImageCommand, SelectionCommands, SelectionBasedExec, ClearFormatExec, UndoRedoManager, TableCommand, statusCollection, ToolbarStatus, NodeSelection, MarkdownParser, LISTS_COMMAND, selectionCommand, LINK_COMMAND, CLEAR_COMMAND, MD_TABLE, ClearFormat, MDLists, MDFormats, MarkdownSelection, UndoRedoCommands, MDSelectionFormats, MDLink, MDTable, markdownFormatTags, markdownSelectionTags, markdownListsTags, htmlKeyConfig, markdownKeyConfig, pasteCleanupGroupingTags, listConversionFilters, selfClosingTags, KEY_DOWN, ACTION, FORMAT_TYPE, KEY_DOWN_HANDLER, LIST_TYPE, KEY_UP_HANDLER, KEY_UP, MODEL_CHANGED_PLUGIN, MODEL_CHANGED, MS_WORD_CLEANUP_PLUGIN, MS_WORD_CLEANUP, ON_BEGIN, SPACE_ACTION };
+export { Toolbar$2 as Toolbar, KeyboardEvents$1 as KeyboardEvents, BaseToolbar, BaseQuickToolbar, QuickToolbar, Count, ColorPickerInput, MarkdownToolbarStatus, ExecCommandCallBack, ToolbarAction, MarkdownEditor, HtmlEditor, PasteCleanup, Resize, DropDownButtons, FileManager$1 as FileManager, FullScreen, setAttributes, HtmlToolbarStatus, XhtmlValidation, HTMLFormatter, Formatter, MarkdownFormatter, ContentRender, Render, ToolbarRenderer, Link, Image, ViewSource, Table, DialogRenderer, IframeContentRender, MarkdownRender, PopupRenderer, RichTextEditor, RenderType, ToolbarType, DialogType, executeGroup, created, destroyed, load, initialLoad, contentChanged, initialEnd, iframeMouseDown, destroy, toolbarClick, toolbarRefresh, refreshBegin, toolbarUpdated, bindOnEnd, renderColorPicker, htmlToolbarClick, markdownToolbarClick, destroyColorPicker, modelChanged, keyUp, keyDown, mouseUp, toolbarCreated, toolbarRenderComplete, enableFullScreen, disableFullScreen, dropDownSelect, beforeDropDownItemRender, execCommandCallBack, imageToolbarAction, linkToolbarAction, windowResize, resizeStart, onResize, resizeStop, undo, redo, insertLink, unLink, editLink, openLink, actionBegin, actionComplete, updatedToolbarStatus, actionSuccess, updateToolbarItem, insertImage, insertCompleted, imageLeft, imageRight, imageCenter, imageBreak, imageInline, imageLink, imageAlt, imageDelete, imageCaption, imageSize, sourceCode, updateSource, toolbarOpen, beforeDropDownOpen, selectionSave, selectionRestore, expandPopupClick, count, contentFocus, contentBlur, mouseDown, sourceCodeMouseDown, editAreaClick, scroll, contentscroll, colorPickerChanged, tableColorPickerChanged, focusChange, selectAll$1 as selectAll, selectRange, getSelectedHtml, renderInlineToolbar, paste, imgModule, rtlMode, createTable, docClick, tableToolbarAction, checkUndo, readOnlyMode, pasteClean, enterHandler, beforeDialogOpen, clearDialogObj, dialogOpen, beforeDialogClose, dialogClose, beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose, popupHide, imageSelected, imageUploading, imageUploadSuccess, imageUploadFailed, imageRemoving, mediaSelected, mediaUploading, mediaUploadSuccess, mediaUploadFailed, mediaRemoving, afterImageDelete, afterMediaDelete, drop, xhtmlValidation, beforeImageUpload, beforeMediaUpload, resizeInitialized, renderFileManager, beforeImageDrop, dynamicModule, beforePasteCleanup, afterPasteCleanup, updateTbItemsStatus, showLinkDialog, closeLinkDialog, showImageDialog, closeImageDialog, closeAudioDialog, showTableDialog, closeTableDialog, bindCssClass, blockInlineEmptyNodes, CLS_RTE, CLS_RTL, CLS_CONTENT, CLS_DISABLED, CLS_SCRIPT_SHEET, CLS_STYLE_SHEET, CLS_TOOLBAR, CLS_TB_FIXED, CLS_TB_FLOAT, CLS_TB_ABS_FLOAT, CLS_INLINE, CLS_TB_INLINE, CLS_RTE_EXPAND_TB, CLS_FULL_SCREEN, CLS_QUICK_TB, CLS_POP, CLS_TB_STATIC, CLS_QUICK_POP, CLS_QUICK_DROPDOWN, CLS_IMAGE_POP, CLS_INLINE_POP, CLS_INLINE_DROPDOWN, CLS_DROPDOWN_POPUP, CLS_DROPDOWN_ICONS, CLS_DROPDOWN_ITEMS, CLS_DROPDOWN_BTN, CLS_RTE_CONTENT, CLS_TB_ITEM, CLS_TB_EXTENDED, CLS_TB_WRAP, CLS_POPUP, CLS_SEPARATOR, CLS_MINIMIZE, CLS_MAXIMIZE, CLS_BACK, CLS_SHOW, CLS_HIDE, CLS_VISIBLE, CLS_FOCUS, CLS_RM_WHITE_SPACE, CLS_IMGRIGHT, CLS_IMGLEFT, CLS_IMGCENTER, CLS_IMGBREAK, CLS_CAPTION, CLS_RTE_CAPTION, CLS_CAPINLINE, CLS_IMGINLINE, CLS_COUNT, CLS_WARNING, CLS_ERROR, CLS_ICONS, CLS_ACTIVE, CLS_EXPAND_OPEN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_HR_SEPARATOR, CLS_TB_IOS_FIX, CLS_LIST_PRIMARY_CONTENT, CLS_NUMBERFORMATLIST_TB_BTN, CLS_BULLETFORMATLIST_TB_BTN, CLS_FORMATS_TB_BTN, CLS_FONT_NAME_TB_BTN, CLS_FONT_SIZE_TB_BTN, CLS_ALIGN_TB_BTN, CLS_FONT_COLOR_TARGET, CLS_BACKGROUND_COLOR_TARGET, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_RTE_READONLY, CLS_TABLE_SEL, CLS_TB_DASH_BOR, CLS_TB_ALT_BOR, CLS_TB_COL_RES, CLS_TB_ROW_RES, CLS_TB_BOX_RES, CLS_RTE_HIDDEN, CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT, CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT, CLS_RTE_RES_HANDLE, CLS_RTE_RES_EAST, CLS_RTE_IMAGE, CLS_RESIZE, CLS_IMG_FOCUS, CLS_RTE_DRAG_IMAGE, CLS_RTE_UPLOAD_POPUP, CLS_POPUP_OPEN, CLS_IMG_RESIZE, CLS_DROPAREA, CLS_IMG_INNER, CLS_UPLOAD_FILES, CLS_RTE_DIALOG_UPLOAD, CLS_RTE_RES_CNT, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_TABLE, CLS_TABLE_BORDER, CLS_RTE_TABLE_RESIZE, CLS_RTE_FIXED_TB_EXPAND, CLS_RTE_TB_ENABLED, CLS_RTE_RES_WEST, getIndex, hasClass, getDropDownValue, isIDevice, getFormattedFontSize, pageYOffset, getTooltipText, setToolbarStatus, getCollection, getTBarItemsIndex, updateUndoRedoStatus, dispatchEvent, parseHtml, getTextNodesUnder, toObjectLowerCase, getEditValue, updateTextNode, getDefaultValue, isEditableValueEmpty, decode, sanitizeHelper, convertToBlob, getLocaleFontFormat, updateDropDownFontFormatLocale, ServiceLocator, RendererFactory, EditorManager, IMAGE, TABLE, LINK, INSERT_ROW, INSERT_COLUMN, DELETEROW, DELETECOLUMN, REMOVETABLE, TABLEHEADER, TABLE_VERTICAL_ALIGN, TABLE_MERGE, TABLE_VERTICAL_SPLIT, TABLE_HORIZONTAL_SPLIT, TABLE_MOVE, ALIGNMENT_TYPE, INDENT_TYPE, DEFAULT_TAG, BLOCK_TAGS, IGNORE_BLOCK_TAGS, TABLE_BLOCK_TAGS, SELECTION_TYPE, INSERTHTML_TYPE, INSERT_TEXT_TYPE, CLEAR_TYPE, SELF_CLOSING_TAGS, CLASS_IMAGE_RIGHT, CLASS_IMAGE_LEFT, CLASS_IMAGE_CENTER, CLASS_IMAGE_BREAK, CLASS_CAPTION, CLASS_RTE_CAPTION, CLASS_CAPTION_INLINE, CLASS_IMAGE_INLINE, Lists, markerClassName, DOMNode, Alignments, Indents, Formats, LinkCommand, InsertMethods, InsertTextExec, InsertHtmlExec, InsertHtml, IsFormatted, MsWordPaste, NodeCutter, ImageCommand, SelectionCommands, SelectionBasedExec, ClearFormatExec, UndoRedoManager, TableCommand, statusCollection, ToolbarStatus, NodeSelection, MarkdownParser, LISTS_COMMAND, selectionCommand, LINK_COMMAND, CLEAR_COMMAND, MD_TABLE, INSERT_TEXT_COMMAND, ClearFormat, MDLists, MDFormats, MarkdownSelection, UndoRedoCommands, MDSelectionFormats, MDLink, MDTable, markdownFormatTags, markdownSelectionTags, markdownListsTags, htmlKeyConfig, markdownKeyConfig, pasteCleanupGroupingTags, listConversionFilters, selfClosingTags, KEY_DOWN, ACTION, FORMAT_TYPE, KEY_DOWN_HANDLER, LIST_TYPE, KEY_UP_HANDLER, KEY_UP, MODEL_CHANGED_PLUGIN, MODEL_CHANGED, MS_WORD_CLEANUP_PLUGIN, MS_WORD_CLEANUP, ON_BEGIN, SPACE_ACTION };
 //# sourceMappingURL=ej2-richtexteditor.es2015.js.map