diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/app-composition.vue
index 68ebf441f..20fe436a8 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/app-composition.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/app-composition.vue
@@ -1,138 +1,390 @@
 <template>
-  <ejs-richtexteditor ref="rteInstance" height="350" editorMode="Markdown" :value="value" :toolbarSettings="toolbarConfig"
-    :created="created" :formatter="formatter">
-  </ejs-richtexteditor>
+  <div class="control-section rte-markdown-overview">
+    <ejs-richtexteditor
+      id="MDdefault"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :formatter="formatter"
+      :created="created"
+      :editorMode="editorMode"
+      :height="height"
+      :value="value"
+    >
+    </ejs-richtexteditor>
+    <ejs-mention
+      id="mention"
+      ref="mentionObj"
+      :target="target"
+      :dataSource="emailData"
+      :fields="mentionfields"
+      allowSpaces="true"
+      :itemTemplate="'iTemplate'"
+      :displayTemplate="'dTemplate'"
+      popupWidth="250px"
+      popupHeight="200px"
+    >
+      <template v-slot:iTemplate="{ data }">
+        <div class="editor-mention-item-template">
+          <div class="em-header">
+            <div
+              class="em-avatar"
+              :style="{
+                'background-color': data.bgColor,
+                color: data.color,
+              }"
+            >
+              <div class="em-initial">{{ data.initial }}</div>
+            </div>
+          </div>
+          <div class="em-content">
+            <div class="em-name">{{ data.name }}</div>
+            <div class="em-email">{{ data.email }}</div>
+          </div>
+        </div>
+      </template>
+      <template v-slot:dTemplate="{ data }"
+        >[@{{ data.name }}](mailto:${data.email})
+      </template>
+    </ejs-mention>
+  </div>
 </template>
 
 <style>
