diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html
index 4a8c1f7a8..4017b82c4 100644
--- a/ej2-vue-toc.html
+++ b/ej2-vue-toc.html
@@ -1766,7 +1766,20 @@
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/maps/">API Reference</a></li>
 </ul>
 </li>
-<li>
+<li> Markdown Editor 
+    <ul>
+        <li><a href="/ej2-vue/markdown-editor/getting-started">Getting Started</a></li>
+        <li><a href="/ej2-vue/markdown-editor/supported-markdown">Supported Markdown Syntax</a></li>
+        <li><a href="/ej2-vue/markdown-editor/toolbar">Toolbar Configuration</a></li>
+        <li><a href="/ej2-vue/markdown-editor/insert-table">Insert Table</a></li>
+        <li><a href="/ej2-vue/markdown-editor/insert-images">Insert Image</a></li>
+        <li><a href="/ej2-vue/markdown-editor/markdown-preview">Markdown to HTML Preview</a></li>
+        <li><a href="/ej2-vue/markdown-editor/custom-format">Customizing Markdown Syntax</a></li>
+        <li><a href="/ej2-vue/markdown-editor/mention-support">Mention Support</a></li>
+        <li><a href="/ej2-vue/markdown-editor/keyboard-support">Keyboard Shortcuts</a></li>
+        <li><a href="/ej2-vue/markdown-editor/accessibility">Accessibility</a></li>
+    </ul>
+</li><li>
 MaskedTextBox
 <ul>
 <li><a href="/ej2-vue/maskedtextbox/getting-started">Getting Started</a></li>
@@ -2361,7 +2374,6 @@
 <li><a href="/ej2-vue/rich-text-editor/import-and-export">Content Import/Export</a></li>
 <li><a href="/ej2-vue/rich-text-editor/spell-grammar-check">Spell and Grammar Check</a></li>
 <li><a href="/ej2-vue/rich-text-editor/third-party-integration">Third-Party Integration</a></li>
