@syncfusion/ej2-richtexteditor 20.2.50 → 20.3.47

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

@@ -44,7 +44,7 @@ import { RendererFactory } from '../services/renderer-factory';
 import { RenderType, ToolbarType, DialogType } from './enum';
 import { ExecCommandCallBack } from '../actions/execute-command-callback';
 import { KeyboardEvents } from '../actions/keyboard';
-import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList } from '../models/toolbar-settings';
+import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList } from '../models/toolbar-settings';
 import { FileManagerSettings } from '../models/toolbar-settings';
 import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';
 import { FontColor, BackgroundColor } from '../models/toolbar-settings';
@@ -110,6 +110,14 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.editorMode === 'HTML') {
             modules.push({ member: 'htmlEditor', args: [this, this.serviceLocator] });
             modules.push({ member: 'pasteCleanup', args: [this, this.serviceLocator] });
+            modules.push({
+                member: 'audio',
+                args: [this, this.serviceLocator]
+            });
+            modules.push({
+                member: 'video',
+                args: [this, this.serviceLocator]
+            });
         }
         if (this.fileManagerSettings.enable) {
             modules.push({ member: 'fileManager', args: [this, this.serviceLocator] });
@@ -418,6 +426,64 @@ var RichTextEditor = /** @class */ (function (_super) {
                     }
                     break;
                 }
+                case 'insertAudio': {
+                    var wrapTemp = this.createElement('audio', {
+                        attrs: {
+                            controls: ''
+                        }
+                    });
+                    var temp = this.createElement('source', {
+                        attrs: {
+                            src: value.url,
+                            type: value.url && value.url.split('.').length > 0
+                                ? 'audio/' + value.url.split('.')[value.url.split('.').length - 1] : ''
+                        }
+                    });
+                    wrapTemp.appendChild(temp);
+                    var audioValue = wrapTemp.outerHTML;
+                    if (this.enableHtmlSanitizer) {
+                        audioValue = this.htmlEditorModule.sanitizeHelper(wrapTemp.outerHTML);
+                    }
+                    var url = (audioValue !== '' && (this.createElement('div', {
+                        innerHTML: audioValue
+                    }).firstElementChild.firstElementChild).getAttribute('src')) || null;
+                    url = !isNOU(url) ? url : '';
+                    value.url = url;
+                    break;
+                }
+                case 'insertVideo': {
+                    var wrapTemp = this.createElement('video', {
+                        attrs: {
+                            controls: ''
+                        }
+                    });
+                    var temp = this.createElement('source', {
+                        attrs: {
+                            src: value.url,
+                            type: value.url && value.url.split('.').length > 0
+                                ? 'video/' + value.url.split('.')[value.url.split('.').length - 1] : ''
+                        }
+                    });
+                    wrapTemp.appendChild(temp);
+                    var audioValue = wrapTemp.outerHTML;
+                    if (this.enableHtmlSanitizer) {
+                        audioValue = this.htmlEditorModule.sanitizeHelper(temp.outerHTML);
+                    }
+                    var url = (audioValue !== '' && (this.createElement('div', {
+                        innerHTML: audioValue
+                    }).firstElementChild).getAttribute('src')) || null;
+                    url = !isNOU(url) ? url : '';
+                    value.url = url;
+                    if (isNOU(value.width)) {
+                        value.width = { minWidth: this.insertVideoSettings.minWidth,
+                            maxWidth: this.insertVideoSettings.maxWidth, width: this.insertVideoSettings.width };
+                    }
+                    if (isNOU(value.height)) {
+                        value.height = { minHeight: this.insertVideoSettings.minHeight,
+                            maxHeight: this.insertVideoSettings.maxHeight, height: this.insertVideoSettings.height };
+                    }
+                    break;
+                }
                 case 'createLink': {
                     var tempNode = this.createElement('a', {
                         attrs: {
@@ -478,9 +544,67 @@ var RichTextEditor = /** @class */ (function (_super) {
         // eslint-disable-next-line
         (!this.enabled) ? this.unWireEvents() : this.eventInitializer();
         this.notify(events.bindCssClass, { cssClass: this.cssClass });
+        this.addAudioVideoWrapper();
         this.notify(events.tableclass, {});
         this.renderComplete();
     };
+    /**
+     * addAudioVideoWrapper method
+     *
+     * @returns {void}
+     * @hidden
+
+     */
+    RichTextEditor.prototype.addAudioVideoWrapper = function () {
+        var _this = this;
+        var insertElem;
+        var audioElm = this.element.querySelectorAll('audio');
+        for (var i = 0; i < audioElm.length; i++) {
+            if (!audioElm[i].classList.contains('e-rte-audio')) {
+                audioElm[i].classList.add('e-rte-audio');
+                audioElm[i].classList.add(classes.CLS_AUDIOINLINE);
+            }
+            if (!audioElm[i].parentElement.classList.contains(classes.CLS_CLICKELEM) && !audioElm[i].parentElement.classList.contains(classes.CLS_AUDIOWRAP)) {
+                var audioWrapElem = this.createElement('span', { className: classes.CLS_AUDIOWRAP });
+                audioWrapElem.contentEditable = 'false';
+                var audioInnerWrapElem = this.createElement('span', { className: classes.CLS_CLICKELEM });
+                audioWrapElem.appendChild(audioInnerWrapElem);
+                audioElm[i].parentNode.insertBefore(audioWrapElem, audioElm[i].nextSibling);
+                audioInnerWrapElem.appendChild(audioElm[i]);
+                if (audioWrapElem.nextElementSibling === null) {
+                    insertElem = this.createElement('br');
+                    audioWrapElem.parentNode.insertBefore(insertElem, audioWrapElem.nextSibling);
+                }
+            }
+        }
+        var videoElm = this.element.querySelectorAll('video');
+        for (var i = 0; i < videoElm.length; i++) {
+            if (!videoElm[i].classList.contains('e-rte-video')) {
+                videoElm[i].classList.add('e-rte-video');
+                videoElm[i].classList.add(classes.CLS_VIDEOINLINE);
+            }
+            if (!videoElm[i].parentElement.classList.contains(classes.CLS_CLICKELEM) && !videoElm[i].parentElement.classList.contains(classes.CLS_VIDEOWRAP)) {
+                var videoWrapElem = this.createElement('span', { className: classes.CLS_VIDEOWRAP });
+                videoWrapElem.contentEditable = 'false';
+                videoElm[i].parentNode.insertBefore(videoWrapElem, videoElm[i].nextSibling);
+                videoWrapElem.appendChild(videoElm[i]);
+                if (videoWrapElem.nextElementSibling === null) {
+                    insertElem = this.createElement('br');
+                    videoWrapElem.parentNode.insertBefore(insertElem, videoWrapElem.nextSibling);
+                }
+            }
+            if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                videoElm[i].addEventListener('play', function (args) {
+                    _this.notify(events.mouseDown, { args: args });
+                    _this.notify('editAreaClick', { args: args });
+                });
+                videoElm[i].addEventListener('pause', function (args) {
+                    _this.notify(events.mouseDown, { args: args });
+                    _this.notify('editAreaClick', { args: args });
+                });
+            }
+        }
+    };
     /**
      * For internal use only - Initialize the event handler
      *
@@ -505,7 +629,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&
             !range.collapsed && isNOU(endNode.nextElementSibling)) {
             for (var i = 0; i < closestLI.childNodes.length; i++) {
-                if (closestLI.childNodes[i].nodeName === "#text" && closestLI.childNodes[i].textContent.trim().length === 0) {
+                if (closestLI.childNodes[i].nodeName === '#text' && closestLI.childNodes[i].textContent.trim().length === 0) {
                     detach(closestLI.childNodes[i]);
                     i--;
                 }
@@ -603,9 +727,9 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.autoResize();
     };
     RichTextEditor.prototype.keyUp = function (e) {
-        if (this.editorMode === "HTML") {
+        if (this.editorMode === 'HTML') {
             var range = this.getRange();
-            if (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer.nodeName === '#text' &&
+            if (Browser.userAgent.indexOf('Firefox') !== -1 && range.startContainer.nodeName === '#text' &&
                 range.startContainer.parentElement === this.inputElement && this.enterKey !== 'BR') {
                 var range_1 = this.getRange();
                 var tempElem = this.createElement(this.enterKey);
@@ -615,6 +739,9 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
         this.notify(events.keyUp, { member: 'keyup', args: e });
+        if (e.keyCode == 39 || e.keyCode == 37) {
+            this.notify(events.tableModulekeyUp, { member: 'tableModulekeyUp', args: e });
+        }
         if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||
             this.inputElement.innerHTML === '<br>')) {
             this.inputElement.innerHTML = getEditValue(getDefaultValue(this), this);
@@ -698,7 +825,11 @@ var RichTextEditor = /** @class */ (function (_super) {
                 clientX: touch.clientX, clientY: touch.clientY }
         });
         if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
-            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0))) {
+            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0)) || (e.target && (e.target.nodeName === 'VIDEO'
+            || e.target.querySelectorAll('.' + classes.CLS_VIDEOWRAP).length > 0) || (e.target && e.target.nodeName !== 'BR' &&
+            (e.target.classList.contains(classes.CLS_AUDIOWRAP) ||
+                e.target.classList.contains(classes.CLS_CLICKELEM) ||
+                e.target.classList.contains(classes.CLS_VID_CLICK_ELEM))))) {
             this.notify(events.toolbarRefresh, { args: e });
         }
         this.triggerEditArea(e);
