@syncfusion/ej2-richtexteditor 20.1.60 → 20.2.38

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

@@ -105,7 +105,8 @@ var Toolbar = /** @class */ (function () {
             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']);
@@ -222,7 +223,8 @@ var Toolbar = /** @class */ (function () {
                 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) {

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

@@ -541,3 +541,8 @@ export declare const CLS_RTE_FIXED_TB_EXPAND: string;
 
  */
 export declare const CLS_RTE_TB_ENABLED: string;
+/**
+ * @hidden
+
+ */
+export declare const CLS_RTE_RES_WEST: string;

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

@@ -541,3 +541,8 @@ export var CLS_RTE_FIXED_TB_EXPAND = 'e-rte-fixed-tb-expand';
 
  */
 export var CLS_RTE_TB_ENABLED = 'e-rte-toolbar-enabled';
+/**
+ * @hidden
+
+ */
+export var CLS_RTE_RES_WEST = 'e-south-west';

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

@@ -519,11 +519,41 @@ export declare const imageRemoving: string;
 /**
  * @hidden
 
+ */
+export declare const mediaSelected: string;
+/**
+ * @hidden
+
+ */
+export declare const mediaUploading: string;
+/**
+ * @hidden
+
+ */
+export declare const mediaUploadSuccess: string;
+/**
+ * @hidden
+
+ */
+export declare const mediaUploadFailed: string;
+/**
+ * @hidden
+
+ */
+export declare const mediaRemoving: string;
+/**
+ * @hidden
+
  */
 export declare const afterImageDelete: string;
 /**
  * @hidden
 
+ */
+export declare const afterMediaDelete: string;
+/**
+ * @hidden
+
  */
 export declare const drop: string;
 /**
@@ -539,6 +569,11 @@ export declare const beforeImageUpload: string;
 /**
  * @hidden
 
+ */
+export declare const beforeMediaUpload: string;
+/**
+ * @hidden
+
  */
 export declare const resizeInitialized: string;
 /**
@@ -594,6 +629,11 @@ export declare const closeImageDialog: string;
 /**
  * @hidden
 
+ */
+export declare const closeAudioDialog: string;
+/**
+ * @hidden
+
  */
 export declare const showTableDialog: string;
 /**

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

@@ -519,11 +519,41 @@ export var imageRemoving = 'imageRemoving';
 /**
  * @hidden
 
+ */
+export var mediaSelected = 'mediaSelected';
+/**
+ * @hidden
+
+ */
+export var mediaUploading = 'mediaUploading';
+/**
+ * @hidden
+
+ */
+export var mediaUploadSuccess = 'mediaUploadSuccess';
+/**
+ * @hidden
+
+ */
+export var mediaUploadFailed = 'mediaUploadFailed';
+/**
+ * @hidden
+
+ */
+export var mediaRemoving = 'mediaRemoving';
+/**
+ * @hidden
+
  */
 export var afterImageDelete = 'afterImageDelete';
 /**
  * @hidden
 
+ */
+export var afterMediaDelete = 'afterMediaaDelete';
+/**
+ * @hidden
+
  */
 export var drop = 'drop';
 /**
@@ -539,6 +569,11 @@ export var beforeImageUpload = 'beforeImageUpload';
 /**
  * @hidden
 
+ */
+export var beforeMediaUpload = 'beforeMediaUpload';
+/**
+ * @hidden
+
  */
 export var resizeInitialized = 'resizeInitialized';
 /**
@@ -594,6 +629,11 @@ export var closeImageDialog = 'closeImageDialog';
 /**
  * @hidden
 
+ */
+export var closeAudioDialog = 'closeAudioDialog';
+/**
+ * @hidden
+
  */
 export var showTableDialog = 'showTableDialog';
 /**
@@ -610,4 +650,4 @@ export var bindCssClass = 'closeTableDialog';
  * @hidden
 
  */
-export var blockInlineEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\ndetails:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\nh2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, hr:empty, li:empty, main:empty, nav:empty,\nnoscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty,\na:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\ncanvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\nins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\nq: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,\ntemplate:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";
+export var blockInlineEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, hr:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty,\n a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\n canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\n ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\n 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,\n template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";

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

@@ -148,6 +148,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     enableXhtml?: boolean;
     enableHtmlSanitizer?: boolean;
     getInsertImgMaxWidth?(): string | number;
+    getInsertVidMaxWidth?(): string | number;
     getSelection(): string;
     currentTarget: HTMLElement;
 }
@@ -256,6 +257,7 @@ export interface IColorPickerModel extends ColorPickerModel {
     subCommand?: string;
     target?: string;
     iconCss?: string;
+    cssClass?: string;
 }
 /**
  * @hidden

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

@@ -979,6 +979,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
 
      */
     setEnable(): void;
+    private initializeValue;
     /**
      * For internal use only - Initialize the event handler;
      *

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

@@ -70,26 +70,7 @@ import { DialogRenderer } from '../renderer/dialog-renderer';
 var RichTextEditor = /** @class */ (function (_super) {
     __extends(RichTextEditor, _super);
     function RichTextEditor(options, element) {
-        var _this = _super.call(this, options, element) || this;
-        _this.defaultResetValue = null;
-        _this.isResizeInitialized = false;
-        /**
-         * @hidden
-
-         */
-        _this.isFocusOut = false;
-        /**
-         * @hidden
-
-         */
-        _this.isRTE = false;
-        /**
-         * @hidden
-
-         */
-        _this.isBlur = true;
-        _this.needsID = true;
-        return _this;
+        return _super.call(this, options, element) || this;
     }
     /**
      * To provide the array of modules needed for component rendering
@@ -170,6 +151,14 @@ var RichTextEditor = /** @class */ (function (_super) {
         // eslint-disable-next-line
         (this.enabled) ? this.eventInitializer() : this.unWireEvents();
     };
+    RichTextEditor.prototype.initializeValue = function () {
+        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;
      *
@@ -178,6 +167,7 @@ var RichTextEditor = /** @class */ (function (_super) {
      * @private
      */
     RichTextEditor.prototype.preRender = function () {
+        this.initializeValue();
         this.onBlurHandler = this.blurHandler.bind(this);
         this.onFocusHandler = this.focusHandler.bind(this);
         this.onResizeHandler = this.resizeHandler.bind(this);
@@ -234,11 +224,18 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         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], classes.CLS_RTE_HIDDEN);
+        if (!isNOU(this.cssClass)) {
+            var currentClassList = this.cssClass.split(' ');
+            for (var i = 0; i < currentClassList.length; i++) {
+                addClass([this.valueContainer], currentClassList[i]);
+            }
+        }
         this.element.appendChild(this.valueContainer);
     };
     /**
@@ -505,8 +502,12 @@ var RichTextEditor = /** @class */ (function (_super) {
         var closestLI = closest(endNode, 'LI');
         if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&
             !range.collapsed && isNOU(endNode.nextElementSibling)) {
-            closestLI.textContent = closestLI.textContent.trim();
-            currentEndOffset = closestLI.textContent.length - 1;
+            for (var i = 0; i < closestLI.childNodes.length; i++) {
+                if (closestLI.childNodes[i].nodeName === "#text" && closestLI.childNodes[i].textContent.trim().length === 0) {
+                    detach(closestLI.childNodes[i]);
+                    i--;
+                }
+            }
             var currentLastElem = closestLI;
             while (currentLastElem.nodeName !== '#text') {
                 currentLastElem = currentLastElem.lastChild;
@@ -877,6 +878,12 @@ var RichTextEditor = /** @class */ (function (_super) {
             for (var i = 0; i < this.originalElement.classList.length; i++) {
                 addClass([this.element], this.originalElement.classList[i]);
             }
+            if (!isNOU(this.cssClass)) {
+                var currentClassList = this.cssClass.split(' ');
+                for (var i = 0; i < currentClassList.length; i++) {
+                    addClass([this.element], currentClassList[i]);
+                }
+            }
             removeClass([this.element], classes.CLS_RTE_HIDDEN);
         }
         else {
@@ -1252,7 +1259,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         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);
                     }
@@ -1502,7 +1509,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.setProperties({ value: this.valueTemplate });
             }
             else {
-                var compiledTemplate = compile(this.valueTemplate)("", this, 'valueTemplate');
+                var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
                 for (var i = 0; i < compiledTemplate.length; i++) {
                     var item = compiledTemplate[i];
                     append([item], this.element);

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

@@ -177,7 +177,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(formatItems, 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 + '">'
                                 + (isNOU(result) ? formatContent : result) +
                                 '</span></span>');
                             dropDown.formatDropDown.dataBind();
@@ -207,7 +207,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             e.tbElements[j].title = name_1;
                             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_1 + '</span></span>');
                             dropDown.fontNameDropDown.dataBind();
                             break;
@@ -223,7 +223,7 @@ export 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;

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

@@ -170,7 +170,7 @@ var Formatter = /** @class */ (function () {
         }
         self.trigger(CONSTANT.actionComplete, events, function (callbackArgs) {
             self.setPlaceHolder();
-            if (callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links' && self.editorMode === 'HTML') {
+            if ((callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links') && self.editorMode === 'HTML') {
                 var args = callbackArgs;
                 if (callbackArgs.requestType === 'Links' && callbackArgs.event &&
                     callbackArgs.event.type === 'keydown' &&

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

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 import { ContentRender } from '../renderer/content-renderer';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getEditValue } from '../base/util';
-var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n            </style>\n        </head>";
+var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n            </style>\n        </head>";
 /**
  * Content module is used to render Rich Text Editor content
  *

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

@@ -255,18 +255,18 @@ var Image = /** @class */ (function () {
         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');
@@ -931,12 +931,12 @@ var Image = /** @class */ (function () {
         }
         this.imagDialog(e);
         if (!isNullOrUndefined(this.dialogObj)) {
-            var linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' });
+            var linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' + ' ' + this.parent.cssClass });
             var linkUrl = this.i10n.getConstant('linkurl');
-            var content = '<div class="e-rte-field">' +
-                '<input type="text" data-role ="none" class="e-input e-img-link" spellcheck="false" placeholder="' + linkUrl + '"/></div>' +
+            var 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>';
             var contentElem = parseHtml(content);
             linkWrap.appendChild(contentElem);
             var linkTarget = linkWrap.querySelector('.e-rte-linkTarget');
@@ -975,9 +975,10 @@ var Image = /** @class */ (function () {
                             _this.insertlink(linkargs_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-link', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-link' + ' ' + this.parent.cssClass, isPrimary: true
                         }
-                    }]
+                    }],
+                cssClass: this.dialogObj.cssClass + ' e-rte-img-link-dialog'
             });
             if (!isNOU(this.parent.cssClass)) {
                 this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
@@ -1000,13 +1001,13 @@ var Image = /** @class */ (function () {
         this.imagDialog(e);
         var altText = this.i10n.getConstant('altText');
         if (!isNullOrUndefined(this.dialogObj)) {
-            var altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' });
+            var altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' + ' ' + this.parent.cssClass });
             var altHeader = this.i10n.getConstant('alternateHeader');
             var linkUpdate = this.i10n.getConstant('dialogUpdate');
             var getAlt = (e.selectNode[0].getAttribute('alt') === null) ? '' :
                 e.selectNode[0].getAttribute('alt');
-            var content = '<div class="e-rte-field">' +
-                '<input type="text" spellcheck="false" value="' + getAlt + '" class="e-input e-img-alt" placeholder="' + altText + '"/>' +
+            var 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>';
             var contentElem = parseHtml(content);
             altWrap.appendChild(contentElem);
@@ -1023,9 +1024,10 @@ var Image = /** @class */ (function () {
                             _this.insertAlt(altArgs_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-alt', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-alt' + ' ' + this.parent.cssClass, isPrimary: true
                         }
-                    }]
+                    }],
+                cssClass: this.dialogObj.cssClass + ' e-rte-img-alt-dialog'
             });
             if (!isNOU(this.parent.cssClass)) {
                 this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
@@ -1189,11 +1191,11 @@ var Image = /** @class */ (function () {
         }
         else {
             this.captionEle = this.parent.createElement('span', {
-                className: classes.CLS_CAPTION + ' ' + classes.CLS_RTE_CAPTION,
+                className: classes.CLS_CAPTION + ' ' + classes.CLS_RTE_CAPTION + ' ' + this.parent.cssClass,
                 attrs: { contenteditable: 'false', draggable: 'false', style: 'width:' + this.parent.insertImageSettings.width }
             });
-            var imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' });
-            var imgInner = this.parent.createElement('span', { className: 'e-img-inner',
+            var imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' + ' ' + this.parent.cssClass });
+            var imgInner = this.parent.createElement('span', { className: 'e-img-inner' + ' ' + this.parent.cssClass,
                 attrs: { contenteditable: 'true' } });
             var parent_1 = e.selectNode[0].parentElement;
             if (parent_1.tagName === 'A') {
@@ -1246,9 +1248,10 @@ var Image = /** @class */ (function () {
                             _this.insertSize(selectObj_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-size', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-size' + ' ' + this.parent.cssClass, isPrimary: true
                         }
-                    }]
+                    }],
+                cssClass: this.dialogObj.cssClass + ' e-rte-img-size-dialog'
             });
             if (!isNOU(this.parent.cssClass)) {
                 this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
@@ -1291,7 +1294,7 @@ var Image = /** @class */ (function () {
             this.dialogObj.hide({ returnValue: true });
             return;
         }
-        var imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog', id: this.rteID + '_image' });
+        var imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_image' });
         this.parent.element.appendChild(imgDialog);
         var imgInsert = this.i10n.getConstant('dialogInsert');
         var imglinkCancel = this.i10n.getConstant('dialogCancel');
@@ -1300,7 +1303,7 @@ var Image = /** @class */ (function () {
         var selectObj = { selfImage: this, selection: e.selection, args: e.args, selectParent: e.selectParent };
         var dialogModel = {
             header: imgHeader,
-            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: 'inherit',
@@ -1308,13 +1311,13 @@ var Image = /** @class */ (function () {
             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: function (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' },
@@ -1337,12 +1340,12 @@ var Image = /** @class */ (function () {
                 _this.dialogObj = null;
             }
         };
-        var dialogContent = this.parent.createElement('div', { className: 'e-img-content' });
+        var 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));
         }
-        var linkHeader = this.parent.createElement('div', { className: 'e-linkheader' });
+        var linkHeader = this.parent.createElement('div', { className: 'e-linkheader' + ' ' + this.parent.cssClass });
         var linkHeaderText = this.i10n.getConstant('imageLinkHeader');
         if (this.parent.editorMode === 'HTML') {
             linkHeader.innerHTML = linkHeaderText;
@@ -1414,7 +1417,8 @@ var Image = /** @class */ (function () {
             }
             /* eslint-enable */
         }
-        if (!(this.parent.iframeSettings.enable && this.parent.currentTarget.nodeName === 'IMG') && e.target.tagName !== 'IMG' && this.imgResizeDiv && !(this.quickToolObj &&
+        if (!(this.parent.iframeSettings.enable && !isNOU(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();
@@ -1444,10 +1448,10 @@ var Image = /** @class */ (function () {
     // eslint-disable-next-line
     Image.prototype.imageUrlPopup = function (e) {
         var _this = this;
-        var imgUrl = this.parent.createElement('div', { className: 'imgUrl' });
+        var imgUrl = this.parent.createElement('div', { className: 'imgUrl' + ' ' + this.parent.cssClass });
         var 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', function () {
@@ -1514,7 +1518,7 @@ var Image = /** @class */ (function () {
         var selectNode = e.selectNode[0];
         var imgHeight = this.i10n.getConstant('imageHeight');
         var imgWidth = this.i10n.getConstant('imageWidth');
-        var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' });
+        var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' + ' ' + this.parent.cssClass });
         var 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();
@@ -1523,12 +1527,12 @@ var Image = /** @class */ (function () {
             this.changedHeightValue : (parseInt(selectNode.getClientRects()[0].height.toString(), 10)).toString();
         this.changedWidthValue = null;
         this.changedHeightValue = null;
-        var 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=' +
+        var 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>';
         var contentElem = parseHtml(content);
@@ -1618,16 +1622,16 @@ var Image = /** @class */ (function () {
             save = e.selection;
             selectParent = e.selectParent;
         }
-        var uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' });
+        var uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' + ' ' + this.parent.cssClass });
         var deviceImgUpMsg = this.i10n.getConstant('imageDeviceUploadMessage');
         var imgUpMsg = this.i10n.getConstant('imageUploadMessage');
-        var span = this.parent.createElement('span', { className: 'e-droptext' });
+        var span = this.parent.createElement('span', { className: 'e-droptext' + ' ' + this.parent.cssClass });
         var 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);
         var 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);
@@ -1639,7 +1643,7 @@ var Image = /** @class */ (function () {
         var btnClick = (Browser.isDevice) ? span : btnEle;
         EventHandler.add(btnClick, 'click', this.fileSelect, this);
         var 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);
         var altText;