-<li><a href="/ej2-vue/rich-text-editor/markdown">Markdown</a></li>
 <li><a href="/ej2-vue/rich-text-editor/globalization">Globalization</a></li>
 <li><a href="/ej2-vue/rich-text-editor/file-browser">File Browser</a></li>
 <li><a href="/ej2-vue/rich-text-editor/slash-menu">Slash Menu</a></li>
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/app-composition.vue
new file mode 100644
index 000000000..8dcbf5ede
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/app-composition.vue
@@ -0,0 +1,140 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+      id="editor"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :created="created"
+      :editorMode="editorMode"
+      :value="rteValue"
+      :formatter="formatter"
+    >
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<style>
+    .e-richtexteditor .e-rte-content .e-content{
+        min-height: 150px;
+    }
+    .e-richtexteditor .e-rte-content textarea.e-content {
+        float: left;
+        border-right: 1px solid rgba(0, 0, 0, 0.12);
+    }
+    .e-richtexteditor .e-rte-content {
+        overflow: hidden;
+    }
+    .e-md-preview::before {
+        content: '\e345';
+    }
+
+    .e-rte-content .e-content.e-pre-source {
+        width: 100%;
+    }
+    .e-icon-btn.e-active .e-md-preview.e-icons::before {
+        content: '\e350';
+    }
+</style>
+
+<script setup>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  Table,
+  MarkdownEditor, MarkdownFormatter
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+
+const formatter = new MarkdownFormatter({
+  listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
+  formatTags: {
+    'Blockquote': '> '
+  },
+  selectionTags: { 'Bold': ' __ ', 'Italic': ' _ ' }
+});
+const rteInstance = ref(null);
+const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+let textArea = null;
+let id= '';
+let mdsource= null;
+let htmlPreview= null;
+let previewTextArea= null;
+
+const toolbarSettings = {
+     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'
+    ]
+};
+const editorMode = 'Markdown';
+const created = () => {
+    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 (this.mdsource.classList.contains('e-active')) {
+        this.htmlPreview.innerHTML = marked(this.textArea.value);
+    }
+};
+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 {
+        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, Table, MarkdownEditor, MarkdownFormatter]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/app.vue
new file mode 100644
index 000000000..0c1736c11
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/app.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+      id="editor"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :created="created"
+      :editorMode="editorMode"
+      :value="rteValue"
+      :formatter="formatter"
+    >
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<style>
+.e-richtexteditor .e-rte-content .e-content {
+  min-height: 150px;
+}
+.e-richtexteditor .e-rte-content textarea.e-content {
+  float: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.e-md-preview::before {
+  content: '\e345';
+}
+
+.e-rte-content .e-content.e-pre-source {
+  width: 100%;
+}
+.e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\e350';
+}
+</style>
+
+<script>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,Table,
+  MarkdownEditor, MarkdownFormatter
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-richtexteditor":RichTextEditorComponent
+    },
+    data: function() {
+        return {
+            rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            editorMode: 'Markdown',
+            toolbarSettings: {
+                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': '> '
+              },
+              selectionTags: { 'Bold': ' __ ', 'Italic': ' _ ' }
+            }),
+        }
+    };
+    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(['CreateTable']);
+                } else {
+                this.$refs.rteInstance.enableToolbarItem(['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,Table, MarkdownEditor, MarkdownFormatter]
+    }
+}
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.css
new file mode 100644
index 000000000..ba6e2a57a
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.css
@@ -0,0 +1,20 @@
+.e-richtexteditor .e-rte-content .e-content {
+  min-height: 150px;
+}
+.e-richtexteditor .e-rte-content textarea.e-content {
+  float: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.e-md-preview::before {
+  content: '\e345';
+}
+
+.e-rte-content .e-content.e-pre-source {
+  width: 100%;
+}
+.e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\e350';
+}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.js
new file mode 100644
index 000000000..fe01a5a8e
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.js
@@ -0,0 +1,113 @@
+import Vue from "vue";
+import {
+  RichTextEditorPlugin,
+  Toolbar,
+  Link,
+  Image,
+  MarkdownEditor, MarkdownFormatter
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+Vue.use(RichTextEditorPlugin);
+
+new Vue({
+	el: '#app',
+	template: `<div id="markdown-editor">
+                    <ejs-richtexteditor
+                    id="editor"
+                    ref="rteInstance"
+                    :toolbarSettings="toolbarSettings"
+                    :created="created"
+                    :editorMode="editorMode"
+                    :value="rteValue"
+                    :formatter="formatter"
+                    >
+                    </ejs-richtexteditor>
+                </div>`,
+
+    data: function() {
+        return {
+            rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            editorMode: 'Markdown',
+            toolbarSettings: {
+                items: [
+                    'Bold', 'Italic', 'StrikeThrough', '|',
+                    'Formats', 'OrderedList', 'UnorderedList', '|',
+                      '|',
+                      {
+                        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': '> '
+                },
+                selectionTags: { 'Bold': ' __ ', 'Italic': ' _ ' }
+            }),
+        };
+    },
+    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(['CreateTable']);
+                } else {
+                this.$refs.rteInstance.enableToolbarItem(['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]
+    }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/systemjs.config.js
new file mode 100644
index 000000000..f4147de4f
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-format-cs1/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",        
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js",
+        "marked": "https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/app-composition.vue
new file mode 100644
index 000000000..a8aeae4e8
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/app-composition.vue
@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <div class="control-section">
+      <div class="sample-container">
+        <div class="default-section" id="rteSection" style="min-height: 360px">
+          <ejs-richtexteditor
+            ref="customObj"
+            :value="rteValue"
+            :toolbarSettings="toolbarSettings"
+            editorMode="Markdown"
+            :created="onCreate"
+          ></ejs-richtexteditor>
+          <ejs-dialog
+            id="rteDialog"
+            :buttons="dlgButtons"
+            :width="width"
+            :height="height"
+            :header="header"
+            ref="dialogObj"
+            :overlayClick="dialogOverlay"
+            :visible="visible"
+            :showCloseIcon="showCloseIcon"
+            :isModal="modal"
+            :cssClass="cssClass"
+            target="#rteSection"
+            :created="dialogCreate"
+          >
+          </ejs-dialog>
+          <div id="customTbarDialog" style="display: none">
+            <div id="rteSpecial_char">
+              <div class="char_block" title="&#94;">&#94;</div>
+              <div class="char_block" title="&#95;">&#95;</div>
+              <div class="char_block" title="&#96;">&#96;</div>
+              <div class="char_block" title="&#123;">&#123;</div>
+              <div class="char_block" title="&#124;">&#124;</div>
+              <div class="char_block" title="&#125;">&#125;</div>
+              <div class="char_block" title="&#126;">&#126;</div>
+              <div class="char_block" title="&#160;">&#160;</div>
+              <div class="char_block" title="&#161;">&#161;</div>
+              <div class="char_block" title="&#162;">&#162;</div>
+              <div class="char_block" title="&#163;">&#163;</div>
+              <div class="char_block" title="&#164;">&#164;</div>
+              <div class="char_block" title="&#165;">&#165;</div>
+              <div class="char_block" title="&#x20B9;">&#x20B9;</div>
+              <div class="char_block" title="&#166;">&#166;</div>
+              <div class="char_block" title="&#167;">&#167;</div>
+              <div class="char_block" title="&#168;">&#168;</div>
+              <div class="char_block" title="&#169;">&#169;</div>
+              <div class="char_block" title="&#170;">&#170;</div>
+              <div class="char_block" title="&#171;">&#171;</div>
+              <div class="char_block" title="&#172;">&#172;</div>
+              <div class="char_block" title="&#173;">&#173;</div>
+              <div class="char_block" title="&#174;">&#174;</div>
+              <div class="char_block" title="&#175;">&#175;</div>
+              <div class="char_block" title="&#176;">&#176;</div>
+              <div class="char_block" title="&#177;">&#177;</div>
+              <div class="char_block" title="&#178;">&#178;</div>
+              <div class="char_block" title="&#179;">&#179;</div>
+              <div class="char_block" title="&#180;">&#180;</div>
+              <div class="char_block" title="&#181;">&#181;</div>
+              <div class="char_block" title="&#182;">&#182;</div>
+              <div class="char_block" title="&#183;">&#183;</div>
+              <div class="char_block" title="&#184;">&#184;</div>
+              <div class="char_block" title="&#185;">&#185;</div>
+              <div class="char_block" title="&#186;">&#186;</div>
+              <div class="char_block" title="&#187;">&#187;</div>
+              <div class="char_block" title="&#188;">&#188;</div>
+              <div class="char_block" title="&#189;">&#189;</div>
+              <div class="char_block" title="&#190;">&#190;</div>
+              <div class="char_block" title="&#191;">&#191;</div>
+              <div class="char_block" title="&#192;">&#192;</div>
+              <div class="char_block" title="&#193;">&#193;</div>
+              <div class="char_block" title="&#194;">&#194;</div>
+              <div class="char_block" title="&#195;">&#195;</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from 'vue';
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  NodeSelection,
+  Image,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { DialogComponent } from '@syncfusion/ej2-vue-popups';
+let proxy = undefined;
+
+const rteValue =`<p style="margin-right:10px">The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p>`;
+const customObj = ref(null);
+const dialogObj = ref(null);
+const selection = new NodeSelection();
+let ranges = null;
+const header = 'Special Characters';
+const visible = false;
+const modal = true;
+const showCloseIcon = false;
+const width = '520px';
+const height = '310px';
+const dlgButtons = [{ click: onInsert, buttonModel: { isPrimary: 'true', content: 'Insert' } }, { buttonModel: { content: 'Cancel' }, click: dialogOverlay }];
+const toolbarSettings = {
+    items: [
+        'Bold',
+        'Italic',
+        'StrikeThrough',
+        '|',
+        'Formats',
+        'OrderedList',
+        'UnorderedList',
+        '|',
+        'CreateLink',
+        '|',
+        {
+            tooltipText: 'Insert Symbol',
+            undo: true,
+            click: this.onClick.bind(this),
+            template: `<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%">
+            <div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div>
+            </button>`,
+        },
+    ],
+};
+const cssClass = "customClass e-rte-elements";
+const onClick = function () {
+    dialogObj.ej2Instances.width =
+    customObj.ej2Instances.element.offsetWidth * 0.5;
+    dialogObj.ej2Instances.show();
+    dialogObj.ej2Instances.element.style.maxHeight = 'none';
+}
+const dialogCreate = function () {
+    var dialogCtn = document.getElementById('rteSpecial_char');
+    dialogCtn.onclick = function (e) {
+        var target = e.target;
+        var activeEle = dialogObj.value.ej2Instances.element.querySelector('.char_block.e-active');
+        if (target.classList.contains('char_block')) {
+            target.classList.add('e-active');
+            if (activeEle) {
+                activeEle.classList.remove('e-active');
+            }
+        }
+    };
+}
+const onInsert = function () {
+    var activeEle = dialogObj.value.ej2Instances.element.querySelector('.char_block.e-active');
+    if (activeEle) {
+        customObj.value.ej2Instances.executeCommand('insertText', activeEle.textContent, { undo: true });
+    }
+    dialogOverlay();
+}
+const dialogOverlay = function () {
+    var activeEle = dialogObj.value.ej2Instances.element.querySelector('.char_block.e-active');
+    if (activeEle) {
+        activeEle.classList.remove('e-active');
+    }
+    dialogObj.value.ej2Instances.hide();
+}
+const onCreate = function (e) {
+    var customBtn = document.getElementById('custom_tbar');
+    dialogObj.value.ej2Instances.target = document.getElementById('rteSection');
+}
+provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor]);
+</script >
+
+<style>
+#rteSpecial_char .char_block {
+    display: inline-block;
+}
+
+#custom_tbar,
+#custom_tbar div {
+    cursor: pointer;
+    font-size: 16px;
+}
+
+#rteSpecial_char {
+    padding: 15px 0 15px 0;
+}
+
+#rteSpecial_char .char_block.e-active {
+    outline: 1px solid #e3165b;
+    border-color: #e3165b;
+}
+
+#rteSpecial_char .char_block {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 5px 5px 0;
+    text-align: center;
+    vertical-align: middle;
+    border: 1px solid #DDDDDD;
+    font-size: 20px;
+    cursor: pointer;
+    user-select: none;
+}
+@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/app.vue
new file mode 100644
index 000000000..fbba0f63c
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/app.vue
@@ -0,0 +1,247 @@
+<template>
+  <div>
+    <div class="control-section">
+      <div class="sample-container">
+        <div class="default-section" id="rteSection" style="min-height: 360px">
+          <ejs-richtexteditor
+            ref="customObj"
+            :value="rteValue"
+            :toolbarSettings="toolbarSettings"
+            editorMode="Markdown"
+            :created="onCreate"
+          ></ejs-richtexteditor>
+          <ejs-dialog
+            id="rteDialog"
+            :buttons="dlgButtons"
+            :width="width"
+            :height="height"
+            :header="header"
+            ref="dialogObj"
+            :overlayClick="dialogOverlay"
+            :visible="visible"
+            :showCloseIcon="showCloseIcon"
+            :isModal="modal"
+            :cssClass="cssClass"
+            target="#rteSection"
+            :created="dialogCreate"
+          >
+          </ejs-dialog>
+          <div id="customTbarDialog" style="display: none">
+            <div id="rteSpecial_char">
+              <div class="char_block" title="&#94;">&#94;</div>
+              <div class="char_block" title="&#95;">&#95;</div>
+              <div class="char_block" title="&#96;">&#96;</div>
+              <div class="char_block" title="&#123;">&#123;</div>
+              <div class="char_block" title="&#124;">&#124;</div>
+              <div class="char_block" title="&#125;">&#125;</div>
+              <div class="char_block" title="&#126;">&#126;</div>
+              <div class="char_block" title="&#160;">&#160;</div>
+              <div class="char_block" title="&#161;">&#161;</div>
+              <div class="char_block" title="&#162;">&#162;</div>
+              <div class="char_block" title="&#163;">&#163;</div>
+              <div class="char_block" title="&#164;">&#164;</div>
+              <div class="char_block" title="&#165;">&#165;</div>
+              <div class="char_block" title="&#x20B9;">&#x20B9;</div>
+              <div class="char_block" title="&#166;">&#166;</div>
+              <div class="char_block" title="&#167;">&#167;</div>
+              <div class="char_block" title="&#168;">&#168;</div>
+              <div class="char_block" title="&#169;">&#169;</div>
+              <div class="char_block" title="&#170;">&#170;</div>
+              <div class="char_block" title="&#171;">&#171;</div>
+              <div class="char_block" title="&#172;">&#172;</div>
+              <div class="char_block" title="&#173;">&#173;</div>
+              <div class="char_block" title="&#174;">&#174;</div>
+              <div class="char_block" title="&#175;">&#175;</div>
+              <div class="char_block" title="&#176;">&#176;</div>
+              <div class="char_block" title="&#177;">&#177;</div>
+              <div class="char_block" title="&#178;">&#178;</div>
+              <div class="char_block" title="&#179;">&#179;</div>
+              <div class="char_block" title="&#180;">&#180;</div>
+              <div class="char_block" title="&#181;">&#181;</div>
+              <div class="char_block" title="&#182;">&#182;</div>
+              <div class="char_block" title="&#183;">&#183;</div>
+              <div class="char_block" title="&#184;">&#184;</div>
+              <div class="char_block" title="&#185;">&#185;</div>
+              <div class="char_block" title="&#186;">&#186;</div>
+              <div class="char_block" title="&#187;">&#187;</div>
+              <div class="char_block" title="&#188;">&#188;</div>
+              <div class="char_block" title="&#189;">&#189;</div>
+              <div class="char_block" title="&#190;">&#190;</div>
+              <div class="char_block" title="&#191;">&#191;</div>
+              <div class="char_block" title="&#192;">&#192;</div>
+              <div class="char_block" title="&#193;">&#193;</div>
+              <div class="char_block" title="&#194;">&#194;</div>
+              <div class="char_block" title="&#195;">&#195;</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  NodeSelection,
+  Image,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { DialogComponent } from '@syncfusion/ej2-vue-popups';
+let proxy = undefined;
+
+export default {
+    name: "App",
+    components: {
+        "ejs-richtexteditor":RichTextEditorComponent,
+        "ejs-dialog":DialogComponent
+    },
+    data: function() {
+        return {
+            rteValue: `<p style="margin-right:10px">The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p>`,
+            selection: new NodeSelection(),
+            ranges: null,
+            header: 'Special Characters',
+            visible: false,
+            modal: true,
+            showCloseIcon: false,
+            width: '520px',
+            height: '310px',
+            dlgButtons: [
+                {
+                click: this.onInsert.bind(this),
+                buttonModel: { isPrimary: 'true', content: 'Insert' },
+                },
+                {
+                buttonModel: { content: 'Cancel' },
+                click: this.dialogOverlay.bind(this),
+                },
+            ],
+            toolbarSettings: {
+                items: [
+                'Bold',
+                'Italic',
+                'StrikeThrough',
+                '|',
+                'Formats',
+                'OrderedList',
+                'UnorderedList',
+                '|',
+                'CreateLink',
+                '|',
+                {
+                    tooltipText: 'Insert Symbol',
+                    undo: true,
+                    click: this.onClick.bind(this),
+                    template: `<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%">
+                    <div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div>
+                    </button>`,
+                },
+                ],
+            },
+            cssClass: 'customClass e-rte-elements',
+        };
+    },
+    methods: {
+        onCreate: function (e) {
+            var customBtn = document.getElementById('custom_tbar');
+            this.$refs.dialogObj.ej2Instances.target =
+                document.getElementById('rteSection');
+            proxy = this;
+        },
+        onClick: function () {
+            proxy.$refs.dialogObj.ej2Instances.width =
+                proxy.$refs.customObj.ej2Instances.element.offsetWidth * 0.5;
+            proxy.$refs.dialogObj.ej2Instances.show();
+            proxy.$refs.dialogObj.ej2Instances.element.style.maxHeight = 'none';
+        },
+            
+        dialogCreate: function () {
+            var dialogCtn = document.getElementById('rteSpecial_char');
+            proxy = this;
+            dialogCtn.onclick = function (e) {
+                var target = e.target;
+                var activeEle =
+                proxy.$refs.dialogObj.ej2Instances.element.querySelector(
+                    '.char_block.e-active'
+                );
+                if (target.classList.contains('char_block')) {
+                target.classList.add('e-active');
+                if (activeEle) {
+                    activeEle.classList.remove('e-active');
+                }
+                }
+            }
+        },
+        onInsert: function () {
+            let activeEle = this.$refs.dialogObj.ej2Instances.element.querySelector(
+                '.char_block.e-active'
+            );
+            if (activeEle) {
+                let specialChar = activeEle.textContent;
+                proxy.$refs.customObj.ej2Instances.executeCommand(
+                'insertText',
+                specialChar
+                );
+            }
+            this.dialogOverlay();
+        },
+        dialogOverlay: function () {
+            var activeEle = this.$refs.dialogObj.ej2Instances.element.querySelector(
+                '.char_block.e-active'
+            );
+            if (activeEle) {
+                activeEle.classList.remove('e-active');
+            }
+            this.$refs.dialogObj.ej2Instances.hide();
+        },
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, MarkdownEditor]
+    }
+}
+</script>
+
+<style>
+#rteSpecial_char .char_block {
+    display: inline-block;
+}
+
+#custom_tbar,
+#custom_tbar div{
+    cursor: pointer;
+    font-size: 16px;
+}
+
+#rteSpecial_char {
+    padding: 15px 0 15px 0;
+}
+
+#rteSpecial_char .char_block.e-active {
+    outline: 1px solid #e3165b;
+    border-color: #e3165b;
+}
+
+#rteSpecial_char .char_block {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 5px 5px 0;
+    text-align: center;
+    vertical-align: middle;
+    border: 1px solid #DDDDDD;
+    font-size: 20px;
+    cursor: pointer;
+    user-select: none;
+}
+@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.css
new file mode 100644
index 000000000..40a233713
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.css
@@ -0,0 +1,32 @@
+#rteSpecial_char .char_block {
+    display: inline-block;
+}
+
+#custom_tbar,
+#custom_tbar div{
+    cursor: pointer;
+    font-size: 16px;
+}
+
+#rteSpecial_char {
+    padding: 15px 0 15px 0;
+}
+
+#rteSpecial_char .char_block.e-active {
+    outline: 1px solid #e3165b;
+    border-color: #e3165b;
+}
+
+#rteSpecial_char .char_block {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 5px 5px 0;
+    text-align: center;
+    vertical-align: middle;
+    border: 1px solid #DDDDDD;
+    font-size: 20px;
+    cursor: pointer;
+    user-select: none;
+}
+
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.js
new file mode 100644
index 000000000..47bc87bda
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/index.js
@@ -0,0 +1,194 @@
+import Vue from "vue";
+import { RichTextEditorPlugin, Toolbar, Link, NodeSelection, Image, MarkdownEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
+let proxy = undefined;
+
+Vue.use(RichTextEditorPlugin);
+Vue.use(DialogPlugin);
+
+new Vue({
+	el: '#app',
+	template: `  <div>
+    <div class="control-section">
+      <div class="sample-container">
+        <div class="default-section" id="rteSection" style="min-height: 360px">
+          <ejs-richtexteditor
+            ref="customObj"
+            :value="rteValue"
+            :toolbarSettings="toolbarSettings"
+            editorMode="Markdown"
+            :created="onCreate"
+          ></ejs-richtexteditor>
+          <ejs-dialog
+            id="rteDialog"
+            :buttons="dlgButtons"
+            :width="width"
+            :height="height"
+            :header="header"
+            ref="dialogObj"
+            :overlayClick="dialogOverlay"
+            :visible="visible"
+            :showCloseIcon="showCloseIcon"
+            :isModal="modal"
+            :cssClass="cssClass"
+            target="#rteSection"
+            :created="dialogCreate"
+          >
+          </ejs-dialog>
+          <div id="customTbarDialog" style="display: none">
+            <div id="rteSpecial_char">
+              <div class="char_block" title="&#94;">&#94;</div>
+              <div class="char_block" title="&#95;">&#95;</div>
+              <div class="char_block" title="&#96;">&#96;</div>
+              <div class="char_block" title="&#123;">&#123;</div>
+              <div class="char_block" title="&#124;">&#124;</div>
+              <div class="char_block" title="&#125;">&#125;</div>
+              <div class="char_block" title="&#126;">&#126;</div>
+              <div class="char_block" title="&#160;">&#160;</div>
+              <div class="char_block" title="&#161;">&#161;</div>
+              <div class="char_block" title="&#162;">&#162;</div>
+              <div class="char_block" title="&#163;">&#163;</div>
+              <div class="char_block" title="&#164;">&#164;</div>
+              <div class="char_block" title="&#165;">&#165;</div>
+              <div class="char_block" title="&#x20B9;">&#x20B9;</div>
+              <div class="char_block" title="&#166;">&#166;</div>
+              <div class="char_block" title="&#167;">&#167;</div>
+              <div class="char_block" title="&#168;">&#168;</div>
+              <div class="char_block" title="&#169;">&#169;</div>
+              <div class="char_block" title="&#170;">&#170;</div>
+              <div class="char_block" title="&#171;">&#171;</div>
+              <div class="char_block" title="&#172;">&#172;</div>
+              <div class="char_block" title="&#173;">&#173;</div>
+              <div class="char_block" title="&#174;">&#174;</div>
+              <div class="char_block" title="&#175;">&#175;</div>
+              <div class="char_block" title="&#176;">&#176;</div>
+              <div class="char_block" title="&#177;">&#177;</div>
+              <div class="char_block" title="&#178;">&#178;</div>
+              <div class="char_block" title="&#179;">&#179;</div>
+              <div class="char_block" title="&#180;">&#180;</div>
+              <div class="char_block" title="&#181;">&#181;</div>
+              <div class="char_block" title="&#182;">&#182;</div>
+              <div class="char_block" title="&#183;">&#183;</div>
+              <div class="char_block" title="&#184;">&#184;</div>
+              <div class="char_block" title="&#185;">&#185;</div>
+              <div class="char_block" title="&#186;">&#186;</div>
+              <div class="char_block" title="&#187;">&#187;</div>
+              <div class="char_block" title="&#188;">&#188;</div>
+              <div class="char_block" title="&#189;">&#189;</div>
+              <div class="char_block" title="&#190;">&#190;</div>
+              <div class="char_block" title="&#191;">&#191;</div>
+              <div class="char_block" title="&#192;">&#192;</div>
+              <div class="char_block" title="&#193;">&#193;</div>
+              <div class="char_block" title="&#194;">&#194;</div>
+              <div class="char_block" title="&#195;">&#195;</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>`,
+
+    data: function() {
+        return {
+            rteValue: `<p style="margin-right:10px">The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p>`,
+            selection: new NodeSelection(),
+            ranges: null,
+            header: 'Special Characters',
+            visible: false,
+            modal: true,
+            showCloseIcon: false,
+            width: '520px',
+            height: '310px',
+            dlgButtons: [
+                {
+                click: this.onInsert.bind(this),
+                buttonModel: { isPrimary: 'true', content: 'Insert' },
+                },
+                {
+                buttonModel: { content: 'Cancel' },
+                click: this.dialogOverlay.bind(this),
+                },
+            ],
+            toolbarSettings: {
+                items: [
+                'Bold',
+                'Italic',
+                'StrikeThrough',
+                '|',
+                'Formats',
+                'OrderedList',
+                'UnorderedList',
+                '|',
+                'CreateLink',
+                '|',
+                {
+                    tooltipText: 'Insert Symbol',
+                    undo: true,
+                    click: this.onClick.bind(this),
+                    template: `<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%">
+                    <div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div>
+                    </button>`,
+                },
+                ],
+            },
+            cssClass: 'customClass e-rte-elements',
+        };
+    },
+    methods: {
+        onCreate: function (e) {
+            var customBtn = document.getElementById('custom_tbar');
+            this.$refs.dialogObj.ej2Instances.target =
+                document.getElementById('rteSection');
+            proxy = this;
+        },
+        onClick: function () {
+            proxy.$refs.dialogObj.ej2Instances.width =
+                proxy.$refs.customObj.ej2Instances.element.offsetWidth * 0.5;
+            proxy.$refs.dialogObj.ej2Instances.show();
+            proxy.$refs.dialogObj.ej2Instances.element.style.maxHeight = 'none';
+        },
+            
+        dialogCreate: function () {
+            var dialogCtn = document.getElementById('rteSpecial_char');
+            proxy = this;
+            dialogCtn.onclick = function (e) {
+                var target = e.target;
+                var activeEle =
+                proxy.$refs.dialogObj.ej2Instances.element.querySelector(
+                    '.char_block.e-active'
+                );
+                if (target.classList.contains('char_block')) {
+                target.classList.add('e-active');
+                if (activeEle) {
+                    activeEle.classList.remove('e-active');
+                }
+                }
+            }
+        },
+        onInsert: function () {
+            let activeEle = this.$refs.dialogObj.ej2Instances.element.querySelector(
+              '.char_block.e-active'
+            );
+            if (activeEle) {
+              let specialChar = activeEle.textContent;
+              proxy.$refs.customObj.ej2Instances.executeCommand(
+                'insertText',
+                specialChar
+              );
+            }
+            this.dialogOverlay();
+        },
+        dialogOverlay: function () {
+            var activeEle = this.$refs.dialogObj.ej2Instances.element.querySelector(
+              '.char_block.e-active'
+            );
+            if (activeEle) {
+              activeEle.classList.remove('e-active');
+            }
+            this.$refs.dialogObj.ej2Instances.hide();
+        },
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, MarkdownEditor]
+    }
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/systemjs.config.js
new file mode 100644
index 000000000..5baca278b
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/custom-toolbar-cs1/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/expand-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/expand-cs1/app-composition.vue
new file mode 100644
index 000000000..45cd865da
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/expand-cs1/app-composition.vue
@@ -0,0 +1,52 @@
+<template>
+  <div id="markdown-editor">
+      <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+const toolbarSettings = {
+    type: 'Multirow',
+    items: [ 'Bold',
+        'Italic',
+        'StrikeThrough',
+        'InlineCode',
+        'SuperScript',
+        'SubScript',
+        '|',
+        'Formats',
+        'Blockquote',
+        '|',
+        'OrderedList',
+        'UnorderedList',
+        'CreateLink',
+        'Image',
+        'CreateTable',
+        '|',
+        'Undo',
+        'Redo',]
+};
+const rteValue=`In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+provide('richtexteditor', [Toolbar, Link, Image,Table, MarkdownEditor]);
+</script>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/expand-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/expand-cs1/app.vue
new file mode 100644
index 000000000..2295e388c
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/expand-cs1/app.vue
@@ -0,0 +1,62 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+    name: "App",
+    components: {
+        'ejs-richtexteditor': RichTextEditorComponent
+    },
+   data: function () {
+    return {
+      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+      toolbarSettings: {
+        type: 'Expand',
+        items: [
+          'Bold',
+          'Italic',
+          'StrikeThrough',
+          'InlineCode',
+          'SuperScript',
+          'SubScript',
+          '|',
+          'Formats',
+          'Blockquote',
+          '|',
+          'OrderedList',
+          'UnorderedList',
+          'CreateLink',
+          'Image',
+          'CreateTable',
+          '|',
+          'Undo',
+          'Redo',
+        ],
+      },
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
+  },
+}
+</script>
+
+<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.js
new file mode 100644
index 000000000..ae3e5ba10
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/expand-cs1/index.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<div id="markdown-editor">
+     <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor></div>`,
+    data: function () {
+      return {
+        rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        toolbarSettings: {
+          type: 'Expand',
+          items: [
+            'Bold',
+            'Italic',
+            'StrikeThrough',
+            'InlineCode',
+            'SuperScript',
+            'SubScript',
+            '|',
+            'Formats',
+            'Blockquote',
+            '|',
+            'OrderedList',
+            'UnorderedList',
+            'CreateLink',
+            'Image',
+            'CreateTable',
+             '|',
+            'Undo',
+            'Redo',
+          ],
+        },
+      };
+    },
+    provide: {
+      richtexteditor: [Toolbar, Link, Image, MarkdownEditor, Table],
+    },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/expand-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/expand-cs1/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/expand-cs1/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/app-composition.vue
new file mode 100644
index 000000000..75029098b
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/app-composition.vue
@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <div class="col-lg-4 property-section">
+            <div title="Properties" id="property">
+                <table title="Properties" id="property">
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div>
+                                    <ejs-checkbox label='Enable Floating' ref="checkInstance" :change="onFloatChange"
+                                        id="float" :checked="false"></ejs-checkbox>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="control-section">
+            <div class="sample-container">
+                <div class="default-section">
+                    <ejs-richtexteditor ref="rteInstance" :value="rteValue" :height="340" :toolbarSettings="toolbarSettings"></ejs-richtexteditor>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { provide, ref } from 'vue';
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, MarkdownEditor, Table, Image, Link } from "@syncfusion/ej2-vue-richtexteditor";
+import { CheckBoxComponent as EjsCheckbox } from "@syncfusion/ej2-vue-buttons";
+
+const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+const rteObj = ref(null);
+const toolbarSettings = {
+    enableFloating: false,
+    items: [ 'Bold', 'Italic', 'StrikeThrough', '|','SuperScript',
+          'SubScript','Formats','|','OrderedList', 'UnorderedList','CreateLink',
+          'Image', 'CreateTable','|','Undo','Redo'
+      ]
+}
+const onFloatChange = (args) => {
+    rteInstance.value.ej2Instances.toolbarSettings.enableFloating = args.checked;
+    rteInstance.value.rteInstance.dataBind();
+}
+provide('richtexteditor', [Toolbar, MarkdownEditor, Table, Image, Link]);
+</script>
+
+<style>@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/app.vue
new file mode 100644
index 000000000..23020655f
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/app.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <div class="col-lg-4 property-section">
+            <div title="Properties" id="property">
+                <table title="Properties" id="property">
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div>
+                                    <ejs-checkbox label='Enable Floating' ref="checkInstance" :change="onFloatChange" id="float" :checked="false"></ejs-checkbox>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="control-section">
+            <div class="sample-container">
+                <div class="default-section">
+                    <ejs-richtexteditor ref="rteInstance" editorMode="Markdown" :value="rteValue" :height="340" :toolbarSettings="toolbarSettings"></ejs-richtexteditor>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+ 
+<script>
+import { RichTextEditorComponent, Toolbar, MarkdownEditor, Table, Image, Link } from "@syncfusion/ej2-vue-richtexteditor";
+import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";
+
+export default {
+    name: "App",
+    components: {
+        "ejs-checkbox":CheckBoxComponent,
+        "ejs-richtexteditor":RichTextEditorComponent
+    },
+    data: function() {
+        return {
+            toolbarSettings: {
+                enableFloating: false,
+                  items: [ 'Bold',
+                    'Italic',
+                    'StrikeThrough',
+                    '|',
+                    'SuperScript',
+                    'SubScript',
+                    'Formats',
+                    '|',
+                    'OrderedList',
+                    'UnorderedList',
+                    'CreateLink',
+                    'Image',
+                    'CreateTable',
+                    '|',
+                    'Undo',
+                    'Redo'
+              ]  
+            },
+            rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        };
+    },
+    methods: {
+        onFloatChange: function(args) {
+            this.$refs.rteInstance.ej2Instances.toolbarSettings.enableFloating = args.checked;
+            this.$refs.rteInstance.dataBind();
+        }
+    },
+    provide:{
+        richtexteditor:[Toolbar, MarkdownEditor, Link, Image, Table]
+    }
+}
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.js
new file mode 100644
index 000000000..b630d3cb6
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/index.js
@@ -0,0 +1,71 @@
+import Vue from "vue";
+import { RichTextEditorPlugin, Toolbar, MarkdownEditor, Link, Image, Table } from "@syncfusion/ej2-vue-richtexteditor";
+import { CheckBoxPlugin } from "@syncfusion/ej2-vue-buttons";
+
+Vue.use(RichTextEditorPlugin);
+Vue.use(CheckBoxPlugin);
+
+new Vue({
+	el: '#app',
+	template: `
+    <div>
+        <div class="col-lg-4 property-section">
+            <div title="Properties" id="property">
+                <table title="Properties" id="property">
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div>
+                                    <ejs-checkbox label='Enable Floating' ref="checkInstance" :change="onFloatChange" id="float" :checked="false"></ejs-checkbox>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="control-section">
+            <div class="sample-container">
+                <div class="default-section">
+                    <ejs-richtexteditor ref="rteInstance" editorMode="Markdown" :value="rteValue" :height="340" :toolbarSettings="toolbarSettings"></ejs-richtexteditor>
+                </div>
+            </div>
+        </div>
+    </div>
+`,
+
+    data: function() {
+        return {
+            toolbarSettings: {
+                enableFloating: false,
+                items: [ 'Bold',
+                  'Italic',
+                  'StrikeThrough',
+                  '|',
+                  'SuperScript',
+                  'SubScript',
+                  'Formats',
+                  '|',
+                  'OrderedList',
+                  'UnorderedList',
+                  'CreateLink',
+                  'Image',
+                  'CreateTable',
+                   '|',
+                  'Undo',
+                  'Redo']
+            },
+            rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        };
+    },
+    methods: {
+        onFloatChange: function(args) {
+            this.$refs.rteInstance.ej2Instances.toolbarSettings.enableFloating = args.checked;
+            this.$refs.rteInstance.dataBind();
+        }
+    },
+    provide:{
+        richtexteditor:[Toolbar, MarkdownEditor, Link, Image, Table]
+    }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/floating-toolbar-cs1/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/app-composition.vue
new file mode 100644
index 000000000..6d72aaa80
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/app-composition.vue
@@ -0,0 +1,50 @@
+<template>
+  <div id="markdown-editor">
+        <ejs-richtexteditor
+          ref="editor"
+          :height="340"
+          editorMode="Markdown"
+          :value="rteValue"
+          :toolbarSettings="toolbarSettings"
+        ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Table, Image, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+const toolbarSettings = {
+    items: [ 'Bold',
+        'Italic',
+        'StrikeThrough',
+        'InlineCode',
+        'SuperScript',
+        'SubScript',
+        '|',
+        'Formats',
+        'Blockquote',
+        '|',
+        'OrderedList',
+        'UnorderedList',
+        'CreateLink',
+        'Image',
+        'CreateTable',
+         '|',
+        'Undo',
+        'Redo']
+};
+const rteValue=`In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+provide('richtexteditor', [Toolbar, Link, Image, Table, MarkdownEditor]);
+</script>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/app.vue
new file mode 100644
index 000000000..0212bf591
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/app.vue
@@ -0,0 +1,60 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+      ref="editor"
+      :height="340"
+      editorMode="Markdown"
+      :value="rteValue"
+      :toolbarSettings="toolbarSettings"
+    ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+    name: "App",
+    components: {
+        'ejs-richtexteditor': RichTextEditorComponent
+    },
+   data: function () {
+    return {
+      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+      toolbarSettings: {
+        items: [
+          'Bold',
+          'Italic',
+          'StrikeThrough',
+          'InlineCode',
+          'SuperScript',
+          'SubScript',
+          '|',
+          'Formats',
+          'Blockquote',
+          '|',
+          'OrderedList',
+          'UnorderedList',
+          'CreateLink',
+          'Image',
+          'CreateTable',
+          '|',
+          'Undo',
+          'Redo',
+        ],
+      },
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
+  },
+}
+</script>
+
+<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.js
new file mode 100644
index 000000000..b3b9f379e
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/index.js
@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<div id="markdown-editor">
+    <ejs-richtexteditor
+      ref="editor"
+      :height="340"
+      editorMode="Markdown"
+      :value="rteValue"
+      :toolbarSettings="toolbarSettings"
+    ></ejs-richtexteditor></div>`,
+    data: function () {
+      return {
+        rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        toolbarSettings: {
+          items: [
+            'Bold',
+            'Italic',
+            'StrikeThrough',
+            'InlineCode',
+            'SuperScript',
+            'SubScript',
+            '|',
+            'Formats',
+            'Blockquote',
+            '|',
+            'OrderedList',
+            'UnorderedList',
+            'CreateLink',
+            'Image',
+            'CreateTable',
+            '|',
+            'Undo',
+            'Redo',
+          ],
+        },
+      };
+    },
+    provide: {
+      richtexteditor: [Toolbar, Link, Image,Table, MarkdownEditor],
+    },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs1/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/app-composition.vue
new file mode 100644
index 000000000..0bc793500
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/app-composition.vue
@@ -0,0 +1,48 @@
+<template>
+    <ejs-richtexteditor
+      ref="editor"
+      :height="340"
+      editorMode="Markdown"
+      :value="rteValue"
+      :toolbarSettings="toolbarSettings"
+    ></ejs-richtexteditor>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Table, Image, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+const toolbarSettings = {
+    items: [ 'Bold',
+        'Italic',
+        'StrikeThrough',
+        'InlineCode',
+        'SuperScript',
+        'SubScript',
+        '|',
+        'Formats',
+        'Blockquote',
+        '|',
+        'OrderedList',
+        'UnorderedList',
+        'CreateLink',
+        'Image',
+        'CreateTable',
+         '|',
+        'Undo',
+        'Redo']
+};
+const rteValue=`In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+provide('richtexteditor', [Toolbar, Link, Image, Table, MarkdownEditor]);
+</script>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/app.vue b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/app.vue
new file mode 100644
index 000000000..7d7c94987
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/app.vue
@@ -0,0 +1,58 @@
+<template>
+    <ejs-richtexteditor
+      ref="editor"
+      :height="340"
+      editorMode="Markdown"
+      :value="rteValue"
+      :toolbarSettings="toolbarSettings"
+    ></ejs-richtexteditor>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+    name: "App",
+    components: {
+        'ejs-richtexteditor': RichTextEditorComponent
+    },
+   data: function () {
+    return {
+      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+      toolbarSettings: {
+        items: [
+          'Bold',
+          'Italic',
+          'StrikeThrough',
+          'InlineCode',
+          'SuperScript',
+          'SubScript',
+          '|',
+          'Formats',
+          'Blockquote',
+          '|',
+          'OrderedList',
+          'UnorderedList',
+          'CreateLink',
+          'Image',
+          'CreateTable',
+          '|',
+          'Undo',
+          'Redo',
+        ],
+      },
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
+  },
+}
+</script>
+
+<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.css b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.html b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.js b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.js
new file mode 100644
index 000000000..df3639c3e
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/index.js
@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `
+    <ejs-richtexteditor
+      ref="editor"
+      :height="340"
+      editorMode="Markdown"
+      :value="rteValue"
+      :toolbarSettings="toolbarSettings"
+    ></ejs-richtexteditor>`,
+    data: function () {
+      return {
+        rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        toolbarSettings: {
+          items: [
+            'Bold',
+            'Italic',
+            'StrikeThrough',
+            'InlineCode',
+            'SuperScript',
+            'SubScript',
+            '|',
+            'Formats',
+            'Blockquote',
+            '|',
+            'OrderedList',
+            'UnorderedList',
+            'CreateLink',
+            'Image',
+            'CreateTable',
+            '|',
+            'Undo',
+            'Redo',
+          ],
+        },
+      };
+    },
+    provide: {
+      richtexteditor: [Toolbar, Link, Image,Table, MarkdownEditor],
+    },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/getting-started-cs2/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/app-composition.vue
new file mode 100644
index 000000000..0f7ac1efc
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/app-composition.vue
@@ -0,0 +1,51 @@
+<template>
+  <div id="markdown-editor">
+      <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+const toolbarSettings = {
+    type: 'Scrollable',
+    items: [ 'Bold',
+        'Italic',
+        'StrikeThrough',
+        'InlineCode',
+        'SuperScript',
+        'SubScript',
+        '|',
+        'Formats',
+        'Blockquote',
+        '|',
+        'OrderedList',
+        'UnorderedList',
+        'CreateLink',
+        'Image',
+        'CreateTable',
+        'Undo',
+        'Redo',]
+};
+const rteValue=`In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+provide('richtexteditor', [Toolbar, Link, Image,Table, MarkdownEditor]);
+</script>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/app.vue
new file mode 100644
index 000000000..f46a067b0
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/app.vue
@@ -0,0 +1,61 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+    name: "App",
+    components: {
+        'ejs-richtexteditor': RichTextEditorComponent
+    },
+   data: function () {
+    return {
+      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+      toolbarSettings: {
+        items: [
+          'Bold',
+          'Italic',
+          'StrikeThrough',
+          'InlineCode',
+          'SuperScript',
+          'SubScript',
+          '|',
+          'Formats',
+          'Blockquote',
+          '|',
+          'OrderedList',
+          'UnorderedList',
+          'CreateLink',
+          'Image',
+          'CreateTable',
+          '|',
+          'Undo',
+          'Redo',
+        ],
+      },
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
+  },
+}
+</script>
+
+<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.js
new file mode 100644
index 000000000..33967e291
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/index.js
@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<div id="markdown-editor">
+     <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor></div>`,
+    data: function () {
+      return {
+        rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        toolbarSettings: {
+          items: [
+            'Bold',
+            'Italic',
+            'StrikeThrough',
+            'InlineCode',
+            'SuperScript',
+            'SubScript',
+            '|',
+            'Formats',
+            'Blockquote',
+            '|',
+            'OrderedList',
+            'UnorderedList',
+            'CreateLink',
+            'Image',
+            'CreateTable',
+            '|',
+            'Undo',
+            'Redo',
+          ],
+        },
+      };
+    },
+    provide: {
+      richtexteditor: [Toolbar, Link, Image,Table, MarkdownEditor],
+    },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs1/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs2/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/app-composition.vue
new file mode 100644
index 000000000..9952cb4ed
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/app-composition.vue
@@ -0,0 +1,22 @@
+<template>
+  <ejs-richtexteditor ref="markdown-editor" :placeholder="placeholder" editorMode="Markdown" :formatter="formatter" :value="rteValue">
+  </ejs-richtexteditor>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, MarkdownEditor, MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
+const customHTMLModel = {
+  keyConfig: {
+    'insert-link': 'ctrl+q', // confite the desired key
+  }
+}
+const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+const placeholder = "Type Something";
+const formatter = new MarkdownFormatter(customHTMLModel); // to configure custom key
+provide('richtexteditor', [Toolbar, Link, Image, MarkdownEditor]);
+</script>
+
+<style>
+@import 'https://ej2.syncfusion.com/vue/documentation./node_modules/@syncfusion/ej2/material.css';
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs2/app.vue b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/app.vue
new file mode 100644
index 000000000..c86f023de
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/app.vue
@@ -0,0 +1,34 @@
+<template>
+  <ejs-richtexteditor ref="markdown-editor" :placeholder="placeholder" editorMode="Markdown" :formatter="formatter" :value="rteValue">
+  </ejs-richtexteditor>
+</template>
+
+<script>
+
+import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor, MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+  name: "App",
+  components: {
+    "ejs-richtexteditor": RichTextEditorComponent
+  },
+  data() {
+    var customHTMLModel = {
+      keyConfig: {
+        'insert-link': 'ctrl+q', // confite the desired key
+      }
+    }
+    return {
+      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+      placeholder: "Type Something",
+      formatter: new MarkdownFormatter(customHTMLModel), // to configure custom key
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, MarkdownEditor]
+  }
+}
+</script>
+
+<style>
+@import 'https://ej2.syncfusion.com/vue/documentation./node_modules/@syncfusion/ej2/material.css';
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.css b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.css
new file mode 100644
index 000000000..5237d534e
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.css
@@ -0,0 +1,2 @@
+
+    
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.html b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.js b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.js
new file mode 100644
index 000000000..bc1da423a
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, MarkdownEditor, MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+
+new Vue({
+	el: '#app',
+	template: `
+  <ejs-richtexteditor ref="markdown-editor" editorMode="Markdown" :placeholder="placeholder" :formatter="formatter" :value="rteValue" >
+  </ejs-richtexteditor>`,
+
+  data() {
+    var customHTMLModel = {
+        keyConfig: {
+          'insert-link': 'ctrl+q', // confite the desired key
+      }
+    };
+    return {
+        rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        placeholder: "Type Something",
+        formatter: new MarkdownFormatter(customHTMLModel), // to configure custom key
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, MarkdownEditor]
+  }
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-cs2/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/systemjs.config.js
new file mode 100644
index 000000000..5baca278b
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-cs2/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/app-composition.vue
new file mode 100644
index 000000000..41f026791
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/app-composition.vue
@@ -0,0 +1,129 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+      id="editor"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :created="created"
+      :editorMode="editorMode"
+      :value="rteValue"
+    >
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<style>
+    .e-richtexteditor .e-rte-content .e-content{
+        min-height: 150px;
+    }
+    .e-richtexteditor .e-rte-content textarea.e-content {
+        float: left;
+        border-right: 1px solid rgba(0, 0, 0, 0.12);
+    }
+    .e-richtexteditor .e-rte-content {
+        overflow: hidden;
+    }
+    .e-md-preview::before {
+        content: '\e345';
+    }
+
+    .e-rte-content .e-content.e-pre-source {
+        width: 100%;
+    }
+    .e-icon-btn.e-active .e-md-preview.e-icons::before {
+        content: '\e350';
+    }
+</style>
+
+<script setup>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+
+const rteInstance = ref(null);
+const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+let textArea = null;
+let id= '';
+let mdsource= null;
+let htmlPreview= null;
+let previewTextArea= null;
+
+const toolbarSettings = {
+    items: [
+        'Image',
+        {
+                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>',
+        },
+    ],
+};
+const editorMode = 'Markdown';
+const created = () => {
+    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 (this.mdsource.classList.contains('e-active')) {
+        this.htmlPreview.innerHTML = marked(this.textArea.value);
+    }
+};
+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 {
+        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]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/app.vue
new file mode 100644
index 000000000..262893e91
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/app.vue
@@ -0,0 +1,141 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+      id="editor"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :created="created"
+      :editorMode="editorMode"
+      :value="rteValue"
+    >
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<style>
+.e-richtexteditor .e-rte-content .e-content {
+  min-height: 150px;
+}
+.e-richtexteditor .e-rte-content textarea.e-content {
+  float: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.e-md-preview::before {
+  content: '\\e345';
+}
+
+.e-rte-content .e-content.e-pre-source {
+  width: 100%;
+}
+.e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\\e350';
+}
+</style>
+
+<script>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-richtexteditor":RichTextEditorComponent
+    },
+    data: function() {
+        return {
+            rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            editorMode: 'Markdown',
+            toolbarSettings: {
+                items: [
+                    'Image',
+                    {
+                            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>',
+                    },
+                ],
+            },
+        };
+    },
+    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(['CreateTable']);
+                } else {
+                this.$refs.rteInstance.enableToolbarItem(['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]
+    }
+}
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.css
new file mode 100644
index 000000000..b78c1353f
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.css
@@ -0,0 +1,21 @@
+
+.e-richtexteditor .e-rte-content .e-content {
+  min-height: 150px;
+}
+.e-richtexteditor .e-rte-content textarea.e-content {
+  float: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.e-md-preview::before {
+  content: '\e345';
+}
+
+.e-rte-content .e-content.e-pre-source {
+  width: 100%;
+}
+.e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\e350';
+}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.js
new file mode 100644
index 000000000..602dbaf60
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/index.js
@@ -0,0 +1,104 @@
+import Vue from "vue";
+import {
+  RichTextEditorPlugin,
+  Toolbar,
+  Link,
+  Image,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+Vue.use(RichTextEditorPlugin);
+
+
+new Vue({
+	el: '#app',
+	template: `<div id="markdown-editor">
+                    <ejs-richtexteditor
+                    id="editor"
+                    ref="rteInstance"
+                    :toolbarSettings="toolbarSettings"
+                    :created="created"
+                    :editorMode="editorMode"
+                    :value="rteValue"
+                    >
+                    </ejs-richtexteditor>
+                </div>`,
+
+    data: function() {
+        return {
+            rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            editorMode: 'Markdown',
+            toolbarSettings: {
+                items: [
+                    'Image',
+                    {
+                            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>',
+                    },
+                ],
+            },
+        };
+    },
+    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(['CreateTable']);
+                } else {
+                this.$refs.rteInstance.enableToolbarItem(['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]
+    }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/systemjs.config.js
new file mode 100644
index 000000000..f4147de4f
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-image-cs1/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",        
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js",
+        "marked": "https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/app-composition.vue
new file mode 100644
index 000000000..7e36b31c7
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/app-composition.vue
@@ -0,0 +1,399 @@
+<template>
+  <div class="control-section rte-markdown-overview">
+    <ejs-richtexteditor
+      id="markdown-editor"
+      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>
+   .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;
+}
+
+#markdown-editor_editable-content_popup li {
+  padding: 10px !important;
+  height: 60px;
+}
+
+body[class*='-dark'] .em-name {
+  color: #fff !important;
+}
+</style>
+
+<script setup>
+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);
+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= "#markdown-editor_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',
+    ],
+};
+
+const 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',
+    },
+];
+
+const created = () => {
+    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 (this.mdsource.classList.contains('e-active')) {
+        this.htmlPreview.innerHTML = marked(this.textArea.value);
+    }
+};
+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 {
+        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, Table, MarkdownEditor]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/app.vue b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/app.vue
new file mode 100644
index 000000000..5d720109d
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/app.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="control-section rte-markdown-overview">
+    <ejs-richtexteditor
+      id="markdown-editor"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :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>
+.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;
+}
+
+#markdown-editor_editable-content_popup li {
+  padding: 10px !important;
+  height: 60px;
+}
+
+body[class*='-dark'] .em-name {
+  color: #fff !important;
+}
+</style>
+
+<script>
+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,
+        '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: '#markdown-editor_editable-content',
+          mentionfields: { text: 'name' },
+          placeholder: 'Enter your text here...',
+          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',
+            ],
+          },
+          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',
+              ]);
+            }
+          };
+        },
+      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,Table, MarkdownEditor]
+    }
+}
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/index.css b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/index.css
new file mode 100644
index 000000000..a45c7f066
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/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;
+}
+
+#markdown-editor_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/markdown-editor/markdown-mention-support/index.html b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/index.js b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/index.js
new file mode 100644
index 000000000..e399e67b8
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/index.js
@@ -0,0 +1,289 @@
+import Vue from "vue";
+import {
+    RichTextEditorPlugin,
+    Toolbar,
+    Link,
+    Image,
+    MarkdownEditor,
+    Table,
+  } 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: `<div class="control-section rte-markdown-overview">
+                    <ejs-richtexteditor
+                    id="markdown-editor"
+                    ref="rteInstance"
+                    :toolbarSettings="toolbarSettings"
+                    :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: 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: '#markdown-editor_editable-content',
+            mentionfields: { text: 'name' },
+            placeholder: 'Enter your text here...',
+            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',
+                ],
+            },
+            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',
+                ]);
+              }
+            };
+          },
+          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, Table, MarkdownEditor]
+    }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/systemjs.config.js
new file mode 100644
index 000000000..f4147de4f
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-mention-support/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",        
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js",
+        "marked": "https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/app-composition.vue
new file mode 100644
index 000000000..8734600a8
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/app-composition.vue
@@ -0,0 +1,140 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+      id="editor"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :created="created"
+      :editorMode="editorMode"
+      :value="rteValue"
+    >
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<style>
+    .e-richtexteditor .e-rte-content .e-content{
+        min-height: 150px;
+    }
+    .e-richtexteditor .e-rte-content textarea.e-content {
+        float: left;
+        border-right: 1px solid rgba(0, 0, 0, 0.12);
+    }
+    .e-richtexteditor .e-rte-content {
+        overflow: hidden;
+    }
+    .e-md-preview::before {
+        content: '\e345';
+    }
+
+    .e-rte-content .e-content.e-pre-source {
+        width: 100%;
+    }
+    .e-icon-btn.e-active .e-md-preview.e-icons::before {
+        content: '\e350';
+    }
+</style>
+
+<script setup>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  Table,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+import { L10n } from '@syncfusion/ej2-base';
+
+L10n.load({
+  'en-US': {
+    richtexteditor: {
+      TableHeadingText: 'Header',
+      TableColText: 'Cell',
+    },
+  },
+});
+
+const rteInstance = ref(null);
+const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+let textArea = null;
+let id= '';
+let mdsource= null;
+let htmlPreview= null;
+let previewTextArea= null;
+
+const toolbarSettings = {
+    items: [
+        '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>',
+        },
+    ],
+};
+const editorMode = 'Markdown';
+const created = () => {
+    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 (this.mdsource.classList.contains('e-active')) {
+        this.htmlPreview.innerHTML = marked(this.textArea.value);
+    }
+};
+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 {
+        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, Table, MarkdownEditor]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/app.vue b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/app.vue
new file mode 100644
index 000000000..ea6bd45a9
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/app.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+      id="editor"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :created="created"
+      :editorMode="editorMode"
+      :value="rteValue"
+    >
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<style>
+.e-richtexteditor .e-rte-content .e-content {
+  min-height: 150px;
+}
+.e-richtexteditor .e-rte-content textarea.e-content {
+  float: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.e-md-preview::before {
+  content: '\e345';
+}
+
+.e-rte-content .e-content.e-pre-source {
+  width: 100%;
+}
+.e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\e350';
+}
+</style>
+
+<script>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,Table,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+import { L10n } from '@syncfusion/ej2-base';
+
+L10n.load({
+  'en-US': {
+    richtexteditor: {
+      TableHeadingText: 'Header',
+      TableColText: 'Cell',
+    },
+  },
+});
+
+export default {
+    name: "App",
+    components: {
+        "ejs-richtexteditor":RichTextEditorComponent
+    },
+    data: function() {
+        return {
+            rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            editorMode: 'Markdown',
+            toolbarSettings: {
+                items: [
+                    '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>',
+                    },
+                ],
+            },
+        };
+    },
+    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(['CreateTable']);
+                } else {
+                this.$refs.rteInstance.enableToolbarItem(['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,Table, MarkdownEditor]
+    }
+}
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.css b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.css
new file mode 100644
index 000000000..ba6e2a57a
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.css
@@ -0,0 +1,20 @@
+.e-richtexteditor .e-rte-content .e-content {
+  min-height: 150px;
+}
+.e-richtexteditor .e-rte-content textarea.e-content {
+  float: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.e-md-preview::before {
+  content: '\e345';
+}
+
+.e-rte-content .e-content.e-pre-source {
+  width: 100%;
+}
+.e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\e350';
+}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.html b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.js b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.js
new file mode 100644
index 000000000..5a1ff4df8
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/index.js
@@ -0,0 +1,116 @@
+import Vue from "vue";
+import {
+  RichTextEditorPlugin,
+  Toolbar,
+  Link,
+  Image,
+  Table,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
+import { L10n } from '@syncfusion/ej2-base';
+
+L10n.load({
+    'en-US': {
+      richtexteditor: {
+        TableHeadingText: 'Header',
+        TableColText: 'Cell',
+      },
+    },
+});
+
+Vue.use(RichTextEditorPlugin);
+
+
+new Vue({
+	el: '#app',
+	template: `<div id="markdown-editor">
+                    <ejs-richtexteditor
+                    id="editor"
+                    ref="rteInstance"
+                    :toolbarSettings="toolbarSettings"
+                    :created="created"
+                    :editorMode="editorMode"
+                    :value="rteValue"
+                    >
+                    </ejs-richtexteditor>
+                </div>`,
+
+    data: function() {
+        return {
+            rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            editorMode: 'Markdown',
+            toolbarSettings: {
+                items: [
+                    '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>',
+                    },
+                ],
+            },
+        };
+    },
+    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(['CreateTable']);
+                } else {
+                this.$refs.rteInstance.enableToolbarItem(['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, Table, MarkdownEditor]
+    }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/systemjs.config.js
new file mode 100644
index 000000000..f4147de4f
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/markdown-table-cs2/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",        
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js",
+        "marked": "https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/multirow-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/app-composition.vue
new file mode 100644
index 000000000..742907688
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/app-composition.vue
@@ -0,0 +1,51 @@
+<template>
+  <div id="markdown-editor">
+      <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+const toolbarSettings = {
+    items: [ 'Bold',
+        'Italic',
+        'StrikeThrough',
+        'InlineCode',
+        'SuperScript',
+        'SubScript',
+        '|',
+        'Formats',
+        'Blockquote',
+        '|',
+        'OrderedList',
+        'UnorderedList',
+        'CreateLink',
+        'Image',
+        'CreateTable',
+        '|',
+        'Undo',
+        'Redo',]
+};
+const rteValue=`In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+provide('richtexteditor', [Toolbar, Link, Image,Table, MarkdownEditor]);
+</script>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/multirow-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/app.vue
new file mode 100644
index 000000000..3905c73d8
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/app.vue
@@ -0,0 +1,62 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+    name: "App",
+    components: {
+        'ejs-richtexteditor': RichTextEditorComponent
+    },
+   data: function () {
+    return {
+      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+      toolbarSettings: {
+        type: 'Multirow',
+        items: [
+          'Bold',
+          'Italic',
+          'StrikeThrough',
+          'InlineCode',
+          'SuperScript',
+          'SubScript',
+          '|',
+          'Formats',
+          'Blockquote',
+          '|',
+          'OrderedList',
+          'UnorderedList',
+          'CreateLink',
+          'Image',
+          'CreateTable',
+          '|',
+          'Undo',
+          'Redo',
+        ],
+      },
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
+  },
+}
+</script>
+
+<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.js
new file mode 100644
index 000000000..79ceb398b
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/index.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<div id="markdown-editor">
+     <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor></div>`,
+    data: function () {
+      return {
+        rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        toolbarSettings: {
+          type: 'Multirow',
+          items: [
+            'Bold',
+            'Italic',
+            'StrikeThrough',
+            'InlineCode',
+            'SuperScript',
+            'SubScript',
+            '|',
+            'Formats',
+            'Blockquote',
+            '|',
+            'OrderedList',
+            'UnorderedList',
+            'CreateLink',
+            'Image',
+            'CreateTable',
+            '|',
+            'Undo',
+            'Redo',
+          ],
+        },
+      };
+    },
+    provide: {
+      richtexteditor: [Toolbar, Link, Image,Table, MarkdownEditor],
+    },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/multirow-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/multirow-cs1/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/app-composition.vue b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/app-composition.vue
new file mode 100644
index 000000000..73c6797df
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/app-composition.vue
@@ -0,0 +1,52 @@
+<template>
+  <div id="markdown-editor">
+      <ejs-richtexteditor
+        ref="markdown-editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+const toolbarSettings = {
+    type: 'Scrollable',
+    items: [ 'Bold',
+        'Italic',
+        'StrikeThrough',
+        'InlineCode',
+        'SuperScript',
+        'SubScript',
+        '|',
+        'Formats',
+        'Blockquote',
+        '|',
+        'OrderedList',
+        'UnorderedList',
+        'CreateLink',
+        'Image',
+        'CreateTable',
+        '|',
+        'Undo',
+        'Redo',]
+};
+const rteValue=`In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+provide('richtexteditor', [Toolbar, Link, Image, Table, MarkdownEditor]);
+</script>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/app.vue b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/app.vue
new file mode 100644
index 000000000..58e004085
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/app.vue
@@ -0,0 +1,62 @@
+<template>
+  <div id="markdown-editor">
+    <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+    name: "App",
+    components: {
+        'ejs-richtexteditor': RichTextEditorComponent
+    },
+   data: function () {
+    return {
+      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+      toolbarSettings: {
+        type: 'Scrollable',
+        items: [
+          'Bold',
+          'Italic',
+          'StrikeThrough',
+          'InlineCode',
+          'SuperScript',
+          'SubScript',
+          '|',
+          'Formats',
+          'Blockquote',
+          '|',
+          'OrderedList',
+          'UnorderedList',
+          'CreateLink',
+          'Image',
+          'CreateTable',
+          '|',
+          'Undo',
+          'Redo',
+        ],
+      },
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
+  },
+}
+</script>
+
+<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.css b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.html b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.js b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.js
new file mode 100644
index 000000000..7039a8b9a
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/index.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<div id="markdown-editor">
+     <ejs-richtexteditor
+        ref="editor"
+        :height="340"
+        :width="500"
+        editorMode="Markdown"
+        :value="rteValue"
+        :toolbarSettings="toolbarSettings"
+      ></ejs-richtexteditor></div>`,
+    data: function () {
+      return {
+        rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        toolbarSettings: {
+          type: 'Scrollable',
+          items: [
+            'Bold',
+            'Italic',
+            'StrikeThrough',
+            'InlineCode',
+            'SuperScript',
+            'SubScript',
+            '|',
+            'Formats',
+            'Blockquote',
+            '|',
+            'OrderedList',
+            'UnorderedList',
+            'CreateLink',
+            'Image',
+            'CreateTable',
+            '|',
+            'Undo',
+            'Redo',
+          ],
+        },
+      };
+    },
+    provide: {
+      richtexteditor: [Toolbar, Link, Image,Table, MarkdownEditor],
+    },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/systemjs.config.js b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/markdown-editor/scrollable-cs1/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/app-composition.vue
index 936c26b2e..5a68474e4 100644
--- a/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/app-composition.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/app-composition.vue
@@ -1,33 +1,5 @@
 <template>
   <ejs-richtexteditor ref="defaultRTE" :height="340" :toolbarSettings="toolbarData" :valueTemplate="valueTemplate" editorMode="Markdown">
-    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b>Key features:</b></p>
-    <ul>
-      <li>
-        <p>Provides IFRAME and DIV modes</p>
-      </li>
-      <li>
-        <p>Capable of handling markdown editing.</p>
-      </li>
-      <li>
-        <p>Contains a modular library to load the necessary functionality on demand.</p>
-      </li>
-      <li>
-        <p>Provides a fully customizable toolbar.</p>
-      </li>
-      <li>
-        <p>Provides HTML view to edit the source directly for developers.</p>
-      </li>
-      <li>
-        <p>Supports third-party library integration.</p>
-      </li>
-      <li>
-        <p>Allows preview of modified content before saving it.</p>
-      </li>
-      <li>
-        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
-      </li>
-    </ul>
   </ejs-richtexteditor>
 </template>
 <script setup>
diff --git a/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/app.vue b/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/app.vue
index 675e9dd0e..a12641c96 100644
--- a/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/app.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/app.vue
@@ -1,33 +1,5 @@
 <template>
   <ejs-richtexteditor ref="defaultRTE" :height="340" :toolbarSettings="toolbarData" :valueTemplate="valueTemplate" editorMode="Markdown">
-    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b>Key features:</b></p>
-    <ul>
-      <li>
-        <p>Provides IFRAME and DIV modes</p>
-      </li>
-      <li>
-        <p>Capable of handling markdown editing.</p>
-      </li>
-      <li>
-        <p>Contains a modular library to load the necessary functionality on demand.</p>
-      </li>
-      <li>
-        <p>Provides a fully customizable toolbar.</p>
-      </li>
-      <li>
-        <p>Provides HTML view to edit the source directly for developers.</p>
-      </li>
-      <li>
-        <p>Supports third-party library integration.</p>
-      </li>
-      <li>
-        <p>Allows preview of modified content before saving it.</p>
-      </li>
-      <li>
-        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
-      </li>
-    </ul>
   </ejs-richtexteditor>
 </template>
 
diff --git a/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/index.js b/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/index.js
index b5ad717ae..4053893d8 100644
--- a/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/index.js
+++ b/ej2-vue/code-snippet/rich-text-editor/getting-started-cs22/index.js
@@ -9,34 +9,6 @@ new Vue({
 	el: '#app',
 	template: `
   <ejs-richtexteditor ref="defaultRTE" :height="340" :toolbarSettings="toolbarData" :valueTemplate="valueTemplate" editorMode="Markdown">
-    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b>Key features:</b></p>
-    <ul>
-      <li>
-        <p>Provides IFRAME and DIV modes</p>
-      </li>
-      <li>
-        <p>Capable of handling markdown editing.</p>
-      </li>
-      <li>
-        <p>Contains a modular library to load the necessary functionality on demand.</p>
-      </li>
-      <li>
-        <p>Provides a fully customizable toolbar.</p>
-      </li>
-      <li>
-        <p>Provides HTML view to edit the source directly for developers.</p>
-      </li>
-      <li>
-        <p>Supports third-party library integration.</p>
-      </li>
-      <li>
-        <p>Allows preview of modified content before saving it.</p>
-      </li>
-      <li>
-        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
-      </li>
-    </ul>
   </ejs-richtexteditor>
 `,
 
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/app-composition.vue
index 88f83a35f..b1c785e09 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/app-composition.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/app-composition.vue
@@ -1,147 +1,162 @@
 <template>
-  <div id="defaultRTE">
-    <ejs-richtexteditor id="preview" ref="rteInstance" :toolbarSettings="toolbarSettings" :created="created" :actionComplete='actionComplete' :editorMode="editorMode" :height="height"></ejs-richtexteditor>
+  <div class="control-section markdown-preview">
+    <ejs-splitter
+      ref="splitterObj"
+      id="splitter-rte-markdown-preview"
+      width="100%"
+      height="450px"
+      :resizing="onRefreshUI"
+      :created="updateOrientation"
+    >
+      <e-panes>
+        <e-pane
+          size="50%"
+          :resizable="true"
+          :content="'pane1Content'"
+          min="40%"
+        >
+          <template v-slot:pane1Content>
+            <ejs-richtexteditor
+              id="defaultRTE"
+              ref="rteObj"
+              :toolbarSettings="toolbarSettings"
+              :value="value"
+              height="100%"
+              saveInterval="1"
+              maxLength="5000"
+              :created="onCreate"
+              :change="onChange"
+              :actionComplete="updateValue"
+              :editorMode="editorMode"
+            >
+            </ejs-richtexteditor>
+          </template>
+        </e-pane>
+        <e-pane :content="'pane2Content'" min="40%">
+          <template v-slot:pane2Content>
+            <div class="heading right">
+              <h4 class="title"><b>Markdown Preview</b></h4>
+              <div
+                class="splitter-default-content source-code pane2"
+                style="padding: 20px"
+              ></div>
+            </div>
+          </template>
+        </e-pane>
+      </e-panes>
+    </ejs-splitter>
   </div>
 </template>
 
 <style>
-    .e-richtexteditor .e-rte-content .e-content{
-        min-height: 150px;
-    }
-    .e-richtexteditor .e-rte-content textarea.e-content {
-        float: left;
-        border-right: 1px solid rgba(0, 0, 0, 0.12);
-    }
-    .e-richtexteditor .e-rte-content {
-        overflow: hidden;
-    }
-    .e-md-preview::before {
-        content: '\e345';
-    }
 
-    .e-rte-content .e-content.e-pre-source {
-        width: 100%;
-    }
-    .e-icon-btn.e-active .e-md-preview.e-icons::before {
-        content: '\e350';
-    }
+.markdown-preview .heading {
+    float: left;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0px;
+    border-left: none;
+    border-top: none;
+}
+.markdown-preview .title {
+    color: #333333;
+    letter-spacing: 1px;
+    padding-left: 10px;
+    text-align: center;
+    margin: 10px 0;
+}
+.fabric-dark .markdown-preview .title,
+.bootstrap5-dark .markdown-preview .title,
+.bootstrap5\.3-dark .markdown-preview .title,
+.bootstrap-dark .markdown-preview .title,
+.fluent-dark .markdown-preview .title,
+.fluent2-dark .markdown-preview .title,
+.material-dark .markdown-preview .title,
+.tailwind-dark .markdown-preview .title,
+.tailwind3-dark .markdown-preview .title,
+.highcontrast .markdown-preview .title {
+    color: #fff;
+}
 </style>
 
 <script setup>
-import { isNullOrUndefined } from "@syncfusion/ej2-base";
-import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import { Browser } from '@syncfusion/ej2-base';
+import {
+    RichTextEditorComponent as EjsRichtexteditor,
+    Toolbar,
+    Link,
+    Image,
+    Table,
+    MarkdownEditor,
+  } from '@syncfusion/ej2-vue-richtexteditor';
+import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';
 import { marked } from 'marked';
 
-const rteValue = `***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.
+const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. 
+                    Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
+                    and phrases should look different from each other
+                    
+                    Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.
+                    
+                    We can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).
+                    
+                    The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content`;
 
-                        ***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 rteInstance = ref(null);
-let textArea = '';
-const  height = '300px';
+const rteObj = ref(null);
 const toolbarSettings = {
-    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>' },
-        { tooltipText: 'Split Editor', template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-            '<span class="e-btn-icon e-view-side e-icons"></span></button>' }, 'FullScreen', '|', 'Undo', 'Redo']
+    items: [
+        'Bold',
+        'Italic',
+        'StrikeThrough',
+        '|',
+        'Formats',
+        'Blockquote',
+        'OrderedList',
+        'UnorderedList',
+        '|',
+        'CreateLink',
+        'Image',
+        'CreateTable',
+        '|',
+        'Undo',
+        'Redo',
+    ],
 };
-const editorMode = 'Markdown';
-const created = () => {
-    var script = document.createElement('script');
-    script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
-    document.head.appendChild(script);
-    textArea = rteInstance.value.$el.parentNode.querySelector('.e-content');
-    textArea.onkeyup = (Event) => {
-        markDownConversion();
-    };
-    document.getElementById('preview-code').onclick = () => {
-        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');
-        }
-    };
-    document.getElementById('MD_Preview').onclick = () => {
-        if (rteInstance.value.$el.classList.contains('e-rte-full-screen')) {
-            fullPreview({ mode: true, type: '' });
-        }
-        document.getElementById('preview-code').classList.remove('e-active');
-        rteInstance.value.ej2Instances.showFullScreen();
-    };
+let textArea= null;
+let srcArea= null;
+const editorMode= 'Markdown';
+
+const onCreate = () => {
+    setTimeout(() => {
+        this.$refs.rteObj.ej2Instances.refreshUI();
+        this.textArea =
+        this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
+        this.srcArea = document.querySelector('.source-code');
+        this.updateValue();
+    }, 10);
+   
 };
-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(textArea.value);
-    }
+const onChange = () => {
+   this.updateValue();
 };
-const actionComplete = (e) => {
-    var mdsource = document.getElementById('preview-code');
-    var mdSplit = document.getElementById('MD_Preview');
-    var id = rteInstance.value.ej2Instances.getID() + 'html-view';
-    var htmlPreview = rteInstance.value.$el.parentNode.querySelector('#' + id);
-    if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
-        fullPreview({ mode: true, type: '' });
-    } else if (!mdSplit.parentElement.classList.contains('e-overlay')) {
-        if (e.targetItem === 'Minimize') {
-            textArea.style.display = 'block';
-            textArea.style.width = '100%';
-            if (htmlPreview) { htmlPreview.style.display = 'none'; }
-            mdSplit.classList.remove('e-active');
-            mdsource.classList.remove('e-active');
-        }
-        markDownConversion();
-    }
+
+const updateValue = () => {
+   this.srcArea.innerHTML = marked(
+        this.$refs.rteObj.ej2Instances.contentModule.getEditPanel().value
+    );
 };
-const fullPreview = (event) => {
-    var mdsource = document.getElementById('preview-code');
-    var mdSplit = document.getElementById('MD_Preview');
-    var id = rteInstance.value.ej2Instances.getID() + 'html-view';
-    var htmlPreview = rteInstance.value.$el.parentNode.querySelector('#' + id);
-    if ((mdsource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && event.mode) {
-        mdsource.classList.remove('e-active');
-        mdSplit.classList.remove('e-active');
-        textArea.style.display = 'block';
-        textArea.style.width = '100%';
-        htmlPreview.style.display = 'none';
-    } else {
-        mdsource.classList.add('e-active');
-        mdSplit.classList.add('e-active');
-        if (!htmlPreview) {
-            htmlPreview = document.createElement('div');
-            htmlPreview.id = id;
-            htmlPreview.setAttribute('class', 'e-content');
-            textArea.parentNode.appendChild(htmlPreview);
-        }
-        if (event.type === 'preview') {
-            textArea.style.display = 'none';
-            htmlPreview.classList.add('e-pre-source');
-        } else {
-            htmlPreview.classList.remove('e-pre-source');
-            textArea.style.width = '50%';
-        }
-        htmlPreview.style.display = 'block';
-        htmlPreview.innerHTML = marked.parse(rteInstance.value.ej2Instances.contentModule.getEditPanel().value);
-        mdsource.parentElement.title = 'Code View';
+const onRefreshUI = () => {
+   this.$refs.rteObj.ej2Instances.refreshUI();
+};
+
+const updateOrientation = () => {
+   if (Browser.isDevice) {
+        this.$refs.splitterObj.$el.ej2_instances[0].orientation = 'Vertical';
+        document.body.querySelector('.heading').style.width = 'auto';
     }
-}
-provide('richtexteditor', [Toolbar, Link, Image, MarkdownEditor]);
+};
+provide('richtexteditor', [Toolbar, Link, Image, Table, MarkdownEditor]);
 </script>
 
 <style>
@@ -152,5 +167,6 @@ provide('richtexteditor', [Toolbar, Link, Image, MarkdownEditor]);
 @import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
 @import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
 @import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
 @import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
 </style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/app.vue b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/app.vue
index 9baae94d2..05563ad25 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/app.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/app.vue
@@ -1,158 +1,173 @@
 <template>
-  <div id="defaultRTE">
-    <ejs-richtexteditor id="preview" ref="rteInstance" :value:"rteValue" :toolbarSettings="toolbarSettings" :created="created" :actionComplete='actionComplete' :editorMode="editorMode" :height="height"></ejs-richtexteditor>
+  <div class="control-section markdown-preview">
+    <ejs-splitter
+      ref="splitterObj"
+      id="splitter-rte-markdown-preview"
+      width="100%"
+      height="450px"
+      :resizing="onRefreshUI"
+      :created="updateOrientation"
+    >
+      <e-panes>
+        <e-pane
+          size="50%"
+          :resizable="true"
+          :content="'pane1Content'"
+          min="40%"
+        >
+          <template v-slot:pane1Content>
+            <ejs-richtexteditor
+              id="defaultRTE"
+              ref="rteObj"
+              :toolbarSettings="toolbarSettings"
+              :value="value"
+              height="100%"
+              saveInterval="1"
+              maxLength="5000"
+              :created="onCreate"
+              :change="onChange"
+              :actionComplete="updateValue"
+              :editorMode="editorMode"
+            >
+            </ejs-richtexteditor>
+          </template>
+        </e-pane>
+        <e-pane :content="'pane2Content'" min="40%">
+          <template v-slot:pane2Content>
+            <div class="heading right">
+              <h4 class="title"><b>Markdown Preview</b></h4>
+              <div
+                class="splitter-default-content source-code pane2"
+                style="padding: 20px"
+              ></div>
+            </div>
+          </template>
+        </e-pane>
+      </e-panes>
+    </ejs-splitter>
   </div>
 </template>
 
 <style>
-    .e-richtexteditor .e-rte-content .e-content{
-        min-height: 150px;
-    }
-    .e-richtexteditor .e-rte-content textarea.e-content {
-        float: left;
-        border-right: 1px solid rgba(0, 0, 0, 0.12);
-    }
-    .e-richtexteditor .e-rte-content {
-        overflow: hidden;
-    }
-    .e-md-preview::before {
-        content: '\\e345';
-    }
-
-    .e-rte-content .e-content.e-pre-source {
-        width: 100%;
-    }
-    .e-icon-btn.e-active .e-md-preview.e-icons::before {
-        content: '\\e350';
-    }
+.markdown-preview .heading {
+  float: left;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0px;
+  border-left: none;
+  border-top: none;
+}
+.markdown-preview .title {
+  color: #333333;
+  letter-spacing: 1px;
+  padding-left: 10px;
+  text-align: center;
+  margin: 10px 0;
+}
+.fabric-dark .markdown-preview .title,
+.bootstrap5-dark .markdown-preview .title,
+.bootstrap5\.3-dark .markdown-preview .title,
+.bootstrap-dark .markdown-preview .title,
+.fluent-dark .markdown-preview .title,
+.fluent2-dark .markdown-preview .title,
+.material-dark .markdown-preview .title,
+.tailwind-dark .markdown-preview .title,
+.tailwind3-dark .markdown-preview .title,
+.highcontrast .markdown-preview .title {
+  color: #fff;
+}
 </style>
 
 <script>
-import { isNullOrUndefined } from "@syncfusion/ej2-base";
-import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor } from "@syncfusion/ej2-vue-richtexteditor";
+
+import { Browser } from '@syncfusion/ej2-base';
+import {
+    RichTextEditorComponent,
+    Toolbar,
+    Link,
+    Image, Table, 
+    MarkdownEditor,
+  } from '@syncfusion/ej2-vue-richtexteditor';
+import {
+    SplitterComponent,
+    PanesDirective,
+    PaneDirective,
+} from '@syncfusion/ej2-vue-layouts';
 import { marked } from 'marked';
 
 export default {
     name: "App",
     components: {
-        "ejs-richtexteditor":RichTextEditorComponent
+            'ejs-richtexteditor': RichTextEditorComponent,
+            'ejs-splitter': SplitterComponent,
+            'e-panes': PanesDirective,
+            'e-pane': PaneDirective,
     },
     data: function() {
         return {
-            rteValue: `***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.`,
-            textArea: '',
-            height: '300px',
+            textArea: null,
+            srcArea: null,
+            editorMode: 'Markdown',
             toolbarSettings: {
-                items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|',
-                    { 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>' },
-                    { tooltipText: 'Split Editor', template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-                        '<span class="e-btn-icon e-view-side e-icons"></span></button>' }, 'FullScreen', '|', 'Undo', 'Redo']
+              items: [
+                'Bold',
+                'Italic',
+                'StrikeThrough',
+                '|',
+                'Formats',
+                'OrderedList',
+                'UnorderedList',
+                '|',
+                'CreateLink',
+                'Image',
+                'CreateTable',
+                '|',
+                'Undo',
+                'Redo',
+              ],
             },
-            editorMode: 'Markdown',
-        };
+            value: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. 
+                    Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
+                    and phrases should look different from each other
+                    
+                    Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.
+                    
+                    We can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).
+                    
+                    The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content`,
+        }
     },
     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', 'CreateTable']);
-                     event.target.parentElement.parentElement.nextElementSibling.classList.add('e-overlay');
-                } else {
-                    this.$refs.rteInstance.ej2Instances.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-                     'UnorderedList', 'CreateLink', 'Image', 'CreateTable']);
-                      event.target.parentElement.parentElement.nextElementSibling.classList.remove('e-overlay');
-                }
-            };
-            document.getElementById('MD_Preview').onclick = () => {
-                if (this.$refs.rteInstance.$el.classList.contains('e-rte-full-screen')) {
-                    this.fullPreview({ mode: true, type: '' });
-                }
-                document.getElementById('preview-code').classList.remove('e-active');
-                this.$refs.rteInstance.ej2Instances.showFullScreen();
-            };
+        onCreate: function () {
+            setTimeout(() => {
+              this.$refs.rteObj.ej2Instances.refreshUI();
+              this.textArea =
+                this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
+              this.srcArea = document.querySelector('.source-code');
+              this.updateValue();
+            }, 10);
+          },
+        onChange: function () {
+            this.updateValue();
         },
-        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.parentNode.querySelector('#' + id);
-                htmlPreview.innerHTML = marked.parse(this.textArea.value);
-            }
+        updateValue: function (e) {
+            this.srcArea.innerHTML = marked(
+                this.$refs.rteObj.ej2Instances.contentModule.getEditPanel().value
+            );
         },
-        actionComplete: function(e) {
-            var mdsource = document.getElementById('preview-code');
-            var mdSplit = document.getElementById('MD_Preview');
-            var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-            var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-                if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
-                    this.fullPreview({ mode: true, type: '' });
-                } else if (!mdSplit.parentElement.classList.contains('e-overlay')) {
-                    if (e.targetItem === 'Minimize') {
-                    this.textArea.style.display = 'block';
-                    this.textArea.style.width = '100%';
-                    if (htmlPreview) { htmlPreview.style.display = 'none'; }
-                    mdSplit.classList.remove('e-active');
-                    mdsource.classList.remove('e-active');
-                    }
-                this.markDownConversion();
-            }
+        onRefreshUI: function () {
+            this.$refs.rteObj.ej2Instances.refreshUI();
         },
-        fullPreview: function(event){
-            var mdsource = document.getElementById('preview-code');
-             var mdSplit = document.getElementById('MD_Preview');
-            var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-            var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-            if ((mdsource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && event.mode) {
-                mdsource.classList.remove('e-active');
-                mdSplit.classList.remove('e-active');
-                this.textArea.style.display = 'block';
-                this.textArea.style.width = '100%';
-                htmlPreview.style.display = 'none';
-            } else {
-                mdsource.classList.add('e-active');
-                mdSplit.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';
+        updateOrientation: function() {
+            if (Browser.isDevice) {
+                this.$refs.splitterObj.$el.ej2_instances[0].orientation = 'Vertical';
+                document.body.querySelector('.heading').style.width = 'auto';
             }
-        }
+        },
     },
     provide:{
-        richtexteditor:[Toolbar, Link, Image, MarkdownEditor]
+        richtexteditor:[Toolbar, Link, Image, MarkdownEditor, Table]
     }
 }
 </script>
@@ -165,5 +180,6 @@ export default {
 @import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
 @import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
 @import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
 @import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
 </style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/codemirror.html b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/codemirror.html
deleted file mode 100644
index 575c19d29..000000000
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/codemirror.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html><html lang="en"><head>
-        <title>CodeMirror</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript UI Controls">
-        <meta name="author" content="Syncfusion">       
-        
-         <!--CodeMirror references-->
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.js" type="text/javascript"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/css/css.js" type="text/javascript"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.js" type="text/javascript"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/javascript/javascript.js" type="text/javascript"></script>
-         <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css" rel="stylesheet">
-    </head>
-    <body></body>
-</html>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.css b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.css
index e69de29bb..a9da008e4 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.css
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.css
@@ -0,0 +1,28 @@
+.markdown-preview .heading {
+    float: left;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0px;
+    border-left: none;
+    border-top: none;
+  }
+  .markdown-preview .title {
+    color: #333333;
+    letter-spacing: 1px;
+    padding-left: 10px;
+    text-align: center;
+    margin: 10px 0;
+  }
+  .fabric-dark .markdown-preview .title,
+  .bootstrap5-dark .markdown-preview .title,
+  .bootstrap5\.3-dark .markdown-preview .title,
+  .bootstrap-dark .markdown-preview .title,
+  .fluent-dark .markdown-preview .title,
+  .fluent2-dark .markdown-preview .title,
+  .material-dark .markdown-preview .title,
+  .tailwind-dark .markdown-preview .title,
+  .tailwind3-dark .markdown-preview .title,
+  .highcontrast .markdown-preview .title {
+    color: #fff;
+  }
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.html b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.html
index 303d777bf..10acd1fa4 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.html
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.html
@@ -10,7 +10,7 @@
     <meta name="description" content="Typescript UI Controls" />
     <meta name="author" content="Syncfusion" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/28.2.3/bootstrap5.css" rel="stylesheet">
     <link href="index.css" rel="stylesheet" />
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.js b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.js
index 3fe88af8c..54c5ad833 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.js
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/index.js
@@ -1,132 +1,137 @@
 import Vue from "vue";
-import { isNullOrUndefined } from "@syncfusion/ej2-base";
-import { RichTextEditorPlugin, Toolbar, Link, Image, MarkdownEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import {
+    Browser,
+  } from '@syncfusion/ej2-base';
+  import {
+    RichTextEditorPlugin,
+    Toolbar,
+    Link,
+    Table,
+    Image,
+    MarkdownEditor,
+  } from '@syncfusion/ej2-vue-richtexteditor';
+  import {
+    SplitterPlugin,
+  } from '@syncfusion/ej2-vue-layouts';
+  import { marked } from 'marked';
 
-Vue.use(RichTextEditorPlugin);
+  Vue.use(RichTextEditorPlugin );
+  Vue.use(SplitterPlugin);
 
 new Vue({
 	el: '#app',
-	template: `<div id="defaultRTE">
-                <ejs-richtexteditor id="preview" ref="rteInstance" :toolbarSettings="toolbarSettings" :created="created" :actionComplete='actionComplete' :editorMode="editorMode" :height="height" :value="rteValue"></ejs-richtexteditor>
-            </div> `,
+	template: `<div class="control-section markdown-preview">
+                <ejs-splitter
+                ref="splitterObj"
+                id="splitter-rte-markdown-preview"
+                width="100%"
+                height="450px"
+                :resizing="onRefreshUI"
+                :created="updateOrientation"
+                >
+                <e-panes>
+                    <e-pane
+                    size="50%"
+                    :resizable="true"
+                    :content="'pane1Content'"
+                    min="40%"
+                    >
+                    <template v-slot:pane1Content>
+                        <ejs-richtexteditor
+                        id="defaultRTE"
+                        ref="rteObj"
+                        :toolbarSettings="toolbarSettings"
+                        :value="value"
+                        height="100%"
+                        saveInterval="1"
+                        maxLength="5000"
+                        :created="onCreate"
+                        :change="onChange"
+                        :actionComplete="updateValue"
+                        :editorMode="editorMode"
+                        >
+                        </ejs-richtexteditor>
+                    </template>
+                    </e-pane>
+                    <e-pane :content="'pane2Content'" min="40%">
+                    <template v-slot:pane2Content>
+                        <div class="heading right">
+                        <h4 class="title"><b>Markdown Preview</b></h4>
+                        <div
+                            class="splitter-default-content source-code pane2"
+                            style="padding: 20px"
+                        ></div>
+                        </div>
+                    </template>
+                    </e-pane>
+                </e-panes>
+                </ejs-splitter>
+            </div>`,
 
     data: function() {
         return {
-            rteValue: `***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.`,
-            textArea: '',
-            height: '300px',
+            textArea: null,
+            srcArea: null,
+            editorMode: 'Markdown',
             toolbarSettings: {
-                items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|',
-                    { 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>' },
-                    { tooltipText: 'Split Editor', template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-                        '<span class="e-btn-icon e-view-side e-icons"></span></button>' }, 'FullScreen', '|', 'Undo', 'Redo']
+              items: [
+                'Bold',
+                'Italic',
+                'StrikeThrough',
+                '|',
+                'Formats',
+                'OrderedList',
+                'UnorderedList',
+                '|',
+                'CreateLink',
+                'Image',
+                'CreateTable',
+                '|',
+                'Undo',
+                'Redo',
+              ],
             },
-            editorMode: 'Markdown',
-        };
+            value: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. 
+      Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
+      and phrases should look different from each other
+      
+      Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.
+      
+      We can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).
+      
+      The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content`,
+          };
+        
     },
     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', 'CreateTable']);
-                     event.target.parentElement.parentElement.nextElementSibling.classList.add('e-overlay');
-                } else {
-                    this.$refs.rteInstance.ej2Instances.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-                     'UnorderedList', 'CreateLink', 'Image', 'CreateTable']);
-                      event.target.parentElement.parentElement.nextElementSibling.classList.remove('e-overlay');
-                }
-            };
-            document.getElementById('MD_Preview').onclick = () => {
-                if (this.$refs.rteInstance.$el.classList.contains('e-rte-full-screen')) {
-                    this.fullPreview({ mode: true, type: '' });
-                }
-                document.getElementById('preview-code').classList.remove('e-active');
-                this.$refs.rteInstance.ej2Instances.showFullScreen();
-            };
+        onCreate: function () {
+            setTimeout(() => {
+              this.$refs.rteObj.ej2Instances.refreshUI();
+              this.textArea =
+                this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
+              this.srcArea = document.querySelector('.source-code');
+              this.updateValue();
+            }, 10);
+          },
+        onChange: function () {
+            this.updateValue();
         },
