@syncfusion/ej2-richtexteditor 20.1.55 → 20.1.56

package/src/rich-text-editor/actions/quick-toolbar.js

@@ -46,7 +46,8 @@ var QuickToolbar = /** @class */ (function () {
             popupType: popType,
             toolbarItems: items,
             mode: mode,
-            renderType: type
+            renderType: type,
+            cssClass: this.parent.cssClass
         };
     };
     /**
@@ -357,6 +358,7 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.on(events.destroy, this.destroy, this);
         this.parent.on(events.keyDown, this.onKeyDown, this);
         this.parent.on(events.rtlMode, this.setRtl, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     QuickToolbar.prototype.onKeyDown = function (e) {
         var args = e.args;
@@ -370,6 +372,24 @@ var QuickToolbar = /** @class */ (function () {
         this.hideQuickToolbars();
         this.hideInlineQTBar();
     };
+    QuickToolbar.prototype.updateCss = function (baseQTObj, e) {
+        if (baseQTObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass && baseQTObj.quickTBarObj.toolbarObj.cssClass !== e.cssClass)) {
+                baseQTObj.quickTBarObj.toolbarObj.setProperties({ cssClass: (baseQTObj.quickTBarObj.toolbarObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                baseQTObj.quickTBarObj.toolbarObj.setProperties({ cssClass: (baseQTObj.quickTBarObj.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
+    QuickToolbar.prototype.setCssClass = function (e) {
+        var baseQuickToolbarObj = [
+            this.inlineQTBar, this.imageQTBar, this.linkQTBar, this.textQTBar, this.tableQTBar
+        ];
+        for (var i = 0; i < baseQuickToolbarObj.length; i++) {
+            this.updateCss(baseQuickToolbarObj[i], e);
+        }
+    };
     QuickToolbar.prototype.setRtl = function (args) {
         if (this.inlineQTBar) {
             this.inlineQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
@@ -378,7 +398,7 @@ var QuickToolbar = /** @class */ (function () {
             this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
         }
         if (this.linkQTBar) {
-            this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
+            this.linkQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
         }
     };
     /**
@@ -407,6 +427,7 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
         this.parent.off(events.keyDown, this.onKeyDown);
         this.parent.off(events.rtlMode, this.setRtl);
+        this.parent.off(events.bindCssClass, this.setCssClass);
     };
     /**
      * Called internally if any of the property value changed.

package/src/rich-text-editor/actions/toolbar.d.ts

@@ -161,6 +161,7 @@ export declare class Toolbar {
     protected unWireEvents(): void;
     protected addEventListener(): void;
     protected removeEventListener(): void;
+    private setCssClass;
     private onRefresh;
     /**
      * Called internally if any of the property value changed.

package/src/rich-text-editor/actions/toolbar.js

@@ -593,6 +593,7 @@ var Toolbar = /** @class */ (function () {
         this.parent.on(events.focusChange, this.focusChangeHandler, this);
         this.parent.on(events.mouseDown, this.mouseDownHandler, this);
         this.parent.on(events.sourceCodeMouseDown, this.mouseDownHandler, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         if (!this.parent.inlineMode.enable && !isIDevice()) {
             this.parent.on(events.toolbarClick, this.toolbarClickHandler, this);
         }
@@ -616,10 +617,21 @@ var Toolbar = /** @class */ (function () {
         this.parent.off(events.focusChange, this.focusChangeHandler);
         this.parent.off(events.mouseDown, this.mouseDownHandler);
         this.parent.off(events.sourceCodeMouseDown, this.mouseDownHandler);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         if (!this.parent.inlineMode.enable && !isIDevice()) {
             this.parent.off(events.toolbarClick, this.toolbarClickHandler);
         }
     };
+    Toolbar.prototype.setCssClass = function (e) {
+        if (this.toolbarObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
     Toolbar.prototype.onRefresh = function () {
         this.refreshToolbarOverflow();
         this.parent.setContentHeight('', true);

package/src/rich-text-editor/base/constant.d.ts

@@ -601,3 +601,8 @@ export declare const showTableDialog: string;
 
  */
 export declare const closeTableDialog: string;
+/**
+ * @hidden
+
+ */
+export declare const bindCssClass: string;

package/src/rich-text-editor/base/constant.js

@@ -601,3 +601,8 @@ export var showTableDialog = 'showTableDialog';
 
  */
 export var closeTableDialog = 'closeTableDialog';
+/**
+ * @hidden
+
+ */
+export var bindCssClass = 'closeTableDialog';

package/src/rich-text-editor/base/interface.d.ts

@@ -80,6 +80,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     enabled?: boolean;
     readonly?: boolean;
     placeholder?: string;
+    cssClass?: string;
     valueContainer?: HTMLTextAreaElement;
     editorMode?: EditorMode;
     enableHtmlEncode?: boolean;
@@ -205,6 +206,13 @@ export interface NotifyArgs {
     touchData?: ITouchData;
     allowedStylePropertiesArray?: string[];
 }
+/**
+ * Provides information about the current and previous cssClass property .
+ */
+export interface ICssClassArgs {
+    cssClass?: string;
+    oldCssClass?: string;
+}
 /**
 
  */
@@ -458,6 +466,7 @@ export interface IToolbarOptions {
     rteToolbarObj: BaseToolbar;
     enablePersistence: boolean;
     overflowMode?: OverflowMode;
+    cssClass?: string;
 }
 /**
 
@@ -476,6 +485,7 @@ export interface IToolbarRenderOptions {
     items?: (string | IToolbarItems)[];
     mode?: OverflowMode;
     container?: string;
+    cssClass?: string;
 }
 /**
 
@@ -645,6 +655,7 @@ export interface IQuickToolbarOptions {
     mode: OverflowMode;
     renderType: RenderType;
     toolbarItems: (string | IToolbarItems)[];
+    cssClass: string;
 }
 /**
  * Provides information about a BeforeQuickToolbarOpen event.

package/src/rich-text-editor/base/rich-text-editor.js

@@ -450,6 +450,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         // eslint-disable-next-line
         (!this.enabled) ? this.unWireEvents() : this.eventInitializer();
+        this.notify(events.bindCssClass, { cssClass: this.cssClass });
         this.renderComplete();
     };
     /**
@@ -1032,6 +1033,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 case 'cssClass':
                     this.element.classList.remove(oldProp[prop]);
                     this.setCssClass(newProp[prop]);
+                    this.notify(events.bindCssClass, { cssClass: newProp[prop], oldCssClass: oldProp[prop] });
                     break;
                 case 'enabled':
                     this.setEnable();

package/src/rich-text-editor/renderer/content-renderer.js

@@ -66,7 +66,8 @@ var ContentRender = /** @class */ (function () {
      * @returns {string} - specifies the string element.
      */
     ContentRender.prototype.getText = function () {
-        return this.getEditPanel().innerText;
+        var textString = this.getEditPanel().innerText;
+        return textString === '\n' ? '' : textString;
     };
     /**
      * Set the content div element of RichTextEditor

package/src/rich-text-editor/renderer/image-module.d.ts

@@ -14,6 +14,9 @@ export declare class Image {
     private inputUrl;
     private captionEle;
     private checkBoxObj;
+    private widthNum;
+    private heightNum;
+    private browseButton;
     private uploadUrl;
     private contentModule;
     private rendererFactory;
@@ -37,6 +40,8 @@ export declare class Image {
     private constructor();
     protected addEventListener(): void;
     protected removeEventListener(): void;
+    private updateCss;
+    private setCssClass;
     private onIframeMouseDown;
     private afterRender;
     private undoStack;

package/src/rich-text-editor/renderer/image-module.js

@@ -49,6 +49,7 @@ var Image = /** @class */ (function () {
         this.parent.on(events.initialEnd, this.afterRender, this);
         this.parent.on(events.dynamicModule, this.afterRender, this);
         this.parent.on(events.paste, this.imagePaste, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
     };
     Image.prototype.removeEventListener = function () {
@@ -75,6 +76,7 @@ var Image = /** @class */ (function () {
         this.parent.off(events.initialEnd, this.afterRender);
         this.parent.off(events.dynamicModule, this.afterRender);
         this.parent.off(events.paste, this.imagePaste);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.removeEventListener);
         var dropElement = this.parent.iframeSettings.enable ? this.parent.inputElement.ownerDocument
             : this.parent.inputElement;
@@ -92,6 +94,32 @@ var Image = /** @class */ (function () {
             }
         }
     };
+    Image.prototype.updateCss = function (currentObj, e) {
+        if (currentObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
+    Image.prototype.setCssClass = function (e) {
+        if (this.popupObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                addClass([this.popupObj.element], e.cssClass);
+            }
+            else {
+                removeClass([this.popupObj.element], e.oldCssClass);
+                addClass([this.popupObj.element], e.cssClass);
+            }
+        }
+        this.updateCss(this.checkBoxObj, e);
+        this.updateCss(this.widthNum, e);
+        this.updateCss(this.heightNum, e);
+        this.updateCss(this.uploadObj, e);
+        this.updateCss(this.dialogObj, e);
+    };
     Image.prototype.onIframeMouseDown = function () {
         if (this.dialogObj) {
             this.dialogObj.hide({ returnValue: true });
@@ -695,6 +723,7 @@ var Image = /** @class */ (function () {
     };
     Image.prototype.showDialog = function () {
         this.openDialog(false);
+        this.setCssClass({ cssClass: this.parent.cssClass });
     };
     Image.prototype.closeDialog = function () {
         if (this.dialogObj) {
@@ -914,7 +943,8 @@ var Image = /** @class */ (function () {
             var inputLink = linkWrap.querySelector('.e-img-link');
             var linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');
             this.checkBoxObj = new CheckBox({
-                label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, change: function (e) {
+                label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass,
+                change: function (e) {
                     if (e.checked) {
                         target_1 = '_blank';
                     }
@@ -949,6 +979,9 @@ var Image = /** @class */ (function () {
                         }
                     }]
             });
+            if (!isNOU(this.parent.cssClass)) {
+                this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
+            }
             if (!isNullOrUndefined(inputDetails)) {
                 inputLink.value = inputDetails.url;
                 // eslint-disable-next-line
@@ -994,6 +1027,9 @@ var Image = /** @class */ (function () {
                         }
                     }]
             });
+            if (!isNOU(this.parent.cssClass)) {
+                this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
+            }
             this.dialogObj.element.style.maxHeight = 'inherit';
             this.dialogObj.content.querySelector('input').focus();
         }
@@ -1214,6 +1250,9 @@ var Image = /** @class */ (function () {
                         }
                     }]
             });
+            if (!isNOU(this.parent.cssClass)) {
+                this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
+            }
             this.dialogObj.element.style.maxHeight = 'inherit';
             this.dialogObj.content.querySelector('input').focus();
         }
@@ -1491,24 +1530,26 @@ var Image = /** @class */ (function () {
             + ' /></div>';
         var contentElem = parseHtml(content);
         imgSizeWrap.appendChild(contentElem);
-        var widthNum = new TextBox({
+        this.widthNum = new TextBox({
             value: formatUnit(widthVal),
             enableRtl: this.parent.enableRtl,
+            cssClass: this.parent.cssClass,
             input: function (e) {
                 _this.inputWidthValue = formatUnit(_this.inputValue(e.value));
             }
         });
-        widthNum.createElement = this.parent.createElement;
-        widthNum.appendTo(imgSizeWrap.querySelector('#imgwidth'));
-        var heightNum = new TextBox({
+        this.widthNum.createElement = this.parent.createElement;
+        this.widthNum.appendTo(imgSizeWrap.querySelector('#imgwidth'));
+        this.heightNum = new TextBox({
             value: formatUnit(heightVal),
             enableRtl: this.parent.enableRtl,
+            cssClass: this.parent.cssClass,
             input: function (e) {
                 _this.inputHeightValue = formatUnit(_this.inputValue(e.value));
             }
         });
-        heightNum.createElement = this.parent.createElement;
-        heightNum.appendTo(imgSizeWrap.querySelector('#imgheight'));
+        this.heightNum.createElement = this.parent.createElement;
+        this.heightNum.appendTo(imgSizeWrap.querySelector('#imgheight'));
         return imgSizeWrap;
     };
     Image.prototype.inputValue = function (value) {
@@ -1588,10 +1629,10 @@ var Image = /** @class */ (function () {
         span.appendChild(btnEle);
         uploadParentEle.appendChild(span);
         var browserMsg = this.i10n.getConstant('browse');
-        var button = new Button({ content: browserMsg, enableRtl: this.parent.enableRtl });
-        button.isStringTemplate = true;
-        button.createElement = this.parent.createElement;
-        button.appendTo(btnEle);
+        this.browseButton = new Button({ content: browserMsg, enableRtl: this.parent.enableRtl });
+        this.browseButton.isStringTemplate = true;
+        this.browseButton.createElement = this.parent.createElement;
+        this.browseButton.appendTo(btnEle);
         var btnClick = (Browser.isDevice) ? span : btnEle;
         EventHandler.add(btnClick, 'click', this.fileSelect, this);
         var uploadEle = this.parent.createElement('input', {
@@ -1605,7 +1646,7 @@ var Image = /** @class */ (function () {
         var beforeUploadArgs;
         this.uploadObj = new Uploader({
             asyncSettings: { saveUrl: this.parent.insertImageSettings.saveUrl, removeUrl: this.parent.insertImageSettings.removeUrl },
-            dropArea: span, multiple: false, enableRtl: this.parent.enableRtl,
+            dropArea: span, multiple: false, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass,
             allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
             selected: function (e) {
                 proxy.isImgUploaded = true;
@@ -1986,6 +2027,9 @@ var Image = /** @class */ (function () {
         this.popupObj.element.style.display = 'none';
         addClass([this.popupObj.element], classes.CLS_POPUP_OPEN);
         addClass([this.popupObj.element], classes.CLS_RTE_UPLOAD_POPUP);
+        if (!isNOU(this.parent.cssClass)) {
+            addClass([this.popupObj.element], this.parent.cssClass);
+        }
         var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
         var timeOut = dragEvent.dataTransfer.files[0].size > 1000000 ? 300 : 100;
         setTimeout(function () {
@@ -1998,7 +2042,7 @@ var Image = /** @class */ (function () {
                 saveUrl: this.parent.insertImageSettings.saveUrl,
                 removeUrl: this.parent.insertImageSettings.removeUrl
             },
-            cssClass: classes.CLS_RTE_DIALOG_UPLOAD,
+            cssClass: classes.CLS_RTE_DIALOG_UPLOAD + ' ' + this.parent.cssClass,
             dropArea: this.parent.element,
             allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
             removing: function () {

package/src/rich-text-editor/renderer/link-module.d.ts

@@ -19,6 +19,8 @@ export declare class Link {
     private onToolbarAction;
     protected removeEventListener(): void;
     private onIframeMouseDown;
+    private updateCss;
+    private setCssClass;
     private showLinkQuickToolbar;
     private hideLinkQuickToolbar;
     private editAreaClickHandler;

package/src/rich-text-editor/renderer/link-module.js

@@ -35,6 +35,7 @@ var Link = /** @class */ (function () {
         this.parent.on(events.editLink, this.editLink, this);
         this.parent.on(events.openLink, this.openLink, this);
         this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
     };
     Link.prototype.onToolbarAction = function (args) {
@@ -67,6 +68,7 @@ var Link = /** @class */ (function () {
         this.parent.off(events.editLink, this.editLink);
         this.parent.off(events.openLink, this.openLink);
         this.parent.off(events.editAreaClick, this.editAreaClickHandler);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
     };
     Link.prototype.onIframeMouseDown = function () {
@@ -74,6 +76,20 @@ var Link = /** @class */ (function () {
             this.dialogObj.hide({ returnValue: true });
         }
     };
+    Link.prototype.updateCss = function (currentObj, e) {
+        if (currentObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
+    Link.prototype.setCssClass = function (e) {
+        this.updateCss(this.checkBoxObj, e);
+        this.updateCss(this.dialogObj, e);
+    };
     Link.prototype.showLinkQuickToolbar = function (e) {
         if (!isNullOrUndefined(e.args) && e.args.action !== 'enter' &&
             e.args.action !== 'space') {
@@ -202,6 +218,7 @@ var Link = /** @class */ (function () {
     };
     Link.prototype.showDialog = function () {
         this.openDialog(false);
+        this.setCssClass({ cssClass: this.parent.cssClass });
     };
     Link.prototype.closeDialog = function () {
         if (this.dialogObj) {
@@ -257,7 +274,7 @@ var Link = /** @class */ (function () {
         var linkText = linkContent.querySelector('.e-rte-linkText');
         var linkTitle = linkContent.querySelector('.e-rte-linkTitle');
         var linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');
-        this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl });
+        this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass });
         this.checkBoxObj.isStringTemplate = true;
         this.checkBoxObj.createElement = this.parent.createElement;
         this.checkBoxObj.appendTo(linkTarget);
@@ -270,7 +287,7 @@ var Link = /** @class */ (function () {
         var dialogModel = {
             header: this.i10n.getConstant('linkHeader'),
             content: linkContent,
-            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' : '310px', height: 'inherit',

package/src/rich-text-editor/renderer/table-module.d.ts

@@ -11,6 +11,7 @@ export declare class Table {
     private tblHeader;
     popupObj: Popup;
     editdlgObj: Dialog;
+    private createTableButton;
     private contentModule;
     private rendererFactory;
     private quickToolObj;
@@ -23,6 +24,9 @@ export declare class Table {
     private columnEle;
     private rowTextBox;
     private columnTextBox;
+    private tableWidthNum;
+    private tableCellPadding;
+    private tableCellSpacing;
     private rowEle;
     private l10n;
     private moveEle;
@@ -31,6 +35,8 @@ export declare class Table {
     private constructor();
     protected addEventListener(): void;
     protected removeEventListener(): void;
+    private updateCss;
+    private setCssClass;
     private selectionTable;
     private afterRender;
     private dropdownSelect;

package/src/rich-text-editor/renderer/table-module.js

@@ -39,6 +39,7 @@ var Table = /** @class */ (function () {
         this.parent.on(events.dropDownSelect, this.dropdownSelect, this);
         this.parent.on(events.keyDown, this.keyDown, this);
         this.parent.on(events.mouseUp, this.selectionTable, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
     };
     Table.prototype.removeEventListener = function () {
@@ -59,8 +60,38 @@ var Table = /** @class */ (function () {
         this.parent.off(events.tableColorPickerChanged, this.setBGColor);
         this.parent.off(events.keyDown, this.keyDown);
         this.parent.off(events.mouseUp, this.selectionTable);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
     };
+    Table.prototype.updateCss = function (currentObj, e) {
+        if (currentObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
+    Table.prototype.setCssClass = function (e) {
+        if (this.popupObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                addClass([this.popupObj.element], e.cssClass);
+            }
+            else {
+                removeClass([this.popupObj.element], e.oldCssClass);
+                addClass([this.popupObj.element], e.cssClass);
+            }
+        }
+        this.updateCss(this.createTableButton, e);
+        this.updateCss(this.editdlgObj, e);
+        var numericTextBoxObj = [
+            this.columnTextBox, this.rowTextBox, this.tableWidthNum, this.tableCellPadding, this.tableCellSpacing
+        ];
+        for (var i = 0; i < numericTextBoxObj.length; i++) {
+            this.updateCss(numericTextBoxObj[i], e);
+        }
+    };
     Table.prototype.selectionTable = function (e) {
         var target = e.args.target;
         if (Browser.info.name === 'mozilla' && !isNOU(closest(target, 'table')) && closest(target, 'table').tagName === 'TABLE') {
@@ -193,6 +224,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.showDialog = function () {
         this.openDialog(false);
+        this.setCssClass({ cssClass: this.parent.cssClass });
     };
     Table.prototype.closeDialog = function () {
         if (this.editdlgObj) {
@@ -914,12 +946,12 @@ var Table = /** @class */ (function () {
             this.parent.getToolbarElement().querySelector('.e-expended-nav').setAttribute('tabindex', '1');
         }
         this.dlgDiv.appendChild(btnEle);
-        var button = new Button({
-            iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat',
+        this.createTableButton = new Button({
+            iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat' + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
-        button.isStringTemplate = true;
-        button.appendTo(btnEle);
+        this.createTableButton.isStringTemplate = true;
+        this.createTableButton.appendTo(btnEle);
         EventHandler.add(btnEle, 'click', this.insertTableDialog, { self: this, args: args.args, selection: args.selection });
         this.parent.getToolbar().appendChild(this.dlgDiv);
         var target = args.args.originalEvent.target;
@@ -942,6 +974,9 @@ var Table = /** @class */ (function () {
             }
         });
         addClass([this.popupObj.element], 'e-popup-open');
+        if (!isNOU(this.parent.cssClass)) {
+            addClass([this.popupObj.element], this.parent.cssClass);
+        }
         this.popupObj.refreshPosition(target);
     };
     Table.prototype.docClick = function (e) {
@@ -1014,7 +1049,8 @@ var Table = /** @class */ (function () {
                         _this.cancelDialog(e);
                     },
                     buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
-                }]
+                }],
+            cssClass: this.parent.cssClass
         });
         this.editdlgObj.element.style.maxHeight = 'none';
         this.editdlgObj.content.querySelector('input').focus();
@@ -1045,6 +1081,9 @@ var Table = /** @class */ (function () {
                     buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
                 }]
         });
+        if (!isNOU(proxy.parent.cssClass)) {
+            proxy.editdlgObj.setProperties({ cssClass: proxy.parent.cssClass });
+        }
         proxy.editdlgObj.element.style.maxHeight = 'none';
         proxy.editdlgObj.content.querySelector('input').focus();
     };
@@ -1064,7 +1103,8 @@ var Table = /** @class */ (function () {
             placeholder: tableColumn,
             floatLabelType: 'Auto',
             max: 50,
-            enableRtl: this.parent.enableRtl, locale: this.parent.locale
+            enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+            cssClass: this.parent.cssClass
         });
         this.columnTextBox.isStringTemplate = true;
         this.columnTextBox.appendTo(tableWrap.querySelector('#tableColumn'));
@@ -1075,7 +1115,8 @@ var Table = /** @class */ (function () {
             placeholder: tableRow,
             floatLabelType: 'Auto',
             max: 50,
-            enableRtl: this.parent.enableRtl, locale: this.parent.locale
+            enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+            cssClass: this.parent.cssClass
         });
         this.rowTextBox.isStringTemplate = true;
         this.rowTextBox.appendTo(tableWrap.querySelector('#tableRow'));
@@ -1104,7 +1145,7 @@ var Table = /** @class */ (function () {
         var header = this.l10n.getConstant('tabledialogHeader');
         var dialogModel = {
             header: header,
-            cssClass: classes.CLS_RTE_ELEMENTS,
+            cssClass: classes.CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'initial',
@@ -1194,7 +1235,7 @@ var Table = /** @class */ (function () {
             + ' </div><div class="e-rte-field"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing" /></div>';
         var contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
-        var widthNum = new NumericTextBox({
+        this.tableWidthNum = new NumericTextBox({
             format: 'n0',
             min: 0,
             value: widthVal,
@@ -1202,9 +1243,9 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
-        widthNum.isStringTemplate = true;
-        widthNum.appendTo(tableWrap.querySelector('#tableWidth'));
-        var padding = new NumericTextBox({
+        this.tableWidthNum.isStringTemplate = true;
+        this.tableWidthNum.appendTo(tableWrap.querySelector('#tableWidth'));
+        this.tableCellPadding = new NumericTextBox({
             format: 'n0',
             min: 0,
             // eslint-disable-next-line
@@ -1213,9 +1254,9 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
-        padding.isStringTemplate = true;
-        padding.appendTo(tableWrap.querySelector('#cellPadding'));
-        var spacing = new NumericTextBox({
+        this.tableCellPadding.isStringTemplate = true;
+        this.tableCellPadding.appendTo(tableWrap.querySelector('#cellPadding'));
+        this.tableCellSpacing = new NumericTextBox({
             format: 'n0',
             min: 0,
             // eslint-disable-next-line
@@ -1224,8 +1265,8 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
-        spacing.isStringTemplate = true;
-        spacing.appendTo(tableWrap.querySelector('#cellSpacing'));
+        this.tableCellSpacing.isStringTemplate = true;
+        this.tableCellSpacing.appendTo(tableWrap.querySelector('#cellSpacing'));
         return tableWrap;
     };
     /**

package/src/rich-text-editor/renderer/toolbar-renderer.js

@@ -115,7 +115,8 @@ var ToolbarRenderer = /** @class */ (function () {
             created: this.toolbarCreated.bind(this),
             clicked: this.toolbarClicked.bind(this),
             enablePersistence: args.enablePersistence,
-            enableRtl: args.enableRtl
+            enableRtl: args.enableRtl,
+            cssClass: args.cssClass
         });
         args.rteToolbarObj.toolbarObj.isStringTemplate = true;
         args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;