@@ -1062,6 +1193,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                     if (this.showCharCount) {
                         this.countModule.refresh();
                     }
+                    this.addAudioVideoWrapper();
                     break;
                 }
                 case 'valueTemplate':
@@ -1276,7 +1408,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                     });
                 }
                 this.placeHolderWrapper.innerHTML = this.placeholder;
-                if (this.inputElement.textContent.length === 0 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
+                if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
                     ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&
                         this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
                     this.placeHolderWrapper.style.display = 'block';
@@ -1560,6 +1692,25 @@ var RichTextEditor = /** @class */ (function (_super) {
             parseFloat(eleStyle.marginLeft.split('px')[0]) + parseFloat(eleStyle.marginRight.split('px')[0]));
         return isNOU(maxWidth) ? editEleMaxWidth : maxWidth;
     };
+    /**
+     * Video max width calculation method
+     *
+     * @returns {void}
+     * @hidden
+
+     */
+    RichTextEditor.prototype.getInsertVidMaxWidth = function () {
+        var maxWidth = this.insertVideoSettings.maxWidth;
+        // eslint-disable-next-line
+        var vidPadding = 12;
+        var vidResizeBorder = 2;
+        var editEle = this.contentModule.getEditPanel();
+        var eleStyle = window.getComputedStyle(editEle);
+        var editEleMaxWidth = editEle.offsetWidth - (vidPadding + vidResizeBorder +
+            parseFloat(eleStyle.paddingLeft.split('px')[0]) + parseFloat(eleStyle.paddingRight.split('px')[0]) +
+            parseFloat(eleStyle.marginLeft.split('px')[0]) + parseFloat(eleStyle.marginRight.split('px')[0]));
+        return isNOU(maxWidth) ? editEleMaxWidth : maxWidth;
+    };
     /**
      * setContentHeight method
      *
@@ -1688,6 +1839,12 @@ var RichTextEditor = /** @class */ (function (_super) {
         else if (type === DialogType.InsertImage) {
             this.notify(events.showImageDialog, {});
         }
+        else if (type === DialogType.InsertAudio) {
+            this.notify(events.showAudioDialog, {});
+        }
+        else if (type === DialogType.InsertVideo) {
+            this.notify(events.showVideoDialog, {});
+        }
         else if (type === DialogType.InsertTable) {
             this.notify(events.showTableDialog, {});
         }
@@ -1706,6 +1863,12 @@ var RichTextEditor = /** @class */ (function (_super) {
         else if (type === DialogType.InsertImage) {
             this.notify(events.closeImageDialog, {});
         }
+        else if (type === DialogType.InsertAudio) {
+            this.notify(events.closeAudioDialog, {});
+        }
+        else if (type === DialogType.InsertVideo) {
+            this.notify(events.closeVideoDialog, {});
+        }
         else if (type === DialogType.InsertTable) {
             this.notify(events.closeTableDialog, {});
         }
@@ -2225,6 +2388,12 @@ var RichTextEditor = /** @class */ (function (_super) {
     __decorate([
         Complex({}, ImageSettings)
     ], RichTextEditor.prototype, "insertImageSettings", void 0);
+    __decorate([
+        Complex({}, AudioSettings)
+    ], RichTextEditor.prototype, "insertAudioSettings", void 0);
+    __decorate([
+        Complex({}, VideoSettings)
+    ], RichTextEditor.prototype, "insertVideoSettings", void 0);
     __decorate([
         Complex({}, TableSettings)
     ], RichTextEditor.prototype, "tableSettings", void 0);
@@ -2390,6 +2559,27 @@ var RichTextEditor = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], RichTextEditor.prototype, "afterImageDelete", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "fileSelected", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "beforeFileUpload", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "fileUploading", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "fileUploadSuccess", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "fileUploadFailed", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "fileRemoving", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "afterMediaDelete", void 0);
     __decorate([
         Event()
     ], RichTextEditor.prototype, "created", void 0);

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

@@ -37,6 +37,8 @@ var Formatter = /** @class */ (function () {
             && args.item.command !== 'Links'
             && args.item.command !== 'Images'
             && args.item.command !== 'Files'
+            && args.item.command !== 'Audios'
+            && args.item.command !== 'Videos'
             && range
             && !(self.contentModule.getEditPanel().contains(this.getAncestorNode(range.commonAncestorContainer))
                 || self.contentModule.getEditPanel() === range.commonAncestorContainer
@@ -48,7 +50,7 @@ var Formatter = /** @class */ (function () {
             if (args.item.command === 'Links') {
                 currentInsertContentLength = value.text.length === 0 ? value.url.length : value.text.length;
             }
-            if (args.item.command === 'Images' || args.item.command === 'Table' || args.item.command === 'Files') {
+            if (args.item.command === 'Images' || args.item.command === 'Videos' || args.item.command === 'Table' || args.item.command === 'Files') {
                 currentInsertContentLength = 1;
             }
             var currentLength = self.getText().trim().length;
@@ -170,7 +172,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' || callbackArgs.requestType === 'Audios' || callbackArgs.requestType === 'Videos') && self.editorMode === 'HTML') {
                 var args = callbackArgs;
                 if (callbackArgs.requestType === 'Links' && callbackArgs.event &&
                     callbackArgs.event.type === 'keydown' &&
@@ -182,6 +184,9 @@ var Formatter = /** @class */ (function () {
                     elements: args.elements
                 });
             }
+            if (callbackArgs.requestType === 'VideosPlayPause') {
+                self.notify('editAreaClick', { args: event });
+            }
             self.autoResize();
         });
     };

package/src/rich-text-editor/models/default-locale.js

@@ -34,7 +34,19 @@ export var defaultLocale = {
     'editLink': 'Edit Link',
     'removeLink': 'Remove Link',
     'image': 'Insert Image',
+    'audio': 'Insert Audio',
+    'video': 'Insert Video',
     'replace': 'Replace',
+    'numberFormatList': 'Number Format List',
+    'bulletFormatList': 'Bullet Format List',
+    'audioReplace': 'Replace',
+    'videoReplace': 'Replace',
+    'videoAlign': 'Align',
+    'videoDimension': 'Dimension',
+    'audioRemove': 'Remove',
+    'videoRemove': 'Remove',
+    'audioLayoutOption': 'Layout option',
+    'videoLayoutOption': 'Layout option',
     'align': 'Align',
     'caption': 'Image Caption',
     'remove': 'Remove',
@@ -49,8 +61,6 @@ export var defaultLocale = {
     'upperCase': 'Upper Case',
     'print': 'Print',
     'formats': 'Formats',
-    'numberFormatList': 'Number Format List',
-    'bulletFormatList': 'Bullet Format List',
     'sourcecode': 'Code View',
     'preview': 'Preview',
     'viewside': 'ViewSide',
@@ -66,18 +76,34 @@ export var defaultLocale = {
     'dialogCancel': 'Cancel',
     'dialogUpdate': 'Update',
     'imageHeader': 'Insert Image',
+    'audioHeader': 'Insert Audio',
+    'videoHeader': 'Insert Video',
     'imageLinkHeader': 'You can also provide a link from the web',
+    'audioLinkHeader': 'You can also provide a link from the web',
+    'videoLinkHeader': 'Web URL',
+    'embedVideoLinkHeader': 'Media Embed URL',
     'mdimageLink': 'Please provide a URL for your image',
     'imageUploadMessage': 'Drop image here or browse to upload',
+    'audioUploadMessage': 'Drop an audio file or browse to upload',
+    'videoUploadMessage': 'Drop a video file or browse to upload',
     'imageDeviceUploadMessage': 'Click here to upload',
+    'audioDeviceUploadMessage': 'Click here to upload',
+    'videoDeviceUploadMessage': 'Click here to upload',
     'imageAlternateText': 'Alternate Text',
     'alternateHeader': 'Alternative Text',
     'browse': 'Browse',
     'imageUrl': 'http://example.com/image.png',
+    'audioUrl': 'http://example.com/audio.mp3',
+    'videoUrl': 'http://example.com/video.mp3',
+    'webUrl': 'Web URL',
+    'embedUrl': 'Embed Code',
     'imageCaption': 'Caption',
     'imageSizeHeader': 'Image Size',
+    'videoSizeHeader': 'Video Size',
     'imageHeight': 'Height',
     'imageWidth': 'Width',
+    'videoHeight': 'Height',
+    'videoWidth': 'Width',
     'textPlaceholder': 'Enter Text',
     'inserttablebtn': 'Insert Table',
     'tabledialogHeader': 'Insert Table',
@@ -108,12 +134,18 @@ export var defaultLocale = {
     'TableColText': 'Col',
     'imageInsertLinkHeader': 'Insert Link',
     'editImageHeader': 'Edit Image',
+    'editAudioHeader': 'Edit Audio',
+    'editVideoHeader': 'Edit Video',
     "alignmentsDropDownLeft": 'Align Left',
     "alignmentsDropDownCenter": 'Align Center',
     "alignmentsDropDownRight": 'Align Right',
     "alignmentsDropDownJustify": 'Align Justify',
     "imageDisplayDropDownInline": 'Inline',
     "imageDisplayDropDownBreak": 'Break',
+    "audioLayoutOptionDropDownInline": 'Inline',
+    "audioLayoutOptionDropDownBreak": 'Break',
+    "videoLayoutOptionDropDownInline": 'Inline',
+    "videoLayoutOptionDropDownBreak": 'Break',
     "tableInsertRowDropDownBefore": 'Insert row before',
     "tableInsertRowDropDownAfter": 'Insert row after',
     "tableInsertRowDropDownDelete": 'Delete row',
@@ -183,6 +215,8 @@ export var toolsLocale = {
     'orderedlist': 'orderedList',
     'indent': 'indent',
     'outdent': 'outdent',
+    'numberformatlist': 'numberFormatList',
+    'bulletformatlist': 'bulletFormatList',
     'undo': 'undo',
     'redo': 'redo',
     'superscript': 'superscript',
@@ -195,7 +229,17 @@ export var toolsLocale = {
     'editimagelink': 'editLink',
     'removeimagelink': 'removeLink',
     'image': 'image',
+    'audio': 'audio',
+    'video': 'video',
     'replace': 'replace',
+    'audioreplace': 'audioReplace',
+    'videoreplace': 'videoReplace',
+    'videoalign': 'videoAlign',
+    'videodimension': 'videoDimension',
+    'audioremove': 'audioRemove',
+    'videoremove': 'videoRemove',
+    'audiolayoutoption': 'audioLayoutOption',
+    'videolayoutoption': 'videoLayoutOption',
     'align': 'align',
     'caption': 'caption',
     'remove': 'remove',
@@ -210,8 +254,6 @@ export var toolsLocale = {
     'uppercase': 'upperCase',
     'print': 'print',
     'formats': 'formats',
-    'numberformatlist': 'numberFormatList',
-    'bulletformatlist': 'bulletFormatList',
     'sourcecode': 'sourcecode',
     'preview': 'preview',
     'viewside': 'viewside',

package/src/rich-text-editor/models/items.d.ts

@@ -8,7 +8,10 @@ export declare let tools: {
 };
 export declare let alignmentItems: IDropDownItemModel[];
 export declare let imageAlignItems: IDropDownItemModel[];
+export declare let videoAlignItems: IDropDownItemModel[];
 export declare let imageDisplayItems: IDropDownItemModel[];
+export declare let audioLayoutOptionItems: IDropDownItemModel[];
+export declare let videoLayoutOptionItems: IDropDownItemModel[];
 export declare let tableCellItems: IDropDownItemModel[];
 export declare let tableRowsItems: IDropDownItemModel[];
 export declare let tableColumnsItems: IDropDownItemModel[];

package/src/rich-text-editor/models/items.js

@@ -2,7 +2,7 @@
 /**
  * Export items model
  */
-export var templateItems = ['alignments', 'formats', 'fontname', 'fontsize', 'fontcolor', 'backgroundcolor', 'align', 'display', 'tablerows', 'tablecolumns', 'tablecell', 'tablecellhorizontalalign', 'tablecellverticalalign', 'styles', 'numberformatlist', 'bulletformatlist'];
+export var templateItems = ['alignments', 'formats', 'fontname', 'fontsize', 'fontcolor', 'backgroundcolor', 'align', 'display', 'audiolayoutoption', 'videolayoutoption', 'videoalign', 'tablerows', 'tablecolumns', 'tablecell', 'tablecellhorizontalalign', 'tablecellverticalalign', 'styles', 'numberformatlist', 'bulletformatlist'];
 export var tools = {
     'alignments': {
         'id': 'Alignments',
@@ -237,6 +237,20 @@ export var tools = {
         'command': 'Images',
         'subCommand': 'Image'
     },
+    'audio': {
+        'id': 'Audio',
+        'icon': 'e-audio',
+        'tooltip': 'Insert Audio',
+        'command': 'Audios',
+        'subCommand': 'Audio'
+    },
+    'video': {
+        'id': 'Video',
+        'icon': 'e-video',
+        'tooltip': 'Insert Video',
+        'command': 'Videos',
+        'subCommand': 'Video'
+    },
     'filemanager': {
         'id': 'FileManager',
         'icon': 'e-rte-file-manager',
@@ -265,6 +279,62 @@ export var tools = {
         'command': 'Images',
         'subCommand': 'Replace'
     },
+    'audioreplace': {
+        'id': 'AudioReplace',
+        'icon': 'e-audio-replace',
+        'tooltip': 'Audio Replace',
+        'command': 'Audios',
+        'subCommand': 'AudioReplace'
+    },
+    'audioremove': {
+        'id': 'AudioRemove',
+        'icon': 'e-audio-remove',
+        'tooltip': 'Audio Remove',
+        'command': 'Audios',
+        'subCommand': 'AudioRemove'
+    },
+    'audiolayoutoption': {
+        'id': 'AudioLayoutOption',
+        'icon': 'e-audio-display',
+        'tooltip': 'Audio LayoutOption',
+        'command': 'Audios',
+        'subCommand': 'AudioLayoutOption'
+    },
+    'videoreplace': {
+        'id': 'VideoReplace',
+        'icon': 'e-video-replace',
+        'tooltip': 'Video Replace',
+        'command': 'Videos',
+        'subCommand': 'VideoReplace'
+    },
+    'videoalign': {
+        'id': 'VideoAlign',
+        'icon': 'e-video-align',
+        'tooltip': 'Video Align',
+        'command': 'Videos',
+        'subCommand': 'VideoAlign'
+    },
+    'videoremove': {
+        'id': 'VideoRemove',
+        'icon': 'e-video-remove',
+        'tooltip': 'Video Remove',
+        'command': 'Videos',
+        'subCommand': 'VideoRemove'
+    },
+    'videolayoutoption': {
+        'id': 'VideoLayoutOption',
+        'icon': 'e-video-display',
+        'tooltip': 'Video LayoutOption',
+        'command': 'Videos',
+        'subCommand': 'VideoLayoutOption'
+    },
+    'videodimension': {
+        'id': 'VideoDimension',
+        'icon': 'e-video-dimension',
+        'tooltip': 'Video Dimension',
+        'command': 'Videos',
+        'subCommand': 'VideoDimension'
+    },
     'align': {
         'id': 'Align',
         'icon': 'e-align',
@@ -500,14 +570,35 @@ export var imageAlignItems = [
     { iconCss: 'e-icons e-justify-center', command: 'Images', subCommand: 'JustifyCenter' },
     { iconCss: 'e-icons e-justify-right', command: 'Images', subCommand: 'JustifyRight' },
 ];
+export var videoAlignItems = [
+    { iconCss: 'e-icons e-justify-left', command: 'Videos', subCommand: 'JustifyLeft' },
+    { iconCss: 'e-icons e-justify-center', command: 'Videos', subCommand: 'JustifyCenter' },
+    { iconCss: 'e-icons e-justify-right', command: 'Videos', subCommand: 'JustifyRight' },
+];
 var displayLocale = [
-    { locale: 'imageDisplayDropDownInline', value: 'Inline' },
-    { locale: 'imageDisplayDropDownBreak', value: 'Break' }
+    { locale: 'imageLayoutOptionDropDownInline', value: 'Inline' },
+    { locale: 'imageLayoutOptionDropDownBreak', value: 'Break' }
+];
+var audioLayoutOptionLocale = [
+    { locale: 'audioLayoutOptionDropDownInline', value: 'Inline' },
+    { locale: 'audioLayoutOptionDropDownBreak', value: 'Break' }
+];
+var videoLayoutOptionLocale = [
+    { locale: 'videoLayoutOptionDropDownInline', value: 'Inline' },
+    { locale: 'videoLayoutOptionDropDownBreak', value: 'Break' }
 ];
 export var imageDisplayItems = [
     { text: 'Inline', cssClass: 'e-inline', command: 'Images', subCommand: 'Inline' },
     { text: 'Break', cssClass: 'e-break', command: 'Images', subCommand: 'Break' },
 ];
+export var audioLayoutOptionItems = [
+    { text: 'Inline', cssClass: 'e-audio-inline', command: 'Audios', subCommand: 'Inline' },
+    { text: 'Break', cssClass: 'e-audio-break', command: 'Audios', subCommand: 'Break' },
+];
+export var videoLayoutOptionItems = [
+    { text: 'Inline', cssClass: 'e-video-inline', command: 'Videos', subCommand: 'Inline' },
+    { text: 'Break', cssClass: 'e-video-break', command: 'Videos', subCommand: 'Break' },
+];
 export var tableCellItems = [
     { iconCss: 'e-icons e-cell-merge', text: 'Merge cells', command: 'Table', subCommand: 'Merge' },
     { iconCss: 'e-icons e-cell-horizontal-split', text: 'Horizontal split', command: 'Table', subCommand: 'HorizontalSplit' },
@@ -630,6 +721,12 @@ export function updateDropDownLocale(self) {
     imageDisplayItems.forEach(function (item, i) {
         imageDisplayItems[i].text = getLocale(self, displayLocale, imageDisplayItems[i]);
     });
+    audioLayoutOptionItems.forEach(function (item, i) {
+        audioLayoutOptionItems[i].text = getLocale(self, audioLayoutOptionLocale, audioLayoutOptionItems[i]);
+    });
+    videoLayoutOptionItems.forEach(function (item, i) {
+        videoLayoutOptionItems[i].text = getLocale(self, videoLayoutOptionLocale, videoLayoutOptionItems[i]);
+    });
     tableRowsItems.forEach(function (item, i) {
         tableRowsItems[i].text = getLocale(self, tableRowLocale, tableRowsItems[i]);
     });