-        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.parentNode.querySelector('#' + id);
-                htmlPreview.innerHTML = marked.parse(this.textArea.value);
-            }
+        updateValue: function (e) {
+            this.srcArea.innerHTML = marked(
+                this.$refs.rteObj.ej2Instances.contentModule.getEditPanel().value
+            );
         },
-        actionComplete: function(e) {
-            var mdsource = document.getElementById('preview-code');
-            var mdSplit = document.getElementById('MD_Preview');
-            var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-            var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-                if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
-                    this.fullPreview({ mode: true, type: '' });
-                } else if (!mdSplit.parentElement.classList.contains('e-overlay')) {
-                    if (e.targetItem === 'Minimize') {
-                    this.textArea.style.display = 'block';
-                    this.textArea.style.width = '100%';
-                    if (htmlPreview) { htmlPreview.style.display = 'none'; }
-                    mdSplit.classList.remove('e-active');
-                    mdsource.classList.remove('e-active');
-                    }
-                this.markDownConversion();
-                }
+        onRefreshUI: function () {
+            this.$refs.rteObj.ej2Instances.refreshUI();
         },
-        fullPreview: function(event) {
-            var mdsource = document.getElementById('preview-code');
-            var mdSplit = document.getElementById('MD_Preview');
-            var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-            var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-            if ((mdsource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && event.mode) {
-                mdsource.classList.remove('e-active');
-                mdSplit.classList.remove('e-active');
-                this.textArea.style.display = 'block';
-                this.textArea.style.width = '100%';
-                htmlPreview.style.display = 'none';
-            } 
-            else {
-                mdsource.classList.add('e-active');
-                mdSplit.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';
+        updateOrientation: function() {
+            if (Browser.isDevice) {
+                this.$refs.splitterObj.$el.ej2_instances[0].orientation = 'Vertical';
+                document.body.querySelector('.heading').style.width = 'auto';
             }
-        }
+        },
     },
     provide:{
-        richtexteditor:[Toolbar, Link, Image, MarkdownEditor]
+        richtexteditor:[Toolbar, Link, Image, Table, MarkdownEditor]
     }
-
 });
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/systemjs.config.js
index d52c8abd3..e00fcf513 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/systemjs.config.js
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs7/systemjs.config.js
@@ -14,7 +14,7 @@ System.config({
     },
     map: {
         typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
-vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
         "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
         "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
         "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
@@ -36,13 +36,16 @@ vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
         "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
         "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-layouts": "syncfusion:ej2-vue-layouts/dist/ej2-vue-layouts.umd.min.js",
         "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
         "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
         "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
         "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+
         "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
         "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
-        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js",
+        "marked": "https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js"
     }
 });
 
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/app-composition.vue
index 31f0c6a9d..b2732ca0b 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/app-composition.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/app-composition.vue
@@ -1,7 +1,14 @@
 <template>
   <div id="defaultRTE">