-.e-richtexteditor .e-rte-content .e-content {
-  min-height: 150px;
+   .rte-markdown-overview .e-richtexteditor textarea.e-content {
+  float: left;
+}
+.rte-markdown-overview .e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.rte-markdown-overview .e-md-preview::before {
+  content: '\\e345';
+}
+.rte-markdown-overview .e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\\e350';
+}
+.bootstrap4 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before {
+  content: '\\e790';
+}
+.bootstrap4 .rte-markdown-overview .e-icon-btn .e-md-preview::before {
+  content: '\\e787';
+}
+.fluent .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent-dark .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2-dark .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2-highcontrast
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.tailwind .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.tailwind-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.tailwind3 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.tailwind3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.bootstrap5\.3
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5\.3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.material3 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.material3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before {
+  content: '\\e80e';
+}
+.tailwind .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5\.3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5\.3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2-highcontrast .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.material3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.material3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before {
+  content: '\\e7de';
+}
+/** Mention template styles **/
+.editor-mention-item-template {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
-.e-richtexteditor .e-rte-content textarea.e-content {
-  float: left;
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
+.em-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.e-richtexteditor .e-rte-content {
-  overflow: hidden;
+.em-avatar {
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 500;
+  text-indent: 0px;
+  line-height: 13px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.e-md-preview::before {
-  content: '\e345';
+.em-name {
+  color: rgb(16, 24, 40);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 14px;
+  margin-bottom: 5px;
 }
 
-.e-rte-content .e-content.e-pre-source {
-  width: 100%;
+.em-email {
+  color: gray;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
 }
 
-.e-icon-btn.e-active .e-md-preview.e-icons::before {
-  content: '\e350';
+#MDdefault_editable-content_popup li {
+  padding: 10px !important;
+  height: 60px;
 }
 
+body[class*='-dark'] .em-name {
+  color: #fff !important;
+}
 </style>
 
 <script setup>
-import { provide, ref } from "vue";
-import { createElement, KeyboardEventArgs } from "@syncfusion/ej2-base";
-import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, MarkdownEditor, MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  MarkdownEditor,
+  Table,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
+import { MentionComponent } from '@syncfusion/ej2-vue-dropdowns';
+import { marked } from 'marked';
 
+const formatter = new MarkdownFormatter({ listTags: { OL: '1., 2., 3.' } });
 const rteInstance = ref(null);
-const value = `***Overview***
-The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
+let id= ''
+let mdsource= null;
+let htmlPreview= null;
+let textArea= null;
+let previewTextArea= null;
+const height= '250px';
+const editorMode = 'Markdown';
+const value=
+            `Hello [@Maria](mailto:maria@gmail.com)\n\nWelcome to the mention integration with markdown editor demo. Type @ character and tag user from the suggestion list.`;
+const target= "#MDdefault_editable-content";
+const mentionfields= { text: 'name' };
+
+const toolbarSettings = {
+    items: [
+        'Bold',
+        'Italic',
+        'StrikeThrough',
+        '|',
+        'Formats',
+        'Blockquote',
+        'OrderedList',
+        'UnorderedList',
+        'SuperScript',
+        'SubScript',
+        '|',
+        'CreateLink',
+        'Image',
+        'CreateTable',
+        '|',
+        {
+        tooltipText: 'Preview',
+        template:
+            '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" aria-label="Preview Code">' +
+            '<span class="e-btn-icon e-md-preview e-icons"></span></button>',
+        },
+        '|',
+        'Undo',
+        'Redo',
+    ],
+};
 
-  ***Key features***
-  - *Mode*: Provides IFRAME and DIV mode.
-  - *Module*: Modular library to load the necessary functionality on demand.
-  - *Toolbar*: Provide a fully customizable toolbar.
-  - *Editing*: HTML view to edit the source directly for developers.
-  - *Third-party Integration*: Supports to integrate third-party library.
-  - *Preview*: Preview the modified content before saving it.
-  - *Tools*: Handling images, hyperlinks, video, uploads and more.
-  - *Undo and Redo*: Undo/redo manager.
-  - *Lists*:Creates bulleted and numbered list.`;
-const toolbarConfig = {
-  items: [
-    'Bold', 'Italic', 'StrikeThrough', '|',
-    'Formats', 'OrderedList', 'UnorderedList', '|',
-    'CreateLink', 'Image', '|',
+const emailData= [
     {
-      tooltipText: 'Preview',
-      template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-        '<span class="e-btn-icon e-md-preview e-icons"></span></button>'
+      name: 'Selma Rose',
+      initial: 'SR',
+      email: 'selma@gmail.com',
+      color: '#FAFDFF',
+      bgColor: '#01579B',
     },
-    '|', 'Undo', 'Redo'
-  ]
-};
-const formatter = new MarkdownFormatter({
-  listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
-  formatTags: {
-    'Blockquote': '> '
-  },
-  selectionTags: { 'Bold': ' __ ', 'Italic': ' _ ' }
-});
+    {
+      name: 'Maria',
+      initial: 'MA',
+      email: 'maria@gmail.com',
+      color: '#004378',
+      bgColor: '#ADDBFF',
+    },
+    {
+      name: 'Russo Kay',
+      initial: 'RK',
+      email: 'russo@gmail.com',
+      color: '#F9DEDC',
+      bgColor: '#8C1D18',
+    },
+    {
+      name: 'Robert',
+      initial: 'RO',
+      email: 'robert@gmail.com',
+      color: '#FFD6F7',
+      bgColor: '#37003A',
+    },
+    {
+      name: 'Camden Kate',
+      initial: 'CK',
+      email: 'camden@gmail.com',
+      color: '#FFFFFF',
+      bgColor: '#464ECF',
+    },
+    {
+      name: 'Garth',
+      initial: 'GA',
+      email: 'garth@gmail.com',
+      color: '#FFFFFF',
+      bgColor: '#008861',
+    },
+    {
+      name: 'Andrew James',
+      initial: 'AJ',
+      email: 'james@gmail.com',
+      color: '#FFFFFF',
+      bgColor: '#53CA17',
+    },
+    {
+      name: 'Olivia',
+      initial: 'OL',
+      email: 'olivia@gmail.com',
+      color: '#FFFFFF',
+      bgColor: '#8C1D18',
+    },
+    {
+      name: 'Sophia',
+      initial: 'SO',
+      email: 'sophia@gmail.com',
+      color: '#000000',
+      bgColor: '#D0BCFF',
+    },
+    {
+      name: 'Margaret',
+      initial: 'MA',
+      email: 'margaret@gmail.com',
+      color: '#000000',
+      bgColor: '#F2B8B5',
+    },
+    {
+      name: 'Ursula Ann',
+      initial: 'UA',
+      email: 'ursula@gmail.com',
+      color: '#000000',
+      bgColor: '#47ACFB',
+    },
+    {
+      name: 'Laura Grace',
+      initial: 'LG',
+      email: 'laura@gmail.com',
+      color: '#000000',
+      bgColor: '#FFE088',
+    },
+    {
+      name: 'Albert',
+      initial: 'AL',
+      email: 'albert@gmail.com',
+      color: '#FFFFFF',
+      bgColor: '#00335B',
+    },
+    {
+      name: 'William',
+      initial: 'WA',
+      email: 'william@gmail.com',
+      color: '#FFFFFF',
+      bgColor: '#163E02',
+    },
+];
+
 const created = () => {
-  var script = document.createElement('script');
-  script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
-  document.head.appendChild(script);
-  this.textArea = rteInstance.value.$el.parentNode.querySelector('.e-content');
-  this.textArea.onkeyup = (Event) => {
-    this.markDownConversion();
-  };
-  document.getElementById('preview-code').onclick = () => {
-    this.fullPreview({ mode: true, type: 'preview' });
-    if (event.target.parentElement.classList.contains('e-active')) {
-      rteInstance.value.ej2Instances.disableToolbarItem([
-        'Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-        'UnorderedList', 'CreateLink', 'Image'
-      ]);
-      event.target.parentElement.parentElement.nextElementSibling.classList.add('e-overlay');
-    } else {
-      rteInstance.value.ej2Instances.enableToolbarItem([
-        'Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-        'UnorderedList', 'CreateLink', 'Image'
-      ]);
-      event.target.parentElement.parentElement.nextElementSibling.classList.remove('e-overlay');
-    }
-  };
-}
+    this.rteObj = this.$refs.rteInstance.ej2Instances;
+    this.textArea = this.rteObj.contentModule.getEditPanel();
+    this.id = this.$refs.rteInstance.ej2Instances.getID() + 'html-preview';
+    this.mdsource = document.getElementById('preview-code');
+    this.htmlPreview = this.rteObj.element.querySelector(this.id);
+    this.previewTextArea =
+        this.rteObj.element.querySelector('.e-rte-content');
+    this.textArea.onkeyup = (Event) => {
+        this.markDownConversion();
+    };
+    this.mdsource.onclick = (e) => {
+        this.fullPreview();
+        if (e.currentTarget.classList.contains('e-active')) {
+        this.$refs.rteInstance.disableToolbarItem(['CreateTable']);
+        } else {
+        this.$refs.rteInstance.enableToolbarItem(['CreateTable']);
+        }
+    };
+};
 const markDownConversion = () => {
-  if (document.getElementById('MD_Preview').classList.contains('e-active')) {
-    var id = rteInstance.value.ej2Instances.getID() + 'html-view';
-    var htmlPreview = rteInstance.value.$el.parentNode.querySelector('#' + id);
-    htmlPreview.innerHTML = marked.parse(this.textArea.value);
-  }
-}
-const fullPreview = (event) => {
-  var mdSource = document.getElementById('preview-code');
-  var id = rteInstance.value.ej2Instances.getID() + 'html-view';
-  var htmlPreview = rteInstance.value.$el.parentNode.querySelector('#' + id);
-  if ((mdSource.classList.contains('e-active')) && event.mode) {
-    mdSource.classList.remove('e-active');
-    this.textArea.style.display = 'block';
-    this.textArea.style.width = '100%';
-    htmlPreview.style.display = 'none';
-  } else {
-    mdSource.classList.add('e-active');
-    if (!htmlPreview) {
-      htmlPreview = document.createElement('div');
-      htmlPreview.id = id;
-      htmlPreview.setAttribute('class', 'e-content');
-      this.textArea.parentNode.appendChild(htmlPreview);
+    if (this.mdsource.classList.contains('e-active')) {
+        this.htmlPreview.innerHTML = marked(this.textArea.value);
     }
-    if (event.type === 'preview') {
-      this.textArea.style.display = 'none';
-      htmlPreview.classList.add('e-pre-source');
+};
+const fullPreview = (event) => {
+    if (this.mdsource.classList.contains('e-active')) {
+        this.mdsource.classList.remove('e-active');
+        this.textArea.style.display = 'block';
+        this.htmlPreview.style.display = 'none';
+        this.previewTextArea.style.overflow = 'hidden';
     } else {
-      htmlPreview.classList.remove('e-pre-source');
-      this.textArea.style.width = '50%';
+        this.mdsource.classList.add('e-active');
+        if (!this.htmlPreview) {
+        this.htmlPreview = document.createElement('div');
+        this.htmlPreview.setAttribute('class', 'e-content e-pre-source');
+        this.htmlPreview.setAttribute('id', this.id);
+        this.textArea.parentNode.appendChild(this.htmlPreview);
+        this.previewTextArea.style.overflow = 'auto';
+        }
+        if (this.previewTextArea.style.overflow === 'hidden') {
+        this.previewTextArea.style.overflow = 'auto';
+        }
+        this.textArea.style.display = 'none';
+        this.htmlPreview.style.display = 'block';
+        this.htmlPreview.innerHTML = marked(this.textArea.value);
+        this.mdsource.parentElement.title = 'Code View';
     }
-    htmlPreview.style.display = 'block';
-    htmlPreview.innerHTML = marked.parse(rteInstance.value.ej2Instances.contentModule.getEditPanel().value);
-    mdSource.parentElement.title = 'Code View';
-  }
 }
-provide('richtexteditor', [Toolbar, Link, Image, MarkdownEditor]);
+provide('richtexteditor', [Toolbar, Link, Image, Table, MarkdownEditor, MarkdownFormatter]);
 </script>
 
 <style>
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/app.vue b/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/app.vue
index ef444b9b8..5ca235fb9 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/app.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/app.vue
@@ -1,149 +1,427 @@
 <template>
-  <ejs-richtexteditor ref="rteInstance" height="350" editorMode="Markdown" :value="value" :toolbarSettings="toolbarConfig"
-    :created="created" :formatter="formatter">
-  </ejs-richtexteditor>
+  <div class="control-section rte-markdown-overview">
+    <ejs-richtexteditor
+      id="MDdefault"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :formatter="formatter"
+      :created="created"
+      :editorMode="editorMode"
+      :height="height"
+      :value="value"
+    >
+    </ejs-richtexteditor>
+    <ejs-mention
+      id="mention"
+      ref="mentionObj"
+      :target="target"
+      :dataSource="emailData"
+      :fields="mentionfields"
+      allowSpaces="true"
+      :itemTemplate="'iTemplate'"
+      :displayTemplate="'dTemplate'"
+      popupWidth="250px"
+      popupHeight="200px"
+    >
+      <template v-slot:iTemplate="{ data }">
+        <div class="editor-mention-item-template">
+          <div class="em-header">
+            <div
+              class="em-avatar"
+              :style="{
+                'background-color': data.bgColor,
+                color: data.color,
+              }"
+            >
+              <div class="em-initial">{{ data.initial }}</div>
+            </div>
+          </div>
+          <div class="em-content">
+            <div class="em-name">{{ data.name }}</div>
+            <div class="em-email">{{ data.email }}</div>
+          </div>
+        </div>
+      </template>
+      <template v-slot:dTemplate="{ data }"
+        >[@{{ data.name }}](mailto:${data.email})
+      </template>
+    </ejs-mention>
+  </div>
 </template>
 
 <style>
-.e-richtexteditor .e-rte-content .e-content {
-  min-height: 150px;
+.rte-markdown-overview .e-richtexteditor textarea.e-content {
+  float: left;
+}
+.rte-markdown-overview .e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.rte-markdown-overview .e-md-preview::before {
+  content: '\\e345';
+}
+.rte-markdown-overview .e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\\e350';
+}
+.bootstrap4 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before {
+  content: '\\e790';
+}
+.bootstrap4 .rte-markdown-overview .e-icon-btn .e-md-preview::before {
+  content: '\\e787';
+}
+.fluent .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent-dark .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2-dark .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2-highcontrast
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.tailwind .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.tailwind-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.tailwind3 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.tailwind3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.bootstrap5\.3
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5\.3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.material3 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.material3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before {
+  content: '\\e80e';
+}
+.tailwind .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5\.3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5\.3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2-highcontrast .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.material3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.material3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before {
+  content: '\\e7de';
+}
+/** Mention template styles **/
+.editor-mention-item-template {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
-.e-richtexteditor .e-rte-content textarea.e-content {
-  float: left;
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
+.em-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.e-richtexteditor .e-rte-content {
-  overflow: hidden;
+.em-avatar {
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 500;
+  text-indent: 0px;
+  line-height: 13px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.e-md-preview::before {
-  content: '\\e345';
+.em-name {
+  color: rgb(16, 24, 40);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 14px;
+  margin-bottom: 5px;
 }
 
-.e-rte-content .e-content.e-pre-source {
-  width: 100%;
+.em-email {
+  color: gray;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
 }
 
-.e-icon-btn.e-active .e-md-preview.e-icons::before {
-  content: '\\e350';
+#MDdefault_editable-content_popup li {
+  padding: 10px !important;
+  height: 60px;
+}
+
+body[class*='-dark'] .em-name {
+  color: #fff !important;
 }
 </style>
 
 <script>
-import { createElement, KeyboardEventArgs } from "@syncfusion/ej2-base";
-import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor, MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  MarkdownEditor,
+  Table,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
+import { MentionComponent } from '@syncfusion/ej2-vue-dropdowns';
 import { marked } from 'marked';
 
 export default {
-  name: "App",
-  components: {
-    "ejs-richtexteditor": RichTextEditorComponent
-  },
-  data() {
-    return {
-      value: `***Overview***
-  The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
-
-  ***Key features***
-  - *Mode*: Provides IFRAME and DIV mode.
-  - *Module*: Modular library to load the necessary functionality on demand.
-  - *Toolbar*: Provide a fully customizable toolbar.
-  - *Editing*: HTML view to edit the source directly for developers.
-  - *Third-party Integration*: Supports to integrate third-party library.
-  - *Preview*: Preview the modified content before saving it.
-  - *Tools*: Handling images, hyperlinks, video, uploads and more.
-  - *Undo and Redo*: Undo/redo manager.
-  - *Lists*:Creates bulleted and numbered list.`,
-      toolbarConfig: {
-        items: [
-          'Bold', 'Italic', 'StrikeThrough', '|',
-          'Formats', 'OrderedList', 'UnorderedList', '|',
-          'CreateLink', 'Image', '|',
-          {
-            tooltipText: 'Preview',
-            template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-              '<span class="e-btn-icon e-md-preview e-icons"></span></button>'
+    name: "App",
+    components: {
+        'ejs-richtexteditor': RichTextEditorComponent,
+        'ejs-mention': MentionComponent,
+    },
+    data: function() {
+         return {
+          id: '',
+          mdsource: null,
+          htmlPreview: null,
+          textArea: null,
+          previewTextArea: null,
+          height: '250px',
+          editorMode: 'Markdown',
+          value:
+            'Hello [@Maria](mailto:maria@gmail.com)\n\nWelcome to the mention integration with markdown editor demo. Type @ character and tag user from the suggestion list.',
+          target: '#MDdefault_editable-content',
+          mentionfields: { text: 'name' },
+          placeholder: 'Enter your text here...',
+          formatter: new MarkdownFormatter({ listTags: { OL: '1., 2., 3.' } }),
+          toolbarSettings: {
+            items: [
+              'Bold',
+              'Italic',
+              'StrikeThrough',
+              '|',
+              'Formats',
+              'Blockquote',
+              'OrderedList',
+              'UnorderedList',
+              'SuperScript',
+              'SubScript',
+              '|',
+              'CreateLink',
+              'Image',
+              'CreateTable',
+              '|',
+              {
+                tooltipText: 'Preview',
+                template:
+                  '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" aria-label="Preview Code">' +
+                  '<span class="e-btn-icon e-md-preview e-icons"></span></button>',
+              },
+              '|',
+              'Undo',
+              'Redo',
+            ],
           },
-          '|', 'Undo', 'Redo'
-        ]
-      },
-      formatter: new MarkdownFormatter({
-        listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
-        formatTags: {
-          'Blockquote': '> '
+          emailData: [
+            {
+              name: 'Selma Rose',
+              initial: 'SR',
+              email: 'selma@gmail.com',
+              color: '#FAFDFF',
+              bgColor: '#01579B',
+            },
+            {
+              name: 'Maria',
+              initial: 'MA',
+              email: 'maria@gmail.com',
+              color: '#004378',
+              bgColor: '#ADDBFF',
+            },
+            {
+              name: 'Russo Kay',
+              initial: 'RK',
+              email: 'russo@gmail.com',
+              color: '#F9DEDC',
+              bgColor: '#8C1D18',
+            },
+            {
+              name: 'Robert',
+              initial: 'RO',
+              email: 'robert@gmail.com',
+              color: '#FFD6F7',
+              bgColor: '#37003A',
+            },
+            {
+              name: 'Camden Kate',
+              initial: 'CK',
+              email: 'camden@gmail.com',
+              color: '#FFFFFF',
+              bgColor: '#464ECF',
+            },
+            {
+              name: 'Garth',
+              initial: 'GA',
+              email: 'garth@gmail.com',
+              color: '#FFFFFF',
+              bgColor: '#008861',
+            },
+            {
+              name: 'Andrew James',
+              initial: 'AJ',
+              email: 'james@gmail.com',
+              color: '#FFFFFF',
+              bgColor: '#53CA17',
+            },
+            {
+              name: 'Olivia',
+              initial: 'OL',
+              email: 'olivia@gmail.com',
+              color: '#FFFFFF',
+              bgColor: '#8C1D18',
+            },
+            {
+              name: 'Sophia',
+              initial: 'SO',
+              email: 'sophia@gmail.com',
+              color: '#000000',
+              bgColor: '#D0BCFF',
+            },
+            {
+              name: 'Margaret',
+              initial: 'MA',
+              email: 'margaret@gmail.com',
+              color: '#000000',
+              bgColor: '#F2B8B5',
+            },
+            {
+              name: 'Ursula Ann',
+              initial: 'UA',
+              email: 'ursula@gmail.com',
+              color: '#000000',
+              bgColor: '#47ACFB',
+            },
+            {
+              name: 'Laura Grace',
+              initial: 'LG',
+              email: 'laura@gmail.com',
+              color: '#000000',
+              bgColor: '#FFE088',
+            },
+            {
+              name: 'Albert',
+              initial: 'AL',
+              email: 'albert@gmail.com',
+              color: '#FFFFFF',
+              bgColor: '#00335B',
+            },
+            {
+              name: 'William',
+              initial: 'WA',
+              email: 'william@gmail.com',
+              color: '#FFFFFF',
+              bgColor: '#163E02',
+            },
+          ],
+        };
+    };
+    methods: {
+        created: function () {
+          this.rteObj = this.$refs.rteInstance.ej2Instances;
+          this.textArea = this.rteObj.contentModule.getEditPanel();
+          this.id = this.$refs.rteInstance.ej2Instances.getID() + 'html-preview';
+          this.mdsource = document.getElementById('preview-code');
+          this.htmlPreview = this.rteObj.element.querySelector(this.id);
+          this.previewTextArea =
+            this.rteObj.element.querySelector('.e-rte-content');
+          this.textArea.onkeyup = (Event) => {
+            this.markDownConversion();
+          };
+          this.mdsource.onclick = (e) => {
+            this.fullPreview();
+            if (e.currentTarget.classList.contains('e-active')) {
+              this.$refs.rteInstance.disableToolbarItem([
+                'Bold',
+                'Italic',
+                'SuperScript',
+                'SubScript',
+                'StrikeThrough',
+                'Formats',
+                'Blockquote',
+                'OrderedList',
+                'UnorderedList',
+                'CreateLink',
+                'Image',
+                'CreateTable',
+              ]);
+            } else {
+              this.$refs.rteInstance.enableToolbarItem([
+                'Bold',
+                'Italic',
+                'SuperScript',
+                'SubScript',
+                'StrikeThrough',
+                'Formats',
+                'Blockquote',
+                'OrderedList',
+                'UnorderedList',
+                'CreateLink',
+                'Image',
+                'CreateTable',
+              ]);
+            }
+          };
         },
-        selectionTags: { 'Bold': ' __ ', 'Italic': ' _ ' }
-      }),
-    }
-  },
-  methods: {
-    created: function () {
-      var script = document.createElement('script');
-      script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
-      document.head.appendChild(script);
-      this.textArea = this.$refs.rteInstance.$el.parentNode.querySelector('.e-content');
-      this.textArea.onkeyup = (Event) => {
-        this.markDownConversion();
-      };
-      document.getElementById('preview-code').onclick = () => {
-        this.fullPreview({ mode: true, type: 'preview' });
-        if (event.target.parentElement.classList.contains('e-active')) {
-          this.$refs.rteInstance.ej2Instances.disableToolbarItem([
-            'Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-            'UnorderedList', 'CreateLink', 'Image'
-          ]);
-          event.target.parentElement.parentElement.nextElementSibling.classList.add('e-overlay');
-        } else {
-          this.$refs.rteInstance.ej2Instances.enableToolbarItem([
-            'Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-            'UnorderedList', 'CreateLink', 'Image'
-          ]);
-          event.target.parentElement.parentElement.nextElementSibling.classList.remove('e-overlay');
+      markDownConversion: function () {
+        if (this.mdsource.classList.contains('e-active')) {
+          this.htmlPreview.innerHTML = marked(this.textArea.value);
         }
-      };
-    },
-    markDownConversion: function () {
-      if (document.getElementById('MD_Preview').classList.contains('e-active')) {
-        var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-        var htmlPreview = this.$refs.rteInstance.$el.querySelector('#' + id);
-        htmlPreview.innerHTML = marked.parse(this.textArea.value);
-      }
-    },
-    fullPreview: function (event) {
-      var mdSource = document.getElementById('preview-code');
-      var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-      var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-      if ((mdSource.classList.contains('e-active')) && event.mode) {
-        mdSource.classList.remove('e-active');
-        this.textArea.style.display = 'block';
-        this.textArea.style.width = '100%';
-        htmlPreview.style.display = 'none';
-      } else {
-        mdSource.classList.add('e-active');
-        if (!htmlPreview) {
-          htmlPreview = document.createElement('div');
-          htmlPreview.id = id;
-          htmlPreview.setAttribute('class', 'e-content');
-          this.textArea.parentNode.appendChild(htmlPreview);
-        }
-        if (event.type === 'preview') {
-          this.textArea.style.display = 'none';
-          htmlPreview.classList.add('e-pre-source');
+      },
+      fullPreview: function () {
+        if (this.mdsource.classList.contains('e-active')) {
+          this.mdsource.classList.remove('e-active');
+          this.textArea.style.display = 'block';
+          this.htmlPreview.style.display = 'none';
+          this.previewTextArea.style.overflow = 'hidden';
         } else {
-          htmlPreview.classList.remove('e-pre-source');
-          this.textArea.style.width = '50%';
+          this.mdsource.classList.add('e-active');
+          if (!this.htmlPreview) {
+            this.htmlPreview = document.createElement('div');
+            this.htmlPreview.setAttribute('class', 'e-content e-pre-source');
+            this.htmlPreview.setAttribute('id', this.id);
+            this.textArea.parentNode.appendChild(this.htmlPreview);
+            this.previewTextArea.style.overflow = 'auto';
+          }
+          if (this.previewTextArea.style.overflow === 'hidden') {
+            this.previewTextArea.style.overflow = 'auto';
+          }
+          this.textArea.style.display = 'none';
+          this.htmlPreview.style.display = 'block';
+          this.htmlPreview.innerHTML = marked(this.textArea.value);
+          this.mdsource.parentElement.title = 'Code View';
         }
-        htmlPreview.style.display = 'block';
-        htmlPreview.innerHTML = marked.parse(this.$refs.rteInstance.ej2Instances.contentModule.getEditPanel().value);
-        mdSource.parentElement.title = 'Code View';
-      }
+      },
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image,Table, MarkdownEditor, MarkdownFormatter]
     }
-  },
-  provide: {
-    richtexteditor: [Toolbar, Link, Image, MarkdownEditor]
-  }
 }
 </script>
 
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/index.css b/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/index.css
index e69de29bb..26b889ff5 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/index.css
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/index.css
@@ -0,0 +1,126 @@
+.rte-markdown-overview .e-richtexteditor textarea.e-content {
+  float: left;
+}
+.rte-markdown-overview .e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.rte-markdown-overview .e-md-preview::before {
+  content: '\\e345';
+}
+.rte-markdown-overview .e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\\e350';
+}
+.bootstrap4 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before {
+  content: '\\e790';
+}
+.bootstrap4 .rte-markdown-overview .e-icon-btn .e-md-preview::before {
+  content: '\\e787';
+}
+.fluent .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent-dark .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2-dark .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.fluent2-highcontrast
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.tailwind .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.tailwind-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.tailwind3 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.tailwind3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.bootstrap5\.3
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5\.3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.bootstrap5-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before,
+.material3 .rte-markdown-overview .e-icon-btn.e-active .e-md-preview::before,
+.material3-dark
+  .rte-markdown-overview
+  .e-icon-btn.e-active
+  .e-md-preview::before {
+  content: '\\e80e';
+}
+.tailwind .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.tailwind3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5\.3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5\.3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.bootstrap5-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.fluent2-highcontrast .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.material3 .rte-markdown-overview .e-icon-btn .e-md-preview::before,
+.material3-dark .rte-markdown-overview .e-icon-btn .e-md-preview::before {
+  content: '\\e7de';
+}
+/** Mention template styles **/
+.editor-mention-item-template {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.em-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.em-avatar {
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 500;
+  text-indent: 0px;
+  line-height: 13px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.em-name {
+  color: rgb(16, 24, 40);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 14px;
+  margin-bottom: 5px;
+}
+
+.em-email {
+  color: gray;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
+}
+
+#MDdefault_editable-content_popup li {
+  padding: 10px !important;
+  height: 60px;
+}
+
+body[class*='-dark'] .em-name {
+  color: #fff !important;
+}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/index.js b/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/index.js
index 92bdce3be..9f3a58a91 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/index.js
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs10/index.js
@@ -1,115 +1,292 @@
-import Vue from 'vue';
-import { RichTextEditorPlugin, Toolbar, Link, Image, MarkdownEditor, MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
-Vue.use(RichTextEditorPlugin);
+import Vue from "vue";
+import {
+    RichTextEditorPlugin,
+    Toolbar,
+    Link,
+    Image,
+    MarkdownEditor,
+    Table,
+  } from '@syncfusion/ej2-vue-richtexteditor';
+import { MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
+import { MentionPlugin } from '@syncfusion/ej2-vue-dropdowns';
+import { marked } from 'marked';
+Vue.use(RichTextEditorPlugin, MentionPlugin);
 
-  
 new Vue({
 	el: '#app',
-	template: `
-  <ejs-richtexteditor ref="rteInstance" height="350" editorMode="Markdown" :value="value" :toolbarSettings="toolbarConfig" :created="created" :formatter="formatter">
-  </ejs-richtexteditor>`,
+	template: `<div class="control-section rte-markdown-overview">
+                    <ejs-richtexteditor
+                    id="MDdefault"
+                    ref="rteInstance"
+                    :toolbarSettings="toolbarSettings"
+                    :formatter="formatter"
+                    :created="created"
+                    :editorMode="editorMode"
+                    :height="height"
+                    :value="value"
+                    >
+                    </ejs-richtexteditor>
+                    <ejs-mention
+                    id="mention"
+                    ref="mentionObj"
+                    :target="target"
+                    :dataSource="emailData"
+                    :fields="mentionfields"
+                    allowSpaces="true"
+                    :itemTemplate="'iTemplate'"
+                    :displayTemplate="'dTemplate'"
+                    popupWidth="250px"
+                    popupHeight="200px"
+                    >
+                    <template v-slot:iTemplate="{ data }">
+                        <div class="editor-mention-item-template">
+                        <div class="em-header">
+                            <div
+                            class="em-avatar"
+                            :style="{
+                                'background-color': data.bgColor,
+                                color: data.color,
+                            }"
+                            >
+                            <div class="em-initial">{{ data.initial }}</div>
+                            </div>
+                        </div>
+                        <div class="em-content">
+                            <div class="em-name">{{ data.name }}</div>
+                            <div class="em-email">{{ data.email }}</div>
+                        </div>
+                        </div>
+                    </template>
+                    <template v-slot:dTemplate="{ data }"
+                        >[@{{ data.name }}](mailto:${data.email})
+                    </template>
+                    </ejs-mention>
+                </div>`,
 
-    data() {
-      return {
-        value: `***Overview***
-  The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
-
-  ***Key features***
-  - *Mode*: Provides IFRAME and DIV mode.
-  - *Module*: Modular library to load the necessary functionality on demand.
-  - *Toolbar*: Provide a fully customizable toolbar.
-  - *Editing*: HTML view to edit the source directly for developers.
-  - *Third-party Integration*: Supports to integrate third-party library.
-  - *Preview*: Preview the modified content before saving it.
-  - *Tools*: Handling images, hyperlinks, video, uploads and more.
-  - *Undo and Redo*: Undo/redo manager.
-  - *Lists*:Creates bulleted and numbered list.`,
-        toolbarConfig: {
-          items: [
-            'Bold', 'Italic', 'StrikeThrough', '|',
-            'Formats', 'OrderedList', 'UnorderedList', '|',
-            'CreateLink', 'Image', '|',
-            {
-              tooltipText: 'Preview',
-              template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-                '<span class="e-btn-icon e-md-preview e-icons"></span></button>'
-            },
-            '|', 'Undo', 'Redo'
-          ]
-        },
-        formatter: new MarkdownFormatter({
-            listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
-            formatTags: {
-                'Blockquote': '> '
+    data: function() {
+        return {
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            height: '250px',
+            editorMode: 'Markdown',
+            value:
+                'Hello [@Maria](mailto:maria@gmail.com)\n\nWelcome to the mention integration with markdown editor demo. Type @ character and tag user from the suggestion list.',
+            target: '#MDdefault_editable-content',
+            mentionfields: { text: 'name' },
+            placeholder: 'Enter your text here...',
+            formatter: new MarkdownFormatter({ listTags: { OL: '1., 2., 3.' } }),
+            toolbarSettings: {
+                items: [
+                'Bold',
+                'Italic',
+                'StrikeThrough',
+                '|',
+                'Formats',
+                'Blockquote',
+                'OrderedList',
+                'UnorderedList',
+                'SuperScript',
+                'SubScript',
+                '|',
+                'CreateLink',
+                'Image',
+                'CreateTable',
+                '|',
+                {
+                    tooltipText: 'Preview',
+                    template:
+                    '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" aria-label="Preview Code">' +
+                    '<span class="e-btn-icon e-md-preview e-icons"></span></button>',
+                },
+                '|',
+                'Undo',
+                'Redo',
+                ],
             },
-            selectionTags: {'Bold': ' __ ',  'Italic': ' _ '}
-        }),
-      }
+            emailData: [
+                {
+                name: 'Selma Rose',
+                initial: 'SR',
+                email: 'selma@gmail.com',
+                color: '#FAFDFF',
+                bgColor: '#01579B',
+                },
+                {
+                name: 'Maria',
+                initial: 'MA',
+                email: 'maria@gmail.com',
+                color: '#004378',
+                bgColor: '#ADDBFF',
+                },
+                {
+                name: 'Russo Kay',
+                initial: 'RK',
+                email: 'russo@gmail.com',
+                color: '#F9DEDC',
+                bgColor: '#8C1D18',
+                },
+                {
+                name: 'Robert',
+                initial: 'RO',
+                email: 'robert@gmail.com',
+                color: '#FFD6F7',
+                bgColor: '#37003A',
+                },
+                {
+                name: 'Camden Kate',
+                initial: 'CK',
+                email: 'camden@gmail.com',
+                color: '#FFFFFF',
+                bgColor: '#464ECF',
+                },
+                {
+                name: 'Garth',
+                initial: 'GA',
+                email: 'garth@gmail.com',
+                color: '#FFFFFF',
+                bgColor: '#008861',
+                },
+                {
+                name: 'Andrew James',
+                initial: 'AJ',
+                email: 'james@gmail.com',
+                color: '#FFFFFF',
+                bgColor: '#53CA17',
+                },
+                {
+                name: 'Olivia',
+                initial: 'OL',
+                email: 'olivia@gmail.com',
+                color: '#FFFFFF',
+                bgColor: '#8C1D18',
+                },
+                {
+                name: 'Sophia',
+                initial: 'SO',
+                email: 'sophia@gmail.com',
+                color: '#000000',
+                bgColor: '#D0BCFF',
+                },
+                {
+                name: 'Margaret',
+                initial: 'MA',
+                email: 'margaret@gmail.com',
+                color: '#000000',
+                bgColor: '#F2B8B5',
+                },
+                {
+                name: 'Ursula Ann',
+                initial: 'UA',
+                email: 'ursula@gmail.com',
+                color: '#000000',
+                bgColor: '#47ACFB',
+                },
+                {
+                name: 'Laura Grace',
+                initial: 'LG',
+                email: 'laura@gmail.com',
+                color: '#000000',
+                bgColor: '#FFE088',
+                },
+                {
+                name: 'Albert',
+                initial: 'AL',
+                email: 'albert@gmail.com',
+                color: '#FFFFFF',
+                bgColor: '#00335B',
+                },
+                {
+                name: 'William',
+                initial: 'WA',
+                email: 'william@gmail.com',
+                color: '#FFFFFF',
+                bgColor: '#163E02',
+                },
+            ],
+            };
     },
     methods: {
-      created: function() {
-        var script = document.createElement('script');
-        script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
-        document.head.appendChild(script);
-        this.textArea = this.$refs.rteInstance.$el.parentNode.querySelector('.e-content');
-        this.textArea.onkeyup = (Event) => {
-        this.markDownConversion();
-        };
-        document.getElementById('preview-code').onclick = () => {
-          this.fullPreview({ mode: true, type: 'preview'});
-          if (event.target.parentElement.classList.contains('e-active')) {
-            this.$refs.rteInstance.ej2Instances.disableToolbarItem([
-              'Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-              'UnorderedList', 'CreateLink', 'Image'
-            ]);
-            event.target.parentElement.parentElement.nextElementSibling.classList.add('e-overlay');
-          } else {
-            this.$refs.rteInstance.ej2Instances.enableToolbarItem([
-              'Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-              'UnorderedList', 'CreateLink', 'Image'
-            ]);
-            event.target.parentElement.parentElement.nextElementSibling.classList.remove('e-overlay');
-          }
-        };
-      },
-      markDownConversion: function() {
-        if (document.getElementById('MD_Preview').classList.contains('e-active')) {
-          var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-          var htmlPreview = this.$refs.rteInstance.$el.querySelector('#' + id);
-          htmlPreview.innerHTML = marked.parse(this.textArea.value);
-        }
-      },
-      fullPreview: function(event){
-        var mdSource = document.getElementById('preview-code');
-        var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-        var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-        if ((mdSource.classList.contains('e-active')) && event.mode) {
-          mdSource.classList.remove('e-active');
-          this.textArea.style.display = 'block';
-          this.textArea.style.width = '100%';
-          htmlPreview.style.display = 'none';
-        } else {
-          mdSource.classList.add('e-active');
-          if (!htmlPreview) {
-            htmlPreview = document.createElement('div');
-            htmlPreview.id = id;
-            htmlPreview.setAttribute('class', 'e-content');
-            this.textArea.parentNode.appendChild(htmlPreview);
-          }
-          if (event.type === 'preview') {
-            this.textArea.style.display = 'none';
-            htmlPreview.classList.add('e-pre-source');
-          } else {
-            htmlPreview.classList.remove('e-pre-source');
-            this.textArea.style.width = '50%';
-          }
-          htmlPreview.style.display = 'block';
-          htmlPreview.innerHTML = marked.parse(this.$refs.rteInstance.ej2Instances.contentModule.getEditPanel().value);
-          mdSource.parentElement.title = 'Code View';
-        }
-      }
+        created: function () {
+            this.rteObj = this.$refs.rteInstance.ej2Instances;
+            this.textArea = this.rteObj.contentModule.getEditPanel();
+            this.id = this.$refs.rteInstance.ej2Instances.getID() + 'html-preview';
+            this.mdsource = document.getElementById('preview-code');
+            this.htmlPreview = this.rteObj.element.querySelector(this.id);
+            this.previewTextArea =
+              this.rteObj.element.querySelector('.e-rte-content');
+            this.textArea.onkeyup = (Event) => {
+              this.markDownConversion();
+            };
+            this.mdsource.onclick = (e) => {
+              this.fullPreview();
+              if (e.currentTarget.classList.contains('e-active')) {
+                this.$refs.rteInstance.disableToolbarItem([
+                  'Bold',
+                  'Italic',
+                  'SuperScript',
+                  'SubScript',
+                  'StrikeThrough',
+                  'Formats',
+                  'Blockquote',
+                  'OrderedList',
+                  'UnorderedList',
+                  'CreateLink',
+                  'Image',
+                  'CreateTable',
+                ]);
+              } else {
+                this.$refs.rteInstance.enableToolbarItem([
+                  'Bold',
+                  'Italic',
+                  'SuperScript',
+                  'SubScript',
+                  'StrikeThrough',
+                  'Formats',
+                  'Blockquote',
+                  'OrderedList',
+                  'UnorderedList',
+                  'CreateLink',
+                  'Image',
+                  'CreateTable',
+                ]);
+              }
+            };
+          },
+          markDownConversion: function () {
+            if (this.mdsource.classList.contains('e-active')) {
+              this.htmlPreview.innerHTML = marked(this.textArea.value);
+            }
+          },
+          fullPreview: function () {
+            if (this.mdsource.classList.contains('e-active')) {
+              this.mdsource.classList.remove('e-active');
+              this.textArea.style.display = 'block';
+              this.htmlPreview.style.display = 'none';
+              this.previewTextArea.style.overflow = 'hidden';
+            } else {
+              this.mdsource.classList.add('e-active');
+              if (!this.htmlPreview) {
+                this.htmlPreview = document.createElement('div');
+                this.htmlPreview.setAttribute('class', 'e-content e-pre-source');
+                this.htmlPreview.setAttribute('id', this.id);
+                this.textArea.parentNode.appendChild(this.htmlPreview);
+                this.previewTextArea.style.overflow = 'auto';
+              }
+              if (this.previewTextArea.style.overflow === 'hidden') {
+                this.previewTextArea.style.overflow = 'auto';
+              }
+              this.textArea.style.display = 'none';
+              this.htmlPreview.style.display = 'block';
+              this.htmlPreview.innerHTML = marked(this.textArea.value);
+              this.mdsource.parentElement.title = 'Code View';
+            }
+          },
     },
-    provide: {
-      richtexteditor: [Toolbar, Link, Image, MarkdownEditor]
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, Table, MarkdownEditor, MarkdownFormatter]
     }
+
 });
\ No newline at end of file
diff --git a/ej2-vue/common/accessibility.md b/ej2-vue/common/accessibility.md
index 3de6205f5..1939001c0 100644
--- a/ej2-vue/common/accessibility.md
+++ b/ej2-vue/common/accessibility.md
@@ -630,4 +630,4 @@ vertical-align: top;
         <td><a target="_self" href="https://ej2.syncfusion.com/vue/documentation/skeleton/accessibility">Documentation</a></td>
     </tr>
 </tbody>
-</table>
\ No newline at end of file
+</table>
diff --git a/ej2-vue/rich-text-editor/globalization.md b/ej2-vue/rich-text-editor/globalization.md
index 1d66a7694..7ba112045 100644
--- a/ej2-vue/rich-text-editor/globalization.md
+++ b/ej2-vue/rich-text-editor/globalization.md
@@ -244,6 +244,7 @@ The Rich Text Editor offers an option to localize its strings using the locale A
             "slashMenuItemVideoDescription": "Insert a video.",
             "slashMenuItemEmojiText": "Emojipicker",
             "slashMenuItemEmojiDescription": "Use emojis to express ideas and emoticons.",
+
         }
     }
 ```
diff --git a/ej2-vue/rich-text-editor/miscellaneous.md b/ej2-vue/rich-text-editor/miscellaneous.md
new file mode 100644
index 000000000..dea2c1652
--- /dev/null
+++ b/ej2-vue/rich-text-editor/miscellaneous.md
@@ -0,0 +1,45 @@
+---
+layout: post
+title: Miscellaneous in Vue Rich text editor component | Syncfusion
+description: Learn here all about Miscellaneous in Syncfusion Vue Rich text editor component of Syncfusion Essential JS 2 and more.
+control: Miscellaneous 
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Miscellaneous in Vue Rich text editor component
+
+## Code view
+
+Rich Text Editor includes the ability for users to directly edit HTML code via `Source View` in the text area. If you made any modification in Source view directly, the changes will be reflected in the Rich Text Editor's content. So, the users will have more flexibility over the content they have created.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/code-mirror-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/code-mirror-cs1/app.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/rich-text-editor/code-mirror-cs1/index.html %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/rich-text-editor/code-mirror-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/code-mirror-cs1" %}
+
+## Undo/Redo manager
+
+Undo and redo tools allow you to edit the text by disregard/cancel the recently made changes and restore it to previous state. It is a useful tool to restore the performed action which got changed by mistake. By default, upto 30 actions can be undo/redo in the editor.
+
+To undo and redo operations, do one of the following:
+* Press the undo/redo button on the toolbar.
+* Press the **Ctrl + Z/Ctrl + Y** combination on the keyboard.
+
+Customize the undo/redo step count using the [undoRedoSteps](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#undoredosteps) property. By default, undo/redo actions take 300ms time interval for store the action to the undoRedoManager. The time interval can be customized by using the [undoRedoTimer](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#undoredotimer).
+
+
+