-    <ejs-richtexteditor id="preview" ref="rteInstance" :toolbarSettings="toolbarSettings" :created="created" :value:"rteValue" :actionComplete='actionComplete' :editorMode="editorMode" :height="height" >
-      </ejs-richtexteditor>
+    <ejs-richtexteditor
+      id="MDdefault"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :created="created"
+      :editorMode="editorMode"
+      :value="rteValue"
+    >
+    </ejs-richtexteditor>
   </div>
 </template>
 
@@ -29,113 +36,86 @@
 </style>
 
 <script setup>
-import { isNullOrUndefined } from "@syncfusion/ej2-base";
-import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  Table,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
 import { marked } from 'marked';
 
 const rteInstance = ref(null);
-const rteValue = `***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.
+const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
+let textArea = null;
+let id= '';
+let mdsource= null;
+let htmlPreview= null;
+let previewTextArea= null;
 
-                        ***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.`;
-let textArea = '';
-const  height = '300px';
 const toolbarSettings = {
-    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>' },
-        { tooltipText: 'Split Editor', template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-            '<span class="e-btn-icon e-view-side e-icons"></span></button>' }, 'FullScreen', '|', 'Undo', 'Redo']
+    items: [
+        '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>',
+        },
+    ],
 };
 const editorMode = 'Markdown';
 const created = () => {
-    var script = document.createElement('script');
-    script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
-    document.head.appendChild(script);
-    textArea = rteInstance.value.$el.parentNode.querySelector('.e-content');
-    textArea.onkeyup = (Event) => {
-        markDownConversion();
+    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();
     };
-    document.getElementById('preview-code').onclick = () => {
-        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', 'CreateTable']);
-             event.target.parentElement.parentElement.nextElementSibling.classList.add('e-overlay');
+    this.mdsource.onclick = (e) => {
+        this.fullPreview();
+        if (e.currentTarget.classList.contains('e-active')) {
+        this.$refs.rteInstance.disableToolbarItem(['CreateTable']);
         } else {
-            rteInstance.value.ej2Instances.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-             'UnorderedList', 'CreateLink', 'Image', 'CreateTable']);
-              event.target.parentElement.parentElement.nextElementSibling.classList.remove('e-overlay');
+        this.$refs.rteInstance.enableToolbarItem(['CreateTable']);
         }
     };
-    document.getElementById('MD_Preview').onclick = () => {
-        if (rteInstance.value.$el.classList.contains('e-rte-full-screen')) {
-            fullPreview({ mode: true, type: '' });
-        }
-        document.getElementById('preview-code').classList.remove('e-active');
-        rteInstance.value.ej2Instances.showFullScreen();
-    };
 };
 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(rteInstance.value.ej2Instances.contentModule.getEditPanel().value);
-    }
-};
-const actionComplete = (e) => {
-    var mdsource = document.getElementById('preview-code');
-    var mdSplit = document.getElementById('MD_Preview');
-    var id = rteInstance.value.ej2Instances.getID() + 'html-view';
-    var htmlPreview = rteInstance.value.$el.parentNode.querySelector('#' + id);
-    if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
-        fullPreview({ mode: true, type: '' });
-    } else if (!mdSplit.parentElement.classList.contains('e-overlay')) {
-        if (e.targetItem === 'Minimize') {
-            textArea.style.display = 'block';
-            textArea.style.width = '100%';
-            if (htmlPreview) { htmlPreview.style.display = 'none'; }
-            mdSplit.classList.remove('e-active');
-            mdsource.classList.remove('e-active');
-        }
-        markDownConversion();
+    if (this.mdsource.classList.contains('e-active')) {
+        this.htmlPreview.innerHTML = marked(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');
-        textArea.style.display = 'block';
-        textArea.style.width = '100%';
-        htmlPreview.style.display = 'none';
+    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 {
-        mdSource.classList.add('e-active');
-        if (!htmlPreview) {
-            htmlPreview = document.createElement('div');
-            htmlPreview.id = id;
-            htmlPreview.setAttribute('class', 'e-content');
-            textArea.parentNode.appendChild(htmlPreview);
-        } else {
-            htmlPreview.innerHTML = '';
+        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';
         }
-        textArea.style.display = 'none';
-        htmlPreview.style.display = 'block';
-        htmlPreview.innerHTML = marked.parse(rteInstance.value.ej2Instances.contentModule.getEditPanel().value);
-        mdSource.parentElement.title = 'Code View';
+        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]);
 </script>
 
 <style>
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/app.vue b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/app.vue
index 9baae94d2..267dc59de 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/app.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/app.vue
@@ -1,35 +1,49 @@
 <template>
   <div id="defaultRTE">
-    <ejs-richtexteditor id="preview" ref="rteInstance" :value:"rteValue" :toolbarSettings="toolbarSettings" :created="created" :actionComplete='actionComplete' :editorMode="editorMode" :height="height"></ejs-richtexteditor>
+    <ejs-richtexteditor
+      id="MDdefault"
+      ref="rteInstance"
+      :toolbarSettings="toolbarSettings"
+      :created="created"
+      :editorMode="editorMode"
+      :value="rteValue"
+    >
+    </ejs-richtexteditor>
   </div>
 </template>
 
 <style>
-    .e-richtexteditor .e-rte-content .e-content{
-        min-height: 150px;
-    }
-    .e-richtexteditor .e-rte-content textarea.e-content {
-        float: left;
-        border-right: 1px solid rgba(0, 0, 0, 0.12);
-    }
-    .e-richtexteditor .e-rte-content {
-        overflow: hidden;
-    }
-    .e-md-preview::before {
-        content: '\\e345';
-    }
+.e-richtexteditor .e-rte-content .e-content {
+  min-height: 150px;
+}
+.e-richtexteditor .e-rte-content textarea.e-content {
+  float: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.e-md-preview::before {
+  content: '\e345';
+}
 
-    .e-rte-content .e-content.e-pre-source {
-        width: 100%;
-    }
-    .e-icon-btn.e-active .e-md-preview.e-icons::before {
-        content: '\\e350';
-    }
+.e-rte-content .e-content.e-pre-source {
+  width: 100%;
+}
+.e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\e350';
+}
 </style>
 
 <script>
-import { isNullOrUndefined } from "@syncfusion/ej2-base";
-import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Table,
+  Link,
+  Image,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
 import { marked } from 'marked';
 
 export default {
@@ -39,120 +53,79 @@ export default {
     },
     data: function() {
         return {
-            rteValue: `***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.`,
-            textArea: '',
-            height: '300px',
+            rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            editorMode: 'Markdown',
             toolbarSettings: {
-                items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|',
-                    { 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>' },
-                    { tooltipText: 'Split Editor', template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-                        '<span class="e-btn-icon e-view-side e-icons"></span></button>' }, 'FullScreen', '|', 'Undo', 'Redo']
+                items: [
+                    '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>',
+                    },
+                ],
             },
-            editorMode: 'Markdown',
         };
     },
     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');
+        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();
             };
-            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', 'CreateTable']);
-                     event.target.parentElement.parentElement.nextElementSibling.classList.add('e-overlay');
+            this.mdsource.onclick = (e) => {
+                this.fullPreview();
+                if (e.currentTarget.classList.contains('e-active')) {
+                this.$refs.rteInstance.disableToolbarItem(['CreateTable']);
                 } else {
-                    this.$refs.rteInstance.ej2Instances.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-                     'UnorderedList', 'CreateLink', 'Image', 'CreateTable']);
-                      event.target.parentElement.parentElement.nextElementSibling.classList.remove('e-overlay');
-                }
-            };
-            document.getElementById('MD_Preview').onclick = () => {
-                if (this.$refs.rteInstance.$el.classList.contains('e-rte-full-screen')) {
-                    this.fullPreview({ mode: true, type: '' });
+                this.$refs.rteInstance.enableToolbarItem(['CreateTable']);
                 }
-                document.getElementById('preview-code').classList.remove('e-active');
-                this.$refs.rteInstance.ej2Instances.showFullScreen();
             };
         },
-        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.parentNode.querySelector('#' + id);
-                htmlPreview.innerHTML = marked.parse(this.textArea.value);
+        markDownConversion: function () {
+            if (this.mdsource.classList.contains('e-active')) {
+                this.htmlPreview.innerHTML = marked(this.textArea.value);
             }
         },
-        actionComplete: function(e) {
-            var mdsource = document.getElementById('preview-code');
-            var mdSplit = document.getElementById('MD_Preview');
-            var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-            var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-                if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
-                    this.fullPreview({ mode: true, type: '' });
-                } else if (!mdSplit.parentElement.classList.contains('e-overlay')) {
-                    if (e.targetItem === 'Minimize') {
-                    this.textArea.style.display = 'block';
-                    this.textArea.style.width = '100%';
-                    if (htmlPreview) { htmlPreview.style.display = 'none'; }
-                    mdSplit.classList.remove('e-active');
-                    mdsource.classList.remove('e-active');
-                    }
-                this.markDownConversion();
-            }
-        },
-        fullPreview: function(event){
-            var mdsource = document.getElementById('preview-code');
-             var mdSplit = document.getElementById('MD_Preview');
-            var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-            var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-            if ((mdsource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && event.mode) {
-                mdsource.classList.remove('e-active');
-                mdSplit.classList.remove('e-active');
+        fullPreview: function () {
+            if (this.mdsource.classList.contains('e-active')) {
+                this.mdsource.classList.remove('e-active');
                 this.textArea.style.display = 'block';
-                this.textArea.style.width = '100%';
-                htmlPreview.style.display = 'none';
+                this.htmlPreview.style.display = 'none';
+                this.previewTextArea.style.overflow = 'hidden';
             } else {
-                mdsource.classList.add('e-active');
-                mdSplit.classList.add('e-active');
-                if (!htmlPreview) {
-                    htmlPreview = document.createElement('div');
-                    htmlPreview.id = id;
-                    htmlPreview.setAttribute('class', 'e-content');
-                    this.textArea.parentNode.appendChild(htmlPreview);
+                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 (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%';
+                if (this.previewTextArea.style.overflow === 'hidden') {
+                this.previewTextArea.style.overflow = 'auto';
                 }
-                htmlPreview.style.display = 'block';
-                htmlPreview.innerHTML = marked.parse(this.$refs.rteInstance.ej2Instances.contentModule.getEditPanel().value);
-                mdsource.parentElement.title = 'Code View';
+                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]
+        richtexteditor:[Toolbar, Link, Image, Table, MarkdownEditor]
     }
 }
 </script>
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/codemirror.html b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/codemirror.html
deleted file mode 100644
index 575c19d29..000000000
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/codemirror.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html><html lang="en"><head>
-        <title>CodeMirror</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript UI Controls">
-        <meta name="author" content="Syncfusion">       
-        
-         <!--CodeMirror references-->
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.js" type="text/javascript"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/css/css.js" type="text/javascript"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.js" type="text/javascript"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/javascript/javascript.js" type="text/javascript"></script>
-         <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css" rel="stylesheet">
-    </head>
-    <body></body>
-</html>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/index.css b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/index.css
index e69de29bb..b78c1353f 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/index.css
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/index.css
@@ -0,0 +1,21 @@
+
+.e-richtexteditor .e-rte-content .e-content {
+  min-height: 150px;
+}
+.e-richtexteditor .e-rte-content textarea.e-content {
+  float: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+.e-richtexteditor .e-rte-content {
+  overflow: hidden;
+}
+.e-md-preview::before {
+  content: '\e345';
+}
+
+.e-rte-content .e-content.e-pre-source {
+  width: 100%;
+}
+.e-icon-btn.e-active .e-md-preview.e-icons::before {
+  content: '\e350';
+}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/index.js b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/index.js
index d6f9ad1fc..19521a602 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/index.js
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/index.js
@@ -1,133 +1,105 @@
 import Vue from "vue";
-import { isNullOrUndefined } from "@syncfusion/ej2-base";
-import { RichTextEditorPlugin, Toolbar, Link, Image, MarkdownEditor } from "@syncfusion/ej2-vue-richtexteditor";
-
+import {
+  RichTextEditorPlugin,
+  Toolbar,
+  Link,
+  Image,
+  Table,
+  MarkdownEditor,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { marked } from 'marked';
 Vue.use(RichTextEditorPlugin);
 
 
 new Vue({
 	el: '#app',
 	template: `<div id="defaultRTE">
-                <ejs-richtexteditor id="preview" ref="rteInstance" :toolbarSettings="toolbarSettings" :created="created" :actionComplete='actionComplete' :editorMode="editorMode" :height="height" :value="rteValue"></ejs-richtexteditor>
-            </div> `,
+                    <ejs-richtexteditor
+                    id="MDdefault"
+                    ref="rteInstance"
+                    :toolbarSettings="toolbarSettings"
+                    :created="created"
+                    :editorMode="editorMode"
+                    :value="rteValue"
+                    >
+                    </ejs-richtexteditor>
+                </div>`,
 
     data: function() {
         return {
-            rteValue: `***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.`,
-            textArea: '',
-            height: '300px',
+            rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
+            id: '',
+            mdsource: null,
+            htmlPreview: null,
+            textArea: null,
+            previewTextArea: null,
+            editorMode: 'Markdown',
             toolbarSettings: {
-                items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|',
-                    { 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>' },
-                    { tooltipText: 'Split Editor', template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
-                        '<span class="e-btn-icon e-view-side e-icons"></span></button>' }, 'FullScreen', '|', 'Undo', 'Redo']
+                items: [
+                    '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>',
+                    },
+                ],
             },
-            editorMode: 'Markdown',
         };
     },
     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');
+        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();
             };
-            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', 'CreateTable']);
-                     event.target.parentElement.parentElement.nextElementSibling.classList.add('e-overlay');
+            this.mdsource.onclick = (e) => {
+                this.fullPreview();
+                if (e.currentTarget.classList.contains('e-active')) {
+                this.$refs.rteInstance.disableToolbarItem(['CreateTable']);
                 } else {
-                    this.$refs.rteInstance.ej2Instances.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'Formats', 'OrderedList',
-                     'UnorderedList', 'CreateLink', 'Image', 'CreateTable']);
-                      event.target.parentElement.parentElement.nextElementSibling.classList.remove('e-overlay');
-                }
-            };
-            document.getElementById('MD_Preview').onclick = () => {
-                if (this.$refs.rteInstance.$el.classList.contains('e-rte-full-screen')) {
-                    this.fullPreview({ mode: true, type: '' });
+                this.$refs.rteInstance.enableToolbarItem(['CreateTable']);
                 }
-                document.getElementById('preview-code').classList.remove('e-active');
-                this.$refs.rteInstance.ej2Instances.showFullScreen();
             };
         },
-        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.parentNode.querySelector('#' + id);
-                htmlPreview.innerHTML = marked.parse(this.textArea.value);
+        markDownConversion: function () {
+            if (this.mdsource.classList.contains('e-active')) {
+                this.htmlPreview.innerHTML = marked(this.textArea.value);
             }
         },
-        actionComplete: function(e) {
-            var mdsource = document.getElementById('preview-code');
-            var mdSplit = document.getElementById('MD_Preview');
-            var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-            var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-                if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
-                    this.fullPreview({ mode: true, type: '' });
-                } else if (!mdSplit.parentElement.classList.contains('e-overlay')) {
-                    if (e.targetItem === 'Minimize') {
-                    this.textArea.style.display = 'block';
-                    this.textArea.style.width = '100%';
-                    if (htmlPreview) { htmlPreview.style.display = 'none'; }
-                    mdSplit.classList.remove('e-active');
-                    mdsource.classList.remove('e-active');
-                    }
-                this.markDownConversion();
-                }
-        },
-        fullPreview: function(event) {
-            var mdsource = document.getElementById('preview-code');
-            var mdSplit = document.getElementById('MD_Preview');
-            var id = this.$refs.rteInstance.ej2Instances.getID() + 'html-view';
-            var htmlPreview = this.$refs.rteInstance.$el.parentNode.querySelector('#' + id);
-            if ((mdsource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && event.mode) {
-                mdsource.classList.remove('e-active');
-                mdSplit.classList.remove('e-active');
+        fullPreview: function () {
+            if (this.mdsource.classList.contains('e-active')) {
+                this.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');
-                mdSplit.classList.add('e-active');
-                if (!htmlPreview) {
-                    htmlPreview = document.createElement('div');
-                    htmlPreview.id = id;
-                    htmlPreview.setAttribute('class', 'e-content');
-                    this.textArea.parentNode.appendChild(htmlPreview);
+                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 (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%';
+                if (this.previewTextArea.style.overflow === 'hidden') {
+                this.previewTextArea.style.overflow = 'auto';
                 }
-                htmlPreview.style.display = 'block';
-                htmlPreview.innerHTML = marked.parse(this.$refs.rteInstance.ej2Instances.contentModule.getEditPanel().value);
-                mdsource.parentElement.title = 'Code View';
+                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]
+        richtexteditor:[Toolbar, Link, Image, Table, MarkdownEditor]
     }
 
 });
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/systemjs.config.js
index d52c8abd3..f4147de4f 100644
--- a/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/systemjs.config.js
+++ b/ej2-vue/code-snippet/rich-text-editor/markdown-cs8/systemjs.config.js
@@ -42,7 +42,8 @@ vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
         "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
         "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
         "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
-        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js",
+        "marked": "https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js"
     }
 });
 
diff --git a/ej2-vue/markdown-editor/accessibility.md b/ej2-vue/markdown-editor/accessibility.md
new file mode 100644
index 000000000..4bff8e0ba
--- /dev/null
+++ b/ej2-vue/markdown-editor/accessibility.md
@@ -0,0 +1,107 @@
+---
+layout: post
+title: Accessibility in Vue Markdown Editor component | Syncfusion
+description: Learn here all about Accessibility in Syncfusion Vue Markdown Editor component of Syncfusion Essential JS 2 and more.
+control: Accessibility 
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility in the Vue Markdown Editor Component
+
+The Vue Markdown Editor is designed to be fully accessible, following WAI-ARIA specifications and implementing ARIA roles, states, and properties. These accessibility features ensure that the editor is user-friendly for individuals relying on assistive technologies (AT) or keyboard navigation. 
+
+The following table summarizes the accessibility support of the Markdown Editor component:
+
+| Accessibility Criteria | Compatibility |
+| -- | -- |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+
+<style>
+    .post .post-content img {
+        display: inline-block;
+        margin: 0.5em 0;
+    }
+</style>
+
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+
+## ARIA Attributes
+
+The toolbar in the Rich Text Editor is assigned the role of 'Toolbar' and includes the following attributes.
+
+| **Property** | **Functionalities** |
+| --- | --- |
+| role="toolbar" | This attribute added to the ToolBar element describes the actual role of the element. |
+| aria-orientation     | Indicates the ToolBar orientation. Default value is `horizontal`. |
+| aria-haspopup       | Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled,  attribute value has to be changed to `true`. | |
+| aria-disabled       | Indicates the disabled state of the toolbar. |
+| aria-owns | Identifies an element to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy cannot represent the relationship. In the Rich Text Editor, the attribute contains the ID of the Rich Text Editor to indicate the popup as a child element. |
+
+For more details on Toolbar ARIA attributes, refer to the [`Accessibility of Toolbar`](../../toolbar/accessibility.html) documentation.
+
+* The Rich Text Editor element is assigned the role of `application`.
+
+| **Property** | **Functionalities** |
+| --- | --- |
+| role="application" | This attribute added to the Rich Text Editor element describes the actual role of the element. |
+| aria-disabled       | Indicates the disabled state of the ToolBar. |
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/markdown-cs1" %}
+
+## Keyboard Navigation
+
+The Rich Text Editor component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Rich Text Editor component.
+
+For more details on keyboard navigation, refer to the [Keyboard support](https://ej2.syncfusion.com/vue/documentation/rich-text-editor/keyboard-support) documentation.
+
+### Customizing Shortcut Keys
+
+You can customize shortcut keys using the [formatter](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#formatter) property.This allows you to configure custom key combinations for various actions in the Rich Text Editor. For example, you can set `ctrl+q` to open the `Insert Hyperlink` dialog.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-cs2/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/markdown-cs2" %}
+
+> We need to import `IHtmlFormatterModel` and `HTMLFormatter` to configure the shortcut key.
+
+## Implementing Accessibility Best Practices
+
+The Rich Text Editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
+
+The accessibility compliance of the Rich Text Editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/rich-text-editor.html) in a new window to evaluate the accessibility of the Rich Text Editor component with accessibility tools.
+
+{% previewsample "https://ej2.syncfusion.com/accessibility/rich-text-editor.html" %}
+
+## See Also
+
+* [General Accessibility Guidelines](../common/accessibility)
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/custom-format.md b/ej2-vue/markdown-editor/custom-format.md
new file mode 100644
index 000000000..12a5c7c2e
--- /dev/null
+++ b/ej2-vue/markdown-editor/custom-format.md
@@ -0,0 +1,34 @@
+---
+layout: post
+title: Customizing Markdown Syntax in Markdown editor component | Syncfusion
+description: Learn here all about Customizing Markdown Syntax in Syncfusion Vue Markdown editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Customizing Markdown Syntax
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Customizing Markdown Syntax in Vue Markdown Editor Component
+
+The Vue Markdown Editor allows you to modify the default Markdown syntax to match your preferred formatting style. You can override the default syntax using the [formatter](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#formatter) property, enabling a customized Markdown experience.
+
+## Defining Custom Markdown Formatting  
+
+You can define custom symbols for different Markdown formatting options:
+
+* Use `+` for unordered lists instead of `-`.
+* Use `__text__` for bold text instead of `**text**`.
+* Use `_text_` for italic text instead of `*text*`.
+
+The following example demonstrates how to customize Markdown tags in the editor:
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/custom-format-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/custom-format-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/custom-format-cs1" %}
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/getting-started.md b/ej2-vue/markdown-editor/getting-started.md
new file mode 100644
index 000000000..3ac5bb171
--- /dev/null
+++ b/ej2-vue/markdown-editor/getting-started.md
@@ -0,0 +1,224 @@
+---
+layout: post
+title: Getting started with Vue Markdown Editor component | Syncfusion
+description:  Checkout and learn about Getting started with Vue Markdown Editor component of Syncfusion Essential JS 2 and more details.
+control: Getting started 
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Getting Started with the Vue Markdown Editor Component in Vue 2
+
+This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion Vue Markdown Editor component
+
+## Prerequisites
+
+[System requirements for Syncfusion Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
+
+## Dependencies
+
+The following list of dependencies are required to use the Markdown Editor.
+
+```js
+|-- @syncfusion/ej2-vue-richtexteditor
+    |-- @syncfusion/ej2
+    |-- @syncfusion/ej2-base
+    |-- @syncfusion/ej2-data
+    |-- @syncfusion/ej2-buttons
+    |-- @syncfusion/ej2-lists
+    |-- @syncfusion/ej2-inputs
+    |-- @syncfusion/ej2-popups
+    |-- @syncfusion/ej2-splitbuttons
+    |-- @syncfusion/ej2-navigations
+    |-- @syncfusion/ej2-filemanager
+    |-- @syncfusion/ej2-vue-base
+
+```
+
+## Setting up the Vue 2 project
+
+To generate a Vue 2 project using Vue-CLI, use the [vue create](https://cli.vuejs.org/#getting-started) command. Follow these steps to install Vue CLI and create a new project:
+
+```bash
+npm install -g @vue/cli
+vue create quickstart
+cd quickstart
+npm run serve
+```
+
+or
+
+```bash
+yarn global add @vue/cli
+vue create quickstart
+cd quickstart
+yarn run serve
+```
+
+When creating a new project, choose the option `Default ([Vue 2] babel, eslint)` from the menu.
+
+![Vue 2 project](./images/vue2-terminal.png)
+
+Once the `quickstart` project is set up with default settings, proceed to add Syncfusion components to the project.
+
+## Add Syncfusion Vue packages
+
+Syncfusion packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Vue components, install the required npm package.
+
+This article uses the [Vue Rich text editor component](https://www.syncfusion.com/vue-components/vue-wysiwyg-rich-text-editor) as an example. Install the `@syncfusion/ej2-vue-richtexteditor` package by running the following command:
+
+```bash
+npm install @syncfusion/ej2-vue-richtexteditor --save
+```
+or
+
+```bash
+yarn add @syncfusion/ej2-vue-richtexteditor
+```
+
+## Import Syncfusion CSS styles
+
+You can import themes for the Syncfusion Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to themes in a Vue project.
+
+In this article, the `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Markdown Editor component and its dependents were imported into the `<style>` section of **src/App.vue** file.
+
+{% tabs %}
+{% highlight html tabtitle="~/src/App.vue" %}
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-filemanager/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
+
+{% endhighlight %}
+{% endtabs %}
+
+## Module injection
+
+To create Markdown Editor with additional features, inject the required modules. The following modules are used to extend Markdown Editor's basic functionality.
+
+* `Toolbar` - Inject this module to use Toolbar feature.
+* `Link` - Inject this module to use link feature in Markdown Editor.
+* `Image`- Inject this module to use image feature in Markdown Editor.
+* `MarkdownEditor` - Inject this module to use Rich Text Editor as markdown editor.
+
+These modules should be injected into the Markdown Editor through `provide` option.
+
+> Additional feature modules are available [here](./module.md)
+
+## Add Syncfusion Vue component
+
+Follow the below steps to add the Vue Markdown editor component using:
+
+1\. First, import and register the Rich text editor component in the `script` section of the **src/App.vue** file.
+
+{% tabs %}
+{% highlight html tabtitle="~/src/App.vue" %}
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
+
+export default {
+    components: {
+        'ejs-richtexteditor': RichTextEditorComponent
+    }
+}
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+2\. In the `template` section, define the Markdown Editor component with the [height](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor#height) property.
+
+{% tabs %}
+{% highlight html tabtitle="~/src/App.vue" %}
+
+<template>
+    <ejs-richtexteditor ref="markdown-editor" :height="400" editorMode="Markdown" :value="rteValue"> 
+    </ejs-richtexteditor>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor } from "@syncfusion/ej2-vue-richtexteditor";
+
+export default {
+    name: "App",
+    components: {
+    "ejs-richtexteditor":RichTextEditorComponent
+    },
+    data: function() {
+        return {
+            rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
+        };
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, MarkdownEditor]
+    }
+}
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+Markdown Editor can be initialized on div element.
+
+{% tabs %}
+{% highlight html tabtitle="~/src/App.vue" %}
+{% include code-snippet/markdown-editor/getting-started-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="~/src/App.vue" %}
+{% include code-snippet/markdown-editor/getting-started-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/getting-started-cs1" %}
+
+## Configure the toolbar
+
+Configure the toolbar with the tools using `items` field of the [toolbarSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/#toolbarsettings) property as your application requires.
+
+{% tabs %}
+{% highlight html tabtitle="~/src/App.vue" %}
+{% include code-snippet/markdown-editor/getting-started-cs2/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="~/src/App.vue" %}
+{% include code-snippet/markdown-editor/getting-started-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/getting-started-cs2" %}
+
+> `|` and `-` can insert a vertical and horizontal separator lines in the toolbar.
+
+## Run the project
+
+To run the project, use the following command:
+
+```bash
+npm run serve
+```
+
+or
+
+```bash
+yarn run serve
+```
+
+## See Also
+
+* [How to change the editor type](./editor-modes)
+* [How to render the iframe](./iframe)
+* [How to render the toolbar in inline mode](./inline-mode)
+* [Accessibility in Rich text editor](https://ej2.syncfusion.com/vue/documentation/rich-text-editor/accessibility)
+* [Keyboard support in Rich text editor](https://ej2.syncfusion.com/vue/documentation/rich-text-editor/keyboard-support)
+* [Globalization in Rich text editor](https://ej2.syncfusion.com/vue/documentation/rich-text-editor/globalization)
+
+> You can refer to our [Vue Rich Text Editor](https://www.syncfusion.com/vue-ui-components/vue-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Vue Markdown Editor example](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/mark-down-editor/overview.html) that shows how to render and configure the rich text editor tools.
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/images/vue2-terminal.png b/ej2-vue/markdown-editor/images/vue2-terminal.png
new file mode 100644
index 000000000..39beefaa2
Binary files /dev/null and b/ej2-vue/markdown-editor/images/vue2-terminal.png differ
diff --git a/ej2-vue/markdown-editor/insert-images.md b/ej2-vue/markdown-editor/insert-images.md
new file mode 100644
index 000000000..e7322925b
--- /dev/null
+++ b/ej2-vue/markdown-editor/insert-images.md
@@ -0,0 +1,36 @@
+---
+layout: post
+title: Insert Images in Vue Markdown editor component | Syncfusion
+description: Learn here all about Insert Images in Syncfusion Vue Markdown editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Insert Images
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Insert Images in Vue Markdown Editor Component
+
+The Syncfusion Vue Markdown Editor allows users to insert images using the toolbar. This feature enables embedding images from online sources into the editor content.
+
+## Steps to Insert an Image  
+
+Follow these steps to add an image in the Markdown editor:
+
+1. Click the **Insert Image** icon in the toolbar.
+2. Enter the **URL** of the image from an online source.
+3. Click the **Insert** button in the image dialog.
+
+The image will be added to the editor content at the cursor position.
+
+The following example demonstrates how to enable image insertion in the Syncfusion Vue Markdown Editor.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-image-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-image-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/markdown-image-cs1" %}
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/insert-table.md b/ej2-vue/markdown-editor/insert-table.md
new file mode 100644
index 000000000..90a756679
--- /dev/null
+++ b/ej2-vue/markdown-editor/insert-table.md
@@ -0,0 +1,48 @@
+---
+layout: post
+title: Insert Table in Vue Markdown Editor component | Syncfusion
+description: Learn here all about Insert Table in Syncfusion Vue Markdown Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Insert Table
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Insert Table in Vue Markdown Editor Component
+
+To enable the table insertion feature, add the `CreateTable` option to the toolbar items. Once added, users can click the Insert Table icon in the toolbar to insert a table into the editor.
+
+By default, when a table is inserted, it consists of:
+
+* 2 rows and 2 columns
+* A table header row
+
+This ensures that users can start formatting and adding content immediately.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/markdown-cs8/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/markdown-cs8/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-cs8" %}
+
+## Changing default content
+
+By default, when you insert a table, it comes with predefined column headers and structure. However, you can customize the table’s default content, including the heading and column names, to match your requirements.
+
+The following example demonstrates how to customize the table content in the Markdown Editor:
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-table-cs2/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-table-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/markdown-table-cs2" %}
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/keyboard-support.md b/ej2-vue/markdown-editor/keyboard-support.md
new file mode 100644
index 000000000..67aac513f
--- /dev/null
+++ b/ej2-vue/markdown-editor/keyboard-support.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: Keyboard support in Vue Markdown editor component | Syncfusion
+description: Learn here all about Insert Table in Syncfusion Vue Markdown editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Keyboard support
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Keyboard support in Vue Markdown Editor Component
+
+You can use the following keyboard shortcuts when the Rich Text Editor is set to [editorMode](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#editormode) as `Markdown`.
+
+## Toolbar
+
+These shortcuts provide quick access to toolbar functions for managing menus and dialogs.
+
+| Actions | Windows | Mac | 
+|----------------|---------| ---------|
+| Focus on toolbar | <kbd>Alt</kbd> + <kbd>F10</kbd> | <kbd>⌥</kbd> + <kbd>F10</kbd> |
+| Close dropdowns/menu and dialogs | <kbd>Esc</kbd> | <kbd>Esc</kbd> |
+
+## Content editing and formatting
+
+These shortcuts help in efficiently editing and formatting text content.
+
+| Actions | Windows | Mac | 
+|----------------|---------| ---------|
+| Select all content | <kbd>Ctrl</kbd> + <kbd>A</kbd> | <kbd>⌘</kbd> + <kbd>A</kbd> |
+| Insert a hard line break (a new paragraph) | <kbd>Enter</kbd> | <kbd>Enter</kbd> |
+| Make text bold | <kbd>Ctrl</kbd> + <kbd>B</kbd> | <kbd>⌘</kbd> + <kbd>B</kbd> |
+| Italicize text | <kbd>Ctrl</kbd> + <kbd>I</kbd> | <kbd>⌘</kbd> + <kbd>I</kbd> |
+| Apply strikethrough | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>S</kbd> |
+
+## Inserting
+
+These shortcuts allow for the quick insertion of tables, links, and images.
+
+| Actions | Windows | Mac | 
+|----------------|---------| ---------|
+| Open the insert table dialog | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>E</kbd> |
+| Create link | <kbd>Ctrl</kbd> + <kbd>K</kbd> | <kbd>⌘</kbd> + <kbd>K</kbd> |
+| Open the insert image dialog | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>I</kbd> |
+
+## Text manipulation
+
+These shortcuts help in modifying text case and applying superscript or subscript.
+
+| Actions | Windows | Mac | 
+|----------------|---------| --------- |
+| Convert text to uppercase | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>U</kbd> |
+| Convert text to lowercase | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>L</kbd> |
+| Apply superscript | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>=</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>=</kbd> |
+| Apply subscript | <kbd>Ctrl</kbd> + <kbd>=</kbd> | <kbd>⌘</kbd> + <kbd>=</kbd> |
+
+## Lists
+
+These shortcuts enable the creation of ordered and unordered lists.
+
+| Actions | Windows | Mac | 
+|----------------|---------| --------- |
+| Create an ordered list | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>O</kbd> |
+| Create an unordered list | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>O</kbd> | <kbd>⌘</kbd> + <kbd>⌥</kbd> + <kbd>O</kbd> |
+
+## Clipboard operations
+
+These shortcuts facilitate copying, cutting, and pasting content.
+
+| Actions | Windows | Mac | 
+|----------------|---------| --------- |
+| Copy the selected content  | <kbd>Ctrl</kbd> + <kbd>C</kbd> | <kbd>⌘</kbd> + <kbd>C</kbd> |
+| Cut the selected content | <kbd>Ctrl</kbd> + <kbd>X</kbd> | <kbd>⌘</kbd> + <kbd>X</kbd> |
+| Paste the copied or cut content | <kbd>Ctrl</kbd> + <kbd>V</kbd> | <kbd>⌘</kbd> + <kbd>V</kbd> |
+
+## Undo & redo
+
+These shortcuts allow for undoing and redoing recent changes.
+
+| Actions | Windows | Mac | 
+|----------------|---------| ---------|
+| Undo | <kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>⌘</kbd> + <kbd>Z</kbd> |
+| Redo | <kbd>Ctrl</kbd> + <kbd>Y</kbd> | <kbd>⌘</kbd> + <kbd>Y</kbd> |
+
+## Other actions
+
+These shortcuts provide additional functionalities like fullscreen mode.
+
+| Actions | Windows | Mac | 
+|----------------|---------| --------- |
+| Toggle full screen mode | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>F</kbd> |
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/getting-started-cs22/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/getting-started-cs22/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/getting-started-cs22" %}
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/markdown-preview.md b/ej2-vue/markdown-editor/markdown-preview.md
new file mode 100644
index 000000000..ef803a521
--- /dev/null
+++ b/ej2-vue/markdown-editor/markdown-preview.md
@@ -0,0 +1,28 @@
+---
+layout: post
+title: Markdown to HTML preview in Vue Markdown Editor component | Syncfusion
+description: Learn here all about Markdown to HTML preview in Syncfusion Vue Markdown editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Markdown to HTML preview
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Markdown to HTML preview in Vue Markdown Editor Component
+
+The Markdown Editor provides an instant preview of Markdown changes, allowing users to see the formatted output while typing or editing text. This enhances the editing experience by enabling real-time visualization of Markdown formatting.
+
+## Enable Markdown Preview in Vue Markdown Editor  
+
+To enable the Markdown preview feature, integrate the third-party [Marked](https://marked.js.org/) library, which converts Markdown content into HTML format. The following example demonstrates how to enable Markdown to HTML preview in the Syncfusion Vue Markdown Editor.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/markdown-cs7/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/markdown-cs7/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-cs7" %}
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/mention-support.md b/ej2-vue/markdown-editor/mention-support.md
new file mode 100644
index 000000000..ebf4062d0
--- /dev/null
+++ b/ej2-vue/markdown-editor/mention-support.md
@@ -0,0 +1,42 @@
+---
+layout: post
+title: Mention Support in Vue Markdown editor component | Syncfusion
+description: Learn here all about Mention Support in Syncfusion Vue Markdown editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Markdown to HTML preview
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Mention Support in Vue Markdown Editor Component
+
+By integrating the [Mention](https://ej2.syncfusion.com/vue/documentation/mention/getting-started/) component with the Markdown Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving both efficiency and accuracy.
+
+## Enabling Mention in Vue Markdown Editor
+
+To enable the Mention functionality within the Markdown Editor, set the [target](https://ej2.syncfusion.com/vue/documentation/api/mention/#target)  property of the Mention component to the ID of the textarea element inside the editor. When specifying the target, ensure that you append the suffix `_editable-content` to the ID. This configuration allows users to mention or tag others from the suggested list while editing text.
+
+When a user types the `@` symbol followed by a character, the Markdown Editor displays a list of suggestions. Users can select an item from the list by either clicking on it or typing the desired name.
+
+## Configuring Mention Properties
+
+The Syncfusion Mention component provides several customizable properties to enhance the tagging experience:
+
+* [allowSpaces](https://ej2.syncfusion.com/vue/documentation/api/mention/#allowspaces) - Allow to continue search action if user enter space after mention character while searching.
+* [suggestionCount](https://ej2.syncfusion.com/vue/documentation/api/mention/#suggestioncount) - Defines the maximum number of items displayed in the suggestion list.
+* [itemTemplate](https://ej2.syncfusion.com/vue/documentation/api/mention/#itemtemplate) - Customizes the appearance of items in the suggestion list.
+
+## Example: Implementing Mention in Markdown Editor
+
+The following example demonstrates how to enable Mention support in the Vue Markdown Editor.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-mention-support/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/markdown-mention-support/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/markdown-mention-support" %}
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/supported-markdown.md b/ej2-vue/markdown-editor/supported-markdown.md
new file mode 100644
index 000000000..3e24be1c5
--- /dev/null
+++ b/ej2-vue/markdown-editor/supported-markdown.md
@@ -0,0 +1,48 @@
+---
+layout: post
+title: Supported Markdown Syntax in Markdown editor component | Syncfusion
+description: Learn here all about Supported Markdown Syntax in Syncfusion Vue Markdown editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Supported Markdown Syntax
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Supported Markdown Syntax in Vue Markdown Editor Component
+
+The Syncfusion Vue Markdown Editor supports various Markdown syntax commands for text formatting, lists, links, tables, and more. This guide provides an overview of all supported commands along with their syntax and usage.
+
+## Markdown Syntax Guide for Vue Markdown Editor
+
+The following table lists the Markdown commands supported by the Syncfusion Vue Markdown Editor:
+
+|Commands|Syntax| Description |
+|--------|------------------------------------------|------------|
+| Bold | Sample content for `**`bold text`**`. | For bold, add `**` or `__` to front and back of the text. |
+| Italic | Sample content for `*`Italic text`*`. | For Italic, add `*` or `_` to front and back of the text. |
+| Bold and Italics | Sample content for `***`bold and Italic text`***`. | For bold and Italics, add `***` to the front and back of the text. |
+| Heading 1 | `#` Heading 1 content | For heading 1, add `#` to start of the line. |
+| Heading 2 | `##` Heading 2 content | For heading 2, add `##` to start of the line. |
+| Heading 3 | `###` Heading 3 content | For heading 3, add `###` to start of the line. |
+| Heading 4 | `####` Heading 4 content | For heading 4, add `####` to start of the line. |
+| Heading 5 | `#####` Heading 5 content | For heading 5, add `#####` to start of the line. |
+| Heading 6 | `######` Heading 6 content | For heading 6, add `######` to start of the line. |
+| Line Break | First line `<br>`Second line | For line break, press enter two times (or) add `<br>` in between the first and the second line. |
+| Blockquotes | `>` Blockquotes text | For blockquotes, add `>` to start of the line. |
+| Strike Through | Sample content for `~~`strike through text`~~`. | For strike through, add `~~` to front and back of the text. |
+| Code (Single line) | \`Single line code\` | For single line code, add \` to front and back of the text. |
+| Code block (Multi Line) | \`\`\`<br>Multi line code text<br>Multi line code text<br>\`\`\` | For multiple line code, add \`\`\` in the new line before and after the content. |
+| Subscript | `<sub>`Subscript text`</sub>` | For subscript, add `<sub>` to the front and `</sub>` to the back of the text. |
+| Superscript | `<sup>`Superscript text`</sup>` | For superscript, add `<sup>` to the front and `</sup>` to the back of the text. |
+| Ordered List | `1.` First<br>`1.` Second | For ordered list, preceding one or more lines of text with `1.` |
+| Unordered List | `*` First<br> `*` second | For unordered list, preceding one or more lines of text with `*`. |
+| Links | **Link text without title text**<br>`[` Link text `](`URL`)`<br> **Link text with title text**<br>`[` Link text `](`URL , "title text"`)` | Create an inline link by wrapping link text in brackets `[ ]`, and then wrapping the URL as first parameter and title as second parameter in the parentheses `()`.<br>**Note:** The title text is optional, if needed it can be given manually.|
+| Table | `| Heading 1 | Heading 2 |<br>|---------|---------|<br>| Col A1 | Col A2 |<br>| Col B1 | Col B2 |` | Create a table using the pipes and underscores as given in the syntax to create 2 x 2 table. |
+| Horizontal Line | `***` (three asterisks in new line)<br>(or)<br>`___` (three underscores in new line) | For horizontal line, add `***` or `___` to the start of the new line. |
+| Image | ![alt text] (URL path.png) | Create an image by wrapping the image source in parentheses `()`. |
+| Image with alternate text | ![alt text] (URL path.png) | Create an image with alternate text by wrapping an alternative text in brackets `[]`, and then link of the image source in parentheses `()`.<br>**Note:** When inserting the image using toolbar, the alternate text cannot be provided that needs to be given manually. |
+| Escape tick marks supported | Sample text content with `**`bold and `**`not bold`**` text can be in the same line.`**` | In the syntax, the whole content is made as bold where the content `not bold` can be made as normal text by adding the bold syntax to the start and end of the respective text. Likewise you can do the same for various inline commands. |
+| Escape Character | `\(`any syntax`)` | Escape any markdown syntax by prefix `\` to the syntax.<br>Example:<br>`\**`Bold text`**`|
+| HTML Entities | Copyright: &copy; - `&copy;` <br>Trade mark: &trade; - `&trade;`<br>Registered: &reg; - `&reg;`<br>Ampersand: &amp; - `&amp;`<br>Less than: &lt; - `&lt;`<br>Greater than: &gt; - `&gt;` | For HTML entities, add & and ; to the front and back of the respective entities. |
+
+> The above listed commands are the only ones supported in the Syncfusion Markdown editor. For other commands, use HTML tags within the Markdown editor. Additionally, footnotes, definitions, math, and checklist Markdown syntax are not supported.
\ No newline at end of file
diff --git a/ej2-vue/markdown-editor/toolbar.md b/ej2-vue/markdown-editor/toolbar.md
new file mode 100644
index 000000000..54beceeee
--- /dev/null
+++ b/ej2-vue/markdown-editor/toolbar.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Toolbar Configuration in Vue Markdown Editor component | Syncfusion
+description: Learn here all about Toolbar Configuration in Syncfusion Vue Markdown Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Toolbar Configuration
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Toolbar configuration in Vue Markdown Editor Component
+
+## Default toolbar items
+
+By default, the Vue Markdown Editor displays the following toolbar items:
+
+> `Bold` , `Italic` , `|` , `Formats` , `Blockquote`, `OrderedList` , `UnorderedList` , `|` , `CreateLink` , `Image` , `|` , `SourceCode` , `Undo` , `Redo`
+
+These default items cover essential text editing features, such as text formatting, lists, and linking.
+
+## Type of toolbar 
+
+The Syncfusion Markdown Editor allows you to configure different type of toolbars using the [type](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/#type) field in the [toolbarSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/) property.
+
+The available toolbar types are:
+
+1. Expand
+2. MultiRow
+3. Scrollable
+
+### Expanding the Toolbar
+
+The default toolbar mode is `Expand`, which is configured using [toolbarSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/#type) with type: `Expand`.
+
+In this mode, any overflowing toolbar items are hidden in the next row. Users can reveal them by clicking the expand arrow.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/expand-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/expand-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/expand-cs1" %}
+
+### Configuring a Multi-row Toolbar
+
+By setting type: `MultiRow` in [toolbarSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings), the toolbar items are arranged across multiple rows. This ensures that all configured toolbar items are always visible.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/multirow-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/multirow-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/multirow-cs1" %}
+
+### Implementing a Scrollable Toolbar
+
+Use `type: 'Scrollable'` in [toolbarSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/#type) to create a single-line toolbar with horizontal scrolling capability for overflow items.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/scrollable-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/scrollable-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/scrollable-cs1" %}
+
+### Creating a Sticky Toolbar
+
+By default, the toolbar remains fixed at the top of the Markdown editor when scrolling.
+
+You can customize its position by setting [floatingToolbarOffset](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#floatingtoolbaroffset) to adjust the offset from the top of the document.
+
+Additionally, you can enable or disable the floating toolbar using the [enableFloating](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/#enablefloating) property.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/floating-toolbar-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/floating-toolbar-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/floating-toolbar-cs1" %}
+
+## Custom Toolbar Items
+
+The Markdown Editor allows you to add custom commands to the toolbar using the [toolbarSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#toolbarSettings) property. These custom commands can be displayed as plain text, icons, or HTML templates. You can define their order and grouping, ensuring a structured and intuitive toolbar layout. Additionally, actions can be bound to these commands by retrieving their instances and handling events accordingly.
+
+In this example, a custom toolbar item (Ω) is added to insert special characters into the editor. When users click the Ω button, a list of special characters appears, allowing them to select and insert a character into the content. This feature enhances the Markdown Editor by providing quick access to special symbols without manually entering character codes.
+
+The following code snippet demonstrates how to configure a custom toolbar item with a tooltip. The item is added to the [items](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/#items) field of the `toolbarSettings` property, ensuring seamless integration within the toolbar.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/custom-toolbar-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/markdown-editor/custom-toolbar-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/markdown-editor/custom-toolbar-cs1" %}
\ No newline at end of file
diff --git a/ej2-vue/rich-text-editor/image.md b/ej2-vue/rich-text-editor/image.md
deleted file mode 100644
index f72f0eb16..000000000
--- a/ej2-vue/rich-text-editor/image.md
+++ /dev/null
@@ -1,169 +0,0 @@
----
-layout: post
-title: Image in Vue Rich text editor component | Syncfusion
-description: Learn here all about Image in Syncfusion Vue Rich text editor component of Syncfusion Essential JS 2 and more.
-control: Image 
-platform: ej2-vue
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Image in Vue Rich text editor component
-
-Rich Text Editor allows to insert images from online sources as well as local computer where you want to insert the image in your content. For inserting the image to the Rich Text Editor, the following list of options have been provided in the [`insertImageSettings`](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/imageSettings/#imagesettings)
-
-| Options | Description |
-|----------------|---------|
-| allowedTypes | Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with comma separators. For example, pass allowedTypes as .jpg and .png.|
-| display | Sets the default display for an image when it is inserted in to the Rich Text Editor. Possible options are: 'inline' and 'break'.|
-| width | Sets the default width of the image when it is inserted in the Rich Text Editor.|
-| height | Sets the default height of the image when it is inserted in the Rich Text Editor.|
-| saveUrl | Provides URL to map the action result method to save the image.|
-| path | Specifies the location to store the image.|
-
-## Upload options
-
-Through the `browse` option in the Image dialog, select the image from the local machine and insert into the Rich Text Editor content.
-
-If the [path](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/imageSettings/#path) field is not specified in the [`insertImageSettings`](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/imageSettings/#imagesettings), the image will be transferred into base 64 and blob url for the image will be created and the generated url will be set to the src property of img tag.
-
-```ts
-<img src="blob:http://ej2.syncfusion.com/3ab56a6e-ec0d-490f-85a5-f0aeb0ad8879" >
-
-```
-
-> If you want to insert a lot of tiny images in the editor and don't want a specific physical location for saving images, you can opt to save format as Base64.
-
-In the following sample, the image has been loaded from the local machine and it will be saved in the given location.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs3/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs3/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-cs3" %}
-
-## Image delete
-
-To remove an image from the Rich Text Editor content, select the image and click Remove tool from the quick toolbar. It will delete the image from the Rich Text Editor content as well as from the service location if the saveUrl is given.
-
-Once you select the image from the local machine, the URL for the image will be generate. From there,you can remove the image from the service location by clicking the cross icon.
-
-![image-delete](./images/image-del.png)
-
-The following sample explains, how to configure `removeUrl` to remove a saved image from the remote service location, when the following image remove actions are performed:
-
-* `delete` key action.
-* `backspace` key action.
-* Removing uploaded image file from the insert image dialog.
-* Deleting image using the quick toolbar `remove` option.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/getting-started-cs18/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/getting-started-cs18/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/getting-started-cs18" %}
-
-## Insert from web
-
-To insert an image from the online source like Google, Ping, etc., you should enable the image tool on the editor’s toolbar. By default, the image tool opens a simple dialog which allows you to insert an image from online source.
-
-## Dimension
-
-Sets the default width and height of the image when it is inserted in the Rich Text Editor using [`width`](../api/rich-text-editor/imageSettings/#width) and [`height`](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/imageSettings/#height) of the insertImageSettings.
-
-Through the quickToolbar, also you can change the width and height using `Change Size` option. Once click into the option. The Image Size dialog will open as below. In that specify the width and height of the image in pixel.
-
-![image-size](./images/image-size.png)
-
-## Caption and Alt Text
-
-Image caption and alternative text can be specified for the inserted image in the Rich Text Editor through the quick toolbar options such as, Image Caption and Alternative Text.
-
-Through the Alternative Text option, set the alternative text for the image, when the image is not upload successfully into the Rich Text Editor.
-
-By clicking the Image Caption, the image will get wrapped in an image element with a caption. Then, you can type caption content inside the Rich Text Editor.
-
-## Display position
-
-Sets the default display for an image when it is inserted in the Rich Text Editor using [`display`](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/imageSettings/#display) field in [`insertImageSettings`](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/imageSettings/#imagesettings). It has two possible options: 'inline' and 'break'.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs4/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs4/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-cs4" %}
-
-## Image with link
-
-The hyperlink itself can be an image in Rich Text Editor. If the image given as hyperlink, the remove, edit, and open link will be added to the quick toolbar of image. For further details about link, see the [`link documentation`](./link) documentation.
-
-![image-link](./images/image-link.png)
-
-## Resize
-
-Rich Text Editor has a built-in image inserting support.  The resize points will be appearing on each corner of image when focus. So, users can resize the image using mouse points or thumb through the resize points easily. Also, the resize calculation will be done based on aspect ratio.
-
-![image-resize](./images/image-resize.png)
-
-## Drag and Drop
-
-By default, the Rich Text Editor allows you to insert images by drag-and-drop from the local file system such as Windows Explorer into the content editor area. And, you can upload the images to the server before inserting into the editor by configuring the saveUrl property. The images can be repositioned anywhere within the editor area by dragging and dropping the image.
-
-In the following sample, you can see feature demo.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/getting-started-cs19/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/getting-started-cs19/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/getting-started-cs19" %}
-
-### Drag and drop with specific extension images
-
-You can allow the specific images alone to be uploaded using the the allowedExtentions property. The extension can be represented as collection by comma separators. By default, the Rich Text Editor allows the JPG, JPEG, and PNG formats. You can configure this formats as follows.
-
-```ts
-
-    insertImageSettings: {
-      allowedTypes: ['.jpg']
-    }
-
-```
-
-### Prevent drag and drop action
-
-You can prevent drag-and-drop action by setting the actionBegin argument cancel value to true. The following code shows how to prevent the drag-and-drop.
-
-```ts
-
-    actionBegin: function (args: any): void {
-        if(args.type === 'drop' || args.tpe === 'dragstart') {
-            args.cancel =true;
-        }
-    }
-
-```
-
-## See Also
-
-* [How to edit the quick toolbar settings](./toolbar#quick-inline-toolbar)
-* [How to use link editing option in the toolbar items](./link)
\ No newline at end of file
diff --git a/ej2-vue/rich-text-editor/inline-mode.md b/ej2-vue/rich-text-editor/inline-mode.md
deleted file mode 100644
index b3ba6ee94..000000000
--- a/ej2-vue/rich-text-editor/inline-mode.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: post
-title: Inline mode in Vue Rich text editor component | Syncfusion
-description: Learn here all about Inline mode in Syncfusion Vue Rich text editor component of Syncfusion Essential JS 2 and more.
-control: Inline mode 
-platform: ej2-vue
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Inline mode in Vue Rich text editor component
-
-This is the inline example for the Rich Text Editor. For this you must set the [inlineMode](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#inlinemode) property.
-
-Inline edition allows you to select any editable element or click the element on the page and edit it in-place.
-
-Inline editing is a true WYSIWYG formation and on the contrary to Rich Text Editor HTML/MD editing, the styles that are used for edited content comes directly from the document stylesheet. This means that inline editors ignore the default Rich Text Editor content styles.
-
-## Show on select/click
-
-Enabling the [onSelection](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/inlineMode/#onselection) option of inlineMode makes the inline Rich Text Editor to appear.  You can select the text in the editable area otherwise the inline Rich Text Editor will be appear once click into the editable area.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/getting-started-cs20/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/getting-started-cs20/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/getting-started-cs20" %}
-
-## See Also
-
-* [How to edit the quick toolbar settings](../rich-text-editor/toolbar#quick-inline-toolbars)
-* [How to insert link editing option in the toolbar items](../rich-text-editor/link#insert-link)
-* [How to insert image editing option in the toolbar items](../rich-text-editor/image#upload-options)
\ No newline at end of file
diff --git a/ej2-vue/rich-text-editor/keyboard-support.md b/ej2-vue/rich-text-editor/keyboard-support.md
index a5908c408..319975c97 100644
--- a/ej2-vue/rich-text-editor/keyboard-support.md
+++ b/ej2-vue/rich-text-editor/keyboard-support.md
@@ -144,99 +144,6 @@ These miscellaneous shortcuts help with actions like toggling fullscreen, cleari
         
 {% previewsample "page.domainurl/code-snippet/rich-text-editor/getting-started-cs21" %}
 
-## Markdown editor shortcut keys
-
-You can use the following keyboard shortcuts when the Rich Text Editor is set to [editorMode](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#editormode) as `Markdown`.
-
-### Toolbar
-
-These shortcuts provide quick access to toolbar functions for managing menus and dialogs.
-
-| Actions | Windows | Mac | 
-|----------------|---------| ---------|
-| Focus on toolbar | <kbd>Alt</kbd> + <kbd>F10</kbd> | <kbd>⌥</kbd> + <kbd>F10</kbd> |
-| Close dropdowns/menu and dialogs | <kbd>Esc</kbd> | <kbd>Esc</kbd> |
-
-### Content editing and formatting
-
-These shortcuts help in efficiently editing and formatting text content.
-
-| Actions | Windows | Mac | 
-|----------------|---------| ---------|
-| Select all content | <kbd>Ctrl</kbd> + <kbd>A</kbd> | <kbd>⌘</kbd> + <kbd>A</kbd> |
-| Insert a hard line break (a new paragraph) | <kbd>Enter</kbd> | <kbd>Enter</kbd> |
-| Make text bold | <kbd>Ctrl</kbd> + <kbd>B</kbd> | <kbd>⌘</kbd> + <kbd>B</kbd> |
-| Italicize text | <kbd>Ctrl</kbd> + <kbd>I</kbd> | <kbd>⌘</kbd> + <kbd>I</kbd> |
-| Apply strikethrough | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>S</kbd> |
-
-### Inserting
-
-These shortcuts allow for the quick insertion of tables, links, and images.
-
-| Actions | Windows | Mac | 
-|----------------|---------| ---------|
-| Open the insert table dialog | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>E</kbd> |
-| Create link | <kbd>Ctrl</kbd> + <kbd>K</kbd> | <kbd>⌘</kbd> + <kbd>K</kbd> |
-| Open the insert image dialog | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>I</kbd> |
-
-### Text manipulation
-
-These shortcuts help in modifying text case and applying superscript or subscript.
-
-| Actions | Windows | Mac | 
-|----------------|---------| --------- |
-| Convert text to uppercase | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>U</kbd> |
-| Convert text to lowercase | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>L</kbd> |
-| Apply superscript | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>=</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>=</kbd> |
-| Apply subscript | <kbd>Ctrl</kbd> + <kbd>=</kbd> | <kbd>⌘</kbd> + <kbd>=</kbd> |
-
-### Lists
-
-These shortcuts enable the creation of ordered and unordered lists.
-
-| Actions | Windows | Mac | 
-|----------------|---------| --------- |
-| Create an ordered list | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>O</kbd> |
-| Create an unordered list | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>O</kbd> | <kbd>⌘</kbd> + <kbd>⌥</kbd> + <kbd>O</kbd> |
-
-### Clipboard operations
-
-These shortcuts facilitate copying, cutting, and pasting content.
-
-| Actions | Windows | Mac | 
-|----------------|---------| --------- |
-| Copy the selected content  | <kbd>Ctrl</kbd> + <kbd>C</kbd> | <kbd>⌘</kbd> + <kbd>C</kbd> |
-| Cut the selected content | <kbd>Ctrl</kbd> + <kbd>X</kbd> | <kbd>⌘</kbd> + <kbd>X</kbd> |
-| Paste the copied or cut content | <kbd>Ctrl</kbd> + <kbd>V</kbd> | <kbd>⌘</kbd> + <kbd>V</kbd> |
-
-### Undo & redo
-
-These shortcuts allow for undoing and redoing recent changes.
-
-| Actions | Windows | Mac | 
-|----------------|---------| ---------|
-| Undo | <kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>⌘</kbd> + <kbd>Z</kbd> |
-| Redo | <kbd>Ctrl</kbd> + <kbd>Y</kbd> | <kbd>⌘</kbd> + <kbd>Y</kbd> |
-
-### Other actions
-
-These shortcuts provide additional functionalities like fullscreen mode.
-
-| Actions | Windows | Mac | 
-|----------------|---------| --------- |
-| Toggle full screen mode | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>F</kbd> |
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/getting-started-cs22/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/getting-started-cs22/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/getting-started-cs22" %}
-
 ## Custom key config
 
 You can able to customize the key config for the keyboard interaction of Rich Text Editor, using [keyConfig](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#keyconfig) property.
diff --git a/ej2-vue/rich-text-editor/markdown.md b/ej2-vue/rich-text-editor/markdown.md
deleted file mode 100644
index feb6644cb..000000000
--- a/ej2-vue/rich-text-editor/markdown.md
+++ /dev/null
@@ -1,163 +0,0 @@
----
-layout: post
-title: Markdown in Vue Rich text editor component | Syncfusion
-description: Learn here all about Markdown in Syncfusion Vue Rich text editor component of Syncfusion Essential JS 2 and more.
-control: Markdown 
-platform: ej2-vue
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Markdown in the Vue Rich Text Editor component
-
-When you format the word in Markdown format, you should add Markdown syntax to the word to indicate the words and phrases that look different from each other.
-
-The Rich Text Editor supports Markdown editing when the [editorMode](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#editormode) is set to markdown. You can apply formatting to text using both keyboard interactions and toolbar actions.
-
-> To use Markdown editing feature, inject `MarkdownEditor` in the provider section.
-
-## Markdown Basic Formatting
-
-The Vue Markdown editor supports various commands to format markdown content. Below are the supported commands and their usage:
-
-|Commands|Syntax| Description |
-|--------|------------------------------------------|------------|
-| Bold | Sample content for `**`bold text`**`. | For bold, add `**` or `__` to front and back of the text. | For order list, precede each line with a number. |
-| Italic | Sample content for `*`Italic text`*`. | For Italic, add `*` or `_` to front and back of the text. |
-| Bold and Italics | Sample content for `***`bold and Italic text`***`. | For bold and Italics, add `***` to the front and back of the text. |
-| Heading 1 | `#` Heading 1 content | For heading 1, add `#` to start of the line. |
-| Heading 2 | `##` Heading 2 content | For heading 2, add `##` to start of the line. |
-| Heading 3 | `###` Heading 3 content | For heading 3, add `###` to start of the line. |
-| Heading 4 | `####` Heading 4 content | For heading 4, add `####` to start of the line. |
-| Heading 5 | `#####` Heading 5 content | For heading 5, add `#####` to start of the line. |
-| Heading 6 | `######` Heading 6 content | For heading 6, add `######` to start of the line. |
-| Line Break | First line `<br>`Second line | For line break, press enter two times (or) add `<br>` in between the first and the second line. |
-| Blockquotes | `>` Blockquotes text | For blockquotes, add `>` to start of the line. |
-| Strike Through | Sample content for `~~`strike through text`~~`. | For strike through, add `~~` to front and back of the text. |
-| Code (Single line) | \`Single line code\` | For single line code, add \` to front and back of the text. |
-| Code block (Multi Line) | \`\`\`<br>Multi line code text<br>Multi line code text<br>\`\`\` | For multiple line code, add \`\`\` in the new line before and after the content. |
-| Subscript | `<sub>`Subscript text`</sub>` | For subscript, add `<sub>` to the front and `</sub>` to the back of the text. |
-| Superscript | `<sup>`Superscript text`</sup>` | For superscript, add `<sup>` to the front and `</sup>` to the back of the text. |
-| Ordered List | `1.` First<br>`1.` Second | For ordered list, preceding one or more lines of text with `1.` |
-| Unordered List | `*` First<br> `*` second | For unordered list, preceding one or more lines of text with `*`. |
-| Links | **Link text without title text**<br>`[` Link text `](`URL`)`<br> **Link text with title text**<br>`[` Link text `](`URL , "title text"`)` | Create an inline link by wrapping link text in brackets `[ ]`, and then wrapping the URL as first parameter and title as second parameter in the parentheses `()`.<br>**Note:** The title text is optional, if needed it can be given manually.|
-| Table | `| Heading 1 | Heading 2 |<br>|---------|---------|<br>| Col A1 | Col A2 |<br>| Col B1 | Col B2 |` | Create a table using the pipes and underscores as given in the syntax to create 2 x 2 table. |
-| Horizontal Line | `***` (three asterix in new line)<br>(or)<br>`___` (three underscores in new line) | For horizontal line, add `***` or `___` to the start of the new line. |
-| Image | `![alt text](`URL path`)` | Create an image by wrapping the image source in parentheses `()`. |
-| Image with alternate text | `![alt text](`URL path`)` | Create an image with alternate text by wrapping an alternative text in brackets `[]`, and then link of the image source in parentheses `()`.<br>**Note:** When inserting the image using toolbar, the alternate text cannot be provided that needs to be given manually. |
-| Escape tick marks supported | Sample text content with `**`bold and `**`not bold`**` text can be in the same line.`**` | In the syntax, the whole content is made as bold where the content `not bold` can be made as normal text by adding the bold syntax to the start and end of the respective text. Likewise you can do the same for various inline commands. |
-| Escape Character | `\(`any syntax`)` | Escape any markdown syntax by prefix `\` to the syntax.<br>Example:<br>`\**`Bold text`**`|
-| HTML Entities | Copyright: &copy; - `&copy;` <br>Trade mark: &trade; - `&trade;`<br>Registered: &reg; - `&reg;`<br>Ampersand: &amp; - `&amp;`<br>Less than: &lt; - `&lt;`<br>Greater than: &gt; - `&gt;` | For HTML entities, add & and ; to the front and back of the respective entities. |
-
-> The above listed commands are the only ones supported in the Syncfusion Markdown editor. For other commands, use HTML tags within the Markdown editor. Additionally, footnotes, definitions, math, and checklist Markdown syntax are not supported.
-
-## Insert table
-
-Add the `CreateTable` item to the toolbar items to use the table tool.
-
-To insert a table in the Markdown editor, click the `insert table` icon in the toolbar. By default, the inserted Markdown table includes 2 rows and 2 columns, along with a heading.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs8/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs8/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-cs8" %}
-
-## Insert image
-
-Add the `Image` item to the toolbar to enable the image tool.
-
-To insert an image in the Markdown editor, follow these steps:
-
-1. Click the `Insert Image` icon in the toolbar.
-2. Browse and select an image from your local machine by clicking the browse button, or enter an image link from an online source.
-3. Click the Insert button in the image dialog.
-
-The selected image will be added to the editor area.
-
-Please refer to the sample and code snippets below to add the image in the Markdown editor.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-insert-image-cs1/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-insert-image-cs1/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-insert-image-cs1" %}
-
-## Insert link
-
-To use a link, add the `CreateLink` item to the toolbar items. 
-
-To create a link for a text or an image in the Markdown editor, follow these steps:
-
-1. Click the `Insert` icon in the link dialog.
-2. Enter the link and other relevant information.
-3. Click the **Insert** button to add the link to the editor area.
-
-The link will be added to the editor area.
-
-Please refer to the sample and code snippets below to add the link in the Markdown editor.
-
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-insert-link-cs1/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-insert-link-cs1/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-insert-link-cs1" %}
-
-## Custom format
-
-The Rich Text Editor allows you to customize the markdown syntax by overriding its default syntax. Configure the customized markdown syntax using the [formatter](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#formatter)property.
-
-This example demonstrates how to customize tags in Markdown formatting.
-
-For example, use '+' for unordered lists, '1., 2., 3.' for ordered lists, '__ 'for bold text, and '_' for italic text.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs10/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs10/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-cs10" %}
-
-
-## Markdown to HTML
-
-The Rich Text Editor provides an instant preview of Markdown changes. Type or edit the text and apply formatting to view the Markdown preview.
-
-This example demonstrates how to preview Markdown changes in the Rich Text Editor. The third-party library [`Marked`](https://marked.js.org/) is used to convert Markdown into HTML content.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs7/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/markdown-cs7/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-cs7" %}
-
-## See Also
-
-* [How to render the toolbar in inline mode](./inline-editing)
-* [How to render the iframe](./iframe)
-* [How to add the Rich Text Editor component](./getting-started/#adding-rich-text-editor-component)
\ No newline at end of file
diff --git a/ej2-vue/rich-text-editor/mention-integration.md b/ej2-vue/rich-text-editor/mention-integration.md
deleted file mode 100644
index 0b184f270..000000000
--- a/ej2-vue/rich-text-editor/mention-integration.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: Mention integration in Vue Rich text editor component | Syncfusion
-description: Learn here all about Mention integration in Syncfusion Vue Rich text editor component of Syncfusion Essential JS 2 and more.
-control: Mention integration 
-platform: ej2-vue
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Mention integration in Vue Rich text editor component
-
-By integrating the [Mention](https://ej2.syncfusion.com/vue/documentation/mention/getting-started/) component with a Rich Text Editor, users can easily mention or tag other users or objects from the suggested list without having to manually type out their names or other identifying information.
-
-The [target](https://ej2.syncfusion.com/vue/documentation/api/mention/#target) property of the Mention component allows you to specify the `ID` of the content editable div element within the Rich Text Editor that you want to bind the Mention component to. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text.
-
-When the user types the `@` symbol followed by a character, the Rich Text Editor will display a list of suggestions for items that the user can select from. The user can then select an item from the list by clicking on it, or by typing the name of the item they want to tag.
-
-In the following sample, configured the following properties with popup dimensions.
-
-* [allowSpaces](https://ej2.syncfusion.com/vue/documentation/api/mention/#allowspaces) - Allow to continue search action if user enter space after mention character while searching.
-* [suggestionCount](https://ej2.syncfusion.com/vue/documentation/api/mention/#suggestioncount) - The maximum number of items that will be displayed in the suggestion list.
-* [itemTemplate](https://ej2.syncfusion.com/vue/documentation/api/mention/#itemtemplate) - Used to display the customized appearance in suggestion list.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/mention-integration-cs1/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/rich-text-editor/mention-integration-cs1/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/mention-integration-cs1" %}
-
-> [View Sample](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/rich-text-editor/mention-integration.html)
-
-## See Also
-
-* [Mention](https://ej2.syncfusion.com/vue/documentation/mention/getting-started/)
\ No newline at end of file
diff --git a/ej2-vue/rich-text-editor/miscellaneous.md b/ej2-vue/rich-text-editor/miscellaneous.md
deleted file mode 100644
index dea2c1652..000000000
--- a/ej2-vue/rich-text-editor/miscellaneous.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-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).
-
-
-