diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/aws-s3-bucket.md b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/aws-s3-bucket.md
index 70debb9e9..db5c5804e 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/aws-s3-bucket.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/aws-s3-bucket.md
@@ -115,7 +115,7 @@ In the client-side, the document is returned from the web service is opening usi
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/azure-blob-storage.md b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/azure-blob-storage.md
index afeae1488..70b8ff8f1 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/azure-blob-storage.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/azure-blob-storage.md
@@ -102,7 +102,7 @@ In the client-side, the document is returned from the web service is opening usi
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/box-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/box-cloud-file-storage.md
index 379ff2d45..840c8f613 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/box-cloud-file-storage.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/box-cloud-file-storage.md
@@ -127,7 +127,7 @@ In the client-side, the document is returned from the web service is opening usi
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/dropbox-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/dropbox-cloud-file-storage.md
index 7bd4440f0..f500b6d3b 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/dropbox-cloud-file-storage.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/dropbox-cloud-file-storage.md
@@ -110,7 +110,7 @@ In the client-side, the document is returned from the web service is opening usi
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/google-cloud-storage.md b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/google-cloud-storage.md
index a2b24a1a4..4e5cfe3e2 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/google-cloud-storage.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/google-cloud-storage.md
@@ -117,7 +117,7 @@ In the client-side, the document is returned from the web service is opening usi
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/google-drive.md b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/google-drive.md
index 5dca20c00..49678166c 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/google-drive.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/google-drive.md
@@ -141,7 +141,7 @@ In the client-side, the document is returned from the web service is opening usi
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/one-drive.md b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/one-drive.md
index 71319eb4f..6ba911fd0 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/one-drive.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/opening-documents/one-drive.md
@@ -138,7 +138,7 @@ In the client-side, the document is returned from the web service is opening usi
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/aws-s3-bucket.md b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/aws-s3-bucket.md
index 58583e2da..d15b62707 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/aws-s3-bucket.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/aws-s3-bucket.md
@@ -123,7 +123,7 @@ In the client-side, to export the document into blob the document using [`saveAs
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/azure-blob-storage.md b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/azure-blob-storage.md
index 74ad93b6f..f9c01bfd0 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/azure-blob-storage.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/azure-blob-storage.md
@@ -116,7 +116,7 @@ In the client-side, to export the document into blob the document using [`saveAs
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/box-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/box-cloud-file-storage.md
index 9bb7bb3e2..66b62d305 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/box-cloud-file-storage.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/box-cloud-file-storage.md
@@ -132,7 +132,7 @@ In the client-side, to export the document into blob the document using [`saveAs
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/google-drive.md b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/google-drive.md
index 205faa4ac..3b1c4a0ce 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/google-drive.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/google-drive.md
@@ -152,7 +152,7 @@ In the client-side, to export the document into blob the document using [`saveAs
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/one-drive.md b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/one-drive.md
index 5dfe25da6..6cd7fb95c 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/one-drive.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/one-drive.md
@@ -142,7 +142,7 @@ In the client-side, to export the document into blob the document using [`saveAs
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/index.html %}
+{% include code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/saving-documents/dropbox-cloud-file-storage.md b/Document-Processing/Word/Word-Processor/javascript-es6/saving-documents/dropbox-cloud-file-storage.md
index d66be6878..27cf638b9 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es6/saving-documents/dropbox-cloud-file-storage.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es6/saving-documents/dropbox-cloud-file-storage.md
@@ -133,7 +133,7 @@ In the client-side, to export the document into blob the document using [`saveAs
 {% include code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/index.html %}
+{% include code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/saving-documents/google-cloud-storage.md b/Document-Processing/Word/Word-Processor/javascript-es6/saving-documents/google-cloud-storage.md
index 3fb3fd2ad..963b0285c 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es6/saving-documents/google-cloud-storage.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es6/saving-documents/google-cloud-storage.md
@@ -136,7 +136,7 @@ In the client-side, to export the document into blob the document using [`saveAs
 {% include code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/index.html %}
+{% include code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/js/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/index.html
new file mode 100644
index 000000000..2144680e3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body>
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/app.component.ts
new file mode 100644
index 000000000..eedda6d04
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/app.component.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';
+
+/**
+ * Document Editor Component
+ */
+@Component({
+  imports: [
+    ButtonModule,
+    DocumentEditorContainerModule
+  ],
+
+
+  standalone: true,
+  selector: 'app-container',
+  template: `<h1>Syncfusion Word Processor(a.k.a)Document Editor Component</h1>
+      <ejs-documenteditorcontainer #documenteditor_default height="600px" style="width:100%;display:block" [enableToolbar]=true (created)="onCreate()" ></ejs-documenteditorcontainer>`,
+  encapsulation: ViewEncapsulation.None,
+  providers: [ToolbarService]
+})
+export class AppComponent {
+  @ViewChild('documenteditor_default')
+  public container!: DocumentEditorContainerComponent;
+  onCreate(): any {
+    let sfdt: string = '{"sfdt":"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"}';
+    this.container.documentEditor.open(sfdt);
+}
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/accessbility-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/app.component.ts
new file mode 100644
index 000000000..c6619ba2f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/app.component.ts
@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, EditorHistoryService, BookmarkDialogService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      // specifies the template string for the Document Editor component
+      template: `<div><button ejs-button (click)="showBookmarkDialog()" >Dialog</button>
+      <ejs-documenteditor #document_editor id="container" height="330px" style="display:block" [isReadOnly]=false [enableEditor]=true [enableEditorHistory]=true [enableBookmarkDialog]=true>
+      </ejs-documenteditor></div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [EditorService, SelectionService, SfdtExportService, EditorHistoryService, BookmarkDialogService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public showBookmarkDialog(): void {
+          //Open the bookmark dialog.
+          (this.documentEditor as DocumentEditorComponent).showDialog('Bookmark');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/bookmark-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/angular.json
new file mode 100644
index 000000000..bb5caa873
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/app.component.ts
new file mode 100644
index 000000000..91a399a1d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/app.component.ts
@@ -0,0 +1,65 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, OnInit,ViewChild } from '@angular/core';
+import { ToolbarService ,DocumentEditorContainerComponent, CustomContentMenuEventArgs} from '@syncfusion/ej2-angular-documenteditor';
+import { MenuItemModel } from '@syncfusion/ej2-navigations';
+@Component({
+imports: [
+        
+        DocumentEditorContainerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      // specifies the template string for the DocumentEditorContainer component
+      template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [documentEditorSettings]= "fontFamilies" [enableToolbar]=true (created)="onCreate()"> </ejs-documenteditorcontainer>`,
+      providers: [ToolbarService]
+})
+export class AppComponent implements OnInit {
+    @ViewChild('documenteditor_default')
+    public container?: DocumentEditorContainerComponent;
+    public fontFamilies={fontFamilies :['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings']};
+    ngOnInit(): void {
+    }
+    onCreate() {
+        debugger;
+     // creating Custom Options
+     let menuItems: MenuItemModel[] = [
+        {
+            text: 'Search In Google',
+            id: 'search_in_google',
+            iconCss: 'e-icons e-de-ctnr-find'
+        }];
+    // adding Custom Options
+    (this.container as DocumentEditorContainerComponent ).documentEditor.contextMenu.addCustomMenu(menuItems, false);
+    // custom Options Select Event
+    (this.container as DocumentEditorContainerComponent ).documentEditor.customContextMenuSelect = (args: any): void => {
+        // custom Options Functionality
+        let id: string = (this.container as DocumentEditorContainerComponent ).documentEditor.element.id;
+        switch (args.id) {
+            case id + 'search_in_google':
+                let searchContent: string = (this.container as DocumentEditorContainerComponent ).documentEditor.selection.text;
+                if (!(this.container as DocumentEditorContainerComponent ).documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+                    window.open('http://google.com/search?q=' + searchContent);
+                }
+                break;
+        }
+    };
+    //  custom options hide/show functionality
+    (this.container as DocumentEditorContainerComponent ).documentEditor.customContextMenuBeforeOpen = (args: any): void => {
+        let search: any = document.getElementById(args.ids[0]);
+        search.style.display = 'none';
+        let searchContent: string = (this.container as DocumentEditorContainerComponent ).documentEditor.selection.text;
+        if (!(this.container as DocumentEditorContainerComponent ).documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+            search.style.display = 'block';
+        }
+    };
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/styles.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/styles.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/customize-context-menu-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/app.component.ts
new file mode 100644
index 000000000..4e30bc54a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/app.component.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, FontDialogService, EditorService, ContextMenuService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <button ejs-button (click)="btnClick()" >Show Dialog</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
+      [enableSfdtExport]=true [enableContextMenu]=true
+      [enableFontDialog]=true [enableEditor]=true>
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SfdtExportService, SelectionService, FontDialogService, EditorService, ContextMenuService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public btnClick(): void {
+        //Open font dialog
+        (this.documentEditor as DocumentEditorComponent).showDialog('Font');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/app.component.ts
new file mode 100644
index 000000000..6552df45d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/app.component.ts
@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, ParagraphDialogService, EditorService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <button ejs-button (click)="btnClick()" >Show Dialog</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSfdtExport]=true
+      [enableParagraphDialog]=true [enableEditor]=true>
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SfdtExportService, SelectionService, ParagraphDialogService, EditorService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public btnClick(): void {
+        //Open paragraph dialog.
+        (this.documentEditor as DocumentEditorComponent).showDialog('Paragraph');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/app.component.ts
new file mode 100644
index 000000000..69a0b0e54
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/app.component.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, TableDialogService, EditorService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+    selector: 'app-container',
+    template: `<div>
+    <button ejs-button (click)="btnClick()" >Show Dialog</button>
+    <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSfdtExport]=true
+    [enableTableDialog]=true [enableEditor]=true>
+    </ejs-documenteditor>
+    </div>`,
+    encapsulation: ViewEncapsulation.None,
+    providers: [SfdtExportService, SelectionService, TableDialogService, EditorService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public btnClick(): void {
+        //Open table dialog.
+        (this.documentEditor as DocumentEditorComponent).showDialog('Table');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs3/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/app.component.ts
new file mode 100644
index 000000000..4dd0f1dbb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/app.component.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, BookmarkDialogService, EditorService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <button ejs-button (click)="btnClick()" >Show Dialog</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSfdtExport]=true
+      [enableBookmarkDialog]=true [enableEditor]=true>
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SfdtExportService, SelectionService, BookmarkDialogService, EditorService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public btnClick(): void {
+        //Open bookmark dialog.
+        (this.documentEditor as DocumentEditorComponent).showDialog('Bookmark');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs4/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/app.component.ts
new file mode 100644
index 000000000..97108f68e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/app.component.ts
@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, HyperlinkDialogService, EditorService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <button ejs-button (click)="btnClick()" >Show Dialog</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSfdtExport]=true
+      [enableHyperlinkDialog]=true [enableEditor]=true>
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SfdtExportService, SelectionService, HyperlinkDialogService, EditorService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public btnClick(): void {
+        //Open hyperlink dialog.
+        (this.documentEditor as DocumentEditorComponent).showDialog('Hyperlink');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs5/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/app.component.ts
new file mode 100644
index 000000000..80b341555
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/app.component.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, PageSetupDialogService, EditorService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <button ejs-button (click)="btnClick()" >Show Dialog</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSfdtExport]=true
+      [enablePageSetupDialog]=true [enableEditor]=true>
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SfdtExportService, SelectionService, PageSetupDialogService, EditorService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public btnClick(): void {
+        //Open page setup dialog.
+        (this.documentEditor as DocumentEditorComponent).showDialog('PageSetup');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/dialog-cs6/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/app.component.ts
new file mode 100644
index 000000000..e82504303
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/app.component.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';
+@Component({
+imports: [
+        
+        DocumentEditorContainerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      // specifies the template string for the DocumentEditorContainer component
+      template: `<ejs-documenteditorcontainer #document_editor (created)="onCreated()" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
+      providers: [ToolbarService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public container?: DocumentEditorContainerComponent;
+
+    onCreated() {
+        if ((this.container as DocumentEditorContainerComponent ).documentEditor.isDocumentLoaded) {
+            let sfdt: string = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+            (this.container as DocumentEditorContainerComponent).serviceUrl = 'https://services.syncfusion.com/angular/production/api/documenteditor/';
+            //Open the default document in Document Editor
+            (this.container as DocumentEditorContainerComponent).documentEditor.open(sfdt);
+        }
+    }
+}
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/app.component.ts
new file mode 100644
index 000000000..cd4ca2ad4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/app.component.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, OnInit } from '@angular/core';
+import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
+@Component({
+imports: [
+        
+        DocumentEditorContainerModule
+    ],
+
+
+standalone: true,
+    selector: 'app-container',
+    // specifies the template string for the DocumentEditorContainer component
+    template: `<ejs-documenteditorcontainer serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
+    providers: [ToolbarService]
+})
+export class AppComponent implements OnInit {
+
+    ngOnInit(): void {
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/app.component.ts
new file mode 100644
index 000000000..9f8b603db
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/app.component.ts
@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';
+
+/**
+ * Document Editor Component
+ */
+@Component({
+imports: [
+        
+        DocumentEditorContainerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      template: `<ejs-documenteditorcontainer #documenteditor_readonly height="600px" style="width:100%;display:block" [enableToolbar]=true (created)="onCreate()" (documentChange)="onDocumentChange()" ></ejs-documenteditorcontainer>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [ToolbarService]
+})
+export class AppComponent {
+    @ViewChild('documenteditor_readonly')
+    public container?: DocumentEditorContainerComponent;
+    // load your default document here
+    onCreate(): any {
+        let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // open the default document.
+        (this.container as DocumentEditorContainerComponent ).documentEditor.open(sfdt);
+    }
+    onDocumentChange(): void {
+        //Enable read only mode.
+        (this.container as DocumentEditorContainerComponent).restrictEditing = true;
+    }
+}
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs3/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/app.component.ts
new file mode 100644
index 000000000..b9a8a3710
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/app.component.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';
+
+/**
+ * Document Editor Component
+ */
+@Component({
+imports: [
+        
+        DocumentEditorContainerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      template: `<ejs-documenteditorcontainer #documenteditor_default height="600px" style="width:100%;display:block" [enableToolbar]=true (created)="onCreate()"></ejs-documenteditorcontainer>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [ToolbarService]
+})
+export class AppComponent {
+    @ViewChild('documenteditor_default')
+    public container?: DocumentEditorContainerComponent;
+    // load your default document here
+    onCreate(): any {
+          let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+          // open the default document.
+          (this.container as DocumentEditorContainerComponent ).documentEditor.open(sfdt);
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs4/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/app.component.ts
new file mode 100644
index 000000000..aae0c613c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/app.component.ts
@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { DocumentEditorContainerComponent, ImageFormat, ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
+import { showSpinner ,hideSpinner,createSpinner} from '@syncfusion/ej2-popups';
+
+@Component({
+imports: [
+        
+        DocumentEditorContainerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      // specifies the template string for the DocumentEditorContainer component
+      template: `<button id='export'(click)="onClick(this)">Export</button><ejs-documenteditorcontainer  id="container" #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
+      providers: [ToolbarService]
+})
+export class AppComponent implements OnInit {
+    @ViewChild('documenteditor_default')
+    public container?: DocumentEditorContainerComponent;
+
+    ngOnInit(): void {
+        createSpinner({
+            // Specify the target for the spinner to show
+              target: (document.getElementById('container') as HTMLElement) as HTMLElement
+          });
+    }
+    onClick( args: any):void {
+        // load your default document here
+        let data: string= '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+        // showSpinner() will make the spinner visible
+        showSpinner((document.getElementById('container') as HTMLElement) as HTMLElement);
+        // Open the default document
+        (this.container as DocumentEditorContainerComponent ).documentEditor.open(data);
+        setInterval(function(){
+
+            // hideSpinner() method used hide spinner
+            hideSpinner((document.getElementById('container') as HTMLElement));
+
+        }, 5000);
+    }
+}
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs5/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/app.component.ts
new file mode 100644
index 000000000..672e5278c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/app.component.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';
+@Component({
+imports: [
+        
+        DocumentEditorContainerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      // specifies the template string for the DocumentEditorContainer component
+      template: `<ejs-documenteditorcontainer #document_editor (created)="onCreated()" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
+      providers: [ToolbarService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public container?: DocumentEditorContainerComponent;
+
+    onCreated() {
+        if ((this.container as DocumentEditorContainerComponent ).documentEditor.isDocumentLoaded) {
+            let sfdt: string = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+            (this.container as DocumentEditorContainerComponent).serviceUrl = 'https://services.syncfusion.com/angular/production/api/documenteditor/';
+            //Open the default document in Document Editor
+            (this.container as DocumentEditorContainerComponent ).documentEditor.open(sfdt);
+        }
+    }
+}
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/document-editor-container-cs6/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/app.component.ts
new file mode 100644
index 000000000..5c659863b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/app.component.ts
@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, EditorHistoryService, BookmarkDialogService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor Container component
+      template: `<div style="width:100%;"><button ejs-button (click)="saveAsSfdt()" >Save</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableEditor]=true [enableSfdtExport]=true> </ejs-documenteditor></div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [EditorService, SelectionService, SfdtExportService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public saveAsSfdt(): void {
+        //Download the document as SFDT.
+        (this.documentEditor as DocumentEditorComponent).save('sample', 'Sfdt');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/app.component.ts
new file mode 100644
index 000000000..2b16232cb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/app.component.ts
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, WordExportService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div style="width:100%"><button ejs-button (click)="saveAsDocx()" >Save</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableEditor]=true [enableWordExport]=true> </ejs-documenteditor></div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [EditorService, SelectionService, SfdtExportService, WordExportService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public saveAsDocx(): void {
+        //Export the document in docx format.
+        (this.documentEditor as DocumentEditorComponent).save('sample', 'Docx');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/app.component.ts
new file mode 100644
index 000000000..7967bc6dd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/app.component.ts
@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, TextExportService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div style="width:100%;"><button ejs-button (click)="saveAsTxt()" >Save</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableEditor]=true [enableTextExport]=true> </ejs-documenteditor></div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [EditorService, SelectionService, SfdtExportService, TextExportService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public saveAsTxt(): void {
+        //Downlod the document as txt file.
+        (this.documentEditor as DocumentEditorComponent).save('sample', 'Txt');
+    }
+
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs3/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/app.component.ts
new file mode 100644
index 000000000..06ad4f0b4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/app.component.ts
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, WordExportService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div style="width:100%"><button ejs-button (click)="saveAsDotx()" >Save</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableEditor]=true [enableWordExport]=true> </ejs-documenteditor></div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [EditorService, SelectionService, SfdtExportService, WordExportService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public saveAsDotx(): void {
+        //Export the document in docx format.
+        (this.documentEditor as DocumentEditorComponent).save('sample', 'Dotx');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/styles.css
new file mode 100644
index 000000000..316b39e8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/src/styles.css
@@ -0,0 +1,12 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/export-cs4/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/angular.json
new file mode 100644
index 000000000..bb5caa873
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/app.component.ts
new file mode 100644
index 000000000..c4b8a7cc0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/app.component.ts
@@ -0,0 +1,74 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
+import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
+import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SelectionService, EditorService, SearchService, OptionsPaneService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        ToolbarModule,
+        DocumentEditorAllModule,
+        ComboBoxModule,
+        ColorPickerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <button ejs-button (click)="showOptionsPane()" >Show</button>
+      <ejs-documenteditor #document_editor height="330px" style="display:block" id="container" height="330px" style="display:block" [enableSelection]=true [enableSearch]=true [enableEditor]=true [isReadOnly]=false [enableOptionsPane]=true (created)="onCreated()"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SelectionService, EditorService, SearchService, OptionsPaneService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    onCreated(): void {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: string = `{
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }`;
+            //Open the document in Document Editor
+            (this.documentEditor as DocumentEditorComponent).open(sfdt);
+        }
+    }
+
+    public showOptionsPane(): void {
+        //Open options pane.
+        (this.documentEditor as DocumentEditorComponent).showOptionsPane();
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/styles.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/styles.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSjMAAAEoAAAAVmNtYXDrUOx6AAACjAAAALhnbHlmgsfH+gAAA8wAADHkaGVhZBJqCMMAAADQAAAANmhoZWEIXQREAAAArAAAACRobXR4DAAAAAAAAYAAAAEMbG9jYaghtx4AAANEAAAAiG1heHABaQE/AAABCAAAACBuYW1lGlPD+gAANbAAAAMJcG9zdEaDh5QAADi8AAADbgABAAAEAAAAAFwEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAAQwABAAAAAQAA7DnVTl8PPPUACwQAAAAAANel4eMAAAAA16Xh4wAAAAAEAAQAAAAACAACAAAAAAAAAAEAAABDATMAHAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnQQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQApAAAAAQABAABAADnQf//AADnAP//AAAAAQAEAAAAAQACAAMABAAFAAYABwAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AHwAgACEAIgAjACQAJQAmACcAKAApACoAKwAsAC0ALgAvADAAMQAyADMANAA1ADYANwA4ADkAOgA7ADwAPQA+AD8AQABBAEIAAAAAAFoAngDuAg4CWAJ4ApoCxgMGA9QD8gVgBcoGSgaMByoHYggKCLII3AkICbwJ3An4CjIKvAr4C8QL4AwADEIM6g0MDawNxg42DoIOpA8yD2YPhA+2EFgQdhEWEcAR2BI4EyYTXhOUE8AUPhRWFJAUnhVAFegWMBdiF4IXuhf+GHAYjBjyAA4AAAAAA/MDtQADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAACUzNSMHMzUjBzM1IwczNSMHMzUjJTM1IwUzNSMFMzUjJSE1IQUhNSElMzUjBTM1IwczNSMHMzUjA7U/P7t9ffp9ffp9ffp9fQLu+vr+ifr6/on6+gH0AfT+DP4MAXf+iQLu+vr+yLu7+n19vD8/S319fX19fX19fX19fX19fX18fHx9fX19fX19fQAAAAIAAAAAA3YD8wAEACsAAAETCQERAx8JMz8ECQEfBjM/CREhAzgB/sf+yD8BAgMFBgYICQkJCQkJCQgHAQoBCwUFBQYGBgYMDAUJCAYGBQMCAf0SA7X8lQFn/poDavyWCgkICAcHBQQDAQEDBAUHATH+zgUEAwMCAQECAgQFBggICAkKA6kAAAAFAAAAAAPzA9QABAAIACcALgAyAAAlFSMnNwchNTclDwMdAR8GPwY1LwYPARMRJwcBBxEDIREhA7WPnVIN/X3aAd0CAgICAgIEBQYGBgYGBgUEAwEBAwIHBQYLCQWu2n3+x9o/A+j8GH0TnFHtzttCAgMFBgcGBgUFBAMBAQEBAwQEBQYLCgUCBgMBAQIDAT39QNl9ATjaAgb8lgOoAAAAAgAAAAAD8wPzAH8BBQAAARUPHSsBLx09AT8dOwEfHQUVHwcBDwMfCDM/BAEfBz8fLx8PHgO1AQIDAwUFBQYHCAgJCQoKCwsMDA0NDg4ODg8PDxAQEBAQDxAPDw4ODg4NDA0MCwsKCgkJCAgGBwUFBAQDAgEBAgMEBAUFBgcICAkJCgoLCwwMDQ0ODg4ODw8PEBAQEBAPEA8PDg4ODg0MDQwLCwoKCQkICAYHBQUEBAMCAf1RAQQGBwoMDg/+zwYFAgECAwYIBAUGCwwMDAsFBQUBLRgYGhscHR0eExMTEhMREhEQEBAPDw4ODQwMCwsJCQkHBwYFBAMDAQEBAQMDBAUGBwcJCQkLCwwMDQ4ODw8QEBAREhETEhMTExMTExITERIREBEPDw8ODg0MDAsLCgkIBwcGBQQEAgECfRAQEA8PDw4PDQ4NDQwMCwsKCgkJCAgHBgUFBQMDAgEBAgMDBQUFBgcICAkJCgoLCwwMDQ0ODQ8ODw8PEBAQEBAPEA8PDg4ODg0MDQsMCwoKCQkIBwcHBQUEBAMCAQECAwQEBQUHBwcICQkKCgsMCw0MDQ4ODg4PDxAPEBAPDx0dHBsaGBj+zgoKCwsLCwoJBQMEBAICBAQDBQEtEA4MCgcGBAEBAQMDBAUGBwcICgkLCwwMDQ4ODw8PERAREhETEhMTExMTExITERIREBAQDw8ODg0MDAsLCQkJBwcGBQQDAwEBAQEDAwQFBgcHCQkJCwsMDA0ODg8PEBAQERISEhITEwAACwAAAAAD1APUAAMABwALAA8AEwAXABsAHwAjACkALwAAJTM1IzUzNSM3MzUjBzM1IwczNSMHMzUjBzM1IzczNSM1MzUjJzMhESERIxEVIREhAeE+Pj4++j4+fT4+fT4+fT4+fT4++j4+Pj76PgJx/NQ+A6j8WOc+Pz4/Pj4+Pj4+Pj4+Pz4/Pn381AMs/NQ+A6gAAAQAAAAAA/MD8wADAAcACwAPAAA3ITUhNSE1ITUhNSE1ITUhDAPo/BgD6PwYA+j8GAPo/BgMP/o++j76PwAAAAABAAAAAAO1A7UACwAAEwkBFwkBNwkBJwkBSwGJ/ncsAYkBiSz+dwGJLP53/ncDif53/ncsAYn+dywBiQGJLP53AYkAAAUAAAAAA/MD8wADAAcADQARABUAADchNSElITUhJRc3JzcnFyE1ISUhNSEMA+j8GAE5Aq/9Uf7HkippaSqnAq/9Uf7HA+j8GAw/+j59nCxwcCwfPvo/AAAHAAAAAAPzA/MAAwAHABMAFwAbAB8AKwAAJTM1IwczNSM3IxUzFTM1MzUjNSMlITUhJTM1IwczNSMXIxUzFTM1MzUjNSMCfT4++j8/fT4+Pz4+P/4MA+j8GAJxPj76Pz99Pj4/Pj4/yD4+Pj8/+vo/Pn0+vD4+Pj4/Pj4/+gAAAAQAAAAAA/MD8wAwADMAaQCnAAAlFQ8OLw49AT8HHwYBBycFDwkVHw4/DzUvCQEVCQInBxcHIQE1PwY7AR8GETMRNS8ODw4DqwECAwMDBQQGBQYHBgcHCAcHBwcGBgYFBQQEAwICAQECBgkKEg0NGwwLCQgEAv6k6uICwwE0FQkKCAcFAwEDAwUGBwkJCwsMDQ0ODg8PDw4NDQwLCgoIBwYFBAIBAwQGDAkKChUTNP3j/scBWAGWhTBgFf3xAQIBAgMDBQUGBwYGBQUDAwIBPgICAwQFBQYHBwgICQkJCQoJCQkICAcHBgUFBAMCAq4JCQgICAcHBwUFBQQDAgEBAQECAwQFBQUHBwcHCQgJCQcJCBMVFR8VFCkVFRUTEgkBDeLiIwJIJBITFBMTExEREA8PDg4MCwsJCAcFBAMBAQMEBQcICQsLDA4ODw8QCBETExMdExMSIBxCAdRw/rv+qAGHoCh0FAEMigYGBQUEAwICAwQFBQYG/ucBGQoJCQkIBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkAAAACAAAAAAPzA/MAAwAMAAA3ITUhJScHCQEnBxEjDAPo/BgB9OQsAS8BLyzjPww/5uUs/s4BMizlAsMAAAAGAAAAAAPzA/MAHwBfAJ8A4gDlATIAAAEVDwUrAS8GPwY7AR8FBxUfDj8PLw4jDw4XDw8vDz8PHw4nIw8DJwcXDwQnBx8EBxc3HwMHFzcfAT8CFzcnPwMXNyc/BScHLwM3JwcvAzUjJyM1JREfDyE1ISMvBTURNT8FMyEVMxUzPQEvDyEPDgMSAgIDBAQEBQUFBAMDAwEBAQEDAwMEBQUFBAQEAwICbwICAwMFBQUHBgcICAgJCQkICQgHBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwcICQgJCQkICAgHBgcFBQUDAwIC3gECAwUFBwgJCQsLDAwNDQ4ODgwNDAsKCgkHBwYFAwIBAQIDBQYHBwkKCgsMDQwODg4NDQwMCwsJCQgHBQUDAqICFBMSEiIqIgkLCggEMwo0AQMFBi8cMA4ODxMUNBQUFA8PCRQ0FBIPDRAwHC8FBQQBATQKMwgIChAiKiIVERIVOBCQ/c4BAQIEBAQGBgYIBwgJCQkKAZb+agYGBgQEAwICAwQFBQYGAZb6PgEDAwQEBgbWBggICAkICgn+ZQoJCQkIBwgGBgYEBAQCAQEGBQQEBAMCAgICAwQEBAUFBQQDAwMBAQMDAwQFBQkICQgHBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwcICQgJCQkICAcIBgYGBQQEAwICAQECAwQEBQYGBggHCAgJCQ4NDQwMCwsJCQgHBQUDAgEBAgMFBQcICQkLCwwMDQ0ODg0NDQwLCgoJBwcGBAQCAQECBAQGBwcJCgoLDA0NDbYEBggKKSQpChAREgsJNwoYFBMSGzEcDg0LDDcUOAMBAQIBOBM4CgsMERwwHA0RExMNCTgJFBAQFCkkKQsHBgQ2+o8N/NQKCQkICQcIBgYGBAQDAwEBPwIDBAUFBgYDLAYGBQUEAwL6fIIJCQkJCAgHB9UHBQUEAwIBAQEBAgQEBAYGBggHCAkJCQAAAAAEAAAAAAN2A/MAAwAHACIAUwAANyE1IQEVBzUBDwodASE3NS8JIzsBHw8HMxU3NTMnPw8zNSMVITUjiQLu/RIBtn4BMgYGCggHBQUDAwIB/okBAgEDBAQFBwgKDIQKChIRDgwMCggHBwUDAwMBAQECbvptAgEBAgIDBAUGCAgKCw0OERIUP/2QPwx9AXdQRJQBOAYGDQ0ODg4ODw8PEF9gDw8PDg8ODg0ODQwDBAUHCAkKCwsNDg4OEA8gfvqNbX4gDxAODg4NCwsKCQgHBQQDvH19AAIAAAAAA/MDtQBUAGAAAAEPBRU/BjsBHwkVDxAVMzUjPxIvDwcFCQEXCQE3CQEnCQEDVw4ODQwNDAwMDAwNDA0MBw0MCgkEAwMCAQECBAYHCREMNw4MCwoIBgICAfq0AQECBAQLDEAZDwwFBAQEAgIBAQECAgQFBQcHCAkKCgwMDA0Q/KUBMf7PMgEmASYx/tABMDH+2v7aA7MDAwUGBwg5CgkHBgQEAgIEBQcFBAYFBwYODAwLCgoOCisLDAwNDg8ICAglMwcFBgUFCwswFQ8PCAgICQkKCgsMCwsKCQgIBwYFBAQDAgEBASb+cf5wJgGC/n8lAZABjyb+fgGCAAAKAAAAAAPzA/MAAwAHAAsADwATABcAGwAfACMAKAAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1AykBESEDtfo++j76A2r6Pvo++gNq+j76Pvo/ATkCr/wYAUX6+vr6+voBOPr6+vr6+gE4+vr6+vr6/FcD6AAAAAABAAAAAAPzA/MAigAAEwE3ASEzHx0dAQ8dKwEVMz8fLx4jIQEnDAGNKf7KAhAPDg4ODQ4NDA0MDAsLCwoKCQkICAcHBgYFBQMDAwIBAQIDAwMFBQYGBwcICAkJCgoLCwsMDA0MDQ4NDg4OD15eEhEREREQEBAPDw4ODg0MDAsLCgoJCAgHBgUFBAMCAQEBAQIDBAUFBgcICAkKCgsLDAwNDg4ODw8QEBAREREREv33AS0pApj+rS8BCQIBAwMEBAUGBgcHCAgJCgkKCwsMCwwNDQ0NDg0ODw4PDg4ODQ4NDQwMDAsLCwoKCQkICAgGBwUFBQMEAgIBPwEBAgMEBQUGBwgICQoKCwsMDA0ODg4PDxAQEBERERESEhEREREQEBAPDw4ODQ0NDAsLCgoJCAcHBwUFAwMDAQEKLwAABQAAAAAD8wPzAAsADwATABcAJwAAJSMVMxUzNTM1IzUjARUjNSMVIzUjFSM1AyERIxUjNSMVIzUjFSM1IwIAfX0/fHw/AbX6Pvo++j8D6D/6Pvo++j/IP319P30Bdvr6+vr6+v7IAnH6+vr6+voAABwAAAAAA9QD1AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAAAlMzUjBzM1IwczNSMHMzUjBzM1IwczNSMHMzUjJTM1IwUzNSMFMzUjJTM1IwUzNSMFMzUjJTM1IyEzNSMHMzUjBzM1IwUzNSMHMzUjBzM1IyEzNSMlMzUjBTM1IwUzNSMlMzUjBTM1IwUzNSM1ITUhA5Y+Pn0/P30/P7s+Prw/P30/P3w+PgNqPj7+Sz4+/ks+PgNqPj7+Sz4+/ks+PgG1Pj4BtT4+fT8/fT8//ok/P30/P3w+PgG1Pj4BtT4+/ks+Pv5LPj4Daj4+/ks+Pv5LPj4DqPxYLD4+Pj4+Pj4+Pj4+Pj4+Pz8/Pz8+Pz8/Pz8+Pz4+Pj4+Pj4+Pj4+Pz4/Pz8/Pz4/Pz8/Pz4+AAUAAAAAA5YD8wADAB8AIgBAAIUAAAEHIzcnIxUzByMVMwcXNzMHFzczNSM3MzUjNycHIzcnJSM1JxUzEQ8GIyEjLwYRPwYzBxEVHw4hPw41ETUvDyEPDgJHEnwSNnBnElVMDT4OfAw9Dm9mElVMDT4OfAw9AYiPPvoBAgMEBAYFB/2QBwUGBAQDAgEBAgMEBAYFB14CAgMEBQUGBwcICAkJCQoCcAoJCQkICAcHBgUFBAMCAgICAwQFBQbWBwcICAkJCQn+ZQoJCQkICAcHBgUFBAMCAgHCfX0+Pn0/WQliWQliPn0/WQliWQmYjyz6/a8GBgUFBAMCAgMEBQUGBgMsBgYFBQQDAh/81AoJCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkKAlcJCQkJCAgHB9UGBgUEAwIBAQEBAwMEBAYGBggHCQgJCQAAAAMAAAAAA/MD8wAIAAwAFQAAJRc3ETMRFzcnJSE1ISUnBxc3JwcRIwGDKlM/Uyqd/e0D6PwYAfRTKpycKlM+9i9M/vkBB0wvjX0+r0wvjY0vTAEHAAUAAAAAA/MD8wADAAcADQARABUAADchNSElITUhJRcHFzcnBSE1ISUhNSEMA+j8GAE5Aq/9Uf7Hb28sm5sBDQKv/VH+xwPo/BgMP/o+7G9vLJubHj76PwADAAAAAAMZA7UAIwBGAJsAAAE7AR8ODw4rARETHw8PDyMRBxURIT8bNS8PNT8PNS8QIQHNDQ0ZGBUUEhAPDQsJCAYFAgEBAgQGBwkLDA4OERETFRUXkXsVFBIREA4NDAoJCAYFAwIBAQIEBgcICwsODg8REhMUFm1rAQofHh0ODQ0NDAwMCwsLCgoJCAcHBgYFBAQDAgIBAQIFBggJCw0PDxESExQWFhIREA8ODQwLCggHBgUDAgEDBAYEBQUGDQ8RExUWFxkbHP7uAeICAwQGBwcJCwsNDg8QEhMSERAPDg0NCwoICAYEBAIBOgF3AQEDAwUFBwcJCQsLDA4OEBIRDw8ODQsLCggHBQUDAgEBG50//c4BAwYDBAUFBgYHBwgICQkKCgoKCwsMDAwNDA4NDhYVFBMSEBAPDQwKCgcGBQMDBgcJCQoLDQ0ODw8QEBESEgsVFRMJCQgJEA8NDQoJBwUDAgAAAAAEAAAAAAPzA/MAAwAHAAsADwAANyE1ITUhNSE1ITUhNSE1IQwCr/1RA+j8GAKv/VED6PwYDD/6Pvo++j8AAAAAAwAAAAADtQPzAAMABwALAAA3ITUhAREhEQMhESHIAnD9kAKv/RI+A2r8lr28Ajz8lgNq/FcD6AAFAAAAAAPzA/MAAwAHABMAFwAnAAABFSM1ExUjNQUjFTMVMzUzNSM1IycVIzUhMxUjFTMVIxUzFSMVIREhAj/6+voB8319P319P/n6/sf6+vr6+voCcf2PAUX6+gE4+vo/Pn19Pn36+vr6Pvo++j8D6AAAAAIAAAAAA3YD8wADAHgAADchNSETFR8ePx41ESMRBxUPFCsBLxQ1AyOJAu79Ej8BAgMDBAUGBgcICAkJCgoLCwwMDQ0NDg8ODw8PEBAQEBAQDw8PDg8ODQ0NDAwLCwoKCQkICAcGBgUEAwMCAT4BAgIDAwQFBQwNDxETExYWDAwMDA0MDQ0MDQwMDAwLCxYTExEPDQwKBAMDAgIBPgw/AXcRDxAPDw8PDg4ODQwNCwwLCgoJCAkHBwYGBQQEAgIBAQEBAgIEBAUGBgcHCQgJCgoLDAsNDA0ODg4PDw8PEA8RAjL9zg0NDA0MCwwMCxUUEhEPDgsKBAQCAwEBAQEDAgQEBAYLDg8REhQVFwwLDA0MDQI/AAUAAAAAA/MD8wADAAcAEwAXACgAAAEVIzUTFSM1BSMVMxUzNTM1IzUjJRUjNQMpATUjNTM1IzUzNSM1MzUhArv5+fn+x319P3x8PwIy+T8BOAE5+vr6+vr6/Y8BRPn5ATn6+j8+fX0+ffr6+vxXP/o++j76PwAAAAMAAAAAA3YD8wAlAEgArwAAASE7AR8FFREVDwUjISMvBTURNT8FMyUVIzU/DjsBHw0FFSMPDxEfDyE/DxEvDyM1Lw8PDgFFAXZeBgYGBAQDAgIDBAUFBgb9zgYGBgQEAwICAwQFBQYGAZb6AQIDBAUGCAgJCQsKDAwMDQ0MDAwKCwkJCAgGBQQDAv7JXgoJCQkIBwgGBgYEBAQCAQEBAQIEBAQGBgYIBwgJCQkKAjIKCQkJCAcIBgYGBAQEAgEBAQECBAQEBgYGCAcICQkJCl4BAgUGCAoKDQ0OEBAREhMTExMSERAQDg0NCgoIBgUCAj4CAwQEBgUH/ksGBgUFBAMCAgMEBQUGBgG1BwUGBAQDAvq7uw0MDAwLCgoJCAcGBQUDAgIDBQUGBwgJCgoLDAwMDbsBAQIEAwUGBgYHCAgJCQkK/ksKCQkJCAcIBgYGBAQEAgEBAQECBAQEBgYGCAcICQkJCgG1CgkJCQgIBwYHBQUEAwIBAbsTExIREQ8ODgwLCQgGBQMBAQMFBggJCwwODg8RERITAAMAAAAAA7UD8wADAAcACwAAEyE1ISURIREDIREhyAJw/ZACr/0SPgNq/JYCh7xy/JYDavxXA+gAAwAAAAADlgO1AAMABwAPAAAlMxEjJSE1IREhETMRITUhAeE+Pv6JAyz81AF3PgF3/NRLATg/PgF3/scBOT4AAAMAAAAAA/MDtQAMABAAJwAAJQcjLwM9AT8DJQkDDwcfCCE1BQkBAhQ/0bIDAgICAgOVArT+pf7UAVv9tgYFBAMDAgEBAQECAwMEBQbFAwr+OgHG/nvEPa0DBAQFBQQEBJFY/rEBIQFQ/h8GBgcICAgICAgICAgHBwYGvz4CAbcBdwAAABwAAAAAA9QD1AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAAAlMzUjBzM1IwczNSMHMzUjBzM1IwczNSMlMzUjBTM1IyUzNSMFMzUjJTM1IwczNSMHMzUjBzM1IwczNSMHMzUjBzM1IyUzNSMFMzUjJTM1IwUzNSMBMxEjBzM1IwczNSMHMzUjBzM1IwczNSMHMzUjAxk/P30/P7s+Prw/P30/P3w+PgG1Pj7+Sz4+AbU+Pv5LPj4C7T8/fT8/fT8/fT8/fT8/fT8/fD4+AbU+Pv5LPj4BtT4+/ks+PgNqPj59Pz99Pz+7Pj68Pz99Pz98Pj4sPj4+Pj4+Pj4+Pj4+Pz8/Pj8/P30+Pj4+Pj4+Pj4+Pj4+fT8/Pz4/Pz/81AOoPj4+Pj4+Pj4+Pj4+AAAAAAQAAAAAA/MD8wADAAcACwAPAAAlITUhJSE1ISUhNSElITUhAUUCr/1R/scD6PwYATkCr/1R/scD6PwYDD/6Pvo++j8AAwAAAAAD8wO1ABIAPQCAAAABMx8FFQcDIRM/BDMDHwszIR8HFSEPBwMRNT8GBxEhEz8CLwsjPQEvDSMhLwsrAg8NA5YGBAUGBgMBAa79WNIDAgMICARCBQUFBXsGBwcHBwgICAEIBwUGBAQDAgH+UQ0NDAsKCggDsQIDBAUFBgZeAyLABAEBAgIFBQcICgkLCwwGYwICAwQFBQYHBwgICQkJCv74BQUFBXsGBwcHCAcICKAKCQkICQcIBgYGBAQEAgECPgECBQYICAUF/nMBpAQDAwUCATkBAQIDYgQFAwMCAgEBAgMDBQUGBl4BAwQGBwkLBf6fAmoGBgUFAwMCAR/88wG1DAwLDAwLCgoJCAYFBAIBXgkJCQkICAcHBgUFBAMCAgEBAgNiBQQDAwICAQICAwQFBQYHBwgICQkJAAADAAAAAAPzA/MAAwAHAAsAADchNSE1ITUhNSE1IQwD6PwYA+j8GAPo/BgMP/q7+voAAAAABQAAAAAD8wPzAAMAIwArAC8ATwAAARUhNScPAx8HPwcvBisBDwElESM1IRUjEQERIREDKwEPBxUDMxUhNTMDNS8HKwERIQK7/oqzBAMBAQECAgQFBgUGBgYFBQQDAgEBAgMEBAYFBwYFBgMeu/4MuwJw/oo/uwcGBgsKCQYFAgH6AfT6AQICBgcKCgwGB7v+DAFF+vqyBQUGBgYGBQUEAwEBAQEDBAUFBgYGBgUFBAMCAgND/oq7uwF2AXf+yAE4/sgBAgUGCQoLBgb+RH19AbwGBgYKCgcGBAEBdwAAAAAHAAAAAAPzA/MAAwAHAAsADwATACUAMQAAARUjNSMVIzUjFSM1ARUjNRMVIzUhMxUjFTMVIzUjFSM1IxEhESEFFwcXNxc3JzcnBycDtfo++j76A2r6+vr+6dn6+vo++j8D6P2w/mhwcCxwcC1wcC1wcAFF+vr6+vr6ATj6+gE4+vr6Pvr6+t39rAPoLHBwLXBwLXBwLHBwAAMAAAAAA3YD8wADAAYADgAANyE1IQEhEwEzNyEXMwEjiQLu/RIB/f7zh/7ITk4BOE5O/u9PDH0BtQF3/VH6+gLuAAAAFQAAAAAD1APUAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBRAFUAWQBdAAAlMzUjBzM1IwczNSMFMzUjBzM1IwczNSMlMzUjBTM1IyUzNSMFMzUjATM1IwUzNSMlMzUjBTM1IyUzNSMHMzUjBzM1IwcdASEVIREzESE1IREjBzM1IwczNSMHMzUjA5Y+Pn0/P30/P/6JPz99Pz99Pz8Daz4+/JU/PwNrPj78lT8/A2s+PvyVPz8Daz4+/JU/PwNrPj59Pz99Pz+7/koBtj4Btv5KPrw/P30/P30/Pyw+Pj4+Pj4+Pj4+Pj4/Pz8+Pz8/ATg/Pz8+Pz8/Pj4+Pj4+Pn36Pv5LAbU+AbU+Pj4+Pj4AAAAEAAAAAAPzA/MAAwAPABMAGwAAARUhNQEXBxc3FzcnNycHJwEVITUHIxEzESERIQO1/on9znBwLHBwLXBwLXBwA33+iT4+PgH0/gwBRfr6AQxwcCxwcCxwcCxwcAE4+vr6/or+xwPoAAIAAAAAAy8D8wADAAwAADchNSE3JwcJAScHESPnAjL9zvrkLAEvAS8s5D4MP+blLP7PATEs5QLDAAAAAAQAAAAAA/MD9AADAAcACwAZAAAlITUhESE1IREhNSEFFzcRJwcXNycHERc3JwGDAnH9jwJx/Y8Ccf2P/okqU1MqnJ0qU1MqnYk/ATg+ATk+Ty5L/PpLLo6OLksDBksujgAAAAAbAAAAAAPUA9QAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAACUzNSMHMzUjBzM1IwUzNSMHMzUjBzM1IyUzNSMFMzUjJTM1IwUzNSMlMzUjBzM1IwczNSMFMzUjBzM1IwczNSMlMzUjBTM1IyUzNSMFMzUjJTM1IwczNSMHMzUjAzMRIwczNSMHMzUjBzM1IwOWPj59Pz99Pz/+iT8/fT8/fD4+A2o+PvyWPj4Daj4+/JY+PgNqPj59Pz99Pz/+iT8/fT8/fD4+A2o+PvyWPj4Daj4+/JY+PgNqPj59Pz99Pz+7Pj68Pz99Pz98Pj4sPj4+Pj4+Pj4+Pj4+Pz8/Pj8/P30+Pj4+Pj4+Pj4+Pn0/Pz8+Pz8/Pj4+Pj4+/FgDqD4+Pj4+PgACAAAAAAPzA/MACAAMAAATFzcRMxEXNwElITUhsizkPuQs/tH+KwPo/BgCFizm/TwCw+UsATFuPwAAAAABAAAAAAPzA/MAigAACQEhIw8eHx8zNSsBLx09AT8dMyEBFwkBAkABLf33EhEREREQEBAPDw4ODg0MDAsLCgoJCAgHBgUFBAMCAQEBAQIDBAUFBgcICAkKCgsLDAwNDg4ODw8QEBAREREREl5eDw4ODg0ODQwNDAwLCwsKCgkJCAgHBwYGBQUDBAICAQECAgQDBQUGBgcHCAgJCQoKCwsLDAwNDA0ODQ4ODg8CEP7LKAGN/nUDxf72AQMDAwUFBwcHCAkKCgsLDA0NDQ4PDhAPEBARERESERIREREREBAQDw8ODg4NDAwLCwoKCQgIBwYFBQQDAgEBPwECAwMDBQUGBgcHCAgJCQoKCwsLDAwNDA0ODQ4ODg8ODw4NDg0NDQ0MDAsLCwoKCQkICAcHBgYFBAQDAwIB/vcvAVMBXAAAABwAAAAAA9QD1AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAAA3ITUhJTM1IwUzNSMFMzUjJTM1IwUzNSMFMzUjJTM1IyEzNSMHMzUjBzM1IwUzNSMHMzUjBzM1IyEzNSMlMzUjBTM1IwUzNSMlMzUjBTM1IwUzNSMlMzUjBzM1IwczNSMFMzUjBzM1IwczNSMFMzUjLAOo/FgDaj4+/ks+Pv5LPj4Daj4+/ks+Pv5LPj4BtT4+AbU+Pn0/P30/P/6JPz99Pz98Pj4BtT4+AbU+Pv5LPj7+Sz4+A2o+Pv5LPj7+Sz4+A2o+Pn0/P30/P/6JPz99Pz98Pj4BtT4+LD4+Pz8/Pz8+Pz8/Pz8+Pz4+Pj4+Pj4+Pj4+Pz4/Pz8/Pz4/Pz8/Pz4+Pj4+Pj4+Pj4+Pj4+AAABAAAAAAPUA9QACwAAASEVIREzESE1IREjAeH+SgG2PgG2/ko+Ah8+/koBtj4BtgADAAAAAAN2A/MABwAkAEgAAAEVITUzESERJR8HFTMVITUzPQE/CDsBFycPCyMRIREjLw4PAgEGAfQ+/ZABVQYFBAcFAgMBff6KfQEDAwQGBQcJCw0QB0cFBgoKDAsHAwcDAgH6Au76AQIDBQUGCAwOCgsLDAwNDA0MAzh9ff0TAu15AwQFCgsGDg02Pz8nFgoKCQgHBwUEAwE1AgMHBwwOCgYRCw0M/JUDawwNCwwLCgoMCwcFBAQCAQECAwAAAAAGAAAAAAPzA/MAAwBDAEcAhwCLAMsAACUhNSEFHw8/Dy8PDw4BITUpAR8PPw8vDw8OASE1ISUfDz8PLw8PDgFFAq/9Uf7HAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIBATgCr/1R/scBAQIEAwUGBgYHCAgJCQkKCQoJCAkHCAYGBgQEAwMBAQEBAwMEBAYGBggHCQgJCgkKCQkJCAgHBgYGBQMEAgEBOAKv/VH+xwEBAgQDBQYGBgcICAkJCQoJCgkICQcIBgYGBAQDAwEBAQEDAwQEBgYGCAcJCAkKCQoJCQkICAcGBgYFAwQCAUs+HwoJCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCAkHCAYGBgQEAwMBAQEBAwMEBAYGBggHCQgJCQFOPgoJCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCAkHCAYGBgQEAwMBAQEBAwMEBAYGBggHCQgJCQEuPx8KCQkICQcIBgYGBAQDAwEBAQEDAwQEBgYGCAcJCAkJCgoJCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkAAAgAAAAAA/MD8wADAAcACwARABUAGQAdACEAAAEVIzUjFSM1IxUjNRMzIRUhNQEVIzUjFSM1IxUjNQMhESEDtfo++j76+j4CMvyWA2r6Pvo++j8D6PwYAUX6+vr6+voBOPr6ATj6+vr6+vr8VwPoAAAEAAAAAAPzA/MACwAPABMAGwAAARcHFzcXNyc3JwcnAREjESERIxEDIRUhNSERIQGDcHAscHAscHAscHACBvn+ifo/ATkBdgE5/BgBGXFwLHBwLHBxLHBwAnD+igF2/ooBdv5LPj4B9AAAAAAFAAAAAAPUA9QAAwAHAAsADwATAAABESERIxEhEQERIREjESERAyERIQOW/ok+/okDLP6JPv6JPgOo/FgB4f6JAXf+iQF3AbX+iQF3/okBd/yWA6gAAAAAAgAAAAAD8wO1AFMAXwAAAQ8FFT8GOwEfCRUPEBUzNSM/ES8OKwEJAhcJATcJAScJAQNXDg4NDA0MDAwMDA0MDQwHDQwKCQQDAwIBAQIEBgcJEQw3DgwLCggGAgIB+rQBAQIICww2Iw8MBQQEBAICAQEBAgIEBQUHBwgJCgoMDAwNEPylATH+zzIBJgEmMf7QATAx/tr+2gH+AwMFBgcIOQoICAYEBAICBAUHBQUFBQcGDgwMCwoKDgorCwwMDg4OCAgJJTQGBgULCwspHA4PCAgJCQkKCgsMCwsKCQgIBgYGBAQDAgEBkP5w/nEmAYH+fyYBjwGPJv5+AYIAAgAAAAAD8wO1AAMACAAAAREhEQMpAREhAn39zj8CcQF3/BgDd/0SAu781ANqAAAACAAAAAAD8wPzAAMABwALAA8AEwAXABsAHwAAJTM1IwUhNSElMzUjBSE1ISUzNSMFITUhJTM1IwUhNSEDtT8//FcDLPzUA6k/P/xXAbb+SgOpPz/8VwJx/Y8DqT8//FcDLPzUDD8/P/o+Pj76Pj4++j8/PwABAAAAAALaA/MAAwAAJTMBIwElSQFtSAwD6AAAGwAAAAAD1APUAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAAAlMzUjBzM1IwczNSMHMzUjBzM1IwczNSMHMzUjJTM1IwUzNSMFMzUjJTM1IwUzNSMFMzUjNSE1ISUzNSMFMzUjBTM1IyUzNSMFMzUjBTM1IyUzNSMHMzUjBzM1IwczNSMHMzUjBzM1IwczNSMDlj4+fT8/fT8/uz4+vD8/fT8/fD4+A2o+Pv5LPj7+Sz4+A2o+Pv5LPj7+Sz4+A6j8WANqPj7+Sz4+/ks+PgNqPj7+Sz4+/ks+PgNqPj59Pz99Pz+7Pj68Pz99Pz98Pj4sPj4+Pj4+Pj4+Pj4+Pj4/Pz8/Pz4/Pz8/P30+fT8/Pz8/Pj8/Pz8/Pj4+Pj4+Pj4+Pj4+Pj4AHAAAAAAD1APUAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAG8AACUzNSMHMzUjBzM1IwczNSMHMzUjBzM1IyUzNSMFMzUjJTM1IwUzNSMlMzUjBzM1IwczNSMHMzUjBzM1IwczNSMHMzUjJTM1IwUzNSMlMzUjBTM1IyUzNSMHMzUjBzM1IwczNSMHMzUjBzM1IwMzESMDlj4+fT8/fT8/uz4+vD8/fT8/Au4+Pv5LPj4BtT4+/ks+PgG1Pj59Pz99Pz99Pz99Pz99Pz99Pz8C7j4+/ks+PgG1Pj7+Sz4+AbU+Pn0/P30/P7s+Prw/P30/P3w+Piw+Pj4+Pj4+Pj4+Pj4/Pz8+Pz8/fT4+Pj4+Pj4+Pj4+Pj59Pz8/Pj8/Pz4+Pj4+Pj4+Pj4+PvxYA6gAAAAACAAAAAAD8wPzAAUACQARABkAHQAjACcAMwAANyMVMzUjMyE1KQEzFTM1MzUjNyMVMzUjNSMzITUpATMVMzUjJSE1ISsBFTMVIxUzNSM1I4l9vD+8Aq/9Uf7HPz4/vD8/vD8++gKv/VH+x30/vAE5Aq/9Ufo/Pz+8Pz5LP30/Pz8+vD8/Pj4+ffo+Pj8+PrwAAgAAAAAD8wL5AIcBFAAAAR8HOwEfDR0CDw0rAi8NPQEvBw8HFR8PIT8PNS8PIw8GBRUfDzM/Bj0BLwYrAS8NPQI/DTsCHxk/By8TIw8OArsBAgMEBAUGB10NDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA36DA0MCwsKCgkIBwYGBAMCAQIDBAQGBQcGBgUFBAICAQEDBQYICQsMDQ8PCBESEhMBAxQSEhERDw8NDAsJBAcGBAIBAwUGCAkLDA0PDwgREhITZwcFBgQEAwL9UAEDBQYICQsMDQ8PCBESEhNnBwUGBAQDAgIDBAQGBQddDQ0MCwsKCgkIBwYGBAMCAgMEBgYHCAkKCgsLDA0N+QoJCQkICQgIBwcGBgYFBQQEAwIBAgMEBAUGBwYGBQUDAwIBAQMFBgYHBwkJCgoLDAwMDQ0ODg75ExMSEREPDw0MCwkIBgUDAtsHBQYEBAMCAQIDBAYGBwgJCgoLCwwNDH0NDQwLCwoKCQgHBgYEAwICAwQGBgcICQoKCwsMDQ1FBwUGBAQDAgEBAgMEBAYFB0UUEhIREQ8PDQwLCQQHBgQCAQMFBggJCwwNDw8IERISE4YUEhIREQ8PDQwLCQQHBgQCAQICBAUFBqJ9FBISEREPDw0MCwkEBwYEAgECAgQFBQYGBwUGBAQDAgECAwQGBgcICQoKCwsMDQx9DQwMDAsKCgkIBwYFBQMCAQICAwQEBQUGBgcHBwkIDAwMEwYFBQQCAgEBAgIEBQUGBhMTEhENDAwLCgkJCAcGBQUDAwEBAQMFBggJCwwNDw8RERISAAAABAAAAAAD8wPzAAMABwALAA8AADchNSEnITUhNyE1ISchNSGoArD9UJwD6PwYnAKw/VCcA+j8GAw/+j76Pvo/AAUAAAAAA/MD8wADAAcACwAbACcAAAEVIzUjFSM1IxUjNQMzNTMVMzUzFTM1MxUzESElIxUzFTM1MzUjNSMDtfo++j76Pz/6Pvo++j/8GAH0fX0+fX0+Aj75+fn5+fn9zvr6+vr6+gJx+j99fT99AAACAAAAAAOABAAAFwAvAAATETMRIREzES8HIQ8GJx8HIT8HESMRIREjgEACgEABAgIEBQYGBv1ABgYGBQQCAgEBAgIEBQYGBgLABgYGBQQCAgFA/YBAAaD+YAGA/oABoAYGBgUEAgIBAQICBAUGBvoGBgYFBAICAQECAgQFBgYGAWD+wAFAAAAABgAAAAAEAAQAAAMABgApADUAOQBRAAAlITUhJSM1JREzESEVHwczFTM1LwMBLwMhDwYFMzUzNTM1IzUjNSMlITUhBx8HIT8HESMRIREjAcABgP6AAdOT/gBAAYABAgIEBQYGBuBAAQEDBP8ABQYGBv5ABgYGBQQCAv7/QEBAQEBAAcABgP6AwAECAgQFBgYGAsAGBgYFBAICAUD9gEBAQICTTf4gAcDgBgYGBQQCAgHA4AYGBgUBAAQDAQEBAgIEBQYGJkBAQEBAgEDgBgYGBQQCAgEBAgIEBQYGBgEg/wABAAAAAgAAAAADwAQAAAMADAAAMyE1IRMXNxEzERc3AUADgPyAqizqQOos/spAAo0t5/05AsfnLQEzAAAEAAAAAAQABAAAAgAlADEASQAAASM1JREzESEVHwczFTM1LwMBLwMhDwYFMzUzNTM1IzUjNSMFHwchPwcRIxEhESMDk5P+AEABgAECAgQFBgYG4EABAQME/wAFBgYG/kAGBgYFBAIC/v9AQEBAQEABAAECAgQFBgYGAsAGBgYFBAICAUD9gEABAJNN/iABwOAGBgYFBAICAcDgBgYGBQEABAMBAQECAgQFBgYmQEBAQEAgBgYGBQQCAgEBAgIEBQYGBgEg/wABAAAAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABABoAAQABAAAAAAACAAcAGwABAAAAAAADABoAIgABAAAAAAAEABoAPAABAAAAAAAFAAsAVgABAAAAAAAGABoAYQABAAAAAAAKACwAewABAAAAAAALABIApwADAAEECQAAAAIAuQADAAEECQABADQAuwADAAEECQACAA4A7wADAAEECQADADQA/QADAAEECQAEADQBMQADAAEECQAFABYBZQADAAEECQAGADQBewADAAEECQAKAFgBrwADAAEECQALACQCByBEb2N1bWVudEVkaXRvcl9GYWJyaWNfRk9OVFJlZ3VsYXJEb2N1bWVudEVkaXRvcl9GYWJyaWNfRk9OVERvY3VtZW50RWRpdG9yX0ZhYnJpY19GT05UVmVyc2lvbiAxLjBEb2N1bWVudEVkaXRvcl9GYWJyaWNfRk9OVEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARABvAGMAdQBtAGUAbgB0AEUAZABpAHQAbwByAF8ARgBhAGIAcgBpAGMAXwBGAE8ATgBUAFIAZQBnAHUAbABhAHIARABvAGMAdQBtAGUAbgB0AEUAZABpAHQAbwByAF8ARgBhAGIAcgBpAGMAXwBGAE8ATgBUAEQAbwBjAHUAbQBlAG4AdABFAGQAaQB0AG8AcgBfAEYAYQBiAHIAaQBjAF8ARgBPAE4AVABWAGUAcgBzAGkAbwBuACAAMQAuADAARABvAGMAdQBtAGUAbgB0AEUAZABpAHQAbwByAF8ARgBhAGIAcgBpAGMAXwBGAE8ATgBUAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/angular.json
new file mode 100644
index 000000000..bb5caa873
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/app.component.ts
new file mode 100644
index 000000000..ddf4969f7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/app.component.ts
@@ -0,0 +1,103 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
+import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
+import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SelectionService, EditorService, SearchService, OptionsPaneService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        ToolbarModule,
+        DocumentEditorAllModule,
+        ComboBoxModule,
+        ColorPickerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div style="width:100%;">
+      <table>
+          <tr>
+              <td>
+                  <label>Text to find:</label>
+              </td>
+              <td>
+                  <input type="text" id="find_text" />
+              </td>
+          </tr>
+          <tr>
+              <td>
+                  <label>Text to replace:</label>
+              </td>
+              <td>
+                  <input type="text" id="replace_text" />
+              </td>
+          </tr>
+          <tr>
+              <td colspan="2">
+                  <button ejs-button (click)="onReplaceButtonClick()" >Replace all</button>
+              </td>
+          </tr>
+      </table>
+      <ejs-documenteditor #document_editor id="container" height="330px" style="display:block" [enableSelection]=true [enableSearch]=true [enableEditor]=true [isReadOnly]=false (created)="onCreated()"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SelectionService, EditorService, SearchService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    onCreated(): void {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: string = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }`;
+            (this.documentEditor as DocumentEditorComponent).open(sfdt);
+        }
+    }
+
+    public onReplaceButtonClick(): void {
+        let textToFind: string = (document.getElementById('find_text') as HTMLInputElement).value;
+        let textToReplace: string = (document.getElementById('replace_text') as HTMLInputElement).value;
+        if (textToFind !== '') {
+            // Find all the occurences of given text
+            (this.documentEditor as DocumentEditorComponent).searchModule.findAll(textToFind);
+            if ((this.documentEditor as DocumentEditorComponent).searchModule.searchResults.length > 0) {
+                // Replace all the occurences of given text
+                (this.documentEditor as DocumentEditorComponent).searchModule.searchResults.replaceAll(textToReplace);
+            }
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/styles.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/styles.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/angular.json
new file mode 100644
index 000000000..bb5caa873
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/app.component.ts
new file mode 100644
index 000000000..94c366b8d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/app.component.ts
@@ -0,0 +1,98 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
+import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
+import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        ToolbarModule,
+        DocumentEditorAllModule,
+        ComboBoxModule,
+        ColorPickerModule
+    ],
+
+
+standalone: true,
+    selector: 'app-container',
+    template: `<div>
+    <ejs-documenteditor #document_editor height="330px" style="display:block" (created)="onCreated()"></ejs-documenteditor>
+    </div>`,
+    encapsulation: ViewEncapsulation.None
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+    onCreated(): void {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: any = {
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "First page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    },
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "Second page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    }
+                ],
+                "characterFormat": {},
+                "paragraphFormat": {},
+                "background": {
+                    "color": "#FFFFFFFF"
+                },
+                "styles": [
+                    {
+                        "type": "Paragraph",
+                        "name": "Normal",
+                        "next": "Normal"
+                    },
+                    {
+                        "type": "Character",
+                        "name": "Default Paragraph Font"
+                    }
+                ]
+            };
+            //Open the default document in Document Editor.
+            (this.documentEditor as DocumentEditorComponent).open(JSON.stringify(sfdt));
+            //Scroll to specified page number.
+            (this.documentEditor as DocumentEditorComponent).scrollToPage(2);
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/styles.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/styles.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs3/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/angular.json
new file mode 100644
index 000000000..bb5caa873
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/app.component.ts
new file mode 100644
index 000000000..e8f2159ff
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/app.component.ts
@@ -0,0 +1,98 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
+import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
+import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        ToolbarModule,
+        DocumentEditorAllModule,
+        ComboBoxModule,
+        ColorPickerModule
+    ],
+
+
+standalone: true,
+    selector: 'app-container',
+    template: `<div>
+    <ejs-documenteditor #document_editor height="330px" style="display:block" (created)="onCreated()" [isReadOnly]=false [enableEditor]=true ></ejs-documenteditor>
+    </div>`,
+    encapsulation: ViewEncapsulation.None
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+    onCreated(): void {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: any = {
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "First page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    },
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "Second page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    }
+                ],
+                "characterFormat": {},
+                "paragraphFormat": {},
+                "background": {
+                    "color": "#FFFFFFFF"
+                },
+                "styles": [
+                    {
+                        "type": "Paragraph",
+                        "name": "Normal",
+                        "next": "Normal"
+                    },
+                    {
+                        "type": "Character",
+                        "name": "Default Paragraph Font"
+                    }
+                ]
+            };
+            //Open the document in Document Editor.
+            (this.documentEditor as DocumentEditorComponent).open(JSON.stringify(sfdt));
+            //Navigate to specified page number.
+            (this.documentEditor as DocumentEditorComponent).selection.goToPage(2);
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/styles.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/styles.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/find-replace-cs4/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/app.component.ts
new file mode 100644
index 000000000..6f668b363
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/app.component.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation } from '@angular/core';
+import {
+    DocumentEditorComponent, PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService,
+    SearchService, EditorService, ImageResizerService, EditorHistoryService, ContextMenuService,
+    OptionsPaneService, HyperlinkDialogService, TableDialogService, BookmarkDialogService, TableOfContentsDialogService,
+    PageSetupDialogService, StyleDialogService, ListDialogService, ParagraphDialogService, BulletsAndNumberingDialogService,
+    FontDialogService, TablePropertiesDialogService, BordersAndShadingDialogService, TableOptionsDialogService,
+    CellOptionsDialogService, StylesDialogService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      template: `<ejs-documenteditor id="container" serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
+      [enablePrint]=true [enableSfdtExport]=true [enableWordExport]=true [enableOptionsPane]=true [enableContextMenu]=true
+      [enableHyperlinkDialog]=true [enableBookmarkDialog]=true [enableTableOfContentsDialog]=true [enableSearch]=true
+      [enableParagraphDialog]=true [enableListDialog]=true [enableTablePropertiesDialog]=true [enableBordersAndShadingDialog]=true
+      [enablePageSetupDialog]=true [enableStyleDialog]=true [enableFontDialog]=true [enableTableOptionsDialog]=true
+      [enableTableDialog]=true [enableImageResizer]=true [enableEditor]=true [enableEditorHistory]=true>
+      </ejs-documenteditor>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService, SearchService, EditorService,
+          ImageResizerService, EditorHistoryService, ContextMenuService, OptionsPaneService, HyperlinkDialogService, TableDialogService,
+          BookmarkDialogService, TableOfContentsDialogService, PageSetupDialogService, StyleDialogService, ListDialogService,
+          ParagraphDialogService, BulletsAndNumberingDialogService, FontDialogService, TablePropertiesDialogService,
+          BordersAndShadingDialogService, TableOptionsDialogService, CellOptionsDialogService, StylesDialogService]
+})
+
+export class AppComponent {
+
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/app.component.ts
new file mode 100644
index 000000000..fe2a1668d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/app.component.ts
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { DocumentEditorComponent, EditorService, SelectionService, EditorHistoryService, BookmarkDialogService } from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: "app-container",
+      template: `<ejs-documenteditor #documenteditor_readonly height="330px" style="width:100%;display:block" (created)="onCreate()" (documentChange)="onDocumentChange()"  [isReadOnly]=false [enableEditor]=true ></ejs-documenteditor>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [EditorService, SelectionService, EditorHistoryService, BookmarkDialogService]
+})
+export class AppComponent {
+    @ViewChild("documenteditor_readonly")
+    public documentEditor?: DocumentEditorComponent;
+    // load your default document here
+    onCreate() {
+        let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // open the default document.
+        (this.documentEditor as DocumentEditorComponent).open(sfdt);
+    }
+    onDocumentChange() {
+        //Enable read only mode.
+        (this.documentEditor as DocumentEditorComponent).isReadOnly = true;
+    }
+}
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/getting-started-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/app.component.ts
new file mode 100644
index 000000000..6cb367fcb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/app.component.ts
@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the DocumentEditorContainer component
+      template: `<div style="width:100%;">
+      <ejs-documenteditor #document_editor id="container" (created)="onCreated()" height="330px" style="display:block"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    onCreated() {
+          if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+              let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]}`;
+              //Open the default document in Document Editor.
+              (this.documentEditor as DocumentEditorComponent).open(sfdt);
+          }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/app.component.ts
new file mode 100644
index 000000000..becb095f5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/app.component.ts
@@ -0,0 +1,62 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent
+} from '@syncfusion/ej2-angular-documenteditor';
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <ejs-documenteditor #document_editor id="container" (created)="onCreated()" height="330px" style="display:block"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    onCreated() {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: string = `{
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Hello World"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {
+                        }
+                    }
+                ]
+            }`;
+            //Open the sfdt document in Document Editor.
+            (this.documentEditor as DocumentEditorComponent).open(sfdt);
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/app.component.ts
new file mode 100644
index 000000000..e8b48a0da
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/app.component.ts
@@ -0,0 +1,60 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <input id="open_sfdt" #open_sfdt style="position:fixed; left:-100em" type="file" (change)="onFileChange($event)" accept=".sfdt"/>
+      <button ejs-button (click)="onFileOpenClick()" >Import</button>
+      <ejs-documenteditor #document_editor id="container" height="330px" style="display:block"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public onFileOpenClick(): void {
+        //Open file picker.
+        (document.getElementById('open_sfdt') as HTMLElement).click();
+    }
+
+    public onFileChange(e: any): void {
+        if (e.target.files[0]) {
+            //Get the selected file.
+            let file = e.target.files[0];
+            if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+                let fileReader: FileReader = new FileReader();
+                fileReader.onload = (e: any) => {
+                    let contents: string = e.target.result;
+                    //Open the sfdt document in Document Editor.
+                    (this.documentEditor as DocumentEditorComponent).open(contents);
+                };
+                //Read the input file.
+                fileReader.readAsText(file);
+                (this.documentEditor as DocumentEditorComponent).documentName = file.name.substr(0, file.name.lastIndexOf('.'));
+            }
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/import-cs3/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/app.component.ts
new file mode 100644
index 000000000..cb0823e08
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/app.component.ts
@@ -0,0 +1,75 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, EditorHistoryService, ImageResizerService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component.
+      template: `<div>
+      <input id="insertImageButton" #insert_Image_Button style="position:fixed; left:-100em" type="file" (change)="onInsertImage($event)" accept=".jpeg,.jpg,.png,.gif,.bmp">
+      <button ejs-button (click)="insertImageButtonClick()" >Insert Image</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [enableSfdtExport]=true [enableWordExport]=true [enableSelection]=true [enableEditor]=true [isReadOnly]=false [enableImageResizer]=true> </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [EditorService, SelectionService, SfdtExportService, ImageResizerService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public insertImageButtonClick(): void {
+        let pictureUpload: HTMLInputElement = document.getElementById("insertImageButton") as HTMLInputElement;
+        pictureUpload.value = '';
+        //Open file picker.
+        pictureUpload.click();
+    }
+
+    public onInsertImage(args: any): void {
+        let documentEditor: DocumentEditorComponent = this.documentEditor as DocumentEditorComponent;
+        if (navigator.userAgent.match('Chrome') || navigator.userAgent.match('Firefox') || navigator.userAgent.match('Edge') || navigator.userAgent.match('MSIE') || navigator.userAgent.match('.NET')) {
+            if (args.target.files[0]) {
+                //Get selected image.
+                let path = args.target.files[0];
+                let reader = new FileReader();
+                reader.onload = function (frEvent: any) {
+                    let base64String = frEvent.target.result;
+                    let image = document.createElement('img');
+                    image.addEventListener('load', function () {
+                        //Insert the image into Document Editor.
+                        documentEditor.editor.insertImage(base64String, this.width, this.height);
+                    })
+                    image.src = base64String;
+                };
+                //Convert the image in to base64 format.
+                reader.readAsDataURL(path);
+            }
+            //Safari does not Support FileReader Class
+        } else {
+            let image = document.createElement('img');
+            image.addEventListener('load', function () {
+                //Insert the image into Document Editor.
+                documentEditor.editor.insertImage(args.target.value);
+            })
+            image.src = args.target.value;
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/app.component.ts
new file mode 100644
index 000000000..a0372af49
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/app.component.ts
@@ -0,0 +1,49 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, RequestNavigateEventArgs
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <ejs-documenteditor #document_editor height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true [enableSfdtExport]=true [enableEditor]=true (requestNavigate)="onRequestNavigate($event)">
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SfdtExportService, SelectionService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public onRequestNavigate(args: RequestNavigateEventArgs): void {
+        if (args.linkType !== 'Bookmark') {
+            let link: string = args.navigationLink;
+            if (args.localReference.length > 0) {
+                link += '#' + args.localReference;
+            }
+            //Navigate to the specified URL.
+            window.open(link);
+            args.isHandled = true;
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/app.component.ts
new file mode 100644
index 000000000..ae997a6c6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/app.component.ts
@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, EditorService, RequestNavigateEventArgs
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <ejs-documenteditor #document_editor height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true  [enableEditor]=true (requestNavigate)="onRequestNavigate($event)">
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SfdtExportService, SelectionService, EditorService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public onRequestNavigate(args: RequestNavigateEventArgs): void {
+        if (args.linkType !== 'Bookmark') {
+            let link: string = args.navigationLink;
+            if (args.localReference.length > 0) {
+                link += '#' + args.localReference;
+            }
+            window.open(link);
+            args.isHandled = true;
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs3/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/app.component.ts
new file mode 100644
index 000000000..1dcfcf71c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/app.component.ts
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, EditorHistoryService, HyperlinkDialogService, SfdtExportService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+    selector: 'app-container',
+    //specifies the template string for the Document Editor component
+    template: `<div><button ejs-button (click)="showHyperlinkDialog()" >Show Dialog</button>
+    <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableEditor]=true [enableSelection]=true [enableSfdtExport]=true [enableEditorHistory]=true [enableHyperlinkDialog]=true> </ejs-documenteditor></div>`,
+    encapsulation: ViewEncapsulation.None,
+    providers: [EditorService, SelectionService, EditorHistoryService, HyperlinkDialogService, SfdtExportService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public showHyperlinkDialog(): void {
+        //Open hyperlink dialog.
+        (this.documentEditor as DocumentEditorComponent).showDialog('Hyperlink');;
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs4/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/app.component.ts
new file mode 100644
index 000000000..a5530b035
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/app.component.ts
@@ -0,0 +1,70 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, PrintService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <button ejs-button (click)="onPrint()" >Print</button>
+      <ejs-documenteditor #document_editor height="330px" style="display:block" [enablePrint]=true (created)="onCreated()"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [PrintService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    onCreated(): void {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: string = `{
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Hello World"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {
+                        }
+                    }
+                ]
+            }`;
+            //Open the default document.
+            (this.documentEditor as DocumentEditorComponent).open(sfdt);
+        }
+    }
+
+    public onPrint(): void {
+        //Print the document content.
+        (this.documentEditor as DocumentEditorComponent).print();
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs5/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/app.component.ts
new file mode 100644
index 000000000..d392ef9ab
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/app.component.ts
@@ -0,0 +1,69 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, PrintService, SelectionService, EditorService, EditorHistoryService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      template: `<div>
+      <button ejs-button (click)="onPrint()" >Print</button>
+      <ejs-documenteditor #document_editor height="330px" style="display:block" [isReadOnly]=true [enableSelection]=true [enableEditor]=true [enablePrint]=true (created)="onCreated()"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [PrintService, SelectionService, EditorService, EditorHistoryService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    onCreated(): void {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: string = `{
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Hello World"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {
+                        }
+                    }
+                ]
+            }`;
+            //Open the document content.
+            (this.documentEditor as DocumentEditorComponent).open(sfdt);
+        }
+    }
+
+    public onPrint(): void {
+        //Print the document content.
+        (this.documentEditor as DocumentEditorComponent).print();
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs6/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/app.component.ts
new file mode 100644
index 000000000..3e1e54fa6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/app.component.ts
@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, PrintService, SelectionService, EditorService, EditorHistoryService, SfdtExportService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+          <button ejs-button (click)="onPrint()" >Print</button>
+          <ejs-documenteditor #document_editor height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true [enableEditor]=true [enablePrint]=true [enableSfdtExport]=true></ejs-documenteditor>
+          <ejs-documenteditor #document_editor_preview height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true [enableEditor]=true [enablePrint]=true [enableSfdtExport]=true></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [PrintService, SelectionService, EditorService, EditorHistoryService, SfdtExportService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    @ViewChild('document_editor_preview')
+    public documentEditorPreview?: DocumentEditorComponent;
+
+    public onPrint(): void {
+        let sfdtData = (this.documentEditor as DocumentEditorComponent).serialize();
+        //Open the document in preview document editor.
+        (this.documentEditorPreview as DocumentEditorComponent).open(sfdtData);
+        //Set A5 paper size
+        (this.documentEditorPreview as DocumentEditorComponent).selection.sectionFormat.pageWidth = 419.55;
+        (this.documentEditorPreview as DocumentEditorComponent).selection.sectionFormat.pageHeight = 595.30;
+        //Print the document content.
+        (this.documentEditorPreview as DocumentEditorComponent).print();
+    }
+}
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs7/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/app.component.ts
new file mode 100644
index 000000000..95e330b2b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/app.component.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      template: `<div>
+      <ejs-documenteditor #document_editor [isReadOnly]=true (created)="onCreated()" [enableSelection]=true [enableEditor]=true height="330px" style="display:block"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [EditorService, SelectionService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    onCreated(): void {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: string = '{"sections":[{"blocks":[{"paragraphFormat":{"styleName":"Heading 1"},"inlines":[{"text":"Headin"},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1},{"text":"g1"}]},{"paragraphFormat":{"styleName":"Heading 2"},"inlines":[{"text":"Heading2"}]},{"paragraphFormat":{"styleName":"Heading 3"},"inlines":[{"text":"Heading3"}]},{"paragraphFormat":{"styleName":"Heading 4"},"inlines":[{"text":"Heading4"}]},{"paragraphFormat":{"styleName":"Heading 5"},"inlines":[{"text":"Heading5"}]},{"paragraphFormat":{"styleName":"Heading 6"},"inlines":[{"text":"Heading6"}]},{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"text":"Normal"}]}],"headersFooters":{},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Paragraph","name":"Heading 1","basedOn":"Normal","next":"Normal","link":"Heading 1 Char","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":12.0,"afterSpacing":0.0,"outlineLevel":"Level1"}},{"type":"Paragraph","name":"Heading 2","basedOn":"Normal","next":"Normal","link":"Heading 2 Char","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level2"}},{"type":"Paragraph","name":"Heading 3","basedOn":"Normal","next":"Normal","link":"Heading 3 Char","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level3"}},{"type":"Paragraph","name":"Heading 4","basedOn":"Normal","next":"Normal","link":"Heading 4 Char","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level4"}},{"type":"Paragraph","name":"Heading 5","basedOn":"Normal","next":"Normal","link":"Heading 5 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level5"}},{"type":"Paragraph","name":"Heading 6","basedOn":"Normal","next":"Normal","link":"Heading 6 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level6"}},{"type":"Character","name":"Default Paragraph Font"},{"type":"Character","name":"Heading 1 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 2 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 3 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}},{"type":"Character","name":"Heading 4 Char","basedOn":"Default Paragraph Font","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 5 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 6 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}}]}';
+            //Open the document in Document Editor.
+            (this.documentEditor as DocumentEditorComponent).open(sfdt);
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/link-cs8/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/angular.json
new file mode 100644
index 000000000..bb5caa873
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/app.component.ts
new file mode 100644
index 000000000..d88022a87
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/app.component.ts
@@ -0,0 +1,69 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
+import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
+import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, EditorHistoryService, SfdtExportService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        ToolbarModule,
+        DocumentEditorAllModule,
+        ComboBoxModule,
+        ColorPickerModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      styleUrls: ['./style.css'],
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <div>
+          <ejs-toolbar (clicked)='toolbarButtonClick($event)'>
+              <e-items>
+                  <e-item prefixIcon="e-de-ctnr-bullets e-icons" tooltipText="Bullets" id="Bullets"></e-item>
+                  <e-item prefixIcon="e-de-ctnr-numbering e-icons" tooltipText="Numbering" id="Numbering"></e-item>
+                  <e-item text="Clear" id="clearlist" tooltipText="Clear List"></e-item>
+              </e-items>
+          </ejs-toolbar>
+        </div>
+    <ejs-documenteditor #document_editor [enableSelection]='true' [isReadOnly]='false' [enableEditor]=true [enableEditorHistory]=true [enableSfdtExport]=true height="330px" style="display:block"></ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      //Provide necessary service.
+      providers: [EditorService, SelectionService, EditorHistoryService, SfdtExportService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public toolbarButtonClick(args: any) {
+        switch (args.item.id) {
+            case 'Bullets':
+                //To create bullet list
+                (this.documentEditor as DocumentEditorComponent).editor.applyBullet('\uf0b7', 'Symbol');
+                break;
+            case 'Numbering':
+                //To create numbering list
+                (this.documentEditor as DocumentEditorComponent).editor.applyNumbering('%1)', 'UpRoman');
+                break;
+            case 'clearlist':
+                //To clear list
+                (this.documentEditor as DocumentEditorComponent).editor.clearList();
+                break;
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/style.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/style.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/style.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/styles.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/styles.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/list-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/app.component.ts
new file mode 100644
index 000000000..eb4c81623
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/app.component.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { DocumentEditorComponent } from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: "app-container",
+      template: `<ejs-documenteditor #documenteditor height="330px" style="width:100%;display:block" (created)="onCreate()"></ejs-documenteditor>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: []
+})
+export class AppComponent {
+    @ViewChild("documenteditor")
+    public documentEditor?: DocumentEditorComponent;
+    // load your default document here
+    onCreate(): any {
+          let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+          // open the default document.
+          (this.documentEditor as DocumentEditorComponent).open(sfdt);
+    }
+}
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/open-default-document-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/app.component.ts
new file mode 100644
index 000000000..5145ce175
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/app.component.ts
@@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SelectionService, EditorService, DocumentEditorKeyDownEventArgs, SfdtExportService, WordExportService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <ejs-documenteditor #document_editor (keyDown)="onKeyDown($event)" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true [enableSfdtExport]=true [enableEditor]=true >
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SelectionService, EditorService, SfdtExportService, WordExportService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public onKeyDown(args: DocumentEditorKeyDownEventArgs): void {
+        let keyCode: number = args.event.which || args.event.keyCode;
+        let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+        let isAltKey: boolean = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+        // 83 is the character code for 'S'
+        if (isCtrlKey && !isAltKey && keyCode === 83) {
+            //To prevent default save operation, set the isHandled property to true
+            args.isHandled = true;
+            (this.documentEditor as DocumentEditorComponent).save('sample', 'Docx');
+            args.event.preventDefault();
+        } else if (isCtrlKey && isAltKey && keyCode === 83) {
+            (this.documentEditor as DocumentEditorComponent).save('sample', 'Sfdt');
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/app.component.ts
new file mode 100644
index 000000000..0cd0697e0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/app.component.ts
@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SelectionService, EditorService, DocumentEditorKeyDownEventArgs, SfdtExportService, WordExportService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      template: `<div>
+      <ejs-documenteditor #document_editor height="330px" style="width: 100%;display:block" [isReadOnly]=false [enableSelection]=true [enableSfdtExport]=true [enableEditor]=true (keyDown)="onKeyDown($event)">
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SelectionService, EditorService, SfdtExportService, WordExportService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public onKeyDown(args: DocumentEditorKeyDownEventArgs): void {
+          let keyCode: number = args.event.which || args.event.keyCode;
+
+          let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+          let isAltKey: boolean = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+          // 83 is the character code for 'S'
+          if (isCtrlKey && !isAltKey && keyCode === 83) {
+              //To prevent default save operation, set the isHandled property to true
+              args.isHandled = true;
+              //Download the document in docx format.
+              (this.documentEditor as DocumentEditorComponent).save('sample', 'Docx');
+              args.event.preventDefault();
+          } else if (isCtrlKey && isAltKey && keyCode === 83) {
+              //Download the document in sfdt format.
+              (this.documentEditor as DocumentEditorComponent).save('sample', 'Sfdt');
+          }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/override-keyboard-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/angular.json
new file mode 100644
index 000000000..bb5caa873
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/app.component.ts
new file mode 100644
index 000000000..db5101e72
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/app.component.ts
@@ -0,0 +1,124 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
+import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
+import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, EditorHistoryService, SfdtExportService, ContextMenuService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        ToolbarModule,
+        DocumentEditorAllModule,
+        ComboBoxModule,
+        ColorPickerModule
+    ],
+
+
+standalone: true,
+    selector: 'app-container',
+    styleUrls: ['./style.css'],
+    //specifies the template string for the Document Editor component
+    template: `<div>
+    <div>
+        <ejs-toolbar (clicked)='toolbarButtonClick($event)'>
+            <e-items>
+                <e-item prefixIcon='e-de-ctnr-alignleft e-icons' id='AlignLeft' tooltipText='Align Left'></e-item>
+                <e-item prefixIcon='e-de-ctnr-aligncenter e-icons' id='AlignCenter' tooltipText='AlignCenter'></e-item>
+                <e-item prefixIcon='e-de-ctnr-alignright e-icons' id='AlignRight' tooltipText='AlignRight'></e-item>
+                <e-item prefixIcon='e-de-ctnr-justify e-icons' id='Justify' tooltipText='Justify'></e-item>
+                <e-item prefixIcon='e-de-ctnr-increaseindent e-icons' id='IncreaseIndent' tooltipText='Increase Indent'></e-item>
+                <e-item prefixIcon='e-de-ctnr-decreaseindent e-icons' id='DecreaseIndent' tooltipText='Decrease Indent'></e-item>
+                <e-item type='Separator'></e-item>
+                <e-item prefixIcon='e-de-ctnr-clearall e-icons' id='ClearFormat' tooltipText='ClearFormatting'></e-item>
+                <e-item type='Separator'></e-item>
+                <e-item prefixIcon='e-de-e-paragraph-mark e-icons' id='ShowParagraphMark' tooltipText='Show the hidden characters like spaces, tab, paragraph marks, and breaks.(Ctrl + *)'></e-item>
+            </e-items>
+        </ejs-toolbar>
+      </div>
+      <ejs-documenteditor #document_editor (selectionChange)='onSelectionChange()' [enableSelection]='true' [isReadOnly]='false' [enableEditor]=true [enableEditorHistory]=true [enableSfdtExport]=true [enableContextMenu]=true height="330px" style="display:block"></ejs-documenteditor>
+    </div>`,
+    encapsulation: ViewEncapsulation.None,
+    providers: [EditorService, SelectionService, EditorHistoryService, SfdtExportService, ContextMenuService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    public toolbarButtonClick(arg: any) {
+        switch (arg.item.id) {
+            case 'AlignLeft':
+                //Toggle the Left alignment for selected or current paragraph
+                (this.documentEditor as DocumentEditorComponent).editor.toggleTextAlignment('Left');
+                break;
+            case 'AlignRight':
+                //Toggle the Right alignment for selected or current paragraph
+                (this.documentEditor as DocumentEditorComponent).editor.toggleTextAlignment('Right');
+                break;
+            case 'AlignCenter':
+                //Toggle the Center alignment for selected or current paragraph
+                (this.documentEditor as DocumentEditorComponent).editor.toggleTextAlignment('Center');
+                break;
+            case 'Justify':
+                //Toggle the Justify alignment for selected or current paragraph
+                (this.documentEditor as DocumentEditorComponent).editor.toggleTextAlignment('Justify');
+                break;
+            case 'IncreaseIndent':
+                //Increase the left indent of selected or current paragraph
+                (this.documentEditor as DocumentEditorComponent).editor.increaseIndent();
+                break;
+            case 'DecreaseIndent':
+                //Decrease the left indent of selected or current paragraph
+                (this.documentEditor as DocumentEditorComponent).editor.decreaseIndent();
+                break;
+            case 'ClearFormat':
+                //Clear formatting for selected paragraph or content.
+                (this.documentEditor as DocumentEditorComponent).editor.clearFormatting();
+                break;
+            case 'ShowParagraphMark':
+                //Show or hide the hidden characters like spaces, tab, paragraph marks, and breaks.
+                (this.documentEditor as DocumentEditorComponent).documentEditorSettings.showHiddenMarks = !(this.documentEditor as DocumentEditorComponent).documentEditorSettings.showHiddenMarks;
+                break;
+        }
+    }
+
+    // Selection change to retrieve formatting
+    public onSelectionChange() {
+        if ((this.documentEditor as DocumentEditorComponent).selection) {
+            var paragraphFormat = (this.documentEditor as DocumentEditorComponent).selection.paragraphFormat;
+            var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify', 'ShowParagraphMark'];
+            //Remove toggle state.
+            if (document.getElementById('AlignLeft')) {
+              for (var i = 0; i < toggleBtnId.length; i++) {
+                let toggleBtn: HTMLElement = document.getElementById(toggleBtnId[i]) as HTMLElement;
+                toggleBtn.classList.remove('e-btn-toggle');
+              }
+              //Add toggle state based on selection paragraph format.
+              if (paragraphFormat.textAlignment === 'Left') {
+                (document.getElementById('AlignLeft') as HTMLElement).classList.add('e-btn-toggle');
+              } else if (paragraphFormat.textAlignment === 'Right') {
+                (document.getElementById('AlignRight') as HTMLElement).classList.add('e-btn-toggle');
+              } else if (paragraphFormat.textAlignment === 'Center') {
+                (document.getElementById('AlignCenter') as HTMLElement).classList.add('e-btn-toggle');
+              } else {
+                (document.getElementById('Justify') as HTMLElement).classList.add('e-btn-toggle');
+              }
+              if ((this.documentEditor as DocumentEditorComponent).documentEditorSettings.showHiddenMarks) {
+                (document.getElementById('ShowParagraphMark') as HTMLElement).classList.add('e-btn-toggle');
+              }
+            }
+            // #endregion
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/style.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/style.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/style.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/styles.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/styles.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/paragraph-formatting-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/app.component.ts
new file mode 100644
index 000000000..34a856d54
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/app.component.ts
@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, EditorService, DocumentEditorKeyDownEventArgs
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component
+      template: `<div>
+      <ejs-documenteditor (keyDown)="onKeyDown($event)" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true [enableSfdtExport]=true [enableEditor]=true>
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      providers: [SelectionService, EditorService, SfdtExportService]
+})
+export class AppComponent {
+
+    public onKeyDown(args: DocumentEditorKeyDownEventArgs): void {
+        let keyCode: number = args.event.which || args.event.keyCode;
+        let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+        //67 is the character code for 'C'
+        if (isCtrlKey && keyCode === 67) {
+            //To prevent copy operation set isHandled to true
+            args.isHandled = true;
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/app.component.ts
new file mode 100644
index 000000000..30c822c74
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/app.component.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, SfdtExportService, SelectionService, EditorService, DocumentEditorKeyDownEventArgs
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      template: `<div>
+      <ejs-documenteditor #document_editor height="330px" style="width:100%;display:block" [isReadOnly]=false [enableSelection]=true [enableSfdtExport]=true [enableEditor]=true (keyDown)="onKeyDown($event)">
+      </ejs-documenteditor>
+      </div>`,
+      encapsulation: ViewEncapsulation.None,
+      //Inject require services.
+      providers: [SelectionService, EditorService, SfdtExportService]
+})
+
+export class AppComponent {
+
+    public onKeyDown(args: DocumentEditorKeyDownEventArgs): void {
+          let keyCode: number = args.event.which || args.event.keyCode;
+          let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+          //67 is the character code for 'C'
+          if (isCtrlKey && keyCode === 67) {
+              //To prevent copy operation set isHandled to true
+              args.isHandled = true;
+          }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/prevent-keyboard-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/app.component.ts
new file mode 100644
index 000000000..0516bfb98
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/app.component.ts
@@ -0,0 +1,378 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { L10n } from '@syncfusion/ej2-base';
+import {
+    DocumentEditorComponent, PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService,
+    SearchService, EditorService, ImageResizerService, EditorHistoryService, ContextMenuService,
+    OptionsPaneService, HyperlinkDialogService, TableDialogService, BookmarkDialogService, TableOfContentsDialogService,
+    PageSetupDialogService, StyleDialogService, ListDialogService, ParagraphDialogService, BulletsAndNumberingDialogService,
+    FontDialogService, TablePropertiesDialogService, BordersAndShadingDialogService, TableOptionsDialogService,
+    CellOptionsDialogService, StylesDialogService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+//Set locale content.
+L10n.load({
+    'ar-AE': {
+        'documenteditor': {
+            'Table': 'لجدول',
+            'Row': 'لصف',
+            'Cell': 'الخليه',
+            'Ok': 'موافق',
+            'Cancel': 'إلغاء الأمر',
+            'Size': 'حجم',
+            'Preferred Width': 'العرض المفضل',
+            'Points': 'نقاط',
+            'Percent': 'المائه',
+            'Measure in': 'القياس في',
+            'Alignment': 'محاذاه',
+            'Left': 'ليسار',
+            'Center': 'مركز',
+            'Right': 'الحق',
+            'Justify': 'تبرير',
+            'Indent from left': 'مسافة بادئه من اليسار',
+            'Borders and Shading': 'الحدود والتظليل',
+            'Options': 'خيارات',
+            'Specify height': 'تحديد الارتفاع',
+            'At least': 'الاقل',
+            'Exactly': 'تماما',
+            'Row height is': 'ارتفاع الصف هو',
+            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
+            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
+            'Vertical alignment': 'محاذاة عمودي',
+            'Top': 'أعلى',
+            'Bottom': 'اسفل',
+            'Default cell margins': 'هوامش الخلية الافتراضية',
+            'Default cell spacing': 'تباعد الخلايا الافتراضي',
+            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
+            'Cell margins': 'هوامش الخلية',
+            'Same as the whole table': 'نفس الجدول بأكمله',
+            'Borders': 'الحدود',
+            'None': 'اي',
+            'Single': 'واحد',
+            'Dot': 'نقطه',
+            'DashSmallGap': 'داشسمجاب',
+            'DashLargeGap': 'الاتحاد الخاص',
+            'DashDot': 'داشدوت',
+            'DashDotDot': 'ددهدودوت',
+            'Double': 'انقر نقرا مزدوجا',
+            'Triple': 'الثلاثي',
+            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
+            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
+            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
+            'ThinThickMediumGap': 'فجوه متوسطه سميك',
+            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
+            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
+            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
+            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
+            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
+            'SingleWavy': 'واحد مائج',
+            'DoubleWavy': 'مزدوج مائج',
+            'DashDotStroked': 'اندفاعه نقطه القوية',
+            'Emboss3D': 'D3مزخرف',
+            'Engrave3D': 'D3نقش',
+            'Outset': 'البدايه',
+            'Inset': 'الداخلي',
+            'Thick': 'سميكه',
+            'Style': 'نمط',
+            'Width': 'عرض',
+            'Height': 'ارتفاع',
+            'Letter': 'رساله',
+            'Tabloid': 'التابلويد',
+            'Legal': 'القانونيه',
+            'Statement': 'بيان',
+            'Executive': 'التنفيذي',
+            'A3': 'A3',
+            'A4': 'A4',
+            'A5': 'A5',
+            'B4': 'B4',
+            'B5': 'B5',
+            'Custom Size': 'حجم مخصص',
+            'Different odd and even': 'مختلفه غريبه وحتى',
+            'Different first page': 'الصفحة الاولي مختلفه',
+            'From edge': 'من الحافة',
+            'Header': 'راس',
+            'Footer': 'تذييل الصفحه',
+            'Margin': 'الهوامش',
+            'Paper': 'الورق',
+            'Layout': 'تخطيط',
+            'Orientation': 'التوجه',
+            'Landscape': 'المناظر الطبيعيه',
+            'Portrait': 'صوره',
+            'Table Of Contents': 'جدول المحتويات',
+            'Show page numbers': 'إظهار أرقام الصفحات',
+            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
+            'Nothing': 'شيء',
+            'Tab leader': 'قائد علامة التبويب',
+            'Show levels': 'إظهار المستويات',
+            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
+            'Build table of contents from': 'بناء جدول محتويات من',
+            'Styles': 'انماط',
+            'Available styles': 'الأنماط المتوفرة',
+            'TOC level': 'مستوي جدول المحتويات',
+            'Heading': 'عنوان',
+            'Heading 1': 'عنوان 1',
+            'Heading 2': 'عنوان 2',
+            'Heading 3': 'عنوان 3',
+            'Heading 4': 'عنوان 4',
+            'Heading 5': 'عنوان 5',
+            'Heading 6': 'عنوان 6',
+            'List Paragraph': 'فقره القائمة',
+            'Normal': 'العاديه',
+            'Outline levels': 'مستويات المخطط التفصيلي',
+            'Table entry fields': 'حقول إدخال الجدول',
+            'Modify': 'تعديل',
+            'Color': 'لون',
+            'Setting': 'اعداد',
+            'Box': 'مربع',
+            'All': 'جميع',
+            'Custom': 'المخصصه',
+            'Preview': 'معاينه',
+            'Shading': 'التظليل',
+            'Fill': 'ملء',
+            'Apply To': 'تنطبق علي',
+            'Table Properties': 'خصائص الجدول',
+            'Cell Options': 'خيارات الخلية',
+            'Table Options': 'خيارات الجدول',
+            'Insert Table': 'ادراج جدول',
+            'Number of columns': 'عدد الاعمده',
+            'Number of rows': 'عدد الصفوف',
+            'Text to display': 'النص الذي سيتم عرضه',
+            'Address': 'عنوان',
+            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
+            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
+            'Insert': 'ادراج',
+            'General': 'العامه',
+            'Indentation': 'المسافه البادئه',
+            'Before text': 'قبل النص',
+            'Special': 'الخاصه',
+            'First line': 'السطر الأول',
+            'Hanging': 'معلقه',
+            'After text': 'بعد النص',
+            'By': 'من',
+            'Before': 'قبل',
+            'Line Spacing': 'تباعد الأسطر',
+            'After': 'بعد',
+            'At': 'في',
+            'Multiple': 'متعدده',
+            'Spacing': 'تباعد',
+            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
+            'List level': 'مستوي القائمة',
+            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
+            'Level': 'مستوي',
+            'Number format': 'تنسيق الأرقام',
+            'Number style for this level': 'نمط الرقم لهذا المستوي',
+            'Enter formatting for number': 'إدخال تنسيق لرقم',
+            'Start at': 'بداية من',
+            'Restart list after': 'أعاده تشغيل قائمه بعد',
+            'Position': 'موقف',
+            'Text indent at': 'المسافة البادئة للنص في',
+            'Aligned at': 'محاذاة في',
+            'Follow number with': 'اتبع الرقم مع',
+            'Tab character': 'حرف علامة التبويب',
+            'Space': 'الفضاء',
+            'Arabic': 'العربية',
+            'UpRoman': 'حتى الروماني',
+            'LowRoman': 'الرومانية منخفضه',
+            'UpLetter': '',
+            'LowLetter': '',
+            'Number': 'عدد',
+            'Leading zero': 'يؤدي صفر',
+            'Bullet': 'رصاصه',
+            'Ordinal': 'الترتيبيه',
+            'Ordinal Text': 'النص الترتيبي',
+            'For East': 'للشرق',
+            'No Restart': 'لا أعاده تشغيل',
+            'Font': 'الخط',
+            'Font style': 'نمط الخط',
+            'Underline style': 'نمط التسطير',
+            'Font color': 'لون الخط',
+            'Effects': 'الاثار',
+            'Strikethrough': 'يتوسطه',
+            'Superscript': 'مرتفع',
+            'Subscript': 'منخفض',
+            'Double strikethrough': 'خط مزدوج يتوسطه خط',
+            'Regular': 'العاديه',
+            'Bold': 'جريئه',
+            'Italic': 'مائل',
+            'Cut': 'قطع',
+            'Copy': 'نسخ',
+            'Paste': 'لصق',
+            'Hyperlink': 'الارتباط التشعبي',
+            'Open Hyperlink': 'فتح ارتباط تشعبي',
+            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
+            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
+            'Paragraph': 'الفقره',
+            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
+            'Character': 'حرف',
+            'Merge Cells': 'دمج الخلايا',
+            'Insert Above': 'ادراج أعلاه',
+            'Insert Below': 'ادراج أدناه',
+            'Insert Left': 'ادراج إلى اليسار',
+            'Insert Right': 'ادراج اليمين',
+            'Delete': 'حذف',
+            'Delete Table': 'حذف جدول',
+            'Delete Row': 'حذف صف',
+            'Delete Column': 'حذف عمود',
+            'File Name': 'اسم الملف',
+            'Format Type': 'نوع التنسيق',
+            'Save': 'حفظ',
+            'Navigation': 'التنقل',
+            'Results': 'نتائج',
+            'Replace': 'استبدال',
+            'Replace All': 'استبدال الكل',
+            'We replaced all': 'استبدلنا جميع',
+            'Find': 'العثور',
+            'No matches': 'لا توجد تطابقات',
+            'All Done': 'كل القيام به',
+            'Result': 'نتيجه',
+            'of': 'من',
+            'instances': 'الحالات',
+            'with': 'مع',
+            'Click to follow link': 'انقر لمتابعه الارتباط',
+            'Continue Numbering': 'متابعه الترقيم',
+            'Bookmark name': 'اسم الإشارة المرجعية',
+            'Close': 'اغلاق',
+            'Restart At': 'أعاده التشغيل عند',
+            'Properties': 'خصائص',
+            'Name': 'اسم',
+            'Style type': 'نوع النمط',
+            'Style based on': 'نمط استنادا إلى',
+            'Style for following paragraph': 'نمط للفقرة التالية',
+            'Formatting': 'التنسيق',
+            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
+            'Numbering': 'ترقيم',
+            'Update Field': 'تحديث الحقل',
+            'Edit Field': 'تحرير الحقل',
+            'Bookmark': 'الإشارة المرجعية',
+            'Page Setup': 'اعداد الصفحة',
+            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
+            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
+                + '</br>' + 'الفصل نون-البند' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
+                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
+            'Format': 'تنسيق',
+            'Create New Style': 'إنشاء نمط جديد',
+            'Modify Style': 'تعديل النمط',
+            'New': 'الجديد',
+            'Bullets': 'الرصاص',
+            'Use bookmarks': 'استخدام الإشارات المرجعية',
+            'Table of Contents': 'جدول المحتويات',
+            'AutoFit': 'الاحتواء',
+            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
+            'AutoFit to Window': 'احتواء تلقائي للإطار',
+            'Fixed Column Width': 'عرض العمود الثابت',
+            'Reset': 'اعاده تعيين',
+            'Match case': 'حاله المباراة',
+            'Whole words': 'كلمات كامل',
+            'Add': 'اضافه',
+            'Go To': 'الانتقال إلى',
+            'Search for': 'البحث عن',
+            'Replace with': 'استبدال',
+            'TOC 1': 'جدول المحتويات 1',
+            'TOC 2': 'جدول المحتويات 2',
+            'TOC 3': 'جدول المحتويات 3',
+            'TOC 4': 'جدول المحتويات 4',
+            'TOC 5': 'جدول المحتويات 5',
+            'TOC 6': 'جدول المحتويات 6',
+            'TOC 7': 'جدول المحتويات 7',
+            'TOC 8': 'جدول المحتويات 8',
+            'TOC 9': 'جدول المحتويات 9',
+            'Right-to-left': 'من اليمين إلى اليسار',
+            'Left-to-right': 'من اليسار إلى اليمين',
+            'Direction': 'الاتجاه',
+            'Table direction': 'اتجاه الجدول',
+            'Indent from right': 'مسافة بادئه من اليمين',
+            'Page': 'صفحه',
+            'Fit one page': 'احتواء صفحه واحد',
+            'Fit page width': 'احتواء عرض الصفحة',
+            // tslint:disable-next-line:max-line-length
+            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
+        },
+        'colorpicker': {
+            'Apply': 'تطبيق',
+            'Cancel': 'إلغاء الأمر',
+            'ModeSwitcher': 'مفتاح كهربائي الوضع'
+        }
+    }
+});
+@Component({
+imports: [
+        
+        ButtonModule,
+        DocumentEditorAllModule
+    ],
+
+
+standalone: true,
+      selector: 'app-container',
+      //specifies the template string for the Document Editor component with all required service enabled.
+      template: `<ejs-documenteditor  #document_editor id="container" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
+        [enablePrint]=true [enableSfdtExport]=true [enableWordExport]=true [enableOptionsPane]=true [enableContextMenu]=true
+        [enableHyperlinkDialog]=true [enableBookmarkDialog]=true [enableTableOfContentsDialog]=true [enableSearch]=true
+        [enableParagraphDialog]=true [enableListDialog]=true [enableTablePropertiesDialog]=true [enableBordersAndShadingDialog]=true
+        [enablePageSetupDialog]=true [enableStyleDialog]=true [enableFontDialog]=true [enableTableOptionsDialog]=true
+        [enableTableDialog]=true [enableImageResizer]=true [enableEditor]=true [enableEditorHistory]=true [enableRtl]=true [locale]="culture" (created)="onCreated()">
+        </ejs-documenteditor>`,
+      encapsulation: ViewEncapsulation.None,
+      //Provide require service.
+      providers: [PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService, SearchService, EditorService,
+          ImageResizerService, EditorHistoryService, ContextMenuService, OptionsPaneService, HyperlinkDialogService, TableDialogService,
+          BookmarkDialogService, TableOfContentsDialogService, PageSetupDialogService, StyleDialogService, ListDialogService,
+          ParagraphDialogService, BulletsAndNumberingDialogService, FontDialogService, TablePropertiesDialogService,
+          BordersAndShadingDialogService, TableOptionsDialogService, CellOptionsDialogService, StylesDialogService]
+})
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+    //Culture constant.
+    public culture: string = 'ar-AE';
+
+    onCreated() {
+        if ((this.documentEditor as DocumentEditorComponent).isDocumentLoaded) {
+            let sfdt: string = `{
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "characterFormat": {
+                                    "fontSize": 18.0,
+                                    "fontFamily": "Calibri",
+                                    "fontFamilyBidi": "Calibri"
+                                },
+                                "paragraphFormat": {
+                                    "beforeSpacing": 18.0,
+                                    "afterSpacing": 30.0,
+                                    "styleName": "Heading 1",
+                                    "bidi": true
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "اعمال المغامرة دورات",
+                                        "characterFormat": {
+                                            "fontSize": 18.0,
+                                            "bidi": true,
+                                            "fontSizeBidi": 18.0
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }`;
+            //Open the default document in Document Editor.
+            (this.documentEditor as DocumentEditorComponent).open(sfdt);
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/rtl-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/index.html
new file mode 100644
index 000000000..2144680e3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body>
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/app.component.ts
new file mode 100644
index 000000000..f4eff9b02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/app.component.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+  DocumentEditorComponent, SfdtExportService, SelectionService, FontDialogService, EditorService, ContextMenuService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+  imports: [
+    ButtonModule,
+    DocumentEditorAllModule
+  ],
+  standalone: true,
+  selector: 'app-container',
+  //specifies the template string for the Document Editor component
+  template: `<div>
+      <button ejs-button (click)="btnClick()" >Show/Hide Ruler</button>
+      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
+      [enableSfdtExport]=true [enableContextMenu]=true
+      [enableFontDialog]=true [enableEditor]=true [documentEditorSettings]="documentEditorSettings" >
+      </ejs-documenteditor>
+      </div>`,
+  encapsulation: ViewEncapsulation.None,
+  providers: [SfdtExportService, SelectionService, FontDialogService, EditorService, ContextMenuService]
+})
+
+export class AppComponent {
+  @ViewChild('document_editor')
+  public documentEditor!: DocumentEditorComponent;
+
+  public documentEditorSettings = { showRuler: true };
+  public btnClick(): void {
+    this.documentEditorSettings.showRuler = !this.documentEditorSettings.showRuler;
+    this.documentEditor.documentEditorSettings = { showRuler: this.documentEditorSettings.showRuler };
+  }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/angular.json
new file mode 100644
index 000000000..98b735ee4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/angular.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/index.html
new file mode 100644
index 000000000..2144680e3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body>
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/app.component.ts
new file mode 100644
index 000000000..79769b6a8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/app.component.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
+
+
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';
+
+/**
+ * Document Editor Component
+ */
+@Component({
+  imports: [
+    ButtonModule,
+    DocumentEditorContainerModule
+  ],
+
+
+  standalone: true,
+  selector: 'app-container',
+  template: `<button id='export'(click)="onClick()">Show/Hide Ruler</button>
+      <ejs-documenteditorcontainer #documenteditor_default height="600px" style="width:100%;display:block" [enableToolbar]=true [documentEditorSettings]= "enableRuler" ></ejs-documenteditorcontainer>`,
+  encapsulation: ViewEncapsulation.None,
+  providers: [ToolbarService]
+})
+export class AppComponent {
+  @ViewChild('documenteditor_default')
+  public container!: DocumentEditorContainerComponent;
+  public enableRuler = { showRuler: true };
+  onClick(): void {
+    this.container.documentEditorSettings.showRuler = !this.container.documentEditorSettings.showRuler;
+  }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/ruler-cs2/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/angular.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/angular.json
new file mode 100644
index 000000000..bb5caa873
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/index.html b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/index.html
new file mode 100644
index 000000000..f97befe78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Documenteditor</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" />
+    <style>
+    #loader {
+        color: #008cff;
+        font-family:  'Helvetica Neue','calibiri';
+        font-size: 16px;
+        height: 40px;
+        left: 45%;
+        position: absolute;
+        top: 45%;
+        width: 30%;
+    }
+</style>
+</head>
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/app.component.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/app.component.ts
new file mode 100644
index 000000000..e100c0955
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/app.component.ts
@@ -0,0 +1,112 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'
+import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
+import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
+import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
+
+
+
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, EditorHistoryService, TableDialogService, ContextMenuService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+imports: [
+        
+        ButtonModule,
+        ToolbarModule,
+        DocumentEditorAllModule,
+        ComboBoxModule,
+        ColorPickerModule
+    ],
+
+
+standalone: true,
+        selector: 'app-container',
+        styleUrls: ['./style.css'],
+        template: `<div>
+        <div>
+            <ejs-toolbar (clicked)='toolbarButtonClick($event)'>
+                <e-items>
+                    <e-item prefixIcon="e-de-ctnr-table e-icons" tooltipText="Insert Table" id="table"></e-item>
+                    <e-item type="Separator"></e-item>
+                    <e-item prefixIcon="e-de-ctnr-insertabove e-icons" tooltipText="Insert new row above" id="insert_above"></e-item>
+                    <e-item prefixIcon="e-de-ctnr-insertbelow e-icons" tooltipText="Insert new row below" id="insert_below"></e-item>
+                    <e-item type="Separator"></e-item>
+                    <e-item prefixIcon="e-de-ctnr-insertleft e-icons" tooltipText="Insert new column to the left" id="insert_left"></e-item>
+                    <e-item prefixIcon="e-de-ctnr-insertright e-icons" tooltipText="Insert new column to the right" id="insert_right"></e-item>
+                    <e-item type="Separator"></e-item>
+                    <e-item prefixIcon="e-de-delete-table e-icons" tooltipText="Delete Entire table" id="delete_table"></e-item>
+                    <e-item prefixIcon="e-de-ctnr-deleterows e-icons" tooltipText="Delete the selected row" id="delete_row"></e-item>
+                    <e-item prefixIcon="e-de-ctnr-deletecolumns e-icons" tooltipText="Delete the selected column" id="delete_column"></e-item>
+                    <e-item type="Separator"></e-item>
+                    <e-item prefixIcon="e-de-ctnr-mergecell e-icons" tooltipText="Merge the selected cells" id="merge_cell"></e-item>
+                    <e-item type="Separator"></e-item>
+                    <e-item text="Dialog" tooltipText="Open insert table dialog" id="table_dialog"></e-item>
+                </e-items>
+            </ejs-toolbar>
+        </div>
+    <ejs-documenteditor #document_editor [isReadOnly]=false  [enableSelection]=true  [enableEditorHistory]=true  [enableEditor]=true [enableTableDialog]=true [enableContextMenu]=true [enableSfdtExport]=true height="330px" style="display:block" (created)="onCreated()"></ejs-documenteditor>
+        </div>`,
+        encapsulation: ViewEncapsulation.None,
+        providers: [EditorService, SelectionService, SfdtExportService, EditorHistoryService, TableDialogService, ContextMenuService]
+})
+
+export class AppComponent {
+    @ViewChild('document_editor')
+    public documentEditor?: DocumentEditorComponent;
+
+    onCreated(): void {
+        (this.documentEditor as DocumentEditorComponent).editor.insertTable(2, 2);
+    }
+
+    public toolbarButtonClick(arg: any) {
+        switch (arg.item.id) {
+            case 'table':
+                //Insert table API to add table
+                (this.documentEditor as DocumentEditorComponent).editor.insertTable(3, 2);
+                break;
+            case 'insert_above':
+                //Insert the specified number of rows to the table above to the row at cursor position
+                (this.documentEditor as DocumentEditorComponent).editor.insertRow(true, 2);
+                break;
+            case 'insert_below':
+                //Insert the specified number of rows to the table below to the row at cursor position
+                (this.documentEditor as DocumentEditorComponent).editor.insertRow();
+                break;
+            case 'insert_left':
+                //Insert the specified number of columns to the table left to the column at cursor position
+                (this.documentEditor as DocumentEditorComponent).editor.insertColumn(true, 2);
+                break;
+            case 'insert_right':
+                //Insert the specified number of columns to the table right to the column at cursor position
+                (this.documentEditor as DocumentEditorComponent).editor.insertColumn();
+                break;
+            case 'delete_table':
+                //Delete the entire table
+                (this.documentEditor as DocumentEditorComponent).editor.deleteTable();
+                break;
+            case 'delete_row':
+                //Delete the selected number of rows
+                (this.documentEditor as DocumentEditorComponent).editor.deleteRow();
+                break;
+            case 'delete_column':
+                //Delete the selected number of columns
+                (this.documentEditor as DocumentEditorComponent).editor.deleteColumn();
+                break;
+            case 'merge_cell':
+                //Merge the selected cells into one (both vertically and horizontally)
+                (this.documentEditor as DocumentEditorComponent).editor.mergeCells();
+                break;
+            case 'table_dialog':
+                //Opens insert table dialog
+                (this.documentEditor as DocumentEditorComponent).showDialog('Table');
+                break;
+        }
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/main.ts b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/main.ts
new file mode 100644
index 000000000..3607237bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/style.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/style.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/style.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/styles.css
new file mode 100644
index 000000000..bc6db0447
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/src/styles.css
@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/styles.css b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/styles.css
new file mode 100644
index 000000000..3c56d5d44
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/styles.css
@@ -0,0 +1,281 @@
+/** Document editor sample level font icons*/
+
+@font-face {
+    font-family: 'Sample brower icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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bwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnASgBKQEqASsBLAEtAS4BLwEwATEBMgEzATQBNQE2ATcBOAE5AToBOwE8AT0BPgE/AUABQQFCAUMBRAALU3Ryb2tlU3R5bGUIQm9va21hcmsHUGljdHVyZQRGaW5kDU91dHNpZGVCb3JkZXIHSnVzdGlmeQVDbG9zZQ5EZWNyZWFzZUluZGVudBVQaXhlbEFsaWduQ2VudGVyVGFibGUPQmFja2dyb3VuZENvbG9yC0FsaWduQm90dG9tCVBhZ2VTZXR1cA5IaWdobGlnaHRDb2xvcgtTdXBlcnNjcmlwdAVUYWJsZQRVbmRvC0luc2VydEJlbG93CVRvcEJvcmRlcgpQYWdlTnVtYmVyEEFsaWduQ2VudGVyVGFibGUOSW5jcmVhc2VJbmRlbnQEQm9sZAlBbGlnbkxlZnQGRm9vdGVyC0luc2VydFJpZ2h0CVVuZGVybGluZQpJbnNlcnRMZWZ0BExvY2sGSGVhZGVyDVN0cmlrZXRocm91Z2gIQ2xlYXJBbGwLUmlnaHRCb3JkZXIKQWxpZ25SaWdodARPcGVuClN0cm9rZVNpemUFUHJpbnQLRGVsZXRlVGFibGUJRm9udENvbG9yDUluc2lkZUJvcmRlcnMKRGVsZXRlUm93cwhEb3dubG9hZAtMaW5lU3BhY2luZxRJbnNpZGVWZXJ0aWNhbEJvcmRlcghBbGlnblRPcARSZWRvDEJvdHRvbUJvcmRlcgNOZXcFUGFzdGUHQnVsbGV0cwRDZWxsDURlbGV0ZUNvbHVtbnMKQWxsQm9yZGVycwlTdWJzY3JpcHQQU2hvd0hpZGVQcm9wZXJ0eQ5UYWJsZU9mQ29udGVudAZJdGFsaWMWSW5zaWRlSG9yaXpvbmRhbGJvcmRlcgtMZWZ0Qm9yZGVycwlOdW1iZXJpbmcETGluawtBbGlnbkNlbnRlcgtJbnNlcnRBYm92ZQZCcmVha3MITmV4dFBhZ2USU2VsZWN0ZnJvbUNvbXB1dGVyCVBhZ2VCcmVhawAAAAA=) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+    font-family: 'Sample brower icons';
+}
+
+.e-de-icon-StrokeStyle:before {
+    content: "\e700";
+}
+
+.e-de-icon-Bookmark:before {
+    content: "\e701";
+}
+
+.e-de-icon-Picture:before {
+    content: "\e702";
+}
+
+.e-de-icon-Find:before {
+    content: "\e703";
+}
+
+.e-de-icon-OutsideBorder:before {
+    content: "\e704";
+}
+
+.e-de-icon-Justify:before {
+    content: "\e705";
+}
+
+.e-de-icon-Close:before {
+    content: "\e706";
+}
+
+.e-de-icon-DecreaseIndent:before {
+    content: "\e707";
+}
+
+.e-de-icon-PixelAlignCenterTable:before {
+    content: "\e708";
+}
+
+.e-de-icon-BackgroundColor:before {
+    content: "\e709" ;
+}
+
+.e-de-icon-AlignBottom:before {
+    content: "\e70a";
+}
+
+.e-de-icon-PageSetup:before {
+    content: "\e70b";
+}
+
+.e-de-icon-HighlightColor:before {
+    content: "\e70c";
+}
+
+.e-de-icon-Superscript:before {
+    content: "\e70d";
+}
+
+.e-de-icon-Table:before {
+    content: "\e70e";
+}
+
+.e-de-icon-Undo:before {
+    content: "\e70f";
+}
+
+.e-de-icon-InsertBelow:before {
+    content: "\e710";
+}
+
+.e-de-icon-TopBorder:before {
+    content: "\e711";
+}
+
+.e-de-icon-PageNumber:before {
+    content: "\e712";
+}
+
+.e-de-icon-AlignCenterTable:before {
+    content: "\e713";
+}
+
+.e-de-icon-IncreaseIndent:before {
+    content: "\e714";
+}
+
+.e-de-icon-Bold:before {
+    content: "\e715";
+}
+
+.e-de-icon-AlignLeft:before {
+    content: "\e716";
+}
+
+.e-de-icon-Footer:before {
+    content: "\e717";
+}
+
+.e-de-icon-InsertRight:before {
+    content: "\e718";
+}
+
+.e-de-icon-Underline:before {
+    content: "\e719";
+}
+
+.e-de-icon-InsertLeft:before {
+    content: "\e71a";
+}
+
+.e-de-icon-Lock:before {
+    content: "\e71b";
+}
+
+.e-de-icon-Header:before {
+    content: "\e71c";
+}
+
+.e-de-icon-Strikethrough:before {
+    content: "\e71d";
+}
+
+.e-de-icon-ClearAll:before {
+    content: "\e71e";
+}
+
+.e-de-icon-RightBorder:before {
+    content: "\e71f";
+}
+
+.e-de-icon-AlignRight:before {
+    content: "\e720";
+}
+
+.e-de-icon-Open:before {
+    content: "\e721";
+}
+
+.e-de-icon-StrokeSize:before {
+    content: "\e722";
+}
+
+.e-de-icon-Print:before {
+    content: "\e723";
+}
+
+.e-de-icon-DeleteTable:before {
+    content: "\e724";
+}
+
+.e-de-icon-FontColor:before {
+    content: "\e725";
+}
+
+.e-de-icon-InsideBorders:before {
+    content: "\e726";
+}
+
+.e-de-icon-DeleteRows:before {
+    content: "\e727";
+}
+
+.e-de-icon-Download:before {
+    content: "\e728";
+}
+
+.e-de-icon-LineSpacing:before {
+    content: "\e729";
+}
+
+.e-de-icon-InsideVerticalBorder:before {
+    content: "\e72a";
+}
+
+.e-de-icon-AlignTop:before {
+    content: "\e72b";
+}
+
+.e-de-icon-Redo:before {
+    content: "\e72c";
+}
+
+.e-de-icon-BottomBorder:before {
+    content: "\e72d";
+}
+
+.e-de-icon-New:before {
+    content: "\e72e";
+}
+
+.e-de-icon-Paste:before {
+    content: "\e72f";
+}
+
+.e-de-icon-Bullets:before {
+    content: "\e730";
+}
+
+.e-de-icon-Cell:before {
+    content: "\e731";
+}
+
+.e-de-icon-DeleteColumns:before {
+    content: "\e732";
+}
+
+.e-de-icon-AllBorders:before {
+    content: "\e733";
+}
+
+.e-de-icon-Subscript:before {
+    content: "\e734";
+}
+
+.e-de-icon-ShowHidePane:before {
+    content: "\e735";
+}
+
+.e-de-icon-TableOfContent:before {
+    content: "\e736";
+}
+
+.e-de-icon-Italic:before {
+    content: "\e737";
+}
+
+.e-de-icon-InsideHorizondalBorder:before {
+    content: "\e738";
+}
+
+.e-de-icon-LeftBorders:before {
+    content: "\e739";
+}
+
+.e-de-icon-Numbering:before {
+    content: "\e73a";
+}
+
+.e-de-icon-Link:before {
+    content: "\e73b";
+}
+
+.e-de-icon-AlignCenter:before {
+    content: "\e73c";
+}
+
+.e-de-icon-InsertAbove:before {
+    content: "\e73d";
+}
+
+.e-de-icon-break:before {
+    content: "\e73e";
+}
+
+.e-de-icon-url-image:before {
+    content: "\e73b";
+}
+
+.e-de-icon-local-image:before {
+    content: "\e740";
+}
+
+.e-de-icon-page-break:before {
+    content: "\e741";
+}
+
+.e-de-icon-section-break-next:before {
+    content: "\e73f";
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/tsconfig.json b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/tsconfig.json
new file mode 100644
index 000000000..9fa16d633
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/angular/document-editor/tables-cs1/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/add-custom-menu/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/add-custom-menu/razor
new file mode 100644
index 000000000..3c26fbca8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/add-custom-menu/razor
@@ -0,0 +1,39 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // creating Custom Options
+        let menuItems = [
+            {
+                text: 'Search In Google',
+                id: 'search_in_google',
+                iconCss: 'e-icons e-de-ctnr-find',
+            },
+        ];
+        // adding Custom Options
+        container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+        // custom Options Select Event
+        container.documentEditor.customContextMenuSelect = function (args) {
+            // custom Options Functionality
+            let id = container.documentEditor.element.id;
+            switch (args.id) {
+                case id + 'search_in_google':
+                    // To get the selected content as plain text
+                    let searchContent =
+                        container.documentEditor.selection.text;
+                    if (
+                        !container.documentEditor.selection.isEmpty &&
+                        /\S/.test(searchContent)
+                    ) {
+                        window.open('http://google.com/search?q=' + searchContent);
+                    }
+                    break;
+            }
+        };
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/add-custom-menu/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/add-custom-menu/tagHelper
new file mode 100644
index 000000000..6a4506521
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/add-custom-menu/tagHelper
@@ -0,0 +1,41 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+      var documenteditorElement = document.getElementById("container");
+      container = documenteditorElement.ej2_instances[0];
+      documenteditor = container.documentEditor;
+      // creating Custom Options
+      let menuItems = [
+          {
+              text: 'Search In Google',
+              id: 'search_in_google',
+              iconCss: 'e-icons e-de-ctnr-find',
+          },
+      ];
+      // adding Custom Options
+      container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+      // custom Options Select Event
+      container.documentEditor.customContextMenuSelect = function (args) {
+          // custom Options Functionality
+          let id = container.documentEditor.element.id;
+          switch (args.id) {
+              case id + 'search_in_google':
+                  // To get the selected content as plain text
+                  let searchContent =
+                      container.documentEditor.selection.text;
+                  if (
+                      !container.documentEditor.selection.isEmpty &&
+                      /\S/.test(searchContent)
+                  ) {
+                      window.open('http://google.com/search?q=' + searchContent);
+                  }
+                  break;
+          }
+      };
+  }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-height/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-height/razor
new file mode 100644
index 000000000..f3480eeef
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-height/razor
@@ -0,0 +1,3 @@
+
+@Html.EJS().DocumentEditorContainer("container").Height('590px').EnableToolbar(true).Render()
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-height/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-height/tagHelper
new file mode 100644
index 000000000..a41c9c5e3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-height/tagHelper
@@ -0,0 +1,2 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true height="590px"></ejs-documenteditorcontainer>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-width/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-width/razor
new file mode 100644
index 000000000..46d613845
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-width/razor
@@ -0,0 +1,3 @@
+
+@Html.EJS().DocumentEditorContainer("container").Width('100%').EnableToolbar(true).Render()
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-width/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-width/tagHelper
new file mode 100644
index 000000000..8de641a0d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/change-width/tagHelper
@@ -0,0 +1,4 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true width="100%"></ejs-documenteditorcontainer>
+
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format-font/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format-font/razor
new file mode 100644
index 000000000..e85e31c7a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format-font/razor
@@ -0,0 +1,13 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditor.setDefaultCharacterFormat({fontSize: 20});
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format-font/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format-font/tagHelper
new file mode 100644
index 000000000..13c8b975e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format-font/tagHelper
@@ -0,0 +1,14 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditor.setDefaultCharacterFormat({fontSize: 20});
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format/razor
new file mode 100644
index 000000000..c2035d5dd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format/razor
@@ -0,0 +1,22 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        var defaultCharacterFormat = {
+            bold: false,
+            italic: false,
+            baselineAlignment: 'Normal',
+            underline: 'None',
+            fontColor: "#000000",
+            fontFamily: 'Algerian',
+            fontSize: 12
+        };
+      container.documentEditor.setDefaultCharacterFormat(defaultCharacterFormat);
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format/tagHelper
new file mode 100644
index 000000000..54d918aef
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/character-format/tagHelper
@@ -0,0 +1,23 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        var defaultCharacterFormat = {
+            bold: false,
+            italic: false,
+            baselineAlignment: 'Normal',
+            underline: 'None',
+            fontColor: "#000000",
+            fontFamily: 'Algerian',
+            fontSize: 12
+        };
+        container.documentEditor.setDefaultCharacterFormat(defaultCharacterFormat);
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/razor
new file mode 100644
index 000000000..298d12762
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/razor
@@ -0,0 +1,14 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditor.editor.enforceProtection('123', 'CommentsOnly');
+        //stop the document protection
+        container.documentEditor.editor.stopProtection('123');
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/tagHelper
new file mode 100644
index 000000000..2c88e0e31
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-only-protect/tagHelper
@@ -0,0 +1,15 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditor.editor.enforceProtection('123', 'CommentsOnly');
+        //stop the document protection
+        container.documentEditor.editor.stopProtection('123');
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/razor
new file mode 100644
index 000000000..e2e103e1a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/razor
@@ -0,0 +1,23 @@
+
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Height("590px").BeforeCommentAction("beforeComment").Render()
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        let mentionData = [
+            { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+            { "Name": "Andrew James", "EmailId": "james@company.com" },
+            { "Name": "Andrew Fuller", "EmailId": "andrew@company.com" }
+        ];
+        container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' } };
+        container.currentUser = "Guest User";
+    }
+    function beforeComment(args) {
+        if (args.type === "Delete" && container.currentUser !== args.author) {
+            args.cancel = true;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/tagHelper
new file mode 100644
index 000000000..484dd7a5f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-event/tagHelper
@@ -0,0 +1,24 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" beforeCommentAction="beforeComment" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        let mentionData = [
+            { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+            { "Name": "Andrew James", "EmailId": "james@company.com" },
+            { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
+        ];
+        container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
+        container.currentUser = "Guest User";
+    }
+    function beforeComment(args){
+        if(args.type === "Delete" && container.currentUser !== args.author){
+            args.cancel = true;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/razor
new file mode 100644
index 000000000..4ee6c2c0d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/razor
@@ -0,0 +1,17 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        let mentionData = [
+            { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+            { "Name": "Andrew James", "EmailId": "james@company.com" },
+            { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
+        ];
+        container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/tagHelper
new file mode 100644
index 000000000..9cb0f15ea
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comments-mention/tagHelper
@@ -0,0 +1,18 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        let mentionData = [
+            { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+            { "Name": "Andrew James", "EmailId": "james@company.com" },
+            { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
+        ];
+        container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/razor
new file mode 100644
index 000000000..55c9ef687
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/razor
@@ -0,0 +1,4 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
+<script>
+    var settings = { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/tagHelper
new file mode 100644
index 000000000..ac01a406d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-color-picker/tagHelper
@@ -0,0 +1,5 @@
+<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var settings = { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-context-menu/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-context-menu/razor
new file mode 100644
index 000000000..657503190
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-context-menu/razor
@@ -0,0 +1,48 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // creating Custom Options
+        let menuItems = [
+            {
+                text: 'Search In Google',
+                id: 'search_in_google',
+                iconCss: 'e-icons e-de-ctnr-find',
+            },
+        ];
+        // adding Custom Options
+        container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+        // custom Options Select Event
+        container.documentEditor.customContextMenuSelect = function (args) {
+            // custom Options Functionality
+            let id = container.documentEditor.element.id;
+            switch (args.id) {
+                case id + 'search_in_google':
+                    // To get the selected content as plain text
+                    let searchContent =
+                        container.documentEditor.selection.text;
+                    if (
+                        !container.documentEditor.selection.isEmpty &&
+                        /\S/.test(searchContent)
+                    ) {
+                        window.open('http://google.com/search?q=' + searchContent);
+                    }
+                    break;
+            }
+        };
+        //  custom options hide/show functionality
+        container.documentEditor.customContextMenuBeforeOpen = function (args) {
+            let search = document.getElementById(args.ids[0]);
+            search.style.display = 'none';
+            let searchContent = container.documentEditor.selection.text;
+            if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+                search.style.display = 'block';
+            }
+        };
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-context-menu/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-context-menu/tagHelper
new file mode 100644
index 000000000..fd089878d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-context-menu/tagHelper
@@ -0,0 +1,49 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+      var documenteditorElement = document.getElementById("container");
+      container = documenteditorElement.ej2_instances[0];
+      documenteditor = container.documentEditor;
+      // creating Custom Options
+      let menuItems = [
+          {
+              text: 'Search In Google',
+              id: 'search_in_google',
+              iconCss: 'e-icons e-de-ctnr-find',
+          },
+      ];
+      // adding Custom Options
+      container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+      // custom Options Select Event
+      container.documentEditor.customContextMenuSelect = function (args) {
+          // custom Options Functionality
+          let id = container.documentEditor.element.id;
+          switch (args.id) {
+              case id + 'search_in_google':
+                  // To get the selected content as plain text
+                  let searchContent =
+                      container.documentEditor.selection.text;
+                  if (
+                      !container.documentEditor.selection.isEmpty &&
+                      /\S/.test(searchContent)
+                  ) {
+                      window.open('http://google.com/search?q=' + searchContent);
+                  }
+                  break;
+          }
+      };
+      //  custom options hide/show functionality
+      container.documentEditor.customContextMenuBeforeOpen = function (args) {
+          let search = document.getElementById(args.ids[0]);
+          search.style.display = 'none';
+          let searchContent = container.documentEditor.selection.text;
+          if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+              search.style.display = 'block';
+          }
+      };
+  }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-backstage/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-backstage/razor
new file mode 100644
index 000000000..f7aec5e3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-backstage/razor
@@ -0,0 +1,11 @@
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).BackstageMenu(new {
+        text = "File",
+        backButton = new { text = "close" },
+        items = new object[] {
+            new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
+        }
+    }).Render()
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-backstage/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-backstage/tagHelper
new file mode 100644
index 000000000..317ecf5fa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-backstage/tagHelper
@@ -0,0 +1,12 @@
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"
+    backstageMenu="@(new {
+        text = "File",
+        backButton = new { text = "close" },
+        items = new object[] {
+            new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
+        }
+    })">></ejs-documenteditorcontainer>
+    
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-file/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-file/razor
new file mode 100644
index 000000000..efeaf0dfc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-file/razor
@@ -0,0 +1,14 @@
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).FileMenuItems(new object[] {
+        "New",
+        "Print",
+        new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
+    }).FileMenuItemClick("onFileMenuItemClick").Render()
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+    function onFileMenuItemClick(args) {
+        if (args.item.id) {
+            document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-file/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-file/tagHelper
new file mode 100644
index 000000000..160f5f771
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-ribbon-file/tagHelper
@@ -0,0 +1,15 @@
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"
+    fileMenuItems="@(new object[] {
+            "New",
+            "Print",
+            new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
+        })" fileMenuItemClick="onFileMenuItemClick"></ejs-documenteditorcontainer>
+        
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+    function onFileMenuItemClick(args) {
+        if (args.item.id) {
+            document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-sub-context-menu/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-sub-context-menu/razor
new file mode 100644
index 000000000..ef0ae7c5e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-sub-context-menu/razor
@@ -0,0 +1,38 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // creating Custom Options
+        let menuItems = [
+            {
+                text: 'Form field',
+                id: 'form field',
+                iconCss: 'e-de-formfield e-icons',
+                items: [
+                    {
+                    text: 'Text form',
+                    id: 'Text form',
+                    iconCss: 'e-icons e-de-textform',
+                    },
+                    {
+                    text: 'Check box',
+                    id: 'Check box',
+                    iconCss: 'e-icons e-de-checkbox-form',
+                    },
+                    {
+                    text: 'Drop down',
+                    id: 'Drop down',
+                    iconCss: 'e-icons e-de-dropdownform',
+                    },
+                ],
+            },
+        ];
+        // adding Custom Options
+        container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-sub-context-menu/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-sub-context-menu/tagHelper
new file mode 100644
index 000000000..26af90f13
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-sub-context-menu/tagHelper
@@ -0,0 +1,39 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+      var documenteditorElement = document.getElementById("container");
+      container = documenteditorElement.ej2_instances[0];
+      documenteditor = container.documentEditor;
+      // creating Custom Options
+      let menuItems = [
+          {
+            text: 'Form field',
+            id: 'form field',
+            iconCss: 'e-de-formfield e-icons',
+            items: [
+                {
+                text: 'Text form',
+                id: 'Text form',
+                iconCss: 'e-icons e-de-textform',
+                },
+                {
+                text: 'Check box',
+                id: 'Check box',
+                iconCss: 'e-icons e-de-checkbox-form',
+                },
+                {
+                text: 'Drop down',
+                id: 'Drop down',
+                iconCss: 'e-icons e-de-dropdownform',
+                },
+            ],
+          },
+      ];
+      // adding Custom Options
+      container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
+  }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/razor
new file mode 100644
index 000000000..3fb98eb47
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/razor
@@ -0,0 +1,20 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").SelectionChange("onSelectionChanged").EnableToolbar(true).Render()
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    function onSelectionChanged() {
+        // Check whether selection is in header
+        if (container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
+        // Check whether selection is in Footer
+          container.documentEditor.selection.contextType.indexOf('Footer') > -1) {
+          // Close header Footer
+          container.documentEditor.selection.closeHeaderFooter();
+        }
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/tagHelper
new file mode 100644
index 000000000..1b2baa115
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/tagHelper
@@ -0,0 +1,21 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" selectionChange="onSelectionChanged" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    function onSelectionChanged() {
+        // Check whether selection is in header
+        if (container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
+        // Check whether selection is in Footer
+          container.documentEditor.selection.contextType.indexOf('Footer') > -1) {
+          // Close header Footer
+          container.documentEditor.selection.closeHeaderFooter();
+        }
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/razor
new file mode 100644
index 000000000..3d9ee58a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/razor
@@ -0,0 +1,21 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).SelectionChange("onSelectionChanged").Render()
+
+<script>
+    var documentEditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documentEditor = document.getElementById("container").ej2_instances[0];
+        documentEditor.enableAllModules();
+    });
+    function onSelectionChanged() {
+        // Check whether selection is in header
+        if (documentEditor.selection.contextType.indexOf('Header') > -1 ||
+          // Check whether selection is in Footer
+          documentEditor.selection.contextType.indexOf('Footer') > -1) {
+          // Change the document to read only mode
+          documentEditor.isReadOnly = true;
+        } else {
+          // Change the document to editable mode
+          documentEditor.isReadOnly = false;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/tagHelper
new file mode 100644
index 000000000..38ec052de
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/tagHelper
@@ -0,0 +1,21 @@
+<ejs-documenteditor isReadOnly=false id="container" selectionChange="onSelectionChanged"></ejs-documenteditor>
+
+<script>
+    var documentEditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documentEditor = document.getElementById("container").ej2_instances[0];
+        documentEditor.enableAllModules();
+    });
+    function onSelectionChanged() {
+        // Check whether selection is in header
+        if (documentEditor.selection.contextType.indexOf('Header') > -1 ||
+          // Check whether selection is in Footer
+          documentEditor.selection.contextType.indexOf('Footer') > -1) {
+          // Change the document to read only mode
+          documentEditor.isReadOnly = true;
+        } else {
+          // Change the document to editable mode
+          documentEditor.isReadOnly = false;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/razor
new file mode 100644
index 000000000..e5c7b897a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/razor
@@ -0,0 +1,23 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").SelectionChange("onSelectionChanged").EnableToolbar(true).Render()
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    function onSelectionChanged() {
+        // Check whether selection is in header
+        if (container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
+        // Check whether selection is in Footer
+          container.documentEditor.selection.contextType.indexOf('Footer') > -1) {
+          // Change the document to read only mode
+          container.restrictEditing = true;
+        } else {
+          // Change the document to editable mode
+          container.restrictEditing = false;
+        }
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/tagHelper
new file mode 100644
index 000000000..2dd29f1b7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/tagHelper
@@ -0,0 +1,24 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" .selectionChange="onSelectionChanged" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    function onSelectionChanged() {
+        // Check whether selection is in header
+        if (container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
+        // Check whether selection is in Footer
+          container.documentEditor.selection.contextType.indexOf('Footer') > -1) {
+          // Change the document to read only mode
+          container.restrictEditing = true;
+        } else {
+          // Change the document to editable mode
+          container.restrictEditing = false;
+        }
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/razor
new file mode 100644
index 000000000..0ef77821c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/tagHelper
new file mode 100644
index 000000000..076b9a70a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-blob/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/razor
new file mode 100644
index 000000000..22378936e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Docx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/tagHelper
new file mode 100644
index 000000000..e5f307147
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-docx/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Docx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/razor
new file mode 100644
index 000000000..25db6655e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Dotx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/tagHelper
new file mode 100644
index 000000000..ea814856f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-dotx/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Dotx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/razor
new file mode 100644
index 000000000..b73361aad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Sfdt');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/tagHelper
new file mode 100644
index 000000000..89c62544d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-sfdt/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Sfdt');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/razor
new file mode 100644
index 000000000..0e979b480
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Txt');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/tagHelper
new file mode 100644
index 000000000..bc696a6b4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-container-txt/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Txt');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/razor
new file mode 100644
index 000000000..444a5081c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/razor
@@ -0,0 +1,56 @@
+
+@Html.EJS().Button("element").Content("Using Pdf Export").Click("exportClientSide").Render()
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    //Pdf document exported using pdf export
+    function exportClientSide() {
+        let pdfdocument = new ej.pdfexport.PdfDocument();
+        let count = container.documentEditor.pageCount;
+        container.documentEditor.documentEditorSettings.printDevicePixelRatio = 2;
+        let loadedPage = 0;
+        for (let i = 1; i <= count; i++) {
+            setTimeout(() => {
+                let format = 'image/jpeg';
+                // Getting pages as image
+                let image = container.documentEditor.exportAsImage(i, format);
+                image.onload = function () {
+                    let imageHeight = parseInt(
+                        image.style.height.toString().replace('px', '')
+                    );
+                    let imageWidth = parseInt(
+                        image.style.width.toString().replace('px', '')
+                    );
+                    let section = pdfdocument.sections.add();
+                    let settings = new ej.pdfexport.PdfPageSettings(0);
+                    if (imageWidth > imageHeight) {
+                        settings.orientation = PdfPageOrientation.Landscape;
+                    }
+                    settings.size = new ej.pdfexport.SizeF(imageWidth, imageHeight);
+                    (section).setPageSettings(settings);
+                    let page = section.pages.add();
+                    let graphics = page.graphics;
+                    let imageStr = image.src.replace('data:image/jpeg;base64,', '');
+                    let pdfImage = new ej.pdfexport.PdfBitmap(imageStr);
+                    graphics.drawImage(pdfImage, 0, 0, imageWidth, imageHeight);
+                    loadedPage++;
+                    if (loadedPage == count) {
+                        // Exporting the document as pdf
+                        pdfdocument.save(
+                            (container.documentEditor.documentName === ''
+                                ? 'sample'
+                                : container.documentEditor.documentName) + '.pdf'
+                        );
+                    }
+                };
+            }, 500);
+        }
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/tagHelper
new file mode 100644
index 000000000..241c4c456
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-client/tagHelper
@@ -0,0 +1,57 @@
+<div class="control-section">
+    <ejs-button id="element" content="Using Pdf Export" onclick="exportClientSide()"></ejs-button>
+
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    //Pdf document exported using pdf export
+    function exportClientSide() {
+        let pdfdocument = new ej.pdfexport.PdfDocument();
+        let count = container.documentEditor.pageCount;
+        container.documentEditor.documentEditorSettings.printDevicePixelRatio = 2;
+        let loadedPage = 0;
+        for (let i = 1; i <= count; i++) {
+            setTimeout(() => {
+                let format = 'image/jpeg';
+                // Getting pages as image
+                let image = container.documentEditor.exportAsImage(i, format);
+                image.onload = function () {
+                    let imageHeight = parseInt(
+                        image.style.height.toString().replace('px', '')
+                    );
+                    let imageWidth = parseInt(
+                        image.style.width.toString().replace('px', '')
+                    );
+                    let section = pdfdocument.sections.add();
+                    let settings = new ej.pdfexport.PdfPageSettings(0);
+                    if (imageWidth > imageHeight) {
+                        settings.orientation = PdfPageOrientation.Landscape;
+                    }
+                    settings.size = new ej.pdfexport.SizeF(imageWidth, imageHeight);
+                    (section).setPageSettings(settings);
+                    let page = section.pages.add();
+                    let graphics = page.graphics;
+                    let imageStr = image.src.replace('data:image/jpeg;base64,', '');
+                    let pdfImage = new ej.pdfexport.PdfBitmap(imageStr);
+                    graphics.drawImage(pdfImage, 0, 0, imageWidth, imageHeight);
+                    loadedPage++;
+                    if (loadedPage == count) {
+                        // Exporting the document as pdf
+                        pdfdocument.save(
+                            (container.documentEditor.documentName === ''
+                                ? 'sample'
+                                : container.documentEditor.documentName) + '.pdf'
+                        );
+                    }
+                };
+            }, 500);
+        }
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/razor
new file mode 100644
index 000000000..41e868847
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/razor
@@ -0,0 +1,24 @@
+
+@Html.EJS().Button("element").Content("Export").Click("exportServerSide").Render()
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    function exportServerSide() {
+        let http = new XMLHttpRequest();
+        // Replace your running web service Url here
+        http.open('POST', '/api/documenteditor/ExportPdf');
+        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+        http.responseType = 'json';
+        //Serialize document content as SFDT.
+        let sfdt = { content: container.documentEditor.serialize() };
+        //Send the sfdt content to server side.
+        http.send(JSON.stringify(sfdt));
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/tagHelper
new file mode 100644
index 000000000..945d9e5d6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/export-pdf-server/tagHelper
@@ -0,0 +1,25 @@
+<div class="control-section">
+    <ejs-button id="element" content="Export" onclick="exportServerSide()"></ejs-button>
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated"
+        height="590px"></ejs-documenteditorcontainer>
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    function exportServerSide() {
+        let http = new XMLHttpRequest();
+        // Replace your running web service Url here
+        http.open('POST', '/api/documenteditor/ExportPdf');
+        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+        http.responseType = 'json';
+        //Serialize document content as SFDT.
+        let sfdt = { content: container.documentEditor.serialize() };
+        //Send the sfdt content to server side.
+        http.send(JSON.stringify(sfdt));
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/razor
new file mode 100644
index 000000000..0e2d36489
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/razor
@@ -0,0 +1,4 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
+<script>
+    var settings = { fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'] };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/tagHelper
new file mode 100644
index 000000000..c2b9da5f7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/tagHelper
@@ -0,0 +1,5 @@
+<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var settings = { fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'] };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-paragraph/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-paragraph/razor
new file mode 100644
index 000000000..2979d6865
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-paragraph/razor
@@ -0,0 +1,19 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+    var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    // To insert text in cursor position
+    container.documentEditor.editor.insertText('Document editor');
+    // To select the current paragraph in document
+    container.documentEditor.selection.selectParagraph();
+
+    // To get the selected content as text
+    var selectedContentText = container.documentEditor.selection.text;
+    // To get the selected content as SFDT (rich text)
+    var selectedContentSFDT = container.documentEditor.selection.sfdt;
+  }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-paragraph/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-paragraph/tagHelper
new file mode 100644
index 000000000..9cf6c5e9f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-paragraph/tagHelper
@@ -0,0 +1,21 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+    var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    // To insert text in cursor position
+    container.documentEditor.editor.insertText('Document editor');
+    // To select the current paragraph in document
+    container.documentEditor.selection.selectParagraph();
+
+    // To get the selected content as text
+    var selectedContentText = container.documentEditor.selection.text;
+    // To get the selected content as SFDT (rich text)
+    var selectedContentSFDT = container.documentEditor.selection.sfdt;
+  }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-sfdt/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-sfdt/razor
new file mode 100644
index 000000000..a5b5dc946
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-sfdt/razor
@@ -0,0 +1,24 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // To insert text in cursor position
+        container.documentEditor.editor.insertText('Document editor');
+        // To select all the content in document
+        container.documentEditor.selection.selectAll();
+        // Insert bookmark to selected content
+        container.documentEditor.editor.insertBookmark('Bookmark1');
+        //Select the bookmark
+        container.documentEditor.selection.selectBookmark('Bookmark1');
+        // To get the selected content as sfdt
+        let selectedContent = container.documentEditor.selection.sfdt;
+        // Insert the sfdt content in cursor position using paste API
+        container.documentEditor.editor.paste(selectedContent);
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-sfdt/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-sfdt/tagHelper
new file mode 100644
index 000000000..2fbcd6f13
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-sfdt/tagHelper
@@ -0,0 +1,25 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // To insert text in cursor position
+        container.documentEditor.editor.insertText('Document editor');
+        // To select all the content in document
+        container.documentEditor.selection.selectAll();
+        // Insert bookmark to selected content
+        container.documentEditor.editor.insertBookmark('Bookmark1');
+        //Select the bookmark
+        container.documentEditor.selection.selectBookmark('Bookmark1');
+        // To get the selected content as sfdt
+        let selectedContent = container.documentEditor.selection.sfdt;
+        // Insert the sfdt content in cursor position using paste API
+        container.documentEditor.editor.paste(selectedContent);
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-text/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-text/razor
new file mode 100644
index 000000000..b4b241bc7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-text/razor
@@ -0,0 +1,37 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // creating Custom Options
+        let menuItems = [
+            {
+              text: 'Search In Google',
+              id: 'search_in_google',
+              iconCss: 'e-icons e-de-ctnr-find',
+            },
+        ];
+        // adding Custom Options
+        container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+        // custom Options Select Event
+        container.documentEditor.customContextMenuSelect =function (args){
+          // custom Options Functionality
+          let id = container.documentEditor.element.id;
+          switch (args.id) {
+            case id + 'search_in_google':
+              // To get the selected content as plain text
+              let searchContent =
+                container.documentEditor.selection.text;
+              if (!container.documentEditor.selection.isEmpty &&
+                /\S/.test(searchContent)) {
+                window.open('http://google.com/search?q=' + searchContent);
+              }
+              break;
+          }
+        };
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-text/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-text/tagHelper
new file mode 100644
index 000000000..90610839e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-text/tagHelper
@@ -0,0 +1,39 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // creating Custom Options
+        let menuItems = [
+            {
+              text: 'Search In Google',
+              id: 'search_in_google',
+              iconCss: 'e-icons e-de-ctnr-find',
+            },
+        ];
+        // adding Custom Options
+        container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+        // custom Options Select Event
+        container.documentEditor.customContextMenuSelect =function (args){
+          // custom Options Functionality
+          let id = container.documentEditor.element.id;
+          switch (args.id) {
+            case id + 'search_in_google':
+              // To get the selected content as plain text
+              let searchContent =
+                container.documentEditor.selection.text;
+              if (!container.documentEditor.selection.isEmpty &&
+                /\S/.test(searchContent)) {
+                window.open('http://google.com/search?q=' + searchContent);
+              }
+              break;
+          }
+        };
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-word/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-word/razor
new file mode 100644
index 000000000..69a7a6ea6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-word/razor
@@ -0,0 +1,19 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+    var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    // To insert text in cursor position
+    container.documentEditor.editor.insertText('Document editor');
+    // To select the current word in document
+    container.documentEditor.selection.selectCurrentWord();
+
+    // To get the selected content as text
+    var selectedContentText = container.documentEditor.selection.text;
+    // To get the selected content as SFDT (rich text)
+    var selectedContentSFDT = container.documentEditor.selection.sfdt;
+  }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-word/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-word/tagHelper
new file mode 100644
index 000000000..59352fa77
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/get-word/tagHelper
@@ -0,0 +1,21 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+    var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    // To insert text in cursor position
+    container.documentEditor.editor.insertText('Document editor');
+    // To select the current word in document
+    container.documentEditor.selection.selectCurrentWord();
+
+    // To get the selected content as text
+    var selectedContentText = container.documentEditor.selection.text;
+    // To get the selected content as SFDT (rich text)
+    var selectedContentSFDT = container.documentEditor.selection.sfdt;
+  }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/document-editor-continer.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/document-editor-continer.cs
new file mode 100644
index 000000000..cca48eedf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/document-editor-continer.cs
@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/razor
new file mode 100644
index 000000000..cb7542f4f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/razor
@@ -0,0 +1 @@
+@Html.EJS().DocumentEditorContainer("container").Render()
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/tagHelper
new file mode 100644
index 000000000..304384f36
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/tagHelper
@@ -0,0 +1 @@
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/go-to-page/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/go-to-page/razor
new file mode 100644
index 000000000..63ab53426
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/go-to-page/razor
@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        // To move selection to page number 2
+        container.documentEditor.selection.goToPage(2);
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/go-to-page/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/go-to-page/tagHelper
new file mode 100644
index 000000000..d91630f85
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/go-to-page/tagHelper
@@ -0,0 +1,14 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        // To move selection to page number 2
+        container.documentEditor.selection.goToPage(2);
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-context-menu/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-context-menu/razor
new file mode 100644
index 000000000..38559bdea
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-context-menu/razor
@@ -0,0 +1,21 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // creating Custom Options
+        let menuItems = [
+            {
+                text: 'Search In Google',
+                id: 'search_in_google',
+                iconCss: 'e-icons e-de-ctnr-find',
+            },
+        ];
+        // The second parameter "true" hide the default context menu
+        container.documentEditor.contextMenu.addCustomMenu(menuItems, true);
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-context-menu/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-context-menu/tagHelper
new file mode 100644
index 000000000..432550670
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-context-menu/tagHelper
@@ -0,0 +1,23 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+      var documenteditorElement = document.getElementById("container");
+      container = documenteditorElement.ej2_instances[0];
+      documenteditor = container.documentEditor;
+      // creating Custom Options
+      let menuItems = [
+          {
+              text: 'Search In Google',
+              id: 'search_in_google',
+              iconCss: 'e-icons e-de-ctnr-find',
+          },
+      ];
+      // The second parameter "true" hide the default context menu
+      container.documentEditor.contextMenu.addCustomMenu(menuItems, true);
+  }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-propertiespane/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-propertiespane/razor
new file mode 100644
index 000000000..bf0072d40
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-propertiespane/razor
@@ -0,0 +1 @@
+@Html.EJS().DocumentEditorContainer("container").ShowPropertiesPane(false).EnableToolbar(true).Render()
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-propertiespane/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-propertiespane/tagHelper
new file mode 100644
index 000000000..7ffcb96b7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-propertiespane/tagHelper
@@ -0,0 +1,4 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true showPropertiesPane=false height="590px"></ejs-documenteditorcontainer>
+</div>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-toolbar/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-toolbar/razor
new file mode 100644
index 000000000..3f71be56b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-toolbar/razor
@@ -0,0 +1 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(false).Render()
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-toolbar/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-toolbar/tagHelper
new file mode 100644
index 000000000..5bb1bb4cb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-the-default-toolbar/tagHelper
@@ -0,0 +1,3 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=false height="590px"></ejs-documenteditorcontainer>
+</div>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-page-number/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-page-number/razor
new file mode 100644
index 000000000..056c5ed31
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-page-number/razor
@@ -0,0 +1,16 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+       // To insert text in cursor position
+       container.documentEditor.editor.insertText('Document editor');
+       // To move the selection to header
+       container.documentEditor.selection.goToHeader();
+       // Insert page number in the current cursor position
+       container.documentEditor.editor.insertPageNumber();
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-page-number/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-page-number/tagHelper
new file mode 100644
index 000000000..e18b31838
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-page-number/tagHelper
@@ -0,0 +1,18 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+       // To insert text in cursor position
+       container.documentEditor.editor.insertText('Document editor');
+       // To move the selection to header
+       container.documentEditor.selection.goToHeader();
+       // Insert page number in the current cursor position
+       container.documentEditor.editor.insertPageNumber();
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/razor
new file mode 100644
index 000000000..76c4d37e5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/razor
@@ -0,0 +1,32 @@
+<button id='export'>Export</button>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    let htmltags =
+  "<?xml version='1.0' encoding='utf - 8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns ='http://www.w3.org/1999/xhtml' xml:lang='en' lang ='en'><body><h1>The img element</h1><img src='https://www.w3schools.com/images/lamp.jpg' alt ='Lamp Image' width='500' height='600'/></body></html>";
+document.getElementById('export').addEventListener('click', () => {
+    let http = new XMLHttpRequest();
+    http.open('POST', '/api/documenteditor/LoadString');
+    http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    http.responseType = 'json';
+    http.onreadystatechange = function () {
+      if (http.readyState === 4) {
+        if (http.status === 200 || http.status === 304) {
+          // Insert the sfdt content in cursor position using paste API
+          container.documentEditor.editor.paste(http.response);
+        } else {
+          alert('failed;');
+        }
+      }
+    };
+
+    let htmlContent = { content: htmltags };
+    http.send(JSON.stringify(htmlContent));
+});
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/rich-text.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/rich-text.cs
new file mode 100644
index 000000000..8ef120f88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/rich-text.cs
@@ -0,0 +1,15 @@
+//API controller for the conversion.
+[HttpPost]
+public string LoadString([FromBody]InputParameter data)
+{
+    // You can also load HTML file/string from server side.
+    Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.LoadString(data.content, FormatType.Html); // Convert the HTML to SFDT format.
+    string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
+    document.Dispose();
+    return json;
+}
+
+public class InputParameter
+{
+    public string content {get; set; }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/tagHelper
new file mode 100644
index 000000000..469e16b3f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-rich-text/tagHelper
@@ -0,0 +1,34 @@
+<div class="control-section">
+    <button id='export'>Export</button>
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    let htmltags =
+  "<?xml version='1.0' encoding='utf - 8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns ='http://www.w3.org/1999/xhtml' xml:lang='en' lang ='en'><body><h1>The img element</h1><img src='https://www.w3schools.com/images/lamp.jpg' alt ='Lamp Image' width='500' height='600'/></body></html>";
+    document.getElementById('export').addEventListener('click', () => {
+        let http = new XMLHttpRequest();
+        http.open('POST', '/api/documenteditor/LoadString');
+        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+        http.responseType = 'json';
+        http.onreadystatechange = function () {
+          if (http.readyState === 4) {
+            if (http.status === 200 || http.status === 304) {
+              // Insert the sfdt content in cursor position using paste API
+              container.documentEditor.editor.paste(http.response);
+            } else {
+              alert('failed;');
+            }
+          }
+        };
+
+        let htmlContent = { content: htmltags };
+        http.send(JSON.stringify(htmlContent));
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text-image-table/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text-image-table/razor
new file mode 100644
index 000000000..43fb1e365
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text-image-table/razor
@@ -0,0 +1,51 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+    var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    // To insert the table in cursor position
+    container.documentEditor.editor.insertTable(2, 2);
+    // To insert the image at table first cell
+    container.documentEditor.editor.insertImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4    //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
+    // To move the cursor to next cell
+    moveCursorToNextCell();
+    // To insert the image at table second cell
+    container.documentEditor.editor.insertImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4    //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
+    // To move the cursor to next row
+    moveCursorToNextRow();
+    // To insert text in cursor position
+    container.documentEditor.editor.insertText('Text');
+    // To move the cursor to next cell
+    moveCursorToNextCell();
+    // To insert text in cursor position
+    container.documentEditor.editor.insertText('Text');
+  }
+  function moveCursorToNextCell() {
+  // To get current selection start offset
+  var startOffset = container.documentEditor.selection.startOffset;
+  // Increasing cell index to consider next cell
+  var startOffsetArray = startOffset.split(';');
+  startOffsetArray[3] = parseInt(startOffsetArray[3]) + 1;
+  // Changing start offset
+  startOffset = startOffsetArray.join(';');
+  // Navigating selection using select method
+  container.documentEditor.selection.select(startOffset, startOffset);
+}
+
+function moveCursorToNextRow() {
+  // To get current selection start offset
+  var startOffset = container.documentEditor.selection.startOffset;
+  // Increasing row index to consider next row
+  var startOffsetArray = startOffset.split(';');
+  startOffsetArray[2] = parseInt(startOffsetArray[2]) + 1;
+  // Going back to first cell
+  startOffsetArray[3] = 0;
+  // Changing start offset
+  startOffset = startOffsetArray.join(';');
+  // Navigating selection using select method
+  container.documentEditor.selection.select(startOffset, startOffset);
+}
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text-image-table/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text-image-table/tagHelper
new file mode 100644
index 000000000..b6ffc999d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text-image-table/tagHelper
@@ -0,0 +1,53 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        // To insert the table in cursor position
+        container.documentEditor.editor.insertTable(2, 2);
+        // To insert the image at table first cell
+        container.documentEditor.editor.insertImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4    //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
+        // To move the cursor to next cell
+        moveCursorToNextCell();
+        // To insert the image at table second cell
+        container.documentEditor.editor.insertImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4    //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
+        // To move the cursor to next row
+        moveCursorToNextRow();
+        // To insert text in cursor position
+        container.documentEditor.editor.insertText('Text');
+        // To move the cursor to next cell
+        moveCursorToNextCell();
+        // To insert text in cursor position
+        container.documentEditor.editor.insertText('Text');
+    }
+function moveCursorToNextCell() {
+  // To get current selection start offset
+  var startOffset = container.documentEditor.selection.startOffset;
+  // Increasing cell index to consider next cell
+  var startOffsetArray = startOffset.split(';');
+  startOffsetArray[3] = parseInt(startOffsetArray[3]) + 1;
+  // Changing start offset
+  startOffset = startOffsetArray.join(';');
+  // Navigating selection using select method
+  container.documentEditor.selection.select(startOffset, startOffset);
+}
+
+function moveCursorToNextRow() {
+  // To get current selection start offset
+  var startOffset = container.documentEditor.selection.startOffset;
+  // Increasing row index to consider next row
+  var startOffsetArray = startOffset.split(';');
+  startOffsetArray[2] = parseInt(startOffsetArray[2]) + 1;
+  // Going back to first cell
+  startOffsetArray[3] = 0;
+  // Changing start offset
+  startOffset = startOffsetArray.join(';');
+  // Navigating selection using select method
+  container.documentEditor.selection.select(startOffset, startOffset);
+}
+  </script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text/razor
new file mode 100644
index 000000000..0b9247aee
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text/razor
@@ -0,0 +1,15 @@
+<button id='insert'>Insert Text</button>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    document.getElementById('insert').addEventListener('click', () => {
+        // It will insert the provided text in current selection
+        container.documentEditor.editor.insertText('Syncfusion');
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text/tagHelper
new file mode 100644
index 000000000..544a3108d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/insert-text/tagHelper
@@ -0,0 +1,17 @@
+<button id='insert'>Insert Text</button>
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    document.getElementById('insert').addEventListener('click', () => {
+        // It will insert the provided text in current selection
+        container.documentEditor.editor.insertText('Syncfusion');
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/razor
new file mode 100644
index 000000000..93132da4a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/razor
@@ -0,0 +1,33 @@
+@Html.EJS().Button("load").Content("Open Document From AWS S3 Bucket").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var container;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromS3',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/tagHelper
new file mode 100644
index 000000000..483e2150d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-aws-s3/tagHelper
@@ -0,0 +1,32 @@
+<ejs-button id="load">Open Document From AWS S3 Bucket</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromS3',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/razor
new file mode 100644
index 000000000..80757ec55
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/razor
@@ -0,0 +1,33 @@
+@Html.EJS().Button("load").Content("Open Document From Azure Blob Storage").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var container;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromAzure',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/tagHelper
new file mode 100644
index 000000000..045aca797
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-azure-blob/tagHelper
@@ -0,0 +1,32 @@
+<ejs-button id="load">Open Document From Azure Blob Storage</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromAzure',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/razor
new file mode 100644
index 000000000..0d271d2ad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/razor
@@ -0,0 +1,33 @@
+@Html.EJS().Button("load").Content("Open Document From Box cloud file storage").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var container;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromBoxCloud',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/tagHelper
new file mode 100644
index 000000000..dd3dd7145
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-box-cloud-file-storage/tagHelper
@@ -0,0 +1,32 @@
+<ejs-button id="load">Open Document From Box cloud file storage</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromBoxCloud',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-by-url/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-by-url/razor
new file mode 100644
index 000000000..cd0d0fefb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-by-url/razor
@@ -0,0 +1,31 @@
+<div>
+    @Html.EJS().Button("import").Content("Open Document").Click("onClick").Render()
+    @Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    function onClick() {
+        let http = new XMLHttpRequest();
+        //add your url in which you want to open document inside the ""
+        let content = { fileUrl: "" };
+        let baseurl = "/api/documenteditor/ImportFileURL";
+        http.open("POST", baseurl, true);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.onreadystatechange = () => {
+            if (http.readyState === 4) {
+                if (http.status === 200 || http.status === 304) {
+                    //open the SFDT text in Document Editor
+                    container.documentEditor.open(http.responseText);
+                }
+            }
+        };
+        http.send(JSON.stringify(content));
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-by-url/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-by-url/tagHelper
new file mode 100644
index 000000000..9c37ca8b0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-by-url/tagHelper
@@ -0,0 +1,30 @@
+<ejs-button id="import" content="Open Document" onclick="onClick()"></ejs-button>
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated"
+height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    function onClick() {
+        let http = new XMLHttpRequest();
+        //add your url in which you want to open document inside the ""
+        let content = { fileUrl: "" };
+        let baseurl = "/api/documenteditor/ImportFileURL";
+        http.open("POST", baseurl, true);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.onreadystatechange = () => {
+            if (http.readyState === 4) {
+                if (http.status === 200 || http.status === 304) {
+                    //open the SFDT text in Document Editor
+                    container.documentEditor.open(http.responseText);
+                }
+            }
+        };
+        http.send(JSON.stringify(content));
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/document-editor.cs
new file mode 100644
index 000000000..cca48eedf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/document-editor.cs
@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/razor
new file mode 100644
index 000000000..ee3242ff2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/razor
@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreate").EnableToolbar(true).Render()
+
+<script>
+    var container;
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        var sfdt = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] };
+        // open the default document.
+        container.documentEditor.open(JSON.stringify(sfdt));
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/tagHelper
new file mode 100644
index 000000000..50684dd35
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-default-document/tagHelper
@@ -0,0 +1,12 @@
+<ejs-documenteditorcontainer id="container" (created)="onCreate()"></ejs-documenteditorcontainer>
+
+<script>
+    var container;
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        var sfdt = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] };
+        // open the default document.
+        container.documentEditor.open(JSON.stringify(sfdt));
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/razor
new file mode 100644
index 000000000..a2fafa350
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/razor
@@ -0,0 +1,33 @@
+@Html.EJS().Button("load").Content("Open Document From DropBox cloud file storage").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var container;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromDropBox',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/tagHelper
new file mode 100644
index 000000000..e04f7d371
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-dropbox-cloud-file-storage/tagHelper
@@ -0,0 +1,32 @@
+<ejs-button id="load">Open Document From DropBox cloud file storage</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromDropBox',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/razor
new file mode 100644
index 000000000..fa2fb2d0b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/razor
@@ -0,0 +1,33 @@
+@Html.EJS().Button("load").Content("Open Document From Google cloud storage").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var container;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromGoogleCloud',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/tagHelper
new file mode 100644
index 000000000..64874eb43
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-cloud-storage/tagHelper
@@ -0,0 +1,32 @@
+<ejs-button id="load">Open Document From Google cloud storage</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromGoogleCloud',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/razor
new file mode 100644
index 000000000..3d9f563cc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/razor
@@ -0,0 +1,33 @@
+@Html.EJS().Button("load").Content("Open Document From Google Drive").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var container;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromGoogleDrive',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/tagHelper
new file mode 100644
index 000000000..466114dd5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-google-drive/tagHelper
@@ -0,0 +1,32 @@
+<ejs-button id="load">Open Document From Google Drive</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromGoogleDrive',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/razor
new file mode 100644
index 000000000..c2d5e0dee
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/razor
@@ -0,0 +1,33 @@
+@Html.EJS().Button("load").Content("Open Document From One Drive").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var container;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromOneDrive',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/tagHelper
new file mode 100644
index 000000000..21d796bdd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/open-one-drive/tagHelper
@@ -0,0 +1,32 @@
+<ejs-button id="load">Open Document From One Drive</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('load').addEventListener('click', function () {
+            fetch(
+                window.baseurl + 'api/documenteditor/LoadFromOneDrive',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    container.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/document-editor.cs
new file mode 100644
index 000000000..e23672e00
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/document-editor.cs
@@ -0,0 +1,5 @@
+ public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/razor
new file mode 100644
index 000000000..1a4b2a8e4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/razor
@@ -0,0 +1,4 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
+<script>
+    var settings = { enableOptimizedTextMeasuring: false };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/tagHelper
new file mode 100644
index 000000000..ee41759dc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/tagHelper
@@ -0,0 +1,5 @@
+<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var settings = { enableOptimizedTextMeasuring: false };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/page-count/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/page-count/razor
new file mode 100644
index 000000000..81ab3d1a5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/page-count/razor
@@ -0,0 +1,15 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+       // To insert text in cursor position
+       container.documentEditor.editor.insertText('Document editor');
+       // To get the total number of pages
+       var pageCount =container.documentEditor.pageCount;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/page-count/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/page-count/tagHelper
new file mode 100644
index 000000000..325a57cc6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/page-count/tagHelper
@@ -0,0 +1,16 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+       // To insert text in cursor position
+       container.documentEditor.editor.insertText('Document editor');
+       // To get the total number of pages
+       var pageCount =container.documentEditor.pageCount;
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/paragraph-format/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/paragraph-format/razor
new file mode 100644
index 000000000..4c254ea4d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/paragraph-format/razor
@@ -0,0 +1,19 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        var defaultParagraphFormat = {
+            beforeSpacing: 8,
+            lineSpacing: 1.5,
+            leftIndent: 24,
+            textAlignment: "Center"
+        };
+        container.documentEditor.setDefaultParagraphFormat(defaultParagraphFormat);
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/paragraph-format/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/paragraph-format/tagHelper
new file mode 100644
index 000000000..0d654e287
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/paragraph-format/tagHelper
@@ -0,0 +1,20 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        var defaultParagraphFormat = {
+            beforeSpacing: 8,
+            lineSpacing: 1.5,
+            leftIndent: 24,
+            textAlignment: "Center"
+        };
+        container.documentEditor.setDefaultParagraphFormat(defaultParagraphFormat);
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/print/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/print/razor
new file mode 100644
index 000000000..9c105f41c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/print/razor
@@ -0,0 +1,4 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
+<script>
+    var settings = { printDevicePixelRatio :2 };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/print/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/print/tagHelper
new file mode 100644
index 000000000..ef482ecb7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/print/tagHelper
@@ -0,0 +1,6 @@
+<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true height="590px">
+</ejs-documenteditorcontainer>
+
+<script>
+    var settings = { printDevicePixelRatio: 2 };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/protect-unprotect/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/protect-unprotect/razor
new file mode 100644
index 000000000..8e9a09c5d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/protect-unprotect/razor
@@ -0,0 +1,14 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
+        //stop the document protection
+        container.documentEditor.editor.stopProtection('123');
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/protect-unprotect/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/protect-unprotect/tagHelper
new file mode 100644
index 000000000..9f6e0d489
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/protect-unprotect/tagHelper
@@ -0,0 +1,15 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
+        //stop the document protection
+        container.documentEditor.editor.stopProtection('123');
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/read-only/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/read-only/razor
new file mode 100644
index 000000000..7c380c7f2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/read-only/razor
@@ -0,0 +1,17 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // load your default document here
+        var data = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] };
+        // Open the default document
+        documenteditor.open(JSON.stringify(data));
+        //Enable read only mode.
+        container.restrictEditing = true;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/read-only/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/read-only/tagHelper
new file mode 100644
index 000000000..60502a883
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/read-only/tagHelper
@@ -0,0 +1,18 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // load your default document here
+        var data = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] };
+        // Open the default document
+        documenteditor.open(JSON.stringify(data));
+        //Enable read only mode.
+        container.restrictEditing = true;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/resize/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/resize/razor
new file mode 100644
index 000000000..07f6e19ef
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/resize/razor
@@ -0,0 +1,27 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        setInterval(() => {
+          updateDocumentEditorSize();
+        }, 100);
+        //Adds event listener for browser window resize event.
+        window.addEventListener('resize', onWindowResize);
+    }
+    function onWindowResize() {
+        //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
+        updateDocumentEditorSize();
+    }
+    function updateDocumentEditorSize() {
+        //Resizes the document editor component to fit full browser window.
+        var windowWidth = window.innerWidth;
+        var windowHeight = window.innerHeight;
+        container.resize(windowWidth, windowHeight);
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/resize/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/resize/tagHelper
new file mode 100644
index 000000000..440951a77
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/resize/tagHelper
@@ -0,0 +1,28 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        setInterval(() => {
+          updateDocumentEditorSize();
+        }, 100);
+        //Adds event listener for browser window resize event.
+        window.addEventListener('resize', onWindowResize);
+    }
+    function onWindowResize() {
+        //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
+        updateDocumentEditorSize();
+    }
+    function updateDocumentEditorSize() {
+        //Resizes the document editor component to fit full browser window.
+        var windowWidth = window.innerWidth;
+        var windowHeight = window.innerHeight;
+        container.resize(windowWidth, windowHeight);
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/razor
new file mode 100644
index 000000000..0daade6da
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/razor
@@ -0,0 +1,16 @@
+<div>
+    @Html.EJS().Button("container_ruler_button").Content("Show/Hide Ruler").Click("onClick").Render()
+    @Html.EJS().DocumentEditorContainer("container").Created("onCreate").DocumentEditorSettings("settings").Render()
+</div>
+
+<script>
+    var container;
+    var settings = { showRuler: true };
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    function onClick() {
+       container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/tagHelper
new file mode 100644
index 000000000..ecacaf8c5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/ruler/tagHelper
@@ -0,0 +1,14 @@
+<ejs-button id="container_ruler_button" content="Show/hide ruler" onclick="onClick()"></ejs-button>
+<ejs-documenteditorcontainer id="container" (created)="onCreate()" documentEditorSettings="settings"></ejs-documenteditorcontainer>
+
+<script>
+    var container;
+    var settings = { showRuler: true };
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+    }
+    function onClick() {
+        container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/razor
new file mode 100644
index 000000000..4f5145a2f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/razor
@@ -0,0 +1,35 @@
+@Html.EJS().Button("export").Content("Save to AWS S3 Bucket").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToS3',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/tagHelper
new file mode 100644
index 000000000..3846d0270
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-aws-s3/tagHelper
@@ -0,0 +1,34 @@
+<ejs-button id="export">Save to AWS S3 Bucket</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToS3',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/razor
new file mode 100644
index 000000000..d3d0718ea
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/razor
@@ -0,0 +1,35 @@
+@Html.EJS().Button("export").Content("Save to Azure Blob Storage").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToAzure',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/tagHelper
new file mode 100644
index 000000000..ead36d36e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-azure-blob/tagHelper
@@ -0,0 +1,34 @@
+<ejs-button id="export">Save to Azure Blob Storage</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToAzure',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/razor
new file mode 100644
index 000000000..6793b85be
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/razor
@@ -0,0 +1,35 @@
+@Html.EJS().Button("export").Content("Save to Box Cloud").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToBoxCloud',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/tagHelper
new file mode 100644
index 000000000..383f9c957
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-box-cloud-file-storage/tagHelper
@@ -0,0 +1,34 @@
+<ejs-button id="export">Save to Box Cloud</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToBoxCloud',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/razor
new file mode 100644
index 000000000..c90016b57
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/razor
@@ -0,0 +1,35 @@
+@Html.EJS().Button("export").Content("Save to DropBox Cloud").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToDropBox',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/tagHelper
new file mode 100644
index 000000000..ffddbbc95
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-dropbox-cloud-file-storage/tagHelper
@@ -0,0 +1,34 @@
+<ejs-button id="export">Save to DropBox Cloud</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToDropBox',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/razor
new file mode 100644
index 000000000..bb8264461
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/razor
@@ -0,0 +1,35 @@
+@Html.EJS().Button("export").Content("Save to Google Cloud").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToGoogleCloud',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/tagHelper
new file mode 100644
index 000000000..df0d19941
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-cloud-storage/tagHelper
@@ -0,0 +1,34 @@
+<ejs-button id="export">Save to Google Cloud</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToGoogleCloud',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/razor
new file mode 100644
index 000000000..58da1cbcc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/razor
@@ -0,0 +1,35 @@
+@Html.EJS().Button("export").Content("Save to Google Drive").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToGoogleDrive',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/tagHelper
new file mode 100644
index 000000000..68dceaba3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-google-drive/tagHelper
@@ -0,0 +1,34 @@
+<ejs-button id="export">Save to Google Drive</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToGoogleDrive',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/razor
new file mode 100644
index 000000000..3a9e94564
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/razor
@@ -0,0 +1,35 @@
+@Html.EJS().Button("export").Content("Save to One Drive").Render()
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToOneDrive',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/tagHelper
new file mode 100644
index 000000000..7270109ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/save-one-drive/tagHelper
@@ -0,0 +1,34 @@
+<ejs-button id="export">Save to One Drive</ejs-button>
+<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        container = documenteditorElement.ej2_instances[0];
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    window.baseurl + 'api/documenteditor/SaveToOneDrive',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/razor
new file mode 100644
index 000000000..f31e17d2f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/razor
@@ -0,0 +1,4 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
+<script>
+    var settings = { searchHighlightColor: 'Grey' };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/tagHelper
new file mode 100644
index 000000000..88e1951ce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/tagHelper
@@ -0,0 +1,5 @@
+<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var settings = { searchHighlightColor: 'Grey' };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/section-format/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/section-format/razor
new file mode 100644
index 000000000..b4d71706e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/section-format/razor
@@ -0,0 +1,23 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        var defaultSectionFormat = {
+            pageWidth: 500,
+            pageHeight: 800,
+            headerDistance: 56,
+            footerDistance: 48,
+            leftMargin: 12,
+            rightMargin: 12,
+            topMargin:0,
+            bottomMargin:0
+        };
+        container.documentEditor.setDefaultSectionFormat(defaultSectionFormat);
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/section-format/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/section-format/tagHelper
new file mode 100644
index 000000000..2bf562a67
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/section-format/tagHelper
@@ -0,0 +1,24 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        var defaultSectionFormat = {
+            pageWidth: 500,
+            pageHeight: 800,
+            headerDistance: 56,
+            footerDistance: 48,
+            leftMargin: 12,
+            rightMargin: 12,
+            topMargin:0,
+            bottomMargin:0
+        };
+        container.documentEditor.setDefaultSectionFormat(defaultSectionFormat);
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/select/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/select/razor
new file mode 100644
index 000000000..d6ec7909e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/select/razor
@@ -0,0 +1,18 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+      var documenteditorElement = document.getElementById("container");
+      container = documenteditorElement.ej2_instances[0];
+      documenteditor = container.documentEditor;
+      // Event gets triggered on selection change in document
+      container.selectionChange = function () {
+        //Get the start index of current selection
+        let startOffset = container.documentEditor.selection.startOffset;
+        //Get the end index of current selection
+        let endOffset = container.documentEditor.selection.endOffset;
+      };
+  }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/select/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/select/tagHelper
new file mode 100644
index 000000000..376a52b87
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/select/tagHelper
@@ -0,0 +1,20 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // Event gets triggered on selection change in document
+        container.selectionChange = function () {
+          //Get the start index of current selection
+          let startOffset = container.documentEditor.selection.startOffset;
+          //Get the end index of current selection
+          let endOffset = container.documentEditor.selection.endOffset;
+        };
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/spinner/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/spinner/razor
new file mode 100644
index 000000000..82da2c72f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/spinner/razor
@@ -0,0 +1,34 @@
+<div>
+    @Html.EJS().Button("import").Content("Load Document").Click("onClick").Render()
+    @Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+
+        ej.popups.createSpinner({
+            // Specify the target for the spinner to show
+            target: document.getElementById('container')
+        });
+    }
+    function onClick() {
+        // load your default document here
+        let data = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+        // showSpinner() will make the spinner visible
+        ej.popups.showSpinner(document.getElementById('container'));
+        // Open the default document
+        container.documentEditor.open(data);
+        setInterval(function () {
+
+            // hideSpinner() method used hide spinner
+            ej.popups.hideSpinner(document.getElementById('container'));
+
+        }, 5000);
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/spinner/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/spinner/tagHelper
new file mode 100644
index 000000000..7de7a7ec5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/spinner/tagHelper
@@ -0,0 +1,33 @@
+<ejs-button id="import" content="Load Document" onclick="onClick()"></ejs-button>
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+
+        ej.popups.createSpinner({
+            // Specify the target for the spinner to show
+            target: document.getElementById('container')
+        });
+    }
+    function onClick() {
+        // load your default document here
+        let data = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+        // showSpinner() will make the spinner visible
+        ej.popups.showSpinner(document.getElementById('container'));
+        // Open the default document
+        container.documentEditor.open(data);
+        setInterval(function () {
+
+            // hideSpinner() method used hide spinner
+            ej.popups.hideSpinner(document.getElementById('container'));
+
+        }, 5000);
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/document-editor.cs
new file mode 100644
index 000000000..cca48eedf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/document-editor.cs
@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/razor
new file mode 100644
index 000000000..c1c8d4890
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/razor
@@ -0,0 +1,12 @@
+<div>
+    @Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).EnableTrackChanges(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    var container;
+    var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.documentEditor.showRevisions = true; // To show revisions pane
+    container.documentEditor.showRevisions = false; // To hide revisions pane
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/tagHelper
new file mode 100644
index 000000000..11280217a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/toggle-track-pane/tagHelper
@@ -0,0 +1,10 @@
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true    enableTrackChanges=true height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.documentEditor.showRevisions = true; // To show revisions pane
+    container.documentEditor.showRevisions = false; // To hide revisions pane
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/document-editor.cs
new file mode 100644
index 000000000..cca48eedf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/document-editor.cs
@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/razor
new file mode 100644
index 000000000..33dcd7df8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/razor
@@ -0,0 +1,13 @@
+<div>
+    @Html.EJS().DocumentEditorContainer("container").documentChange("onDocChange").EnableToolbar(true).Render()
+</div>
+
+<ejs-documenteditorcontainer id="container"  documentChange="onDocumentChange" enableToolbar=true serviceUrl="/api/DocumentEditor/" height="590px"></ejs-documenteditorcontainer>
+<script>
+    function onDocumentChange() {
+        var container = document.getElementById("container").ej2_instances[0];
+        if(container !== null){
+           container.documentEditor.enableTrackChanges= true;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/tagHelper
new file mode 100644
index 000000000..98110a040
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-default/tagHelper
@@ -0,0 +1,9 @@
+<ejs-documenteditorcontainer id="container"  documentChange="onDocumentChange" enableToolbar=true serviceUrl="/api/DocumentEditor/" height="590px"></ejs-documenteditorcontainer>
+<script>
+    function onDocumentChange() {
+        var container = document.getElementById("container").ej2_instances[0];
+        if(container !== null){
+           container.documentEditor.enableTrackChanges= true;
+        }
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/document-editor.cs
new file mode 100644
index 000000000..cca48eedf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/document-editor.cs
@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/razor
new file mode 100644
index 000000000..bbb3d1035
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/razor
@@ -0,0 +1,14 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly');
+        //stop the document protection
+        container.documentEditor.editor.stopProtection('123');
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/tagHelper
new file mode 100644
index 000000000..43e6449ff
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-only-protect/tagHelper
@@ -0,0 +1,16 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true enableTrackChanges=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly');
+        //stop the document protection
+        container.documentEditor.editor.stopProtection('123');
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/document-editor.cs
new file mode 100644
index 000000000..cca48eedf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/document-editor.cs
@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/razor
new file mode 100644
index 000000000..ab80881db
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/razor
@@ -0,0 +1 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).EnableTrackChanges(true).Render()
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/tagHelper
new file mode 100644
index 000000000..216ac2d1d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes/tagHelper
@@ -0,0 +1,2 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true enableTrackChanges=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/document-editor.cs
new file mode 100644
index 000000000..cca48eedf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/document-editor.cs
@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/razor
new file mode 100644
index 000000000..7c372d730
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/razor
@@ -0,0 +1 @@
+@Html.EJS().DocumentEditorContainer("container").LayoutType(Syncfusion.EJ2.DocumentEditor.LayoutType.Continuous).Render()
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/tagHelper
new file mode 100644
index 000000000..676026de1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/web-layout/tagHelper
@@ -0,0 +1 @@
+<ejs-documenteditorcontainer id="container" layoutType="Continuous"></ejs-documenteditorcontainer>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/razor
new file mode 100644
index 000000000..e6296dfc8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/razor
@@ -0,0 +1,23 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").Created("onDocCreate").EnableToolbar(true).Render()
+</div>
+
+<script>
+    function onDocCreate() {
+        var container = document.getElementById("container").ej2_instances[0];
+        var toolItem = {
+            prefixIcon: "e-save icon",
+            tooltipText: "Save the Document",
+            text: "Save",
+            id: "save"
+        };
+        container.toolbarItems = ['New','Open',toolItem, 'Separator' ,'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
+        container.toolbarClick = function (args) {
+            switch (args.item.id) {
+                case 'save':
+                    container.documentEditor.save('sample','Docx');
+                    break;
+            }
+        };
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/tagHelper
new file mode 100644
index 000000000..839eddcbf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/add-save-button-in-toolbar/tagHelper
@@ -0,0 +1,20 @@
+<ejs-documenteditorcontainer id="container" created="onDocCreate"></ejs-documenteditorcontainer>
+<script>
+    function onDocCreate() {
+        var container = document.getElementById("container").ej2_instances[0];
+        var toolItem = {
+            prefixIcon: "e-de-ctnr-lock",
+            tooltipText: "Disable Image",
+            text: "Disable Image",
+            id: "Custom"
+        };
+        container.toolbarItems = ['New','Open',toolItem, 'Separator' ,'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
+        container.toolbarClick = function (args) {
+            switch (args.item.id) {
+                case 'Custom':
+                    container.documentEditor.save('Sample', 'Docx');
+                    break;
+            }
+        };
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/apply-borders/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/apply-borders/razor
new file mode 100644
index 000000000..6053f75b6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/apply-borders/razor
@@ -0,0 +1,15 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.editor.insertTable(2, 2);
+        //To apply border
+        var borderSettings = {
+            type: 'AllBorders',
+            lineWidth: 12
+        };
+        documenteditor.editor.applyBorders(borderSettings);
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/apply-borders/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/apply-borders/tagHelper
new file mode 100644
index 000000000..756c0e71e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/apply-borders/tagHelper
@@ -0,0 +1,15 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.editor.insertTable(2, 2);
+        //To apply border
+        var borderSettings = {
+            type: 'AllBorders',
+            lineWidth: 12
+        };
+        documenteditor.editor.applyBorders(borderSettings);
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save-server/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save-server/razor
new file mode 100644
index 000000000..74413d156
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save-server/razor
@@ -0,0 +1,51 @@
+
+@Html.EJS().DocumentEditorContainer("container").Created("onCreate").EnableToolbar(true).Render()
+
+
+<script>
+    var container;
+    var containerPanel;
+    var contentChanged =false;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.contentChange=function(){
+        contentChanged = true;
+    }
+    });
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        setInterval(() => {
+            if (contentChanged) {
+                //You can save the document as below
+                container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                    console.log('Saved sucessfully');
+                    let exportedDocument = blob;
+                    //Now, save the document where ever you want.
+                    let formData = new FormData();
+                    formData.append('fileName', 'sample.docx');
+                    formData.append('data', exportedDocument);
+                    /* tslint:disable */
+                    var req = new XMLHttpRequest();
+                    // Replace your running Url here
+                    req.open(
+                        'POST',
+                        'http://localhost:62869/api/documenteditor/AutoSave',
+                        true
+                    );
+                    req.onreadystatechange = () => {
+                        if (req.readyState === 4) {
+                            if (req.status === 200 || req.status === 304) {
+                                console.log('Saved sucessfully');
+                            }
+                        }
+                    };
+                    req.send(formData);
+                });
+                contentChanged = false;
+            }
+        }, 1000);
+    }
+
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save-server/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save-server/tagHelper
new file mode 100644
index 000000000..30fe226f3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save-server/tagHelper
@@ -0,0 +1,49 @@
+<ejs-documenteditorcontainer id="container" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var container;
+    var containerPanel;
+    var contentChanged =false;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.contentChange=function(){
+        contentChanged = true;
+    }
+    });
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        setInterval(() => {
+            if (contentChanged) {
+                //You can save the document as below
+                container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                    console.log('Saved sucessfully');
+                    let exportedDocument = blob;
+                    //Now, save the document where ever you want.
+                    let formData = new FormData();
+                    formData.append('fileName', 'sample.docx');
+                    formData.append('data', exportedDocument);
+                    /* tslint:disable */
+                    var req = new XMLHttpRequest();
+                    // Replace your running Url here
+                    req.open(
+                        'POST',
+                        'http://localhost:62869/api/documenteditor/AutoSave',
+                        true
+                    );
+                    req.onreadystatechange = () => {
+                        if (req.readyState === 4) {
+                            if (req.status === 200 || req.status === 304) {
+                                console.log('Saved sucessfully');
+                            }
+                        }
+                    };
+                    req.send(formData);
+                });
+                contentChanged = false;
+            }
+        }, 1000);
+    }
+
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save/razor
new file mode 100644
index 000000000..c2f5e9c68
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save/razor
@@ -0,0 +1,51 @@
+
+@Html.EJS().DocumentEditorContainer("container").Created("onCreate").EnableToolbar(true).Render()
+
+
+<script>
+    var container;
+    var containerPanel;
+    var contentChanged =false;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.contentChange=function(){
+        contentChanged = true;
+    }
+    });
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        setInterval(() => {
+            if (contentChanged) {
+                //You can save the document as below
+                container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                    console.log('Saved sucessfully');
+                    let exportedDocument = blob;
+                    //Now, save the document where ever you want.
+                    let formData = new FormData();
+                    formData.append('fileName', 'sample.docx');
+                    formData.append('data', exportedDocument);
+                    /* tslint:disable */
+                    var req = new XMLHttpRequest();
+                    // Replace your running Url here
+                    req.open(
+                        'POST',
+                        'http://localhost:62869/api/documenteditor/SaveToS3',
+                        true
+                    );
+                    req.onreadystatechange = () => {
+                        if (req.readyState === 4) {
+                            if (req.status === 200 || req.status === 304) {
+                                console.log('Saved sucessfully');
+                            }
+                        }
+                    };
+                    req.send(formData);
+                });
+                contentChanged = false;
+            }
+        }, 1000);
+    }
+
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save/tagHelper
new file mode 100644
index 000000000..833f5a7ed
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/auto-save/tagHelper
@@ -0,0 +1,49 @@
+<ejs-documenteditorcontainer id="container" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var container;
+    var containerPanel;
+    var contentChanged =false;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.contentChange=function(){
+        contentChanged = true;
+    }
+    });
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        setInterval(() => {
+            if (contentChanged) {
+                //You can save the document as below
+                container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                    console.log('Saved sucessfully');
+                    let exportedDocument = blob;
+                    //Now, save the document where ever you want.
+                    let formData = new FormData();
+                    formData.append('fileName', 'sample.docx');
+                    formData.append('data', exportedDocument);
+                    /* tslint:disable */
+                    var req = new XMLHttpRequest();
+                    // Replace your running Url here
+                    req.open(
+                        'POST',
+                        'http://localhost:62869/api/documenteditor/SaveToS3',
+                        true
+                    );
+                    req.onreadystatechange = () => {
+                        if (req.readyState === 4) {
+                            if (req.status === 200 || req.status === 304) {
+                                console.log('Saved sucessfully');
+                            }
+                        }
+                    };
+                    req.send(formData);
+                });
+                contentChanged = false;
+            }
+        }, 1000);
+    }
+
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/razor
new file mode 100644
index 000000000..1bc27a91f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/razor
@@ -0,0 +1,19 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableBookmarkDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    var containerPanel;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Bookmark Dialog
+            documenteditor.showDialog('Bookmark');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/tagHelper
new file mode 100644
index 000000000..bc8dccf78
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/bookmark-dialog/tagHelper
@@ -0,0 +1,18 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableBookmarkDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Bookmark Dialog
+            documenteditor.showDialog('Bookmark');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/razor
new file mode 100644
index 000000000..d39b64174
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableBordersAndShadingDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open BordersAndShading Dialog
+            documenteditor.showDialog('BordersAndShading');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/tagHelper
new file mode 100644
index 000000000..a916d4a49
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/borders-shading-dialog/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableBordersAndShadingDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open BordersAndShading Dialog
+            documenteditor.showDialog('BordersAndShading');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/cell-width/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/cell-width/razor
new file mode 100644
index 000000000..4f97e0443
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/cell-width/razor
@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.editor.insertTable(2, 2);
+        //To change the width of a cell
+        documenteditor.selection.cellFormat.preferredWidthType = 'Point';
+        documenteditor.selection.cellFormat.preferredWidth = 100;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/cell-width/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/cell-width/tagHelper
new file mode 100644
index 000000000..b82eac006
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/cell-width/tagHelper
@@ -0,0 +1,12 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.editor.insertTable(2, 2);
+        //To change the width of a cell
+        documenteditor.selection.cellFormat.preferredWidthType = 'Point';
+        documenteditor.selection.cellFormat.preferredWidth = 100;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/razor
new file mode 100644
index 000000000..6576701ec
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/razor
@@ -0,0 +1,22 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var styleJson = {
+            "type": "Character",
+            "name": "New CharacterStyle",
+            "basedOn": "Default Paragraph Font",
+            "characterFormat": {
+                "fontSize": 16.0,
+                "fontFamily": "Calibri Light",
+                "fontColor": "#2F5496",
+                "bold": true,
+                "italic": true,
+                "underline": "Single"
+            }
+        };
+        documentEditor.editor.createStyle(JSON.stringify(styleJson));
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/tagHelper
new file mode 100644
index 000000000..46af7cc9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/character-style/tagHelper
@@ -0,0 +1,22 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var styleJson = {
+            "type": "Character",
+            "name": "New CharacterStyle",
+            "basedOn": "Default Paragraph Font",
+            "characterFormat": {
+                "fontSize": 16.0,
+                "fontFamily": "Calibri Light",
+                "fontColor": "#2F5496",
+                "bold": true,
+                "italic": true,
+                "underline": "Single"
+            }
+        };
+        documentEditor.editor.createStyle(JSON.stringify(styleJson));
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/razor
new file mode 100644
index 000000000..5988e6c06
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/razor
@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditor("container").Render()
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var sfdt = {"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]};
+        // preserve chart
+        documenteditor.open(JSON.stringify(sfdt));
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/tagHelper
new file mode 100644
index 000000000..ee7660e32
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/chart/tagHelper
@@ -0,0 +1,12 @@
+<ejs-documenteditor id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var sfdt = {"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]};
+        // preserve chart
+        documenteditor.open(JSON.stringify(sfdt));
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/razor
new file mode 100644
index 000000000..e73867fa0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/razor
@@ -0,0 +1,9 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.enableLocalPaste = true;
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/tagHelper
new file mode 100644
index 000000000..27d1cc66e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/clipboard/tagHelper
@@ -0,0 +1,9 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.enableLocalPaste = true;
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/razor
new file mode 100644
index 000000000..31b1958c6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/razor
@@ -0,0 +1,7 @@
+<div>
+	<div id='documenteditor_titlebar' class="e-de-ctn-title"></div>
+	@Html.EJS().DocumentEditorContainer("container").Height("590px").EnableToolbar(true).Render()
+</div>
+<script>
+    container.documentEditor.enableCollaborativeEditing = true;
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-1 b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-1
new file mode 100644
index 000000000..536dce209
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-1
@@ -0,0 +1,41 @@
+<script>
+    var connection = new signalR.HubConnectionBuilder().withUrl(serviceUrl + '/documenteditorhub', {
+        skipNegotiation: true,
+        transport: signalR.HttpTransportType.WebSockets
+    }).withAutomaticReconnect().build();
+
+    connection.onclose(async () => {
+        if (connection.state === signalR.HubConnectionState.Disconnected) {
+            alert('Connection lost. Please relod the browser to continue.');
+        }
+    });
+
+    async function start(data) {
+        try {
+            connection.start().then(function () {
+                connection.send('JoinGroup', { roomName: data.roomName, currentUser: data.currentUser });
+                console.log('server connected!!!');
+            });
+        } catch (err) {
+            console.log(err);
+            setTimeout(start, 5000);
+        }
+    };
+
+    connection.on('dataReceived', onDataRecived.bind(this));
+
+    function onDataRecived(action, data) {
+        if (connections) {
+            if (action == 'connectionId') {
+                connectionId = data;
+            } else if (connectionId != data.connectionId) {
+                if (action == 'action' || action == 'addUser') {
+                    titleBar.addUser(data);
+                } else if (action == 'removeUser') {
+                    titleBar.removeUser(data);
+                }
+            }
+            connections.applyAction(action, data);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-2 b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-2
new file mode 100644
index 000000000..86237d823
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-2
@@ -0,0 +1,45 @@
+<script>
+    var connectionId = '';
+    let serviceUrl = window.location.origin;
+    let connections;
+    
+    function loadDefaultDocument() {
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        let roomId = urlParams.get('id');
+
+        if (roomId == null) {
+            roomId = Math.random().toString(32).slice(2)
+            window.history.replaceState({}, "", `?id=` + roomId);
+        }
+
+        ejs.popups.showSpinner(document.getElementById('editor_area'));
+        var httpRequest = new XMLHttpRequest();
+        httpRequest.open('Post', '/api/CollaborativeEditing/ImportFile', true);
+        httpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        httpRequest.onreadystatechange = function () {
+            if (httpRequest.readyState === 4) {
+                if (httpRequest.status === 200 || httpRequest.status === 304) {
+                    var data = JSON.parse(httpRequest.responseText);
+                    connections = container.documentEditor.collaborativeEditingHandlerModule;
+
+                    connections.updateRoomInfo(roomId, data.version, serviceUrl + '/');
+
+                    container.documentEditor.open(data.sfdt);
+                    setTimeout(function () {
+                        start({ action: 'connect', roomName: roomId, currentUser: container.currentUser }, null);
+                    });
+                    ejs.popups.hideSpinner(document.getElementById('editor_area'));
+                    tooltip.open();
+                }
+                else {
+                    ejs.popups.hideSpinner(document.getElementById('editor_area'));
+                    alert('Fail to load the document');
+                }
+            }
+        };
+        container.documentEditor.documentName = 'Giant Panda';
+        httpRequest.send(JSON.stringify({ "fileName": 'Giant Panda.docx', "roomName": roomId }));
+        titleBar.updateDocumentTitle();
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-3 b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-3
new file mode 100644
index 000000000..884fafd7c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/script-3
@@ -0,0 +1,7 @@
+<script>
+    container.contentChange = function (args) {
+        if (connections) {
+            connections.sendActionToServer(args.operations);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/tagHelper
new file mode 100644
index 000000000..b48083dcd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/collaborative-editing/tagHelper
@@ -0,0 +1,12 @@
+<div id="documenteditor_titlebar" class="e-de-ctn-title" style="height:35px;"></div>
+<ejs-documenteditorcontainer id="container" style="width: 100%;height: 100%;"></ejs-documenteditorcontainer>
+<script>
+    // Documenteditor control rendering starts
+    let serviceUrl = window.location.origin;
+    var container = new ejs.documenteditor.DocumentEditorContainer({ height: '590px', showPropertiesPane: false, enableToolbar: true });
+    container.serviceUrl = serviceUrl + "/api/documenteditor/";
+    container.appendTo('#container');
+
+    // Enable collaborative editing in Document Editor.
+    container.documentEditor.enableCollaborativeEditing = true;
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/razor
new file mode 100644
index 000000000..f66b2d964
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/razor
@@ -0,0 +1,37 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").Created("onDocCreate").EnableToolbar(true).Render()
+</div>
+
+<script>
+    function onDocCreate() {
+        var container = document.getElementById("container").ej2_instances[0];
+        var toolItem = {
+            prefixIcon: "e-de-ctnr-lock",
+            tooltipText: "Disable Image",
+            text: onWrapText("Disable Image"),
+            id: "Custom"
+        };
+        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
+        container.toolbarClick = function (args) {
+            switch (args.item.id) {
+                case 'Custom':
+                    //Disable image toolbar item.
+                    container.toolbar.enableItems(4, false);
+                    break;
+            }
+        };
+    }
+
+    function onWrapText(text) {
+        let content = '';
+        const index = text.lastIndexOf(' ');
+
+        if (index !== -1) {
+            content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
+        } else {
+            content = text;
+        }
+
+        return content;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/tagHelper
new file mode 100644
index 000000000..437e44777
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/custom-toolbar/tagHelper
@@ -0,0 +1,34 @@
+<ejs-documenteditorcontainer id="container" created="onDocCreate"></ejs-documenteditorcontainer>
+<script>
+    function onDocCreate() {
+        var container = document.getElementById("container").ej2_instances[0];
+        var toolItem = {
+            prefixIcon: "e-de-ctnr-lock",
+            tooltipText: "Disable Image",
+            text: onWrapText("Disable Image"),
+            id: "Custom"
+        };
+        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
+        container.toolbarClick = function (args) {
+            switch (args.item.id) {
+                case 'Custom':
+                    //Disable image toolbar item.
+                    container.toolbar.enableItems(4, false);
+                    break;
+            }
+        };
+    }
+
+    function onWrapText(text) {
+        let content = '';
+        const index = text.lastIndexOf(' ');
+
+        if (index !== -1) {
+            content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
+        } else {
+            content = text;
+        }
+
+        return content;
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/razor
new file mode 100644
index 000000000..c4bae28fa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/razor
@@ -0,0 +1,19 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableFontDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    var containerPanel;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Font Dialog
+            documenteditor.showDialog('Font');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/tagHelper
new file mode 100644
index 000000000..9b238b940
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/dialog/tagHelper
@@ -0,0 +1,19 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableFontDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    var containerPanel;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Font Dialog
+            documenteditor.showDialog('Font');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/razor
new file mode 100644
index 000000000..e93bcbab8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/razor
@@ -0,0 +1,14 @@
+@Html.EJS().Button("InsertEndnote").Content("Insert Endnote").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+    });    
+    document.getElementById('InsertEndnote').addEventListener('click', function () {
+        documenteditor.editor.insertEndnote();
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/tagHelper
new file mode 100644
index 000000000..4f2fee1e5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/endnote/tagHelper
@@ -0,0 +1,14 @@
+<ejs-button id="InsertEndnote">Insert Endnote</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+    });    
+    document.getElementById('InsertEndnote').addEventListener('click', function () {
+        documenteditor.editor.insertEndnote();
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/razor
new file mode 100644
index 000000000..902064992
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor">
+    @Html.EJS().DocumentEditor("container").EnableSfdtExport(true).EnableWordExport(true).EnableTextExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    documenteditor = documenteditorElement.ej2_instances[0];
+    documenteditor.resize();
+    documenteditor.open(sfdt);
+    document.getElementById('export').addEventListener('click', function () {
+        documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
+            // The blob can be processed further
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/tagHelper
new file mode 100644
index 000000000..a45ce455d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-blob/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor">
+    <ejs-documenteditor enableSfdtExport=true enableWordExport=true exnableTextExport=true id="container"></ejs-documenteditor>    
+</div>
+
+<script>
+    var documenteditor;
+    documenteditor = documenteditorElement.ej2_instances[0];
+    documenteditor.resize();
+    documenteditor.open(sfdt);
+    document.getElementById('export').addEventListener('click', function () {
+        documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
+            // The blob can be processed further
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/razor
new file mode 100644
index 000000000..4d2cfd49b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableWordExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            documenteditor.save('sample', 'Docx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/tagHelper
new file mode 100644
index 000000000..a098d487a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-docx/tagHelper
@@ -0,0 +1,15 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableWordExprot=true id="container"></ejs-documenteditor>    
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            documenteditor.save('sample', 'Docx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/razor
new file mode 100644
index 000000000..b8e5c7cb0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableWordExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            documenteditor.save('sample', 'Dotx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/tagHelper
new file mode 100644
index 000000000..702ece0b3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-dotx/tagHelper
@@ -0,0 +1,15 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableWordExprot=true id="container"></ejs-documenteditor>    
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            documenteditor.save('sample', 'Dotx');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/razor
new file mode 100644
index 000000000..a54fda141
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/razor
@@ -0,0 +1,53 @@
+document.getElementById('export').addEventListener('click', () => {
+    documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
+        // The blob can be processed further
+        var formData = new FormData();
+        formData.append('fileName', 'sample.docx');
+        formData.append('data', exportedDocument);
+        saveAsRtf(formData);
+    });
+});
+
+function saveAsRtf(formData) {
+    var httpRequest = new XMLHttpRequest();
+    httpRequest.open('POST', '/api/DocumentEditor/ExportAsRtf', true);
+    httpRequest.onreadystatechange = function () {
+        if (httpRequest.readyState === 4) {
+            if (httpRequest.status === 200 || httpRequest.status === 304) {
+                if (!(!navigator.msSaveBlob)) {
+                    navigator.msSaveBlob(httpRequest.response, 'sample.rtf');
+                } else {
+                    var downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
+                    download('sample.rtf', 'rtf', httpRequest.response, downloadLink, 'download' in downloadLink);
+                }
+            } else {
+                console.error(httpRequest.response);
+            }
+        }
+    }
+    httpRequest.responseType = 'blob';
+    httpRequest.send(formData);
+}
+
+function download(fileName, extension, buffer, downloadLink, hasDownloadAttribute) {
+    if (hasDownloadAttribute) {
+        downloadLink.download = fileName;
+        var dataUrl = window.URL.createObjectURL(buffer);
+        downloadLink.href = dataUrl;
+        var event = document.createEvent('MouseEvent');
+        event.initEvent('click', true, true);
+        downloadLink.dispatchEvent(event);
+        setTimeout(function () {
+            window.URL.revokeObjectURL(dataUrl);
+            dataUrl = undefined;
+        });
+    } else {
+        if (extension !== 'docx' && extension !== 'xlsx') {
+            var url = window.URL.createObjectURL(buffer);
+            var isPopupBlocked = window.open(url, '_blank');
+            if (!isPopupBlocked) {
+                window.location.href = url;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/tagHelper
new file mode 100644
index 000000000..a54fda141
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-rtf/tagHelper
@@ -0,0 +1,53 @@
+document.getElementById('export').addEventListener('click', () => {
+    documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
+        // The blob can be processed further
+        var formData = new FormData();
+        formData.append('fileName', 'sample.docx');
+        formData.append('data', exportedDocument);
+        saveAsRtf(formData);
+    });
+});
+
+function saveAsRtf(formData) {
+    var httpRequest = new XMLHttpRequest();
+    httpRequest.open('POST', '/api/DocumentEditor/ExportAsRtf', true);
+    httpRequest.onreadystatechange = function () {
+        if (httpRequest.readyState === 4) {
+            if (httpRequest.status === 200 || httpRequest.status === 304) {
+                if (!(!navigator.msSaveBlob)) {
+                    navigator.msSaveBlob(httpRequest.response, 'sample.rtf');
+                } else {
+                    var downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
+                    download('sample.rtf', 'rtf', httpRequest.response, downloadLink, 'download' in downloadLink);
+                }
+            } else {
+                console.error(httpRequest.response);
+            }
+        }
+    }
+    httpRequest.responseType = 'blob';
+    httpRequest.send(formData);
+}
+
+function download(fileName, extension, buffer, downloadLink, hasDownloadAttribute) {
+    if (hasDownloadAttribute) {
+        downloadLink.download = fileName;
+        var dataUrl = window.URL.createObjectURL(buffer);
+        downloadLink.href = dataUrl;
+        var event = document.createEvent('MouseEvent');
+        event.initEvent('click', true, true);
+        downloadLink.dispatchEvent(event);
+        setTimeout(function () {
+            window.URL.revokeObjectURL(dataUrl);
+            dataUrl = undefined;
+        });
+    } else {
+        if (extension !== 'docx' && extension !== 'xlsx') {
+            var url = window.URL.createObjectURL(buffer);
+            var isPopupBlocked = window.open(url, '_blank');
+            if (!isPopupBlocked) {
+                window.location.href = url;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/razor
new file mode 100644
index 000000000..f75b14456
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            documenteditor.save('sample', 'Sfdt');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/tagHelper
new file mode 100644
index 000000000..a7c00afce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-sfdt/tagHelper
@@ -0,0 +1,18 @@
+
+
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="container"></ejs-documenteditor>    
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            documenteditor.save('sample', 'Sfdt');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/razor
new file mode 100644
index 000000000..8ddab34ff
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableTextExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            documenteditor.save('sample', 'Txt');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/tagHelper
new file mode 100644
index 000000000..35831a917
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/export-txt/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableTextExport=true id="container"></ejs-documenteditor>    
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            documenteditor.save('sample', 'Txt');
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/razor
new file mode 100644
index 000000000..57b04855b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/razor
@@ -0,0 +1,44 @@
+@Html.EJS().Button("replace_all").Content("Replace All").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSearch(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var sfdt = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+        documenteditor.open(JSON.stringify(sfdt));
+
+        document.getElementById('replace_all').addEventListener('click', function () {
+            var textToFind = document.getElementById('find_text').value;
+            var textToReplace = document.getElementById('replace_text').value;
+            if (textToFind !== '') {
+                // Find all the occurences of given text
+                documenteditor.searchModule.findAll(textToFind);
+                if (documenteditor.searchModule.searchResults.length > 0) {
+                    // Replace all the occurences of given text
+                    documenteditor.searchModule.searchResults.replaceAll(textToReplace);
+                }
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/tagHelper
new file mode 100644
index 000000000..a7de4d0b8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/find-replace/tagHelper
@@ -0,0 +1,44 @@
+<ejs-button id="replace_all">Replace All</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSearch=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var sfdt = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+        documenteditor.open(JSON.stringify(sfdt));
+
+        document.getElementById('replace_all').addEventListener('click', function () {
+            var textToFind = document.getElementById('find_text').value;
+            var textToReplace = document.getElementById('replace_text').value;
+            if (textToFind !== '') {
+                // Find all the occurences of given text
+                documenteditor.searchModule.findAll(textToFind);
+                if (documenteditor.searchModule.searchResults.length > 0) {
+                    // Replace all the occurences of given text
+                    documenteditor.searchModule.searchResults.replaceAll(textToReplace);
+                }
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/razor
new file mode 100644
index 000000000..01a44a248
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/razor
@@ -0,0 +1,14 @@
+@Html.EJS().Button("insertFootnote").Content("insert Footnote").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+    });    
+    document.getElementById('insertFootnote').addEventListener('click', function () {
+        documenteditor.editor.insertFootnote();
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/tagHelper
new file mode 100644
index 000000000..8cfd9502d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/footnote/tagHelper
@@ -0,0 +1,14 @@
+<ejs-button id="insertFootnote">insert Footnote</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+    });    
+    document.getElementById('insertFootnote').addEventListener('click', function () {
+        documenteditor.editor.insertFootnote();
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/razor
new file mode 100644
index 000000000..dee1068e4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/razor
@@ -0,0 +1 @@
+@Html.EJS().DocumentEditor("container").Render()
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/tagHelper
new file mode 100644
index 000000000..c5baca38d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/getting-started/tagHelper
@@ -0,0 +1 @@
+<ejs-documenteditor id="container"></ejs-documenteditor>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/razor
new file mode 100644
index 000000000..a6bc5b3fb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/razor
@@ -0,0 +1,13 @@
+<div>
+    @Html.EJS().DocumentEditor("container").Created("onCreate").IsReadOnly(false).DocumentEditorSettings("settings").Render()
+</div>
+
+<script>
+    var container;
+    var settings = { showNavigationPane: true };
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.enableAllModules();
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/tagHelper
new file mode 100644
index 000000000..c06816b4c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/heading-navigation/tagHelper
@@ -0,0 +1,13 @@
+<ejs-documenteditor id="container">
+    <ejs-documenteditorcontainerevent (created)="onCreate()" documentEditorSettings="settings" isReadOnly=false></ejs-documenteditorcontainerevent>
+</ejs-documenteditor>
+
+<script>
+    var container;
+    var settings = { showNavigationPane: true };
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.enableAllModules();
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/razor
new file mode 100644
index 000000000..93b7d599b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/razor
@@ -0,0 +1,9 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.enableEditorHistory = true;
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/tagHelper
new file mode 100644
index 000000000..d817cbb01
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/history/tagHelper
@@ -0,0 +1,9 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.enableEditorHistory = true;
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/razor
new file mode 100644
index 000000000..6462f30a7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/razor
@@ -0,0 +1,15 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableHyperlinkDialog(true).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+    });
+    //Click the Dialog button, the hyperlink dialog will open
+    document.getElementById('dialog').addEventListener('click', function () {
+        documenteditor.showDialog('Hyperlink');
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/tagHelper
new file mode 100644
index 000000000..1c616f1d1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-dialog/tagHelper
@@ -0,0 +1,15 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableHyperlinkDialog=true id="DocumentEditor"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+    });
+    //Click the Dialog button, the hyperlink dialog will open
+    document.getElementById('dialog').addEventListener('click', function () {
+        documenteditor.showDialog('Hyperlink');
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/razor
new file mode 100644
index 000000000..bfa8c7fc2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/razor
@@ -0,0 +1,20 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.requestNavigate = function (args) {
+            if (args.linkType !== 'Bookmark') {
+                var link = args.navigationLink;
+                if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                }
+                window.open(link);
+                args.isHandled = true;
+            }
+        };
+    });    
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/tagHelper
new file mode 100644
index 000000000..649d59901
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink-edit/tagHelper
@@ -0,0 +1,20 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>    
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.requestNavigate = function (args) {
+            if (args.linkType !== 'Bookmark') {
+                var link = args.navigationLink;
+                if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                }
+                window.open(link);
+                args.isHandled = true;
+            }
+        };
+    });    
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/razor
new file mode 100644
index 000000000..c47ff4bda
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/razor
@@ -0,0 +1,20 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.requestNavigate = function (args) {
+            if (args.linkType !== 'Bookmark') {
+                var link = args.navigationLink;
+                if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                }
+                window.open(link);
+                args.isHandled = true;
+            }
+        };
+    });    
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/tagHelper
new file mode 100644
index 000000000..898a5e402
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/hyperlink/tagHelper
@@ -0,0 +1,20 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>    
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.requestNavigate = function (args) {
+            if (args.linkType !== 'Bookmark') {
+                var link = args.navigationLink;
+                if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                }
+                window.open(link);
+                args.isHandled = true;
+            }
+        };
+    });    
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/razor
new file mode 100644
index 000000000..759222ea6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/razor
@@ -0,0 +1,42 @@
+<input type="file" id="insertImageButton" style="position:fixed; left:-110em" accept=".jpg,.jpeg,.png,.bmp" /> @Html.EJS().Button("insert_picture").Content("Image").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableImageResizer(true).EnableEditorHistory(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        document.getElementById('insert-picture').addEventListener('click', function () {
+            var pictureUpload = document.getElementById("insertImageButton");
+            pictureUpload.value = '';
+            pictureUpload.click();
+        });
+        document.getElementById('insertImageButton').addEventListener('change', onInsertImage);
+        function onInsertImage(args) {
+            if (navigator.userAgent.match('Chrome') || navigator.userAgent.match('Firefox') || navigator.userAgent.match('Edge') || navigator.userAgent.match('MSIE') || navigator.userAgent.match('.NET')) {
+                if (args.target.files[0]) {
+                    var path = args.target.files[0];
+                    var reader = new FileReader();
+                    reader.onload = function (frEvent) {
+                        var base64String = frEvent.target.result;
+                        var image = document.createElement('img');
+                        image.addEventListener('load', function () {
+                            documenteditor.editor.insertImage(base64String, this.width, this.height);
+                        })
+                        image.src = base64String;
+                    };
+                    reader.readAsDataURL(path);
+                }
+                //Safari does not Support FileReader Class
+            } else {
+                var image = document.createElement('img');
+                image.addEventListener('load', function () {
+                    documenteditor.editor.insertImage(args.target.value);
+                })
+                image.src = args.target.value;
+            }
+        }
+
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/tagHelper
new file mode 100644
index 000000000..2edf182c2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/image/tagHelper
@@ -0,0 +1,43 @@
+<input type="file" id="insertImageButton" style="position:fixed; left:-110em" accept=".jpg,.jpeg,.png,.bmp" />
+<ejs-button id="insert_picture">Image</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableImageResizer=true enableEditorHistory=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        document.getElementById('insert-picture').addEventListener('click', function () {
+            var pictureUpload = document.getElementById("insertImageButton");
+            pictureUpload.value = '';
+            pictureUpload.click();
+        });
+        document.getElementById('insertImageButton').addEventListener('change', onInsertImage);
+        function onInsertImage(args) {
+            if (navigator.userAgent.match('Chrome') || navigator.userAgent.match('Firefox') || navigator.userAgent.match('Edge') || navigator.userAgent.match('MSIE') || navigator.userAgent.match('.NET')) {
+                if (args.target.files[0]) {
+                    var path = args.target.files[0];
+                    var reader = new FileReader();
+                    reader.onload = function (frEvent) {
+                        var base64String = frEvent.target.result;
+                        var image = document.createElement('img');
+                        image.addEventListener('load', function () {
+                            documenteditor.editor.insertImage(base64String, this.width, this.height);
+                        })
+                        image.src = base64String;
+                    };
+                    reader.readAsDataURL(path);
+                }
+                //Safari does not Support FileReader Class
+            } else {
+                var image = document.createElement('img');
+                image.addEventListener('load', function () {
+                    documenteditor.editor.insertImage(args.target.value);
+                })
+                image.src = args.target.value;
+            }
+        }
+
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/razor
new file mode 100644
index 000000000..d4a0152d8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/razor
@@ -0,0 +1,40 @@
+<input type="file" id="file_upload" style="position:fixed; left:-100em" /> 
+@Html.EJS().Button("import").Content("Import").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('file_upload').setAttribute('accept', '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt');
+
+        document.getElementById('file_upload').addEventListener("change", function (e) {
+            if (e.target.files[0]) {
+                var file = e.target.files[0];
+                if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {
+                    loadFile(file);
+                }
+            }
+        });
+
+        function loadFile(file) {
+            var ajax = new XMLHttpRequest();
+            ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true);
+            ajax.onreadystatechange = function () {
+                if (ajax.readyState === 4) {
+                    if (ajax.status === 200 || ajax.status === 304) {
+                        // open SFDT text in document editor
+                        documenteditor.open(ajax.responseText);
+                    }
+                }
+            }
+            var formData = new FormData();
+            formData.append('files', file);
+            ajax.send(formData);
+        }
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/tagHelper
new file mode 100644
index 000000000..b63f06cba
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-docx/tagHelper
@@ -0,0 +1,40 @@
+<input type="file" id="file_upload" accept=".sfdt" style="position:fixed; left:-100em" /> 
+<ejs-button id="import">Import</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById('file_upload').setAttribute('accept', '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt');
+
+        document.getElementById('file_upload').addEventListener("change", function (e) {
+            if (e.target.files[0]) {
+                var file = e.target.files[0];
+                if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {
+                    loadFile(file);
+                }
+            }
+        });
+
+        function loadFile(file) {
+            var ajax = new XMLHttpRequest();
+            ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true);
+            ajax.onreadystatechange = function () {
+                if (ajax.readyState === 4) {
+                    if (ajax.status === 200 || ajax.status === 304) {
+                        // open SFDT text in document editor
+                        documenteditor.open(ajax.responseText);
+                    }
+                }
+            }
+            var formData = new FormData();
+            formData.append('files', file);
+            ajax.send(formData);
+        }
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/razor
new file mode 100644
index 000000000..a4c2404bd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/razor
@@ -0,0 +1,32 @@
+<input type="file" id="file_upload" accept=".sfdt" style="position:fixed; left:-100em" /> 
+@Html.EJS().Button("import").Content("Import").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById("import").addEventListener("click", function () {
+            document.getElementById('file_upload').click();
+        });
+
+        document.getElementById('file_upload').addEventListener("change", function (e) {
+            if (e.target.files[0]) {
+                var file = e.target.files[0];
+                if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+                    var fileReader = new FileReader();
+                    fileReader.onload = function (e) {
+                        var contents = e.target.result;
+                        documenteditor.open(contents);
+                    };
+                    fileReader.readAsText(file);
+                    documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
+                }
+            }
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/tagHelper
new file mode 100644
index 000000000..09ee8689f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import-sfdt/tagHelper
@@ -0,0 +1,32 @@
+<input type="file" id="file_upload" accept=".sfdt" style="position:fixed; left:-100em" /> 
+<ejs-button id="import">Import</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        document.getElementById("import").addEventListener("click", function () {
+            document.getElementById('file_upload').click();
+        });
+
+        document.getElementById('file_upload').addEventListener("change", function (e) {
+            if (e.target.files[0]) {
+                var file = e.target.files[0];
+                if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+                    var fileReader = new FileReader();
+                    fileReader.onload = function (e) {
+                        var contents = e.target.result;
+                        documenteditor.open(contents);
+                    };
+                    fileReader.readAsText(file);
+                    documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
+                }
+            }
+        });
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/razor
new file mode 100644
index 000000000..f47a01a8c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/razor
@@ -0,0 +1,32 @@
+@Html.EJS().DocumentEditor("container").Render()
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var sfdt = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Hello World"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {
+                    }
+                }
+            ]
+        };
+
+        documenteditor.open(JSON.stringify(sfdt));
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/tagHelper
new file mode 100644
index 000000000..3fca090ba
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/import/tagHelper
@@ -0,0 +1,32 @@
+<ejs-documenteditor id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var sfdt = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Hello World"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {
+                    }
+                }
+            ]
+        };
+
+        documenteditor.open(JSON.stringify(sfdt));
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/razor
new file mode 100644
index 000000000..dd5d444a4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/razor
@@ -0,0 +1,23 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
+</div>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement;
+        var container;
+        documenteditor = document.getElementById('container');
+        container = documenteditor.ej2_instances[0];
+        container.documentEditor.requestNavigate = function (args) {
+            if (args.linkType !== 'Bookmark') {
+                var link = args.navigationLink;
+                if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                }
+                window.open(link);
+                args.isHandled = true;
+            }
+        };
+
+    });
+
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/tagHelper
new file mode 100644
index 000000000..2349603d3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/link/tagHelper
@@ -0,0 +1,24 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" enableToolbar=true height="590px">
+    </ejs-documenteditorcontainer>
+</div>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement;
+        var container;
+        documenteditor = document.getElementById('container');
+        container = documenteditor.ej2_instances[0];
+        container.documentEditor.requestNavigate = function (args) {
+            if (args.linkType !== 'Bookmark') {
+                var link = args.navigationLink;
+                if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                }
+                window.open(link);
+                args.isHandled = true;
+            }
+        };
+
+    });
+
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/razor
new file mode 100644
index 000000000..5a6a13252
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/razor
@@ -0,0 +1,32 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var styleJson = {
+                "type": "Paragraph",
+                "name": "New Linked",
+                "basedOn": "Normal",
+                "next": "Normal",
+                "link": "New Linked Char",
+                "characterFormat": {
+                        "fontSize": 16.0,
+                        "fontFamily": "Calibri Light",
+                        "fontColor": "#2F5496"
+                },
+                "paragraphFormat": {
+                        "leftIndent": 0.0,
+                        "rightIndent": 0.0,
+                        "firstLineIndent": 0.0,
+                        "beforeSpacing": 12.0,
+                        "afterSpacing": 0.0,
+                        "lineSpacing": 1.0791666507720947,
+                        "lineSpacingType": "Multiple",
+                        "textAlignment": "Left",
+                        "outlineLevel": "Level1"
+                }
+        };
+        documentEditor.editor.createStyle(JSON.stringify(styleJson));
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/tagHelper
new file mode 100644
index 000000000..94a7d8f9f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/linked-style/tagHelper
@@ -0,0 +1,32 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var styleJson = {
+                "type": "Paragraph",
+                "name": "New Linked",
+                "basedOn": "Normal",
+                "next": "Normal",
+                "link": "New Linked Char",
+                "characterFormat": {
+                        "fontSize": 16.0,
+                        "fontFamily": "Calibri Light",
+                        "fontColor": "#2F5496"
+                },
+                "paragraphFormat": {
+                        "leftIndent": 0.0,
+                        "rightIndent": 0.0,
+                        "firstLineIndent": 0.0,
+                        "beforeSpacing": 12.0,
+                        "afterSpacing": 0.0,
+                        "lineSpacing": 1.0791666507720947,
+                        "lineSpacingType": "Multiple",
+                        "textAlignment": "Left",
+                        "outlineLevel": "Level1"
+                }
+        };
+        documentEditor.editor.createStyle(JSON.stringify(styleJson));
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/razor
new file mode 100644
index 000000000..84cadbc34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableListDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor =  document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open List Dialog
+            documenteditor.showDialog('List');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/tagHelper
new file mode 100644
index 000000000..4386b2fb6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list-dialog/tagHelper
@@ -0,0 +1,15 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableListDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor =  document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open List Dialog
+            documenteditor.showDialog('List');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/razor
new file mode 100644
index 000000000..9e4ebf8e6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/razor
@@ -0,0 +1,33 @@
+@Html.EJS().Toolbar("defaultToolbar").Items(new List<ToolbarItem> {
+    new ToolbarItem { PrefixIcon = "e-de-icon-Bullets",Id="Bullets", TooltipText = "Bullets" },
+    new ToolbarItem { PrefixIcon = "e-de-icon-Numbering",Id="Numbering", TooltipText = "Numbering" },
+    new ToolbarItem { Text = "Clear",Id="clearlist", TooltipText = "Clear List" }}).Clicked("toolbarAction").Render()
+<div id="documenteditor">
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableEditorHistory(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.resize();
+        updateContainerSize();
+
+        function toolbarAction(args) {
+            switch (args.item.id) {
+                case 'Bullets':
+                    //To create bullet list
+                    documenteditor.editor.applyBullet('\uf0b7', 'Symbol');
+                    break;
+                case 'Numbering':
+                    //To create numbering list
+                    documenteditor.editor.applyNumbering('%1)', 'UpRoman');
+                    break;
+                case 'clearlist':
+                    //To clear list
+                    documenteditor.editor.clearList();
+                    break;
+            }
+        };
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/tagHelper
new file mode 100644
index 000000000..73a4da422
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/list/tagHelper
@@ -0,0 +1,38 @@
+<div id="toolbar">
+    <ejs-toolbar clicked="toolbarAction">
+        <e-toolbar-items>
+            <e-toolbar-item prefixIcon=" e-de-icon-Bullets " id="Bullets " tooltipText="Bullets "></e-toolbar-item>
+            <e-toolbar-item prefixIcon="e-de-icon-Numbering " id="Numbering " tooltipText="Numbering "></e-toolbar-item>
+            <e-toolbar-item text="Clear " tooltipText="Clear List " id="clearlist "></e-toolbar-item>
+        </e-toolbar-items>
+    </ejs-toolbar>
+</div>
+<div id="documenteditor " style="width:100%;height:100% ">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableEditor=true id="container "></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container ").ej2_instances[0];
+        documenteditor.resize();
+        updateContainerSize();
+
+        function toolbarAction(args) {
+            switch (args.item.id) {
+                case 'Bullets':
+                    //To create bullet list
+                    documenteditor.editor.applyBullet('\uf0b7', 'Symbol');
+                    break;
+                case 'Numbering':
+                    //To create numbering list
+                    documenteditor.editor.applyNumbering('%1)', 'UpRoman');
+                    break;
+                case 'clearlist':
+                    //To clear list
+                    documenteditor.editor.clearList();
+                    break;
+            }
+        };
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/razor
new file mode 100644
index 000000000..b1df6ae46
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/razor
@@ -0,0 +1,20 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePrint(true).EnableSelection(true).EnableSfdtExport(true).DocumentChange("onDocumentChange").Render()
+</div>
+<script>
+    function onDocumentChange() {
+        var container = document.getElementById("container").ej2_instances[0];
+        //To detect the device
+        var isMobileDevice = /Android|Windows Phone|webOS/i.test(navigator.userAgent);
+
+        if (isMobileDevice) {
+            container.restrictEditing = true;
+            setTimeout(() => {
+                container.documentEditor.fitPage("FitPageWidth");
+            }, 50);
+        }
+        else {
+            container.restrictEditing = false;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/tagHelper
new file mode 100644
index 000000000..6266437b6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/mobile-view/tagHelper
@@ -0,0 +1,19 @@
+<ejs-documenteditorcontainer id="container" enableToolbar=true documentChange="onDocumentChange" height="590px">
+</ejs-documenteditorcontainer>
+<script>
+    function onDocumentChange() {
+        var container = document.getElementById("container").ej2_instances[0];
+        //To detect the device
+        var isMobileDevice = /Android|Windows Phone|webOS/i.test(navigator.userAgent);
+
+        if (isMobileDevice) {
+            container.restrictEditing = true;
+            setTimeout(() => {
+                container.documentEditor.fitPage("FitPageWidth");
+            }, 50);
+        }
+        else {
+            container.restrictEditing = false;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/razor
new file mode 100644
index 000000000..2ef86d06a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/razor
@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditor("container").Created("onCreate").Render()
+
+<script>
+    var container;
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        var sfdt = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] };
+        // open the default document.
+        container.open(JSON.stringify(sfdt));
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/tagHelper
new file mode 100644
index 000000000..3b698f085
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/open-default-document/tagHelper
@@ -0,0 +1,14 @@
+<ejs-documenteditor id="container">
+    <ejs-documenteditorcontainerevent (created)="onCreate()"></ejs-documenteditorcontainerevent>
+</ejs-documenteditor>
+
+<script>
+    var container;
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        var sfdt = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] };
+        // open the default document.
+        container.open(JSON.stringify(sfdt));
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/razor
new file mode 100644
index 000000000..4dc8d0ec2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/razor
@@ -0,0 +1,13 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
+<script>
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.documentEditorSetting = {
+            optimizeSfdt: false
+        };
+    }
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/razorOld b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/razorOld
new file mode 100644
index 000000000..c0548a34e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/razorOld
@@ -0,0 +1,3 @@
+<div>
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+</div>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/tagHelper
new file mode 100644
index 000000000..f1c1115a9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/tagHelper
@@ -0,0 +1,14 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.documentEditorSetting = {
+            optimizeSfdt: false
+        };
+    }
+</script>
+
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/tagHelperOld b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/tagHelperOld
new file mode 100644
index 000000000..d9d7dd16b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimize-sfdt/tagHelperOld
@@ -0,0 +1,2 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/razor
new file mode 100644
index 000000000..d5ac5f65f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/razor
@@ -0,0 +1,8 @@
+
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePrint(true).EnableSelection(true).EnableSfdtExport(true).DocumentEditorSettings("settings").Render()
+</div>
+
+<script>
+    var settings = { enableOptimizedTextMeasuring: false };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/tagHelper
new file mode 100644
index 000000000..9f2dd7f1d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/optimized-text/tagHelper
@@ -0,0 +1,6 @@
+<div>
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePageSetupDialog=true enableSfdtExport=true id="container" documentEditorSettings="settings"></ejs-documenteditor>
+</div>
+<script>
+    var settings = { enableOptimizedTextMeasuring: false };
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/razor
new file mode 100644
index 000000000..901ad139f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/razor
@@ -0,0 +1,35 @@
+@Html.EJS().Button("showhidepane").Content("Show hide pane").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").EnableSelection(true).EnableSearch(true).IsReadOnly(false).EnableEditor(true).EnableOptionsPane(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var sfdt = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+        documenteditor.open(JSON.stringify(sfdt));
+
+        document.getElementById('showhidepane').addEventListener('click', function () {
+            documenteditor.showOptionsPane();
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/tagHelper
new file mode 100644
index 000000000..85bef5ff9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/options-pane/tagHelper
@@ -0,0 +1,35 @@
+<ejs-button id="showhidepane">Show hide pane</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSearch=true enableOptionsPane=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var sfdt = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+        documenteditor.open(JSON.stringify(sfdt));
+
+        document.getElementById('showhidepane').addEventListener('click', function () {
+            documenteditor.showOptionsPane();
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/override/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/override/razor
new file mode 100644
index 000000000..517c2e629
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/override/razor
@@ -0,0 +1,25 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableWordExport(true).enableSfdtExport(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documentEditor.keyDown = function (args) {
+            var keyCode = args.event.which || args.event.keyCode;
+
+            var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+            var isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+            // 83 is the character code for 'S'
+            if (isCtrlKey && !isAltKey && keyCode === 83) {
+                //To prevent default save operation, set the isHandled property to true
+                args.isHandled = true;
+                documentEditor.save('sample', 'Docx');
+                args.event.preventDefault();
+            } else if (isCtrlKey && isAltKey && keyCode === 83) {
+                documentEditor.save('sample', 'Sfdt');
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/override/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/override/tagHelper
new file mode 100644
index 000000000..f3b3e3384
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/override/tagHelper
@@ -0,0 +1,25 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableWordExport=true enableSfdtExport=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documentEditor.keyDown = function (args) {
+            var keyCode = args.event.which || args.event.keyCode;
+
+            var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+            var isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+            // 83 is the character code for 'S'
+            if (isCtrlKey && !isAltKey && keyCode === 83) {
+                //To prevent default save operation, set the isHandled property to true
+                args.isHandled = true;
+                documentEditor.save('sample', 'Docx');
+                args.event.preventDefault();
+            } else if (isCtrlKey && isAltKey && keyCode === 83) {
+                documentEditor.save('sample', 'Sfdt');
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/razor
new file mode 100644
index 000000000..421630607
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/razor
@@ -0,0 +1,14 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePageSetupDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open PageSetup Dialog
+            documenteditor.showDialog('PageSetup');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/tagHelper
new file mode 100644
index 000000000..37b5ecdd3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/page-setup-dialog/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePageSetupDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open PageSetup Dialog
+            documenteditor.showDialog('PageSetup');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/razor
new file mode 100644
index 000000000..0b7cbf3ee
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/razor
@@ -0,0 +1,19 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableParagraphDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    var containerPanel;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Paragraph Dialog
+            documenteditor.showDialog('Paragraph');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/tagHelper
new file mode 100644
index 000000000..b6eba33ba
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-dialog/tagHelper
@@ -0,0 +1,19 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableParagraphDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    var containerPanel;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Paragraph Dialog
+            documenteditor.showDialog('Paragraph');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/razor
new file mode 100644
index 000000000..dcc9af285
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/razor
@@ -0,0 +1,182 @@
+<div id="toolbar"></div>
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableContextMenu(true).EnableEditorHistory(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.resize();
+        updateContainerSize();
+
+        function toolbarButtonClick(arg) {
+            switch (arg.item.id) {
+                case 'AlignLeft':
+                    //Toggle the Left alignment for selected or current paragraph
+                    documenteditor.editor.toggleTextAlignment('Left');
+                    break;
+                case 'AlignRight':
+                    //Toggle the Right alignment for selected or current paragraph
+                    documenteditor.editor.toggleTextAlignment('Right');
+                    break;
+                case 'AlignCenter':
+                    //Toggle the Center alignment for selected or current paragraph
+                    documenteditor.editor.toggleTextAlignment('Center');
+                    break;
+                case 'Justify':
+                    //Toggle the Justify alignment for selected or current paragraph
+                    documenteditor.editor.toggleTextAlignment('Justify');
+                    break;
+                case 'IncreaseIndent':
+                    //Increase the left indent of selected or current paragraph
+                    documenteditor.editor.increaseIndent();
+                    break;
+                case 'DecreaseIndent':
+                    //Decrease the left indent of selected or current paragraph
+                    documenteditor.editor.decreaseIndent();
+                    break;
+                case 'ClearFormat':
+                    documenteditor.editor.clearFormatting();
+                    break;
+                case 'ShowParagraphMark':
+                    //Show or hide the hidden characters like spaces, tab, paragraph marks, and breaks.
+                    documenteditor.documentEditorSettings.showHiddenMarks = !documenteditor.documentEditorSettings.showHiddenMarks;
+                    break;
+            }
+        }
+        //Change the line spacing of selected or current paragraph
+        function lineSpacingAction(args) {
+            var text = args.item.text;
+            switch (text) {
+                case 'Single':
+                    documenteditor.selection.paragraphFormat.lineSpacing = 1;
+                    break;
+                case '1.15':
+                    documenteditor.selection.paragraphFormat.lineSpacing = 1.15;
+                    break;
+                case '1.5':
+                    documenteditor.selection.paragraphFormat.lineSpacing = 1.5;
+                    break;
+                case 'Double':
+                    documenteditor.selection.paragraphFormat.lineSpacing = 2;
+                    break;
+            }
+            setTimeout(function () {
+                documenteditor.focusIn();
+            }, 30);
+        }
+        documenteditor.selectionChange = function () {
+            setTimeout(function () {
+                onSelectionChange();
+            }, 20);
+        };
+        // Selection change to retrieve formatting
+        function onSelectionChange() {
+            if (documenteditor.selection) {
+                var paragraphFormat = documenteditor.selection.paragraphFormat;
+                var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify', 'ShowParagraphMark'];
+                for (var i = 0; i < toggleBtnId.length; i++) {
+                    var toggleBtn = document.getElementById(
+                        toggleBtnId[i]
+                    );
+                    toggleBtn.classList.remove('e-btn-toggle');
+                }
+                if (paragraphFormat.textAlignment === 'Left') {
+                    document.getElementById('AlignLeft').classList.add('e-btn-toggle');
+                } else if (paragraphFormat.textAlignment === 'Right') {
+                    document.getElementById('AlignRight').classList.add('e-btn-toggle');
+                } else if (paragraphFormat.textAlignment === 'Center') {
+                    document
+                        .getElementById('AlignCenter')
+                        .classList.add('e-btn-toggle');
+                } else {
+                    document.getElementById('Justify').classList.add('e-btn-toggle');
+                }
+                if(documenteditor.documentEditorSettings.showHiddenMarks) {
+                    document.getElementById('ShowParagraphMark').classList.add('e-btn-toggle');
+                }
+                // #endregion
+            }
+        }
+        //Toolbar configuration to add paragraph formatting options
+        var toolBar = new ej.navigations.Toolbar({
+            clicked: toolbarButtonClick,
+            items: [
+                {
+                    prefixIcon: 'e-de-icon-AlignLeft',
+                    tooltipText: 'Align Left',
+                    id: 'AlignLeft',
+                },
+                {
+                    prefixIcon: 'e-de-icon-AlignCenter',
+                    tooltipText: 'Align Center',
+                    id: 'AlignCenter',
+                },
+                {
+                    prefixIcon: 'e-de-icon-AlignRight',
+                    tooltipText: 'Align Right',
+                    id: 'AlignRight',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Justify',
+                    tooltipText: 'Justify',
+                    id: 'Justify',
+                },
+                {
+                    prefixIcon: 'e-de-icon-IncreaseIndent',
+                    tooltipText: 'Increase Indent',
+                    id: 'IncreaseIndent',
+                },
+                {
+                    prefixIcon: 'e-de-icon-DecreaseIndent',
+                    tooltipText: 'Decrease Indent',
+                    id: 'DecreaseIndent',
+                },
+                { type: 'Seperator' },
+                {
+                    id: 'lineSpacing',
+                }, {
+                    prefixIcon: 'e-de-icon-ClearAll',
+                    tooltipText: 'ClearFormatting',
+                    id: 'ClearFormat',
+                },
+                { type: 'Seperator' },
+                {
+                    prefixIcon: 'e-de-e-paragraph-mark e-icons',
+                    tooltipText: 'Show the hidden characters like spaces, tab, paragraph marks, and breaks.(Ctrl + *)',
+                    id: 'ShowParagraphMark',
+                }
+            ],
+        });
+        toolBar.appendTo('#toolbar');
+        var items = [
+            {
+                text: 'Single',
+            },
+            {
+                text: '1.15',
+            },
+            {
+                text: '1.5',
+            },
+            {
+                text: 'Double',
+            },
+        ];
+        var dropdown = new ejs.splitbuttons.DropDownButton({
+            items: items,
+            iconCss: 'e-de-icon-LineSpacing',
+            select: lineSpacingAction,
+        });
+        dropdown.appendTo('#lineSpacing');
+
+    });
+</script>
+
+<style>
+    #container {
+        width: 100%;
+        height: 100%
+    }
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/tagHelper
new file mode 100644
index 000000000..40e2f339e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-format/tagHelper
@@ -0,0 +1,182 @@
+<div id="toolbar"></div>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableEditorHistory=true enableSfdtExport=true enableContextMenu=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.resize();
+        updateContainerSize();
+
+        function toolbarButtonClick(arg) {
+            switch (arg.item.id) {
+                case 'AlignLeft':
+                    //Toggle the Left alignment for selected or current paragraph
+                    documenteditor.editor.toggleTextAlignment('Left');
+                    break;
+                case 'AlignRight':
+                    //Toggle the Right alignment for selected or current paragraph
+                    documenteditor.editor.toggleTextAlignment('Right');
+                    break;
+                case 'AlignCenter':
+                    //Toggle the Center alignment for selected or current paragraph
+                    documenteditor.editor.toggleTextAlignment('Center');
+                    break;
+                case 'Justify':
+                    //Toggle the Justify alignment for selected or current paragraph
+                    documenteditor.editor.toggleTextAlignment('Justify');
+                    break;
+                case 'IncreaseIndent':
+                    //Increase the left indent of selected or current paragraph
+                    documenteditor.editor.increaseIndent();
+                    break;
+                case 'DecreaseIndent':
+                    //Decrease the left indent of selected or current paragraph
+                    documenteditor.editor.decreaseIndent();
+                    break;
+                case 'ClearFormat':
+                    documenteditor.editor.clearFormatting();
+                    break;
+                case 'ShowParagraphMark':
+                    //Show or hide the hidden characters like spaces, tab, paragraph marks, and breaks.
+                    documenteditor.documentEditorSettings.showHiddenMarks = !documenteditor.documentEditorSettings.showHiddenMarks;
+                    break;
+            }
+        }
+        //Change the line spacing of selected or current paragraph
+        function lineSpacingAction(args) {
+            var text = args.item.text;
+            switch (text) {
+                case 'Single':
+                    documenteditor.selection.paragraphFormat.lineSpacing = 1;
+                    break;
+                case '1.15':
+                    documenteditor.selection.paragraphFormat.lineSpacing = 1.15;
+                    break;
+                case '1.5':
+                    documenteditor.selection.paragraphFormat.lineSpacing = 1.5;
+                    break;
+                case 'Double':
+                    documenteditor.selection.paragraphFormat.lineSpacing = 2;
+                    break;
+            }
+            setTimeout(function () {
+                documenteditor.focusIn();
+            }, 30);
+        }
+        documenteditor.selectionChange = function () {
+            setTimeout(function () {
+                onSelectionChange();
+            }, 20);
+        };
+        // Selection change to retrieve formatting
+        function onSelectionChange() {
+            if (documenteditor.selection) {
+                var paragraphFormat = documenteditor.selection.paragraphFormat;
+                var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify', 'ShowParagraphMark'];
+                for (var i = 0; i < toggleBtnId.length; i++) {
+                    var toggleBtn = document.getElementById(
+                        toggleBtnId[i]
+                    );
+                    toggleBtn.classList.remove('e-btn-toggle');
+                }
+                if (paragraphFormat.textAlignment === 'Left') {
+                    document.getElementById('AlignLeft').classList.add('e-btn-toggle');
+                } else if (paragraphFormat.textAlignment === 'Right') {
+                    document.getElementById('AlignRight').classList.add('e-btn-toggle');
+                } else if (paragraphFormat.textAlignment === 'Center') {
+                    document
+                        .getElementById('AlignCenter')
+                        .classList.add('e-btn-toggle');
+                } else {
+                    document.getElementById('Justify').classList.add('e-btn-toggle');
+                }
+                if(documenteditor.documentEditorSettings.showHiddenMarks) {
+                    document.getElementById('ShowParagraphMark').classList.add('e-btn-toggle');
+                }
+                // #endregion
+            }
+        }
+        //Toolbar configuration to add paragraph formatting options
+        var toolBar = new ej.navigations.Toolbar({
+            clicked: toolbarButtonClick,
+            items: [
+                {
+                    prefixIcon: 'e-de-icon-AlignLeft',
+                    tooltipText: 'Align Left',
+                    id: 'AlignLeft',
+                },
+                {
+                    prefixIcon: 'e-de-icon-AlignCenter',
+                    tooltipText: 'Align Center',
+                    id: 'AlignCenter',
+                },
+                {
+                    prefixIcon: 'e-de-icon-AlignRight',
+                    tooltipText: 'Align Right',
+                    id: 'AlignRight',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Justify',
+                    tooltipText: 'Justify',
+                    id: 'Justify',
+                },
+                {
+                    prefixIcon: 'e-de-icon-IncreaseIndent',
+                    tooltipText: 'Increase Indent',
+                    id: 'IncreaseIndent',
+                },
+                {
+                    prefixIcon: 'e-de-icon-DecreaseIndent',
+                    tooltipText: 'Decrease Indent',
+                    id: 'DecreaseIndent',
+                },
+                { type: 'Seperator' },
+                {
+                    id: 'lineSpacing',
+                }, {
+                    prefixIcon: 'e-de-icon-ClearAll',
+                    tooltipText: 'ClearFormatting',
+                    id: 'ClearFormat',
+                },
+                { type: 'Seperator' },
+                {
+                    prefixIcon: 'e-de-e-paragraph-mark e-icons',
+                    tooltipText: 'Show the hidden characters like spaces, tab, paragraph marks, and breaks.(Ctrl + *)',
+                    id: 'ShowParagraphMark',
+                }
+            ],
+        });
+        toolBar.appendTo('#toolbar');
+        var items = [
+            {
+                text: 'Single',
+            },
+            {
+                text: '1.15',
+            },
+            {
+                text: '1.5',
+            },
+            {
+                text: 'Double',
+            },
+        ];
+        var dropdown = new ejs.splitbuttons.DropDownButton({
+            items: items,
+            iconCss: 'e-de-icon-LineSpacing',
+            select: lineSpacingAction,
+        });
+        dropdown.appendTo('#lineSpacing');
+
+    });
+</script>
+
+<style>
+    #container {
+        width: 100%;
+        height: 100%
+    }
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-style/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-style/razor
new file mode 100644
index 000000000..9010a9548
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-style/razor
@@ -0,0 +1,33 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var styleJson = {
+            "type": "Paragraph",
+            "name": "New ParagraphStyle",
+            "basedOn": "Normal",
+            "characterFormat": {
+                "fontSize": 16.0,
+                "fontFamily": "Calibri Light",
+                "fontColor": "#2F5496",
+                "bold": true,
+                "italic": true,
+                "underline": "Single"
+            },
+            "paragraphFormat": {
+                "leftIndent": 0.0,
+                "rightIndent": 0.0,
+                "firstLineIndent": 0.0,
+                "beforeSpacing": 12.0,
+                "afterSpacing": 0.0,
+                "lineSpacing": 1.0791666507720947,
+                "lineSpacingType": "Multiple",
+                "textAlignment": "Left",
+                "outlineLevel": "Level1"
+            }
+        };
+        documentEditor.editor.createStyle(JSON.stringify(styleJson));
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-style/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-style/tagHelper
new file mode 100644
index 000000000..da097b8ef
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/paragraph-style/tagHelper
@@ -0,0 +1,33 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var styleJson = {
+            "type": "Paragraph",
+            "name": "New ParagraphStyle",
+            "basedOn": "Normal",
+            "characterFormat": {
+                "fontSize": 16.0,
+                "fontFamily": "Calibri Light",
+                "fontColor": "#2F5496",
+                "bold": true,
+                "italic": true,
+                "underline": "Single"
+            },
+            "paragraphFormat": {
+                "leftIndent": 0.0,
+                "rightIndent": 0.0,
+                "firstLineIndent": 0.0,
+                "beforeSpacing": 12.0,
+                "afterSpacing": 0.0,
+                "lineSpacing": 1.0791666507720947,
+                "lineSpacingType": "Multiple",
+                "textAlignment": "Left",
+                "outlineLevel": "Level1"
+            }
+        };
+        documentEditor.editor.createStyle(JSON.stringify(styleJson));
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/prevent-default/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/prevent-default/razor
new file mode 100644
index 000000000..518e59c2b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/prevent-default/razor
@@ -0,0 +1,17 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documentEditor.keyDown = function (args) {
+            var keyCode = args.event.which || args.event.keyCode;
+            var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+            //67 is the character code for 'C'
+            if (isCtrlKey && keyCode === 67) {
+                //To prevent copy operation set isHandled to true
+                args.isHandled = true;
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/prevent-default/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/prevent-default/tagHelper
new file mode 100644
index 000000000..b183013c4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/prevent-default/tagHelper
@@ -0,0 +1,17 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documentEditor.keyDown = function (args) {
+            var keyCode = args.event.which || args.event.keyCode;
+            var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+            //67 is the character code for 'C'
+            if (isCtrlKey && keyCode === 67) {
+                //To prevent copy operation set isHandled to true
+                args.isHandled = true;
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/razor
new file mode 100644
index 000000000..740b6f752
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/razor
@@ -0,0 +1,11 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePrint(true).EnableSelection(true).EnableSfdtExport(true).EnablePageSetupDialog(true).Render()
+
+<script>
+    var documenteditor;    
+        var documenteditorElement = document.getElementById("container");
+        documenteditorElement.style.height = "100%";
+        documenteditorElement.style.width = "100%";
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.showPageSetupDialog();    
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/tagHelper
new file mode 100644
index 000000000..48206d8f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-dialog/tagHelper
@@ -0,0 +1,11 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePrint=true enableSfdtExport=true enablePageSetupDialog=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;    
+        var documenteditorElement = document.getElementById("container");
+        documenteditorElement.style.height = "100%";
+        documenteditorElement.style.width = "100%";
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.showPageSetupDialog();    
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/razor
new file mode 100644
index 000000000..fc951ca8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/razor
@@ -0,0 +1,25 @@
+@Html.EJS().Button("print").Content("Print").Render()
+<div id="documenteditor">
+    @Html.EJS().DocumentEditor("DocumentEditor1").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnablePrint(true).Render()
+    @Html.EJS().DocumentEditor("DocumentEditor2").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnablePrint(true).Render()
+</div>
+
+<script>
+    var documenteditor1;
+    var documenteditor2;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor1 = document.getElementById('DocumentEditor1').ej2_instances[0];
+        documenteditor2 = document.getElementById('DocumentEditor2').ej2_instances[0];
+        documenteditor1.resize();
+        documenteditor2.resize();
+    });
+    document.getElementById('print').addEventListener('click', function () {
+
+        var sfdtData = documenteditor1.serialize();
+        documenteditor2.open(sfdtData);
+        //Set A5 paper size
+        documenteditor2.selection.sectionFormat.pageWidth = 419.55;
+        documenteditor2.selection.sectionFormat.pageHeight = 595.30;
+        documenteditor2.print();
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/tagHelper
new file mode 100644
index 000000000..273641fd0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-doc/tagHelper
@@ -0,0 +1,24 @@
+<ejs-button id="print">Print</ejs-button>
+<div id="documenteditor">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePrint=true enableSfdtExport=true id="DocumentEditor1"></ejs-documenteditor>
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePrint=true enableSfdtExport=true id="DocumentEditor2"></ejs-documenteditor>    
+</div>
+
+<script>
+    var documenteditor1;
+    var documenteditor2;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor1 = document.getElementById('DocumentEditor1').ej2_instances[0];
+        documenteditor2 = document.getElementById('DocumentEditor2').ej2_instances[0];
+        documenteditor1.resize();
+        documenteditor2.resize();
+    });
+    document.getElementById('print').addEventListener('click', function () {
+        var sfdtData = documenteditor1.serialize();
+        documenteditor2.open(sfdtData);
+        //Set A5 paper size
+        documenteditor2.selection.sectionFormat.pageWidth = 419.55;
+        documenteditor2.selection.sectionFormat.pageHeight = 595.30;
+        documenteditor2.print();
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/razor
new file mode 100644
index 000000000..def9730d4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/razor
@@ -0,0 +1,41 @@
+
+    @Html.EJS().Button("print").Content("Print").Render()
+    <div id="documenteditor" style="width:100%;height:100%">
+        @Html.EJS().DocumentEditor("container").EnablePrint(true).Render()
+    </div>
+
+    <script>
+        var documenteditor;
+        document.addEventListener('DOMContentLoaded', function () {
+            var documenteditorElement = document.getElementById("container");            
+            documenteditor = documenteditorElement.ej2_instances[0];
+            documenteditor.resize();
+            var sfdt = {
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Hello World"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {
+                        }
+                    }
+                ]
+            };
+
+            documenteditor.open(JSON.stringify(sfdt));
+
+            document.getElementById('print').addEventListener('click', function () {
+                documenteditor.print();
+            });
+        }); 
+    </script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/tagHelper
new file mode 100644
index 000000000..41bc996c0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-sfdt/tagHelper
@@ -0,0 +1,40 @@
+<ejs-button id="print">Print</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor enablePrint=true id="container"></ejs-documenteditor>    
+</div>
+
+<script>
+        var documenteditor;
+        document.addEventListener('DOMContentLoaded', function () {
+            var documenteditorElement = document.getElementById("container");            
+            documenteditor = documenteditorElement.ej2_instances[0];
+            documenteditor.resize();
+            var sfdt = {
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Hello World"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {
+                        }
+                    }
+                ]
+            };
+
+            documenteditor.open(JSON.stringify(sfdt));
+
+            document.getElementById('print').addEventListener('click', function () {
+                documenteditor.print();
+            });
+        }); 
+    </script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/razor
new file mode 100644
index 000000000..99190ae8c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/razor
@@ -0,0 +1,13 @@
+@Html.EJS().Button("print").Content("Print").Render()
+<div id="documenteditor">
+    @Html.EJS().DocumentEditor("container").EnablePrint(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.print(window);
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/tagHelper
new file mode 100644
index 000000000..99a4e1d45
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print-window/tagHelper
@@ -0,0 +1,13 @@
+<ejs-button id="print">Print</ejs-button>
+<div id="documenteditor">
+    <ejs-documenteditor enablePrint=true id="container"></ejs-documenteditor>    
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        documenteditor.print(window);
+    }); 
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/razor
new file mode 100644
index 000000000..8cac84d46
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/razor
@@ -0,0 +1,17 @@
+
+    @Html.EJS().Button("print").Content("Print").Render()
+    <div id="documenteditor" style="width:100%;height:100%">
+        @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePrint(true).EnableSelection(true).EnableSfdtExport(true).Render()
+    </div>
+
+    <script>
+        var documenteditor;
+        document.addEventListener('DOMContentLoaded', function () {
+            var documenteditorElement = document.getElementById("container");
+            documenteditor = documenteditorElement.ej2_instances[0];
+            documenteditor.resize();          
+            document.getElementById('print').addEventListener('click', function () {
+                documenteditor.print();
+            });
+        }); 
+    </script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/tagHelper
new file mode 100644
index 000000000..a45909277
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/print/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="print">Print</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePrint=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+        var documenteditor;
+        document.addEventListener('DOMContentLoaded', function () {
+            var documenteditorElement = document.getElementById("container");
+            documenteditor = documenteditorElement.ej2_instances[0];
+            documenteditor.resize();         
+            document.getElementById('print').addEventListener('click', function () {
+                documenteditor.print();
+            });
+        }); 
+    </script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/read-only/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/read-only/razor
new file mode 100644
index 000000000..25aaca8a4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/read-only/razor
@@ -0,0 +1,16 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePrint(true).EnableSelection(true).EnableSfdtExport(true).Created("onCreated").Render()
+</div>
+<script>
+    var documenteditor;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        // load your default document here
+        var data = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] };
+        // Open the default document
+        documenteditor.open(JSON.stringify(data));
+        //Enable read only mode.
+        documenteditor.isReadOnly = true;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/read-only/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/read-only/tagHelper
new file mode 100644
index 000000000..f980f014c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/read-only/tagHelper
@@ -0,0 +1,15 @@
+<ejs-documenteditorcontainer id="container" enableToolbar=true created="onCreated" height="590px">
+</ejs-documenteditorcontainer>
+<script>
+    var documenteditor;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        documenteditor = documenteditorElement.ej2_instances[0];
+        // load your default document here
+        var data = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] };
+        // Open the default document
+        documenteditor.open(JSON.stringify(data));
+        //Enable read only mode.
+        documenteditor.isReadOnly = true;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/row-height/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/row-height/razor
new file mode 100644
index 000000000..d7a821f95
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/row-height/razor
@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.editor.insertTable(2, 2);
+        //To change row height of first row
+        documenteditor.selection.rowFormat.heightType = 'Exactly';
+        documenteditor.selection.rowFormat.height = 20;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/row-height/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/row-height/tagHelper
new file mode 100644
index 000000000..e5eb5ee2f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/row-height/tagHelper
@@ -0,0 +1,12 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.editor.insertTable(2, 2);
+        //To change row height of first row
+        documenteditor.selection.rowFormat.heightType = 'Exactly';
+        documenteditor.selection.rowFormat.height = 20;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/razor
new file mode 100644
index 000000000..d5c607e63
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/razor
@@ -0,0 +1,17 @@
+<div>
+    @Html.EJS().Button("container_ruler_button").Content("Show/Hide Ruler").Click("onClick").Render()
+    @Html.EJS().DocumentEditor("container").Created("onCreate").IsReadOnly(false).DocumentEditorSettings("settings").Render()
+</div>
+
+<script>
+    var container;
+    var settings = { showRuler: true };
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.enableAllModules();
+    }
+    function onClick() {
+       container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/tagHelper
new file mode 100644
index 000000000..d8fdf57d8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/ruler/tagHelper
@@ -0,0 +1,17 @@
+<ejs-button id="container_ruler_button" content="Show/hide ruler" onclick="onClick()"></ejs-button>
+<ejs-documenteditor id="container">
+    <ejs-documenteditorcontainerevent (created)="onCreate()" documentEditorSettings="settings" isReadOnly=false></ejs-documenteditorcontainerevent>
+</ejs-documenteditor>
+
+<script>
+    var container;
+    var settings = { showRuler: true };
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.enableAllModules();
+    }
+    function onClick() {
+        container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/razor
new file mode 100644
index 000000000..7870dc832
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/razor
@@ -0,0 +1,83 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableSelection(true).EnableSfdtExport(true).EnableEditor(true).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        onLoadDefaultDocument();
+        documenteditor.viewer.selection.goToPage(3);
+    });
+
+    function onLoadDefaultDocument() {
+        var defaultDocument = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "First page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Second page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Third page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                }
+            ],
+            "characterFormat": {},
+            "paragraphFormat": {},
+            "background": {
+                "color": "#FFFFFFFF"
+            },
+            "styles": [
+                {
+                    "type": "Paragraph",
+                    "name": "Normal",
+                    "next": "Normal"
+                },
+                {
+                    "type": "Character",
+                    "name": "Default Paragraph Font"
+                }
+            ]
+        };
+        documenteditor.open(JSON.stringify(defaultDocument));
+        documenteditor.focusIn();
+    }
+
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/tagHelper
new file mode 100644
index 000000000..56fe437d7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-goto-page/tagHelper
@@ -0,0 +1,83 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        onLoadDefaultDocument();
+        documenteditor.viewer.selection.goToPage(3);
+    });
+
+    function onLoadDefaultDocument() {
+        var defaultDocument = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "First page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Second page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Third page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                }
+            ],
+            "characterFormat": {},
+            "paragraphFormat": {},
+            "background": {
+                "color": "#FFFFFFFF"
+            },
+            "styles": [
+                {
+                    "type": "Paragraph",
+                    "name": "Normal",
+                    "next": "Normal"
+                },
+                {
+                    "type": "Character",
+                    "name": "Default Paragraph Font"
+                }
+            ]
+        };
+        documenteditor.open(JSON.stringify(defaultDocument));
+        documenteditor.focusIn();
+    }
+
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/razor
new file mode 100644
index 000000000..8941a52e6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/razor
@@ -0,0 +1,11 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableSelection(true).EnableSfdtExport(true).EnableEditor(true).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.fitPage('FitPageWidth');
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/tagHelper
new file mode 100644
index 000000000..5fb15709a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page-fit/tagHelper
@@ -0,0 +1,11 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.fitPage('FitPageWidth');
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/razor
new file mode 100644
index 000000000..e3c38b117
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/razor
@@ -0,0 +1,67 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        onLoadDefault();
+        documenteditor.scrollToPage(2);
+    });
+
+    function onLoadDefault() {
+        var defaultDocument = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "First page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Second page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                }
+            ],
+            "characterFormat": {},
+            "paragraphFormat": {},
+            "background": {
+                "color": "#FFFFFFFF"
+            },
+            "styles": [
+                {
+                    "type": "Paragraph",
+                    "name": "Normal",
+                    "next": "Normal"
+                },
+                {
+                    "type": "Character",
+                    "name": "Default Paragraph Font"
+                }
+            ]
+        }
+        documenteditor.open(JSON.stringify(defaultDocument));
+        documenteditor.focusIn();
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/tagHelper
new file mode 100644
index 000000000..0f60855c1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-page/tagHelper
@@ -0,0 +1,67 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false id="container"></ejs-documenteditor>      
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        onLoadDefault();
+        documenteditor.scrollToPage(2);
+    });
+
+    function onLoadDefault() {
+        var defaultDocument = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "First page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Second page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                }
+            ],
+            "characterFormat": {},
+            "paragraphFormat": {},
+            "background": {
+                "color": "#FFFFFFFF"
+            },
+            "styles": [
+                {
+                    "type": "Paragraph",
+                    "name": "Normal",
+                    "next": "Normal"
+                },
+                {
+                    "type": "Character",
+                    "name": "Default Paragraph Font"
+                }
+            ]
+        }
+        documenteditor.open(JSON.stringify(defaultDocument));
+        documenteditor.focusIn();
+    }
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/document-editor.cs
new file mode 100644
index 000000000..d975ee29b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/document-editor.cs
@@ -0,0 +1,18 @@
+public ActionResult Default()
+{
+    List<object> zoomItems = new List<object>();
+    zoomItems.Add(new { text = "200%" });
+    zoomItems.Add(new { text = "175%" });
+    zoomItems.Add(new { text = "150%" });
+    zoomItems.Add(new { text = "125%" });
+    zoomItems.Add(new { text = "100%" });
+    zoomItems.Add(new { text = "75%" });
+    zoomItems.Add(new { text = "50%" });
+    zoomItems.Add(new { text = "25%" });
+    zoomItems.Add(new { separator = true });
+    zoomItems.Add(new { text = "Fit one page" });
+    zoomItems.Add(new { text = "Fit page width" });
+    ViewBag.zoomList = zoomItems;
+
+    return View();
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/razor
new file mode 100644
index 000000000..04ecf37e2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/razor
@@ -0,0 +1,132 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableSelection(true).EnableSfdtExport(true).EnableEditor(true).Render()
+</div>
+<div id='page-fit-type-div'>
+    <label style="margin-top: 6px;margin-right: 2px">Page</label>
+    <div id='editablePageNumber' style='border: 1px solid #F1F1F1;display: inline-flex;height: 17px;padding: 0px 4px;'>
+        <label id="documenteditor_page_no" style="text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text;height:17px;max-width:150px"></label>
+    </div>
+    <label style="margin-left:2px;letter-spacing: 1.05px;">of</label>
+    <label id='documenteditor_pagecount' style="margin-left:6px;letter-spacing: 1.05px;"></label>
+    @Html.EJS().DropDownButton("zoom").Content("100%").Items((IEnumerable
+    <object>)ViewBag.zoomList).Render()
+</div>
+<script>
+    var documenteditor;
+    var pageCount;
+    var editablePageNumber;
+    var editorPageCount;
+    var pageNumberLabel;
+    var startPage = 1;
+    var zoomBtn;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        pageCount = document.getElementById('documenteditor_pagecount');
+        editablePageNumber = document.getElementById('editablePageNumber');
+        pageNumberLabel = document.getElementById('documenteditor_page_no');
+        documenteditor.resize();
+        editablePageNumber.addEventListener('click', updateDocumentEditorPageNumber);
+        editablePageNumber.addEventListener('keydown', onKeyDown);
+        editablePageNumber.addEventListener('blur', onBlur);
+        zoomBtn = document.getElementById('zoom');
+        zoomBtn.className = 'e-de-statusbar-zoom';
+        var zoom = zoomBtn.ej2_instances[0];
+        zoom.select = function (e) {
+            onZoom(e);
+        };
+        updatePageCount();
+        updatePageNumber();
+        editablePageNumber.addEventListener('click', updateDocumentEditorPageNumber);
+        editablePageNumber.addEventListener('keydown', onKeyDown);
+        editablePageNumber.addEventListener('blur', onBlur);
+        documenteditor.viewChange = function (e) {
+            updatePageNumberOnViewChange(e);
+        };
+        documenteditor.contentChange = function () {
+            //Set page count
+            updatePageCount();
+        };
+    });
+
+    function updatePageNumberOnViewChange(args) {
+        if (documenteditor.selection
+            && documenteditor.selection.startPage >= args.startPage && documenteditor.selection.startPage <= args.endPage) {
+            startPage = documenteditor.selection.startPage;
+        } else {
+            startPage = args.startPage;
+        }
+        updatePageNumber();
+    }
+    function onBlur() {
+        if (editablePageNumber.textContent === '' || parseInt(editablePageNumber.textContent, 0) > editorPageCount) {
+            updatePageNumber();
+        }
+        editablePageNumber.contentEditable = 'false';
+    }
+    function onKeyDown(e) {
+        if (e.which === 13) {
+            e.preventDefault();
+            var pageNumber = parseInt(editablePageNumber.textContent, 0);
+            if (pageNumber > editorPageCount) {
+                updatePageNumber();
+            } else {
+                if (documenteditor.selection) {
+                    documenteditor.selection.goToPage(parseInt(editablePageNumber.textContent, 0));
+                } else {
+                    documenteditor.scrollToPage(parseInt(editablePageNumber.textContent, 0));
+                }
+            }
+            editablePageNumber.contentEditable = 'false';
+            if (editablePageNumber.textContent === '') {
+                updatePageNumber();
+            }
+        }
+        if (e.which > 64) {
+            e.preventDefault();
+        }
+    }
+    function onZoom(args) {
+        setZoomValue(args.item.text);
+        updateZoomContent();
+    }
+    function setZoomValue(text) {
+        if (text.match('Fit one page')) {
+            documenteditor.fitPage('FitOnePage');
+        } else if (text.match('Fit page width')) {
+            documenteditor.fitPage('FitPageWidth');
+        } else {
+            documenteditor.zoomFactor = parseInt(text, 0) / 100;
+        }
+    }
+    function updateZoomContent() {
+        zoomBtn.content = Math.round(documenteditor.zoomFactor * 100) + '%';
+    }
+    function updatePageNumber() {
+        pageNumberLabel.textContent = startPage.toString();
+    }
+    function updatePageCount() {
+        editorPageCount = documenteditor.pageCount;
+        pageCount.textContent = editorPageCount.toString();
+    }
+    function updateDocumentEditorPageNumber() {
+        var editablePageNumber = document.getElementById('editablePageNumber');
+        editablePageNumber.contentEditable = 'true';
+        editablePageNumber.focus();
+        window.getSelection().selectAllChildren(editablePageNumber);
+    }
+</script>
+
+<style>
+    #DocumentEditor {
+        width: 100%;
+        height: 100%;
+    }
+
+    .e-de-statusbar-zoom {
+        float: right;
+        text-align: center;
+        padding: 2px;
+        line-height: 19px;
+        margin-top: 1px;
+    }
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/tagHelper
new file mode 100644
index 000000000..6fc0fccb1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-status-bar/tagHelper
@@ -0,0 +1,131 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>
+</div>
+<div id='page-fit-type-div'>
+    <label style="margin-top: 6px;margin-right: 2px">Page</label>
+    <div id='editablePageNumber' style='border: 1px solid #F1F1F1;display: inline-flex;height: 17px;padding: 0px 4px;'>
+        <label id="documenteditor_page_no" style="text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text;height:17px;max-width:150px"></label>
+    </div>
+    <label style="margin-left:2px;letter-spacing: 1.05px;">of</label>
+    <label id='documenteditor_pagecount' style="margin-left:6px;letter-spacing: 1.05px;"></label>
+    <ejs-dropdownbutton id="zoom" content="100%" items="ViewBag.zoomList"></ejs-dropdownbutton>
+</div>
+<script>
+    var documenteditor;
+    var pageCount;
+    var editablePageNumber;
+    var editorPageCount;
+    var pageNumberLabel;
+    var startPage = 1;
+    var zoomBtn;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        pageCount = document.getElementById('documenteditor_pagecount');
+        editablePageNumber = document.getElementById('editablePageNumber');
+        pageNumberLabel = document.getElementById('documenteditor_page_no');
+        documenteditor.resize();
+        editablePageNumber.addEventListener('click', updateDocumentEditorPageNumber);
+        editablePageNumber.addEventListener('keydown', onKeyDown);
+        editablePageNumber.addEventListener('blur', onBlur);
+        zoomBtn = document.getElementById('zoom');
+        zoomBtn.className = 'e-de-statusbar-zoom';
+        var zoom = zoomBtn.ej2_instances[0];
+        zoom.select = function (e) {
+            onZoom(e);
+        };
+        updatePageCount();
+        updatePageNumber();
+        editablePageNumber.addEventListener('click', updateDocumentEditorPageNumber);
+        editablePageNumber.addEventListener('keydown', onKeyDown);
+        editablePageNumber.addEventListener('blur', onBlur);
+        documenteditor.viewChange = function (e) {
+            updatePageNumberOnViewChange(e);
+        };
+        documenteditor.contentChange = function () {
+            //Set page count
+            updatePageCount();
+        };
+    });
+
+    function updatePageNumberOnViewChange(args) {
+        if (documenteditor.selection
+            && documenteditor.selection.startPage >= args.startPage && documenteditor.selection.startPage <= args.endPage) {
+            startPage = documenteditor.selection.startPage;
+        } else {
+            startPage = args.startPage;
+        }
+        updatePageNumber();
+    }
+    function onBlur() {
+        if (editablePageNumber.textContent === '' || parseInt(editablePageNumber.textContent, 0) > editorPageCount) {
+            updatePageNumber();
+        }
+        editablePageNumber.contentEditable = 'false';
+    }
+    function onKeyDown(e) {
+        if (e.which === 13) {
+            e.preventDefault();
+            var pageNumber = parseInt(editablePageNumber.textContent, 0);
+            if (pageNumber > editorPageCount) {
+                updatePageNumber();
+            } else {
+                if (documenteditor.selection) {
+                    documenteditor.selection.goToPage(parseInt(editablePageNumber.textContent, 0));
+                } else {
+                    documenteditor.scrollToPage(parseInt(editablePageNumber.textContent, 0));
+                }
+            }
+            editablePageNumber.contentEditable = 'false';
+            if (editablePageNumber.textContent === '') {
+                updatePageNumber();
+            }
+        }
+        if (e.which > 64) {
+            e.preventDefault();
+        }
+    }
+    function onZoom(args) {
+        setZoomValue(args.item.text);
+        updateZoomContent();
+    }
+    function setZoomValue(text) {
+        if (text.match('Fit one page')) {
+            documenteditor.fitPage('FitOnePage');
+        } else if (text.match('Fit page width')) {
+            documenteditor.fitPage('FitPageWidth');
+        } else {
+            documenteditor.zoomFactor = parseInt(text, 0) / 100;
+        }
+    }
+    function updateZoomContent() {
+        zoomBtn.content = Math.round(documenteditor.zoomFactor * 100) + '%';
+    }
+    function updatePageNumber() {
+        pageNumberLabel.textContent = startPage.toString();
+    }
+    function updatePageCount() {
+        editorPageCount = documenteditor.pageCount;
+        pageCount.textContent = editorPageCount.toString();
+    }
+    function updateDocumentEditorPageNumber() {
+        var editablePageNumber = document.getElementById('editablePageNumber');
+        editablePageNumber.contentEditable = 'true';
+        editablePageNumber.focus();
+        window.getSelection().selectAllChildren(editablePageNumber);
+    }
+</script>
+
+<style>
+    #DocumentEditor {
+        width: 100%;
+        height: 100%;
+    }
+
+    .e-de-statusbar-zoom {
+        float: right;
+        text-align: center;
+        padding: 2px;
+        line-height: 19px;
+        margin-top: 1px;
+    }
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/razor
new file mode 100644
index 000000000..fdc3a4f94
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/razor
@@ -0,0 +1,11 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableSelection(true).EnableSfdtExport(true).EnableEditor(true).Render()
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.zoomFactor = 3;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/tagHelper
new file mode 100644
index 000000000..daaea7c77
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/scrolling-zooming/tagHelper
@@ -0,0 +1,11 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
+        documenteditor.resize();
+        documenteditor.zoomFactor = 3;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/spell-checker/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/spell-checker/razor
new file mode 100644
index 000000000..db65ccba2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/spell-checker/razor
@@ -0,0 +1,11 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSpellChecker(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.spellChecker.languageID = 1033 //LCID of "en-us";
+        documenteditor.spellChecker.removeUnderline = false;
+        documenteditor.spellChecker.allowSpellCheckAndSuggestion = true;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/spell-checker/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/spell-checker/tagHelper
new file mode 100644
index 000000000..024cc024e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/spell-checker/tagHelper
@@ -0,0 +1,11 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSpellChecker=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.spellChecker.languageID = 1033 //LCID of "en-us";
+        documenteditor.spellChecker.removeUnderline = false;
+        documenteditor.spellChecker.allowSpellCheckAndSuggestion = true;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/razor
new file mode 100644
index 000000000..b31ce9796
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableStyleDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor =  document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Style Dialog
+            documenteditor.showDialog('Style');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/tagHelper
new file mode 100644
index 000000000..b1084f9b6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/style-dialog/tagHelper
@@ -0,0 +1,15 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableStyleDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor =  document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Style Dialog
+            documenteditor.showDialog('Style');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/razor
new file mode 100644
index 000000000..31f3a7123
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableStyleDialog(true).EnableStylesDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor =  document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Styles Dialog
+            documenteditor.showDialog('Styles');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/tagHelper
new file mode 100644
index 000000000..6bbc00a68
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/styles-dialog/tagHelper
@@ -0,0 +1,15 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableStyleDialog=true enableStylesDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor =  document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Styles Dialog
+            documenteditor.showDialog('Styles');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/razor
new file mode 100644
index 000000000..806b62531
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor =  document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Table Dialog
+            documenteditor.showDialog('Table');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/tagHelper
new file mode 100644
index 000000000..b5dd5699f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-dialog/tagHelper
@@ -0,0 +1,15 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableTableDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor =  document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open Table Dialog
+            documenteditor.showDialog('Table');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/razor
new file mode 100644
index 000000000..2f761c489
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableOfContentsDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open TableOfContents Dialog
+            documenteditor.showDialog('TableOfContents');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/tagHelper
new file mode 100644
index 000000000..e9e6a1d94
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents-dialog/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableTableOfContentsDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;    
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open TableOfContents Dialog
+            documenteditor.showDialog('TableOfContents');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents/razor
new file mode 100644
index 000000000..77632d526
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents/razor
@@ -0,0 +1,17 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var documentString = '{"sections":[{"blocks":[{"paragraphFormat":{"styleName":"Heading 1"},"inlines":[{"text":"Headin"},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1},{"text":"g1"}]},{"paragraphFormat":{"styleName":"Heading 2"},"inlines":[{"text":"Heading2"}]},{"paragraphFormat":{"styleName":"Heading 3"},"inlines":[{"text":"Heading3"}]},{"paragraphFormat":{"styleName":"Heading 4"},"inlines":[{"text":"Heading4"}]},{"paragraphFormat":{"styleName":"Heading 5"},"inlines":[{"text":"Heading5"}]},{"paragraphFormat":{"styleName":"Heading 6"},"inlines":[{"text":"Heading6"}]},{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"text":"Normal"}]}],"headersFooters":{},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Paragraph","name":"Heading 1","basedOn":"Normal","next":"Normal","link":"Heading 1 Char","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":12.0,"afterSpacing":0.0,"outlineLevel":"Level1"}},{"type":"Paragraph","name":"Heading 2","basedOn":"Normal","next":"Normal","link":"Heading 2 Char","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level2"}},{"type":"Paragraph","name":"Heading 3","basedOn":"Normal","next":"Normal","link":"Heading 3 Char","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level3"}},{"type":"Paragraph","name":"Heading 4","basedOn":"Normal","next":"Normal","link":"Heading 4 Char","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level4"}},{"type":"Paragraph","name":"Heading 5","basedOn":"Normal","next":"Normal","link":"Heading 5 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level5"}},{"type":"Paragraph","name":"Heading 6","basedOn":"Normal","next":"Normal","link":"Heading 6 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level6"}},{"type":"Character","name":"Default Paragraph Font"},{"type":"Character","name":"Heading 1 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 2 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 3 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}},{"type":"Character","name":"Heading 4 Char","basedOn":"Default Paragraph Font","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 5 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 6 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}}]}';
+        editor.open(documentString);
+
+        // To insert table of content in document editor
+        var tocSettings =
+            {
+                startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true
+            };
+        documenteditor.editor.insertTableOfContents(tocSettings);
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents/tagHelper
new file mode 100644
index 000000000..12a9aebf6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-of-contents/tagHelper
@@ -0,0 +1,17 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var documentString = '{"sections":[{"blocks":[{"paragraphFormat":{"styleName":"Heading 1"},"inlines":[{"text":"Headin"},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1},{"text":"g1"}]},{"paragraphFormat":{"styleName":"Heading 2"},"inlines":[{"text":"Heading2"}]},{"paragraphFormat":{"styleName":"Heading 3"},"inlines":[{"text":"Heading3"}]},{"paragraphFormat":{"styleName":"Heading 4"},"inlines":[{"text":"Heading4"}]},{"paragraphFormat":{"styleName":"Heading 5"},"inlines":[{"text":"Heading5"}]},{"paragraphFormat":{"styleName":"Heading 6"},"inlines":[{"text":"Heading6"}]},{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"text":"Normal"}]}],"headersFooters":{},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Paragraph","name":"Heading 1","basedOn":"Normal","next":"Normal","link":"Heading 1 Char","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":12.0,"afterSpacing":0.0,"outlineLevel":"Level1"}},{"type":"Paragraph","name":"Heading 2","basedOn":"Normal","next":"Normal","link":"Heading 2 Char","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level2"}},{"type":"Paragraph","name":"Heading 3","basedOn":"Normal","next":"Normal","link":"Heading 3 Char","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level3"}},{"type":"Paragraph","name":"Heading 4","basedOn":"Normal","next":"Normal","link":"Heading 4 Char","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level4"}},{"type":"Paragraph","name":"Heading 5","basedOn":"Normal","next":"Normal","link":"Heading 5 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level5"}},{"type":"Paragraph","name":"Heading 6","basedOn":"Normal","next":"Normal","link":"Heading 6 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level6"}},{"type":"Character","name":"Default Paragraph Font"},{"type":"Character","name":"Heading 1 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 2 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 3 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}},{"type":"Character","name":"Heading 4 Char","basedOn":"Default Paragraph Font","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 5 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 6 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}}]}';
+        editor.open(documentString);
+
+        // To insert table of content in document editor
+        var tocSettings =
+            {
+                startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true
+            };
+        documenteditor.editor.insertTableOfContents(tocSettings);
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/razor
new file mode 100644
index 000000000..c8d926adb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableOptionsDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {        
+        documenteditor = document.getElementById("container").ej2_instances[0];        
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open TableOptions Dialog
+            documenteditor.showDialog('TableOptions');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/tagHelper
new file mode 100644
index 000000000..916ec81cb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-options-dialog/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableTableOptionsDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open TableOptions Dialog
+            documenteditor.showDialog('TableOptions');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/razor
new file mode 100644
index 000000000..572c86956
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/razor
@@ -0,0 +1,16 @@
+@Html.EJS().Button("dialog").Content("Dialog").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTablePropertiesDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open TableProperties Dialog
+            documenteditor.showDialog('TableProperties');
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/tagHelper
new file mode 100644
index 000000000..a09fa025e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-properties-dialog/tagHelper
@@ -0,0 +1,16 @@
+<ejs-button id="dialog">Dialog</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableTablePropertiesDialog=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        var button = document.getElementById('dialog');
+        button.addEventListener('click', function () {
+            // To open TableProperties Dialog
+            documenteditor.showDialog('TableProperties');
+        });
+    });
+</script>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-width/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-width/razor
new file mode 100644
index 000000000..17d8f95dc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-width/razor
@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.editor.insertTable(2, 2);
+        //To change the width of a cell
+        documenteditor.selection.tableFormat.preferredWidthType = 'Point';
+        documenteditor.selection.tableFormat.preferredWidth = 100;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-width/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-width/tagHelper
new file mode 100644
index 000000000..b82eac006
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table-width/tagHelper
@@ -0,0 +1,12 @@
+<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.editor.insertTable(2, 2);
+        //To change the width of a cell
+        documenteditor.selection.cellFormat.preferredWidthType = 'Point';
+        documenteditor.selection.cellFormat.preferredWidth = 100;
+    });
+</script>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/razor
new file mode 100644
index 000000000..ba04edb77
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/razor
@@ -0,0 +1,174 @@
+<div id="toolbar"></div>
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableDialog(true).EnableSelection(true).EnableSfdtExport(true).EnableContextMenu(true).EnableEditorHistory(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.resize();
+        updateContainerSize();
+        documenteditor.editor.insertTable(2, 2);
+        function toolbarButtonClick(arg) {
+            switch (arg.item.id) {
+                case 'table':
+                    //Insert table API to add table
+                    documenteditor.editor.insertTable(3, 2);
+                    break;
+                case 'insert_above':
+                    //Insert the specified number of rows to the table above to the row at cursor position
+                    documenteditor.editor.insertRow(true, 2);
+                    break;
+                case 'insert_below':
+                    //Insert the specified number of rows to the table below to the row at cursor position
+                    documenteditor.editor.insertRow();
+                    break;
+                case 'insert_left':
+                    //Insert the specified number of columns to the table left to the column at cursor position
+                    documenteditor.editor.insertColumn(true, 2);
+                    break;
+                case 'insert_right':
+                    //Insert the specified number of columns to the table right to the column at cursor position
+                    documenteditor.editor.insertColumn();
+                    break;
+                case 'delete_table':
+                    //Delete the entire table
+                    documenteditor.editor.deleteTable();
+                    break;
+                case 'delete_row':
+                    //Delete the selected number of rows
+                    documenteditor.editor.deleteRow();
+                    break;
+                case 'delete_column':
+                    //Delete the selected number of columns
+                    documenteditor.editor.deleteColumn();
+                    break;
+                case 'merge_cell':
+                    //Merge the selected cells into one (both vertically and horizontally)
+                    documenteditor.editor.mergeCells();
+                    break;
+                case 'table_dialog':
+                    //Opens insert table dialog
+                    documenteditor.showDialog('Table');
+                    break;
+            }
+        }
+        function updateContainerSize() {
+            document.getElementById('container').style.height =
+                window.innerHeight - document.getElementById('toolbar').offsetHeight + 'px';
+        }
+        var toolBar = new ej.navigations.Toolbar({
+            clicked: toolbarButtonClick,
+            items: [
+                {
+                    prefixIcon: 'e-de-icon-Table',
+                    tooltipText: 'Insert Table',
+                    id: 'table',
+                },
+                { type: 'Separator' },
+                {
+                    prefixIcon: 'e-de-icon-InsertAbove',
+                    tooltipText: 'Insert new row above',
+                    id: 'insert_above',
+                },
+                {
+                    prefixIcon: 'e-de-icon-InsertBelow',
+                    tooltipText: 'Insert new row below',
+                    id: 'insert_below',
+                },
+                { type: 'Separator' },
+                {
+                    prefixIcon: 'e-de-icon-InsertLeft',
+                    tooltipText: 'Insert new column to the left',
+                    id: 'insert_left',
+                },
+                {
+                    prefixIcon: 'e-de-icon-InsertRight',
+                    tooltipText: 'Insert new column to the right',
+                    id: 'insert_right',
+                },
+                { type: 'Separator' },
+                {
+                    prefixIcon: 'e-de-icon-DeleteTable',
+                    tooltipText: 'Delete Entire table',
+                    id: 'delete_table',
+                },
+                {
+                    prefixIcon: 'e-de-icon-DeleteRows',
+                    tooltipText: 'Delete the selected row',
+                    id: 'delete_row',
+                },
+                {
+                    prefixIcon: 'e-de-icon-DeleteColumns',
+                    tooltipText: 'Delete the selected column',
+                    id: 'delete_column',
+                },
+                { type: 'Separator' },
+                {
+                    prefixIcon: 'e-de-icon-Cell',
+                    tooltipText: 'Merge the selected cells',
+                    id: 'merge_cell',
+                },
+                { type: 'Separator' },
+                {
+                    text: 'Dialog',
+                    tooltipText: 'Open insert table dialog',
+                    id: 'table_dialog',
+                },
+            ],
+        });
+        toolBar.appendTo('#toolbar');
+
+    });
+</script>
+
+<style>
+    @font-face {
+        font-family: 'Sample brower icons';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,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YQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAEYAaQBuAGEAbAAgAFMAYQBtAHAAbABlACAAYgByAG8AdwBlAHIAIABpAGMAbwBuAHMARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/AQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAAtTdHJva2VTdHlsZQhCb29rbWFyawdQaWN0dXJlBEZpbmQNT3V0c2lkZUJvcmRlcgdKdXN0aWZ5BUNsb3NlDkRlY3JlYXNlSW5kZW50FVBpeGVsQWxpZ25DZW50ZXJUYWJsZQ9CYWNrZ3JvdW5kQ29sb3ILQWxpZ25Cb3R0b20JUGFnZVNldHVwDkhpZ2hsaWdodENvbG9yC1N1cGVyc2NyaXB0BVRhYmxlBFVuZG8LSW5zZXJ0QmVsb3cJVG9wQm9yZGVyClBhZ2VOdW1iZXIQQWxpZ25DZW50ZXJUYWJsZQ5JbmNyZWFzZUluZGVudARCb2xkCUFsaWduTGVmdAZGb290ZXILSW5zZXJ0UmlnaHQJVW5kZXJsaW5lCkluc2VydExlZnQETG9jawZIZWFkZXINU3RyaWtldGhyb3VnaAhDbGVhckFsbAtSaWdodEJvcmRlcgpBbGlnblJpZ2h0BE9wZW4KU3Ryb2tlU2l6ZQVQcmludAtEZWxldGVUYWJsZQlGb250Q29sb3INSW5zaWRlQm9yZGVycwpEZWxldGVSb3dzCERvd25sb2FkC0xpbmVTcGFjaW5nFEluc2lkZVZlcnRpY2FsQm9yZGVyCEFsaWduVE9wBFJlZG8MQm90dG9tQm9yZGVyA05ldwVQYXN0ZQdCdWxsZXRzBENlbGwNRGVsZXRlQ29sdW1ucwpBbGxCb3JkZXJzCVN1YnNjcmlwdBBTaG93SGlkZVByb3BlcnR5DlRhYmxlT2ZDb250ZW50Bkl0YWxpYxZJbnNpZGVIb3Jpem9uZGFsYm9yZGVyC0xlZnRCb3JkZXJzCU51bWJlcmluZwRMaW5rC0FsaWduQ2VudGVyC0luc2VydEFib3ZlAAAAAAA=) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    [class^="e-de-icon-"],
+    [class*=" e-de-icon-"] {
+        font-family: 'Sample brower icons' !important;
+    }
+
+    .e-de-icon-Table:before {
+        content: "\e70e";
+    }
+
+    .e-de-icon-InsertBelow:before {
+        content: "\e710";
+    }
+
+    .e-de-icon-InsertRight:before {
+        content: "\e718";
+    }
+
+    .e-de-icon-InsertLeft:before {
+        content: "\e71a";
+    }
+
+    .e-de-icon-DeleteTable:before {
+        content: "\e724";
+    }
+
+    .e-de-icon-DeleteRows:before {
+        content: "\e727";
+    }
+
+    .e-de-icon-Cell:before {
+        content: "\e731";
+    }
+
+    .e-de-icon-DeleteColumns:before {
+        content: "\e732";
+    }
+
+    .e-de-icon-InsertAbove:before {
+        content: "\e73d";
+    }
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/tagHelper
new file mode 100644
index 000000000..70e9a26e7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/table/tagHelper
@@ -0,0 +1,179 @@
+<div id="toolbar"></div>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableTableDialog=true enableSfdtExport=true
+        enableContextMenu=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.resize();
+        updateContainerSize();
+        documenteditor.editor.insertTable(2, 2);
+        function toolbarButtonClick(arg) {
+            switch (arg.item.id) {
+                case 'table':
+                    //Insert table API to add table
+                    documenteditor.editor.insertTable(3, 2);
+                    break;
+                case 'insert_above':
+                    //Insert the specified number of rows to the table above to the row at cursor position
+                    documenteditor.editor.insertRow(true, 2);
+                    break;
+                case 'insert_below':
+                    //Insert the specified number of rows to the table below to the row at cursor position
+                    documenteditor.editor.insertRow();
+                    break;
+                case 'insert_left':
+                    //Insert the specified number of columns to the table left to the column at cursor position
+                    documenteditor.editor.insertColumn(true, 2);
+                    break;
+                case 'insert_right':
+                    //Insert the specified number of columns to the table right to the column at cursor position
+                    documenteditor.editor.insertColumn();
+                    break;
+                case 'delete_table':
+                    //Delete the entire table
+                    documenteditor.editor.deleteTable();
+                    break;
+                case 'delete_row':
+                    //Delete the selected number of rows
+                    documenteditor.editor.deleteRow();
+                    break;
+                case 'delete_column':
+                    //Delete the selected number of columns
+                    documenteditor.editor.deleteColumn();
+                    break;
+                case 'merge_cell':
+                    //Merge the selected cells into one (both vertically and horizontally)
+                    documenteditor.editor.mergeCells();
+                    break;
+                case 'table_dialog':
+                    //Opens insert table dialog
+                    documenteditor.showDialog('Table');
+                    break;
+            }
+        }
+        function updateContainerSize() {
+            document.getElementById('container').style.height =
+                window.innerHeight - document.getElementById('toolbar').offsetHeight + 'px';
+        }
+        var toolBar = new ej.navigations.Toolbar({
+            clicked: toolbarButtonClick,
+            items: [
+                {
+                    prefixIcon: 'e-de-icon-Table',
+                    tooltipText: 'Insert Table',
+                    id: 'table',
+                },
+                { type: 'Separator' },
+                {
+                    prefixIcon: 'e-de-icon-InsertAbove',
+                    tooltipText: 'Insert new row above',
+                    id: 'insert_above',
+                },
+                {
+                    prefixIcon: 'e-de-icon-InsertBelow',
+                    tooltipText: 'Insert new row below',
+                    id: 'insert_below',
+                },
+                { type: 'Separator' },
+                {
+                    prefixIcon: 'e-de-icon-InsertLeft',
+                    tooltipText: 'Insert new column to the left',
+                    id: 'insert_left',
+                },
+                {
+                    prefixIcon: 'e-de-icon-InsertRight',
+                    tooltipText: 'Insert new column to the right',
+                    id: 'insert_right',
+                },
+                { type: 'Separator' },
+                {
+                    prefixIcon: 'e-de-icon-DeleteTable',
+                    tooltipText: 'Delete Entire table',
+                    id: 'delete_table',
+                },
+                {
+                    prefixIcon: 'e-de-icon-DeleteRows',
+                    tooltipText: 'Delete the selected row',
+                    id: 'delete_row',
+                },
+                {
+                    prefixIcon: 'e-de-icon-DeleteColumns',
+                    tooltipText: 'Delete the selected column',
+                    id: 'delete_column',
+                },
+                { type: 'Separator' },
+                {
+                    prefixIcon: 'e-de-icon-Cell',
+                    tooltipText: 'Merge the selected cells',
+                    id: 'merge_cell',
+                },
+                { type: 'Separator' },
+                {
+                    text: 'Dialog',
+                    tooltipText: 'Open insert table dialog',
+                    id: 'table_dialog',
+                },
+            ],
+        });
+        toolBar.appendTo('#toolbar');
+
+    });
+</script>
+
+<style>
+    #container{
+        width:100%;
+        height:100%;
+    }
+    @font-face {
+        font-family: 'Sample brower icons';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSi8AAAEoAAAAVmNtYXDq0OvsAAACfAAAALBnbHlmA57AAgAAA6wAAC90aGVhZBF0mKkAAADQAAAANmhoZWEIUARAAAAArAAAACRobXR4/AAAAAAAAYAAAAD8bG9jYXeXhbwAAAMsAAAAgG1heHABZQE/AAABCAAAACBuYW1lCHiPawAAMyAAAAL9cG9zdAI/4kAAADYgAAADOQABAAAEAAAAAFwEAAAAAAAD8wABAAAAAAAAAAAAAAAAAAAAPwABAAAAAQAAGurlbV8PPPUACwQAAAAAANcxqdwAAAAA1zGp3AAAAAAD8wP0AAAACAACAAAAAAAAAAEAAAA/ATMAHAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnPQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABACcAAAABAAEAAEAAOc9//8AAOcA//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAEgATABQAFQAWABcAGAAZABoAGwAcAB0AHgAfACAAIQAiACMAJAAlACYAJwAoACkAKgArACwALQAuAC8AMAAxADIAMwA0ADUANgA3ADgAOQA6ADsAPAA9AD4AAAAAAFoAngDuAg4CWAJ4ApoCxgMGA9QD8gVgBcoGSgaMByoHYggKCLII3AkICbwJ3An4CjIKvAr4C8QL4AwADEIM6g0MDawNxg42DoIOpA8yD2YPhA+2EFgQdhEWEcAR2BI4EyYTXhOUE8AUPhRWFJAUnhVAFegWMBdiF4IXugAOAAAAAAPzA7UAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3AAAlMzUjBzM1IwczNSMHMzUjBzM1IyUzNSMFMzUjBTM1IyUhNSEFITUhJTM1IwUzNSMHMzUjBzM1IwO1Pz+7fX36fX36fX36fX0C7vr6/on6+v6J+voB9AH0/gz+DAF3/okC7vr6/si7u/p9fbw/P0t9fX19fX19fX19fX19fX19fHx8fX19fX19fX0AAAACAAAAAAN2A/MABAArAAABEwkBEQMfCTM/BAkBHwYzPwkRIQM4Af7H/sg/AQIDBQYGCAkJCQkJCQkIBwEKAQsFBQUGBgYGDAwFCQgGBgUDAgH9EgO1/JUBZ/6aA2r8lgoJCAgHBwUEAwEBAwQFBwEx/s4FBAMDAgEBAgIEBQYICAgJCgOpAAAABQAAAAAD8wPUAAQACAAnAC4AMgAAJRUjJzcHITU3JQ8DHQEfBj8GNS8GDwETEScHAQcRAyERIQO1j51SDf192gHdAgICAgICBAUGBgYGBgYFBAMBAQMCBwUGCwkFrtp9/sfaPwPo/Bh9E5xR7c7bQgIDBQYHBgYFBQQDAQEBAQMEBAUGCwoFAgYDAQECAwE9/UDZfQE42gIG/JYDqAAAAAIAAAAAA/MD8wB/AQUAAAEVDx0rAS8dPQE/HTsBHx0FFR8HAQ8DHwgzPwQBHwc/Hy8fDx4DtQECAwMFBQUGBwgICQkKCgsLDAwNDQ4ODg4PDw8QEBAQEA8QDw8ODg4ODQwNDAsLCgoJCQgIBgcFBQQEAwIBAQIDBAQFBQYHCAgJCQoKCwsMDA0NDg4ODg8PDxAQEBAQDxAPDw4ODg4NDA0MCwsKCgkJCAgGBwUFBAQDAgH9UQEEBgcKDA4P/s8GBQIBAgMGCAQFBgsMDAwLBQUFAS0YGBobHB0dHhMTExITERIREBAQDw8ODg0MDAsLCQkJBwcGBQQDAwEBAQEDAwQFBgcHCQkJCwsMDA0ODg8PEBAQERIRExITExMTExMSExESERARDw8PDg4NDAwLCwoJCAcHBgUEBAIBAn0QEBAPDw8ODw0ODQ0MDAsLCgoJCQgIBwYFBQUDAwIBAQIDAwUFBQYHCAgJCQoKCwsMDA0NDg0PDg8PDxAQEBAQDxAPDw4ODg4NDA0LDAsKCgkJCAcHBwUFBAQDAgEBAgMEBAUFBwcHCAkJCgoLDAsNDA0ODg4ODw8QDxAQDw8dHRwbGhgY/s4KCgsLCwsKCQUDBAQCAgQEAwUBLRAODAoHBgQBAQEDAwQFBgcHCAoJCwsMDA0ODg8PDxEQERIRExITExMTExMSExESERAQEA8PDg4NDAwLCwkJCQcHBgUEAwMBAQEBAwMEBQYHBwkJCQsLDAwNDg4PDxAQEBESEhISExMAAAsAAAAAA9QD1AADAAcACwAPABMAFwAbAB8AIwApAC8AACUzNSM1MzUjNzM1IwczNSMHMzUjBzM1IwczNSM3MzUjNTM1IyczIREhESMRFSERIQHhPj4+Pvo+Pn0+Pn0+Pn0+Pn0+Pvo+Pj4++j4CcfzUPgOo/FjnPj8+Pz4+Pj4+Pj4+Pj8+Pz59/NQDLPzUPgOoAAAEAAAAAAPzA/MAAwAHAAsADwAANyE1ITUhNSE1ITUhNSE1IQwD6PwYA+j8GAPo/BgD6PwYDD/6Pvo++j8AAAAAAQAAAAADtQO1AAsAABMJARcJATcJAScJAUsBif53LAGJAYks/ncBiSz+d/53A4n+d/53LAGJ/ncsAYkBiSz+dwGJAAAFAAAAAAPzA/MAAwAHAA0AEQAVAAA3ITUhJSE1ISUXNyc3JxchNSElITUhDAPo/BgBOQKv/VH+x5IqaWkqpwKv/VH+xwPo/BgMP/o+fZwscHAsHz76PwAABwAAAAAD8wPzAAMABwATABcAGwAfACsAACUzNSMHMzUjNyMVMxUzNTM1IzUjJSE1ISUzNSMHMzUjFyMVMxUzNTM1IzUjAn0+Pvo/P30+Pj8+Pj/+DAPo/BgCcT4++j8/fT4+Pz4+P8g+Pj4/P/r6Pz59Prw+Pj4+Pz4+P/oAAAAEAAAAAAPzA/MAMAAzAGkApwAAJRUPDi8OPQE/Bx8GAQcnBQ8JFR8OPw81LwkBFQkCJwcXByEBNT8GOwEfBhEzETUvDg8OA6sBAgMDAwUEBgUGBwYHBwgHBwcHBgYGBQUEBAMCAgEBAgYJChINDRsMCwkIBAL+pOriAsMBNBUJCggHBQMBAwMFBgcJCQsLDA0NDg4PDw8ODQ0MCwoKCAcGBQQCAQMEBgwJCgoVEzT94/7HAVgBloUwYBX98QECAQIDAwUFBgcGBgUFAwMCAT4CAgMEBQUGBwcICAkJCQkKCQkJCAgHBwYFBQQDAgKuCQkICAgHBwcFBQUEAwIBAQEBAgMEBQUFBwcHBwkICQkHCQgTFRUfFRQpFRUVExIJAQ3i4iMCSCQSExQTExMRERAPDw4ODAsLCQgHBQQDAQEDBAUHCAkLCwwODg8PEAgRExMTHRMTEiAcQgHUcP67/qgBh6AodBQBDIoGBgUFBAMCAgMEBQUGBv7nARkKCQkJCAcIBgYGBAQDAwEBAQEDAwQEBgYGCAcJCAkJAAAAAgAAAAAD8wPzAAMADAAANyE1ISUnBwkBJwcRIwwD6PwYAfTkLAEvAS8s4z8MP+blLP7OATIs5QLDAAAABgAAAAAD8wPzAB8AXwCfAOIA5QEyAAABFQ8FKwEvBj8GOwEfBQcVHw4/Dy8OIw8OFw8PLw8/Dx8OJyMPAycHFw8EJwcfBAcXNx8DBxc3HwE/Ahc3Jz8DFzcnPwUnBy8DNycHLwM1IycjNSURHw8hNSEjLwU1ETU/BTMhFTMVMz0BLw8hDw4DEgICAwQEBAUFBQQDAwMBAQEBAwMDBAUFBQQEBAMCAm8CAgMDBQUFBwYHCAgICQkJCAkIBwcHBgYFBAQDAgEBAQECAwQEBQYGBwcHCAkICQkJCAgIBwYHBQUFAwMCAt4BAgMFBQcICQkLCwwMDQ0ODg4MDQwLCgoJBwcGBQMCAQECAwUGBwcJCgoLDA0MDg4ODQ0MDAsLCQkIBwUFAwKiAhQTEhIiKiIJCwoIBDMKNAEDBQYvHDAODg8TFDQUFBQPDwkUNBQSDw0QMBwvBQUEAQE0CjMICAoQIioiFRESFTgQkP3OAQECBAQEBgYGCAcICQkJCgGW/moGBgYEBAMCAgMEBQUGBgGW+j4BAwMEBAYG1gYICAgJCAoJ/mUKCQkJCAcIBgYGBAQEAgEBBgUEBAQDAgICAgMEBAQFBQUEAwMDAQEDAwMEBQUJCAkIBwcHBgYFBAQDAgEBAQECAwQEBQYGBwcHCAkICQkJCAgHCAYGBgUEBAMCAgEBAgMEBAUGBgYIBwgICQkODQ0MDAsLCQkIBwUFAwIBAQIDBQUHCAkJCwsMDA0NDg4NDQ0MCwoKCQcHBgQEAgEBAgQEBgcHCQoKCwwNDQ22BAYICikkKQoQERILCTcKGBQTEhsxHA4NCww3FDgDAQECATgTOAoLDBEcMBwNERMTDQk4CRQQEBQpJCkLBwYENvqPDfzUCgkJCAkHCAYGBgQEAwMBAT8CAwQFBQYGAywGBgUFBAMC+nyCCQkJCQgIBwfVBwUFBAMCAQEBAQIEBAQGBgYIBwgJCQkAAAAABAAAAAADdgPzAAMABwAiAFMAADchNSEBFQc1AQ8KHQEhNzUvCSM7AR8PBzMVNzUzJz8PMzUjFSE1I4kC7v0SAbZ+ATIGBgoIBwUFAwMCAf6JAQIBAwQEBQcICgyECgoSEQ4MDAoIBwcFAwMDAQEBAm76bQIBAQICAwQFBggICgsNDhESFD/9kD8MfQF3UESUATgGBg0NDg4ODg8PDxBfYA8PDw4PDg4NDg0MAwQFBwgJCgsLDQ4ODhAPIH76jW1+IA8QDg4ODQsLCgkIBwUEA7x9fQACAAAAAAPzA7UAVABgAAABDwUVPwY7AR8JFQ8QFTM1Iz8SLw8HBQkBFwkBNwkBJwkBA1cODg0MDQwMDAwMDQwNDAcNDAoJBAMDAgEBAgQGBwkRDDcODAsKCAYCAgH6tAEBAgQECwxAGQ8MBQQEBAICAQEBAgIEBQUHBwgJCgoMDAwNEPylATH+zzIBJgEmMf7QATAx/tr+2gOzAwMFBgcIOQoJBwYEBAICBAUHBQQGBQcGDgwMCwoKDgorCwwMDQ4PCAgIJTMHBQYFBQsLMBUPDwgICAkJCgoLDAsLCgkICAcGBQQEAwIBAQEm/nH+cCYBgv5/JQGQAY8m/n4BggAACgAAAAAD8wPzAAMABwALAA8AEwAXABsAHwAjACgAAAEVIzUjFSM1IxUjNQEVIzUjFSM1IxUjNQEVIzUjFSM1IxUjNQMpAREhA7X6Pvo++gNq+j76PvoDavo++j76PwE5Aq/8GAFF+vr6+vr6ATj6+vr6+voBOPr6+vr6+vxXA+gAAAAAAQAAAAAD8wPzAIoAABMBNwEhMx8dHQEPHSsBFTM/Hy8eIyEBJwwBjSn+ygIQDw4ODg0ODQwNDAwLCwsKCgkJCAgHBwYGBQUDAwMCAQECAwMDBQUGBgcHCAgJCQoKCwsLDAwNDA0ODQ4ODg9eXhIREREREBAQDw8ODg4NDAwLCwoKCQgIBwYFBQQDAgEBAQECAwQFBQYHCAgJCgoLCwwMDQ4ODg8PEBAQERERERL99wEtKQKY/q0vAQkCAQMDBAQFBgYHBwgICQoJCgsLDAsMDQ0NDQ4NDg8ODw4ODg0ODQ0MDAwLCwsKCgkJCAgIBgcFBQUDBAICAT8BAQIDBAUFBgcICAkKCgsLDAwNDg4ODw8QEBAREREREhIREREREBAQDw8ODg0NDQwLCwoKCQgHBwcFBQMDAwEBCi8AAAUAAAAAA/MD8wALAA8AEwAXACcAACUjFTMVMzUzNSM1IwEVIzUjFSM1IxUjNQMhESMVIzUjFSM1IxUjNSMCAH19P3x8PwG1+j76Pvo/A+g/+j76Pvo/yD99fT99AXb6+vr6+vr+yAJx+vr6+vr6AAAcAAAAAAPUA9QAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAbwAAJTM1IwczNSMHMzUjBzM1IwczNSMHMzUjBzM1IyUzNSMFMzUjBTM1IyUzNSMFMzUjBTM1IyUzNSMhMzUjBzM1IwczNSMFMzUjBzM1IwczNSMhMzUjJTM1IwUzNSMFMzUjJTM1IwUzNSMFMzUjNSE1IQOWPj59Pz99Pz+7Pj68Pz99Pz98Pj4Daj4+/ks+Pv5LPj4Daj4+/ks+Pv5LPj4BtT4+AbU+Pn0/P30/P/6JPz99Pz98Pj4BtT4+AbU+Pv5LPj7+Sz4+A2o+Pv5LPj7+Sz4+A6j8WCw+Pj4+Pj4+Pj4+Pj4+Pj8/Pz8/Pj8/Pz8/Pj8+Pj4+Pj4+Pj4+Pj8+Pz8/Pz8+Pz8/Pz8+PgAFAAAAAAOWA/MAAwAfACIAQACFAAABByM3JyMVMwcjFTMHFzczBxc3MzUjNzM1IzcnByM3JyUjNScVMxEPBiMhIy8GET8GMwcRFR8OIT8ONRE1Lw8hDw4CRxJ8EjZwZxJVTA0+DnwMPQ5vZhJVTA0+DnwMPQGIjz76AQIDBAQGBQf9kAcFBgQEAwIBAQIDBAQGBQdeAgIDBAUFBgcHCAgJCQkKAnAKCQkJCAgHBwYFBQQDAgICAgMEBQUG1gcHCAgJCQkJ/mUKCQkJCAgHBwYFBQQDAgIBwn19Pj59P1kJYlkJYj59P1kJYlkJmI8s+v2vBgYFBQQDAgIDBAUFBgYDLAYGBQUEAwIf/NQKCQkICQcIBgYGBAQDAwEBAQEDAwQEBgYGCAcJCAkJCgJXCQkJCQgIBwfVBgYFBAMCAQEBAQMDBAQGBgYIBwkICQkAAAADAAAAAAPzA/MACAAMABUAACUXNxEzERc3JyUhNSElJwcXNycHESMBgypTP1Mqnf3tA+j8GAH0UyqcnCpTPvYvTP75AQdML419Pq9ML42NL0wBBwAFAAAAAAPzA/MAAwAHAA0AEQAVAAA3ITUhJSE1ISUXBxc3JwUhNSElITUhDAPo/BgBOQKv/VH+x29vLJubAQ0Cr/1R/scD6PwYDD/6Puxvbyybmx4++j8AAwAAAAADGQO1ACMARgCbAAABOwEfDg8OKwEREx8PDw8jEQcVESE/GzUvDzU/DzUvECEBzQ0NGRgVFBIQDw0LCQgGBQIBAQIEBgcJCwwODhERExUVF5F7FRQSERAODQwKCQgGBQMCAQECBAYHCAsLDg4PERITFBZtawEKHx4dDg0NDQwMDAsLCwoKCQgHBwYGBQQEAwICAQECBQYICQsNDw8REhMUFhYSERAPDg0MCwoIBwYFAwIBAwQGBAUFBg0PERMVFhcZGxz+7gHiAgMEBgcHCQsLDQ4PEBITEhEQDw4NDQsKCAgGBAQCAToBdwEBAwMFBQcHCQkLCwwODhASEQ8PDg0LCwoIBwUFAwIBARudP/3OAQMGAwQFBQYGBwcICAkJCgoKCgsLDAwMDQwODQ4WFRQTEhAQDw0MCgoHBgUDAwYHCQkKCw0NDg8PEBAREhILFRUTCQkICRAPDQ0KCQcFAwIAAAAABAAAAAAD8wPzAAMABwALAA8AADchNSE1ITUhNSE1ITUhNSEMAq/9UQPo/BgCr/1RA+j8GAw/+j76Pvo/AAAAAAMAAAAAA7UD8wADAAcACwAANyE1IQERIREDIREhyAJw/ZACr/0SPgNq/Ja9vAI8/JYDavxXA+gABQAAAAAD8wPzAAMABwATABcAJwAAARUjNRMVIzUFIxUzFTM1MzUjNSMnFSM1ITMVIxUzFSMVMxUjFSERIQI/+vr6AfN9fT99fT/5+v7H+vr6+vr6AnH9jwFF+voBOPr6Pz59fT59+vr6+j76Pvo/A+gAAAACAAAAAAN2A/MAAwB4AAA3ITUhExUfHj8eNREjEQcVDxQrAS8UNQMjiQLu/RI/AQIDAwQFBgYHCAgJCQoKCwsMDA0NDQ4PDg8PDxAQEBAQEA8PDw4PDg0NDQwMCwsKCgkJCAgHBgYFBAMDAgE+AQICAwMEBQUMDQ8RExMWFgwMDAwNDA0NDA0MDAwMCwsWExMRDw0MCgQDAwICAT4MPwF3EQ8QDw8PDw4ODg0MDQsMCwoKCQgJBwcGBgUEBAICAQEBAQICBAQFBgYHBwkICQoKCwwLDQwNDg4ODw8PDxAPEQIy/c4NDQwNDAsMDAsVFBIRDw4LCgQEAgMBAQEBAwIEBAQGCw4PERIUFRcMCwwNDA0CPwAFAAAAAAPzA/MAAwAHABMAFwAoAAABFSM1ExUjNQUjFTMVMzUzNSM1IyUVIzUDKQE1IzUzNSM1MzUjNTM1IQK7+fn5/sd9fT98fD8CMvk/ATgBOfr6+vr6+v2PAUT5+QE5+vo/Pn19Pn36+vr8Vz/6Pvo++j8AAAADAAAAAAN2A/MAJQBIAK8AAAEhOwEfBRURFQ8FIyEjLwU1ETU/BTMlFSM1Pw47AR8NBRUjDw8RHw8hPw8RLw8jNS8PDw4BRQF2XgYGBgQEAwICAwQFBQYG/c4GBgYEBAMCAgMEBQUGBgGW+gECAwQFBggICQkLCgwMDA0NDAwMCgsJCQgIBgUEAwL+yV4KCQkJCAcIBgYGBAQEAgEBAQECBAQEBgYGCAcICQkJCgIyCgkJCQgHCAYGBgQEBAIBAQEBAgQEBAYGBggHCAkJCQpeAQIFBggKCg0NDhAQERITExMTEhEQEA4NDQoKCAYFAgI+AgMEBAYFB/5LBgYFBQQDAgIDBAUFBgYBtQcFBgQEAwL6u7sNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA27AQECBAMFBgYGBwgICQkJCv5LCgkJCQgHCAYGBgQEBAIBAQEBAgQEBAYGBggHCAkJCQoBtQoJCQkICAcGBwUFBAMCAQG7ExMSEREPDg4MCwkIBgUDAQEDBQYICQsMDg4PERESEwADAAAAAAO1A/MAAwAHAAsAABMhNSElESERAyERIcgCcP2QAq/9Ej4DavyWAoe8cvyWA2r8VwPoAAMAAAAAA5YDtQADAAcADwAAJTMRIyUhNSERIREzESE1IQHhPj7+iQMs/NQBdz4Bd/zUSwE4Pz4Bd/7HATk+AAADAAAAAAPzA7UADAAQACcAACUHIy8DPQE/AyUJAw8HHwghNQUJAQIUP9GyAwICAgIDlQK0/qX+1AFb/bYGBQQDAwIBAQEBAgMDBAUGxQMK/joBxv57xD2tAwQEBQUEBASRWP6xASEBUP4fBgYHCAgICAgICAgIBwcGBr8+AgG3AXcAAAAcAAAAAAPUA9QAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAbwAAJTM1IwczNSMHMzUjBzM1IwczNSMHMzUjJTM1IwUzNSMlMzUjBTM1IyUzNSMHMzUjBzM1IwczNSMHMzUjBzM1IwczNSMlMzUjBTM1IyUzNSMFMzUjATMRIwczNSMHMzUjBzM1IwczNSMHMzUjBzM1IwMZPz99Pz+7Pj68Pz99Pz98Pj4BtT4+/ks+PgG1Pj7+Sz4+Au0/P30/P30/P30/P30/P30/P3w+PgG1Pj7+Sz4+AbU+Pv5LPj4Daj4+fT8/fT8/uz4+vD8/fT8/fD4+LD4+Pj4+Pj4+Pj4+Pj8/Pz4/Pz99Pj4+Pj4+Pj4+Pj4+Pn0/Pz8+Pz8//NQDqD4+Pj4+Pj4+Pj4+PgAAAAAEAAAAAAPzA/MAAwAHAAsADwAAJSE1ISUhNSElITUhJSE1IQFFAq/9Uf7HA+j8GAE5Aq/9Uf7HA+j8GAw/+j76Pvo/AAMAAAAAA/MDtQASAD0AgAAAATMfBRUHAyETPwQzAx8LMyEfBxUhDwcDETU/BgcRIRM/Ai8LIz0BLw0jIS8LKwIPDQOWBgQFBgYDAQGu/VjSAwIDCAgEQgUFBQV7BgcHBwcICAgBCAcFBgQEAwIB/lENDQwLCgoIA7ECAwQFBQYGXgMiwAQBAQICBQUHCAoJCwsMBmMCAgMEBQUGBwcICAkJCQr++AUFBQV7BgcHBwgHCAigCgkJCAkHCAYGBgQEBAIBAj4BAgUGCAgFBf5zAaQEAwMFAgE5AQECA2IEBQMDAgIBAQIDAwUFBgZeAQMEBgcJCwX+nwJqBgYFBQMDAgEf/PMBtQwMCwwMCwoKCQgGBQQCAV4JCQkJCAgHBwYFBQQDAgIBAQIDYgUEAwMCAgECAgMEBQUGBwcICAkJCQAAAwAAAAAD8wPzAAMABwALAAA3ITUhNSE1ITUhNSEMA+j8GAPo/BgD6PwYDD/6u/r6AAAAAAUAAAAAA/MD8wADACMAKwAvAE8AAAEVITUnDwMfBz8HLwYrAQ8BJREjNSEVIxEBESERAysBDwcVAzMVITUzAzUvBysBESECu/6KswQDAQEBAgIEBQYFBgYGBQUEAwIBAQIDBAQGBQcGBQYDHrv+DLsCcP6KP7sHBgYLCgkGBQIB+gH0+gECAgYHCgoMBge7/gwBRfr6sgUFBgYGBgUFBAMBAQEBAwQFBQYGBgYFBQQDAgIDQ/6Ku7sBdgF3/sgBOP7IAQIFBgkKCwYG/kR9fQG8BgYGCgoHBgQBAXcAAAAABwAAAAAD8wPzAAMABwALAA8AEwAlADEAAAEVIzUjFSM1IxUjNQEVIzUTFSM1ITMVIxUzFSM1IxUjNSMRIREhBRcHFzcXNyc3JwcnA7X6Pvo++gNq+vr6/unZ+vr6Pvo/A+j9sP5ocHAscHAtcHAtcHABRfr6+vr6+gE4+voBOPr6+j76+vrd/awD6CxwcC1wcC1wcCxwcAADAAAAAAN2A/MAAwAGAA4AADchNSEBIRMBMzchFzMBI4kC7v0SAf3+84f+yE5OAThOTv7vTwx9AbUBd/1R+voC7gAAABUAAAAAA9QD1AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMAUQBVAFkAXQAAJTM1IwczNSMHMzUjBTM1IwczNSMHMzUjJTM1IwUzNSMlMzUjBTM1IwEzNSMFMzUjJTM1IwUzNSMlMzUjBzM1IwczNSMHHQEhFSERMxEhNSERIwczNSMHMzUjBzM1IwOWPj59Pz99Pz/+iT8/fT8/fT8/A2s+PvyVPz8Daz4+/JU/PwNrPj78lT8/A2s+PvyVPz8Daz4+fT8/fT8/u/5KAbY+Abb+Sj68Pz99Pz99Pz8sPj4+Pj4+Pj4+Pj4+Pz8/Pj8/PwE4Pz8/Pj8/Pz4+Pj4+Pj59+j7+SwG1PgG1Pj4+Pj4+AAAABAAAAAAD8wPzAAMADwATABsAAAEVITUBFwcXNxc3JzcnBycBFSE1ByMRMxEhESEDtf6J/c5wcCxwcC1wcC1wcAN9/ok+Pj4B9P4MAUX6+gEMcHAscHAscHAscHABOPr6+v6K/scD6AACAAAAAAMvA/MAAwAMAAA3ITUhNycHCQEnBxEj5wIy/c765CwBLwEvLOQ+DD/m5Sz+zwExLOUCwwAAAAAEAAAAAAPzA/QAAwAHAAsAGQAAJSE1IREhNSERITUhBRc3EScHFzcnBxEXNycBgwJx/Y8Ccf2PAnH9j/6JKlNTKpydKlNTKp2JPwE4PgE5Pk8uS/z6Sy6Oji5LAwZLLo4AAAAAGwAAAAAD1APUAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAAAlMzUjBzM1IwczNSMFMzUjBzM1IwczNSMlMzUjBTM1IyUzNSMFMzUjJTM1IwczNSMHMzUjBTM1IwczNSMHMzUjJTM1IwUzNSMlMzUjBTM1IyUzNSMHMzUjBzM1IwMzESMHMzUjBzM1IwczNSMDlj4+fT8/fT8//ok/P30/P3w+PgNqPj78lj4+A2o+PvyWPj4Daj4+fT8/fT8//ok/P30/P3w+PgNqPj78lj4+A2o+PvyWPj4Daj4+fT8/fT8/uz4+vD8/fT8/fD4+LD4+Pj4+Pj4+Pj4+Pj8/Pz4/Pz99Pj4+Pj4+Pj4+Pj59Pz8/Pj8/Pz4+Pj4+PvxYA6g+Pj4+Pj4AAgAAAAAD8wPzAAgADAAAExc3ETMRFzcBJSE1IbIs5D7kLP7R/isD6PwYAhYs5v08AsPlLAExbj8AAAAAAQAAAAAD8wPzAIoAAAkBISMPHh8fMzUrAS8dPQE/HTMhARcJAQJAAS399xIREREREBAQDw8ODg4NDAwLCwoKCQgIBwYFBQQDAgEBAQECAwQFBQYHCAgJCgoLCwwMDQ4ODg8PEBAQERERERJeXg8ODg4NDg0MDQwMCwsLCgoJCQgIBwcGBgUFAwQCAgEBAgIEAwUFBgYHBwgICQkKCgsLCwwMDQwNDg0ODg4PAhD+yygBjf51A8X+9gEDAwMFBQcHBwgJCgoLCwwNDQ0ODw4QDxAQEREREhESERERERAQEA8PDg4ODQwMCwsKCgkICAcGBQUEAwIBAT8BAgMDAwUFBgYHBwgICQkKCgsLCwwMDQwNDg0ODg4PDg8ODQ4NDQ0NDAwLCwsKCgkJCAgHBwYGBQQEAwMCAf73LwFTAVwAAAAcAAAAAAPUA9QAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAbwAANyE1ISUzNSMFMzUjBTM1IyUzNSMFMzUjBTM1IyUzNSMhMzUjBzM1IwczNSMFMzUjBzM1IwczNSMhMzUjJTM1IwUzNSMFMzUjJTM1IwUzNSMFMzUjJTM1IwczNSMHMzUjBTM1IwczNSMHMzUjBTM1IywDqPxYA2o+Pv5LPj7+Sz4+A2o+Pv5LPj7+Sz4+AbU+PgG1Pj59Pz99Pz/+iT8/fT8/fD4+AbU+PgG1Pj7+Sz4+/ks+PgNqPj7+Sz4+/ks+PgNqPj59Pz99Pz/+iT8/fT8/fD4+AbU+Piw+Pj8/Pz8/Pj8/Pz8/Pj8+Pj4+Pj4+Pj4+Pj8+Pz8/Pz8+Pz8/Pz8+Pj4+Pj4+Pj4+Pj4+PgAAAQAAAAAD1APUAAsAAAEhFSERMxEhNSERIwHh/koBtj4Btv5KPgIfPv5KAbY+AbYAAwAAAAADdgPzAAcAJABIAAABFSE1MxEhESUfBxUzFSE1Mz0BPwg7ARcnDwsjESERIy8ODwIBBgH0Pv2QAVUGBQQHBQIDAX3+in0BAwMEBgUHCQsNEAdHBQYKCgwLBwMHAwIB+gLu+gECAwUFBggMDgoLCwwMDQwNDAM4fX39EwLteQMEBQoLBg4NNj8/JxYKCgkIBwcFBAMBNQIDBwcMDgoGEQsNDPyVA2sMDQsMCwoKDAsHBQQEAgEBAgMAAAAABgAAAAAD8wPzAAMAQwBHAIcAiwDLAAAlITUhBR8PPw8vDw8OASE1KQEfDz8PLw8PDgEhNSElHw8/Dy8PDw4BRQKv/VH+xwEBAgQEBAYGBggHCAkJCQoKCQkICQcIBgYGBAQDAwEBAQEDAwQEBgYGCAcJCAkJCgoJCQkIBwgGBgYEBAQCAQE4Aq/9Uf7HAQECBAMFBgYGBwgICQkJCgkKCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQoJCgkJCQgIBwYGBgUDBAIBATgCr/1R/scBAQIEAwUGBgYHCAgJCQkKCQoJCAkHCAYGBgQEAwMBAQEBAwMEBAYGBggHCQgJCgkKCQkJCAgHBgYGBQMEAgFLPh8KCQkICQcIBgYGBAQDAwEBAQEDAwQEBgYGCAcJCAkJCgoJCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkBTj4KCQkICQcIBgYGBAQDAwEBAQEDAwQEBgYGCAcJCAkJCgoJCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkBLj8fCgkJCAkHCAYGBgQEAwMBAQEBAwMEBAYGBggHCQgJCQoKCQkICQcIBgYGBAQDAwEBAQEDAwQEBgYGCAcJCAkJAAAIAAAAAAPzA/MAAwAHAAsAEQAVABkAHQAhAAABFSM1IxUjNSMVIzUTMyEVITUBFSM1IxUjNSMVIzUDIREhA7X6Pvo++vo+AjL8lgNq+j76Pvo/A+j8GAFF+vr6+vr6ATj6+gE4+vr6+vr6/FcD6AAABAAAAAAD8wPzAAsADwATABsAAAEXBxc3FzcnNycHJwERIxEhESMRAyEVITUhESEBg3BwLHBwLHBwLHBwAgb5/on6PwE5AXYBOfwYARlxcCxwcCxwcSxwcAJw/ooBdv6KAXb+Sz4+AfQAAAAABQAAAAAD1APUAAMABwALAA8AEwAAAREhESMRIREBESERIxEhEQMhESEDlv6JPv6JAyz+iT7+iT4DqPxYAeH+iQF3/okBdwG1/okBd/6JAXf8lgOoAAAAAAIAAAAAA/MDtQBTAF8AAAEPBRU/BjsBHwkVDxAVMzUjPxEvDisBCQIXCQE3CQEnCQEDVw4ODQwNDAwMDAwNDA0MBw0MCgkEAwMCAQECBAYHCREMNw4MCwoIBgICAfq0AQECCAsMNiMPDAUEBAQCAgEBAQICBAUFBwcICQoKDAwMDRD8pQEx/s8yASYBJjH+0AEwMf7a/toB/gMDBQYHCDkKCAgGBAQCAgQFBwUFBQUHBg4MDAsKCg4KKwsMDA4ODggICSU0BgYFCwsLKRwODwgICQkJCgoLDAsLCgkICAYGBgQEAwIBAZD+cP5xJgGB/n8mAY8Bjyb+fgGCAAIAAAAAA/MDtQADAAgAAAERIREDKQERIQJ9/c4/AnEBd/wYA3f9EgLu/NQDagAAAAgAAAAAA/MD8wADAAcACwAPABMAFwAbAB8AACUzNSMFITUhJTM1IwUhNSElMzUjBSE1ISUzNSMFITUhA7U/P/xXAyz81AOpPz/8VwG2/koDqT8//FcCcf2PA6k/P/xXAyz81Aw/Pz/6Pj4++j4+Pvo/Pz8AAQAAAAAC2gPzAAMAACUzASMBJUkBbUgMA+gAABsAAAAAA9QD1AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawAAJTM1IwczNSMHMzUjBzM1IwczNSMHMzUjBzM1IyUzNSMFMzUjBTM1IyUzNSMFMzUjBTM1IzUhNSElMzUjBTM1IwUzNSMlMzUjBTM1IwUzNSMlMzUjBzM1IwczNSMHMzUjBzM1IwczNSMHMzUjA5Y+Pn0/P30/P7s+Prw/P30/P3w+PgNqPj7+Sz4+/ks+PgNqPj7+Sz4+/ks+PgOo/FgDaj4+/ks+Pv5LPj4Daj4+/ks+Pv5LPj4Daj4+fT8/fT8/uz4+vD8/fT8/fD4+LD4+Pj4+Pj4+Pj4+Pj4+Pz8/Pz8+Pz8/Pz99Pn0/Pz8/Pz4/Pz8/Pz4+Pj4+Pj4+Pj4+Pj4+ABwAAAAAA9QD1AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAAAlMzUjBzM1IwczNSMHMzUjBzM1IwczNSMlMzUjBTM1IyUzNSMFMzUjJTM1IwczNSMHMzUjBzM1IwczNSMHMzUjBzM1IyUzNSMFMzUjJTM1IwUzNSMlMzUjBzM1IwczNSMHMzUjBzM1IwczNSMDMxEjA5Y+Pn0/P30/P7s+Prw/P30/PwLuPj7+Sz4+AbU+Pv5LPj4BtT4+fT8/fT8/fT8/fT8/fT8/fT8/Au4+Pv5LPj4BtT4+/ks+PgG1Pj59Pz99Pz+7Pj68Pz99Pz98Pj4sPj4+Pj4+Pj4+Pj4+Pz8/Pj8/P30+Pj4+Pj4+Pj4+Pj4+fT8/Pz4/Pz8+Pj4+Pj4+Pj4+Pj78WAOoAAAAAAgAAAAAA/MD8wAFAAkAEQAZAB0AIwAnADMAADcjFTM1IzMhNSkBMxUzNTM1IzcjFTM1IzUjMyE1KQEzFTM1IyUhNSErARUzFSMVMzUjNSOJfbw/vAKv/VH+xz8+P7w/P7w/PvoCr/1R/sd9P7wBOQKv/VH6Pz8/vD8+Sz99Pz8/Prw/Pz4+Pn36Pj4/Pj68AAIAAAAAA/MC+QCHARQAAAEfBzsBHw0dAg8NKwIvDT0BLwcPBxUfDyE/DzUvDyMPBgUVHw8zPwY9AS8GKwEvDT0CPw07Ah8ZPwcvEyMPDgK7AQIDBAQFBgddDQwMDAsKCgkIBwYFBQMCAgMFBQYHCAkKCgsMDAwN+gwNDAsLCgoJCAcGBgQDAgECAwQEBgUHBgYFBQQCAgEBAwUGCAkLDA0PDwgREhITAQMUEhIREQ8PDQwLCQQHBgQCAQMFBggJCwwNDw8IERISE2cHBQYEBAMC/VABAwUGCAkLDA0PDwgREhITZwcFBgQEAwICAwQEBgUHXQ0NDAsLCgoJCAcGBgQDAgIDBAYGBwgJCgoLCwwNDfkKCQkJCAkICAcHBgYGBQUEBAMCAQIDBAQFBgcGBgUFAwMCAQEDBQYGBwcJCQoKCwwMDA0NDg4O+RMTEhERDw8NDAsJCAYFAwLbBwUGBAQDAgECAwQGBgcICQoKCwsMDQx9DQ0MCwsKCgkIBwYGBAMCAgMEBgYHCAkKCgsLDA0NRQcFBgQEAwIBAQIDBAQGBQdFFBISEREPDw0MCwkEBwYEAgEDBQYICQsMDQ8PCBESEhOGFBISEREPDw0MCwkEBwYEAgECAgQFBQaifRQSEhERDw8NDAsJBAcGBAIBAgIEBQUGBgcFBgQEAwIBAgMEBgYHCAkKCgsLDA0MfQ0MDAwLCgoJCAcGBQUDAgECAgMEBAUFBgYHBwcJCAwMDBMGBQUEAgIBAQICBAUFBgYTExIRDQwMCwoJCQgHBgUFAwMBAQEDBQYICQsMDQ8PERESEgAAAAQAAAAAA/MD8wADAAcACwAPAAA3ITUhJyE1ITchNSEnITUhqAKw/VCcA+j8GJwCsP1QnAPo/BgMP/o++j76PwAFAAAAAAPzA/MAAwAHAAsAGwAnAAABFSM1IxUjNSMVIzUDMzUzFTM1MxUzNTMVMxEhJSMVMxUzNTM1IzUjA7X6Pvo++j8/+j76Pvo//BgB9H19Pn19PgI++fn5+fn5/c76+vr6+voCcfo/fX0/fQAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAZAAEAAQAAAAAAAgAHABoAAQAAAAAAAwAZACEAAQAAAAAABAAZADoAAQAAAAAABQALAFMAAQAAAAAABgAZAF4AAQAAAAAACgAsAHcAAQAAAAAACwASAKMAAwABBAkAAAACALUAAwABBAkAAQAyALcAAwABBAkAAgAOAOkAAwABBAkAAwAyAPcAAwABBAkABAAyASkAAwABBAkABQAWAVsAAwABBAkABgAyAXEAAwABBAkACgBYAaMAAwABBAkACwAkAfsgRmluYWwgU2FtcGxlIGJyb3dlciBpY29uc1JlZ3VsYXJGaW5hbCBTYW1wbGUgYnJvd2VyIGljb25zRmluYWwgU2FtcGxlIGJyb3dlciBpY29uc1ZlcnNpb24gMS4wRmluYWwgU2FtcGxlIGJyb3dlciBpY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAEYAaQBuAGEAbAAgAFMAYQBtAHAAbABlACAAYgByAG8AdwBlAHIAIABpAGMAbwBuAHMARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/AQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAAtTdHJva2VTdHlsZQhCb29rbWFyawdQaWN0dXJlBEZpbmQNT3V0c2lkZUJvcmRlcgdKdXN0aWZ5BUNsb3NlDkRlY3JlYXNlSW5kZW50FVBpeGVsQWxpZ25DZW50ZXJUYWJsZQ9CYWNrZ3JvdW5kQ29sb3ILQWxpZ25Cb3R0b20JUGFnZVNldHVwDkhpZ2hsaWdodENvbG9yC1N1cGVyc2NyaXB0BVRhYmxlBFVuZG8LSW5zZXJ0QmVsb3cJVG9wQm9yZGVyClBhZ2VOdW1iZXIQQWxpZ25DZW50ZXJUYWJsZQ5JbmNyZWFzZUluZGVudARCb2xkCUFsaWduTGVmdAZGb290ZXILSW5zZXJ0UmlnaHQJVW5kZXJsaW5lCkluc2VydExlZnQETG9jawZIZWFkZXINU3RyaWtldGhyb3VnaAhDbGVhckFsbAtSaWdodEJvcmRlcgpBbGlnblJpZ2h0BE9wZW4KU3Ryb2tlU2l6ZQVQcmludAtEZWxldGVUYWJsZQlGb250Q29sb3INSW5zaWRlQm9yZGVycwpEZWxldGVSb3dzCERvd25sb2FkC0xpbmVTcGFjaW5nFEluc2lkZVZlcnRpY2FsQm9yZGVyCEFsaWduVE9wBFJlZG8MQm90dG9tQm9yZGVyA05ldwVQYXN0ZQdCdWxsZXRzBENlbGwNRGVsZXRlQ29sdW1ucwpBbGxCb3JkZXJzCVN1YnNjcmlwdBBTaG93SGlkZVByb3BlcnR5DlRhYmxlT2ZDb250ZW50Bkl0YWxpYxZJbnNpZGVIb3Jpem9uZGFsYm9yZGVyC0xlZnRCb3JkZXJzCU51bWJlcmluZwRMaW5rC0FsaWduQ2VudGVyC0luc2VydEFib3ZlAAAAAAA=) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    [class^="e-de-icon-"],
+    [class*=" e-de-icon-"] {
+        font-family: 'Sample brower icons' !important;
+    }
+
+    .e-de-icon-Table:before {
+        content: "\e70e";
+    }
+
+    .e-de-icon-InsertBelow:before {
+        content: "\e710";
+    }
+
+    .e-de-icon-InsertRight:before {
+        content: "\e718";
+    }
+
+    .e-de-icon-InsertLeft:before {
+        content: "\e71a";
+    }
+
+    .e-de-icon-DeleteTable:before {
+        content: "\e724";
+    }
+
+    .e-de-icon-DeleteRows:before {
+        content: "\e727";
+    }
+
+    .e-de-icon-Cell:before {
+        content: "\e731";
+    }
+
+    .e-de-icon-DeleteColumns:before {
+        content: "\e732";
+    }
+
+    .e-de-icon-InsertAbove:before {
+        content: "\e73d";
+    }
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/razor
new file mode 100644
index 000000000..686579dd9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/razor
@@ -0,0 +1,166 @@
+<div id="toolbar"></div>
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableContextMenu(true).EnableEditorHistory(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.resize();
+        updateContainerSize();
+        function toolbarButtonClick(arg) {
+            switch (arg.item.id) {
+                case 'bold':
+                    //Toggles the bold of selected content
+                    documenteditor.editor.toggleBold();
+                    break;
+                case 'italic':
+                    //Toggles the Italic of selected content
+                    documenteditor.editor.toggleItalic();
+                    break;
+                case 'underline':
+                    //Toggles the underline of selected content
+                    documenteditor.editor.toggleUnderline('Single');
+                    break;
+                case 'strikethrough':
+                    //Toggles the strikethrough of selected content
+                    documenteditor.editor.toggleStrikethrough();
+                    break;
+                case 'subscript':
+                    //Toggles the subscript of selected content
+                    documenteditor.editor.toggleSubscript();
+                    break;
+                case 'superscript':
+                    //Toggles the superscript of selected content
+                    documenteditor.editor.toggleSuperscript();
+                    break;
+            }
+        }
+        function updateContainerSize() {
+            document.getElementById('container').style.height =
+                window.innerHeight - document.getElementById('toolbar').offsetHeight + 'px';
+        }
+        //To change the font Style of selected content
+        function changeFontFamily(args) {
+            documenteditor.selection.characterFormat.fontFamily = args.value;
+            documenteditor.focusIn();
+        }
+        //To Change the font Size of selected content
+        function changeFontSize(args) {
+            documenteditor.selection.characterFormat.fontSize = args.value;
+            documenteditor.focusIn();
+        }
+        //To Change the font Color of selected content
+        function changeFontColor(args) {
+            documenteditor.selection.characterFormat.fontColor = args.currentValue.hex;
+            documenteditor.focusIn();
+        }
+        documenteditor.selectionChange = function () {
+            setTimeout(function () { onSelectionChange(); }, 20);
+        };
+        //Selection change to retrieve formatting
+        function onSelectionChange() {
+            if (documenteditor.selection) {
+                enableDisableFontOptions();
+                // #endregion
+            }
+        }
+        function enableDisableFontOptions() {
+            var characterformat = documenteditor.selection.characterFormat;
+            var properties = [characterformat.bold, characterformat.italic, characterformat.underline, characterformat.strikeThrough];
+            var toggleBtnId = ["bold", "italic", "underline", "strikethrough"];
+            for (var i = 0; i < properties.length; i++) {
+                changeActiveState(properties[i], toggleBtnId[i]);
+            }
+        }
+        function changeActiveState(property, btnId) {
+            var toggleBtn = document.getElementById(btnId);
+            if ((typeof (property) == 'boolean' && property == true) || (typeof (property) == 'string' && property !== 'None'))
+                toggleBtn.classList.add("e-btn-toggle");
+            else {
+                if (toggleBtn.classList.contains("e-btn-toggle"))
+                    toggleBtn.classList.remove("e-btn-toggle");
+            }
+        }
+        var fontStyle = ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Courier New', 'Georgia', 'Impact', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Symbol', 'Times New Roman', 'Verdana', 'Windings'
+        ];
+        var fontSize = ['8', '9', '10', '11', '12', '14', '16', '18',
+            '20', '22', '24', '26', '28', '36', '48', '72', '96'];
+        var toolBar = new ej.navigations.Toolbar({
+            clicked: toolbarButtonClick,
+            items: [
+                {
+                    prefixIcon: 'e-de-icon-Bold',
+                    tooltipText: 'Bold',
+                    id: 'bold',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Italic',
+                    tooltipText: 'Italic',
+                    id: 'italic',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Underline',
+                    tooltipText: 'Underline',
+                    id: 'underline',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Strikethrough',
+                    tooltipText: 'Strikethrough',
+                    id: 'strikethrough',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Subscript',
+                    tooltipText: 'Subscript',
+                    id: 'subscript',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Superscript',
+                    tooltipText: 'Superscript',
+                    id: 'superscript',
+                },
+                { type: 'Seperator' },
+                {
+                    type: 'Input',
+                    template: new ColorPicker({
+                        value: '#000000',
+                        showButtons: true,
+                        change: changeFontColor
+                    }),
+                },
+                { type: 'Seperator' },
+                {
+                    type: 'Input',
+                    template: new ComboBox({
+                        dataSource: fontStyle,
+                        width: 120,
+                        index: 2,
+                        allowCustom: true,
+                        change: changeFontFamily,
+                        showClearButton: false,
+                    }),
+                },
+                {
+                    type: 'Input',
+                    template: new ComboBox({
+                        dataSource: fontSize,
+                        width: 80,
+                        allowCustom: true,
+                        index: 2,
+                        change: changeFontSize,
+                        showClearButton: false,
+                    }),
+                },
+            ],
+        });
+        toolBar.appendTo('#toolbar');
+    });
+</script>
+
+<style>
+    #container {
+        width: 100%;
+        height: 100%
+    }
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/tagHelper
new file mode 100644
index 000000000..1ab07bf02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/text-format/tagHelper
@@ -0,0 +1,166 @@
+<div id="toolbar"></div>
+<div id="documenteditor" style="width:100%;height:100%" >
+    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableEditor=true enableSfdtExport=true id="container"></ejs-documenteditor>
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        documenteditor = document.getElementById("container").ej2_instances[0];
+        documenteditor.resize();
+        updateContainerSize();
+        function toolbarButtonClick(arg) {
+            switch (arg.item.id) {
+                case 'bold':
+                    //Toggles the bold of selected content
+                    documenteditor.editor.toggleBold();
+                    break;
+                case 'italic':
+                    //Toggles the Italic of selected content
+                    documenteditor.editor.toggleItalic();
+                    break;
+                case 'underline':
+                    //Toggles the underline of selected content
+                    documenteditor.editor.toggleUnderline('Single');
+                    break;
+                case 'strikethrough':
+                    //Toggles the strikethrough of selected content
+                    documenteditor.editor.toggleStrikethrough();
+                    break;
+                case 'subscript':
+                    //Toggles the subscript of selected content
+                    documenteditor.editor.toggleSubscript();
+                    break;
+                case 'superscript':
+                    //Toggles the superscript of selected content
+                    documenteditor.editor.toggleSuperscript();
+                    break;
+            }
+        }
+        function updateContainerSize() {
+            document.getElementById('container').style.height =
+                window.innerHeight - document.getElementById('toolbar').offsetHeight + 'px';
+        }
+        //To change the font Style of selected content
+        function changeFontFamily(args) {
+            documenteditor.selection.characterFormat.fontFamily = args.value;
+            documenteditor.focusIn();
+        }
+        //To Change the font Size of selected content
+        function changeFontSize(args) {
+            documenteditor.selection.characterFormat.fontSize = args.value;
+            documenteditor.focusIn();
+        }
+        //To Change the font Color of selected content
+        function changeFontColor(args) {
+            documenteditor.selection.characterFormat.fontColor = args.currentValue.hex;
+            documenteditor.focusIn();
+        }
+        documenteditor.selectionChange = function () {
+            setTimeout(function () { onSelectionChange(); }, 20);
+        };
+        //Selection change to retrieve formatting
+        function onSelectionChange() {
+            if (documenteditor.selection) {
+                enableDisableFontOptions();
+                // #endregion
+            }
+        }
+        function enableDisableFontOptions() {
+            var characterformat = documenteditor.selection.characterFormat;
+            var properties = [characterformat.bold, characterformat.italic, characterformat.underline, characterformat.strikeThrough];
+            var toggleBtnId = ["bold", "italic", "underline", "strikethrough"];
+            for (var i = 0; i < properties.length; i++) {
+                changeActiveState(properties[i], toggleBtnId[i]);
+            }
+        }
+        function changeActiveState(property, btnId) {
+            var toggleBtn = document.getElementById(btnId);
+            if ((typeof (property) == 'boolean' && property == true) || (typeof (property) == 'string' && property !== 'None'))
+                toggleBtn.classList.add("e-btn-toggle");
+            else {
+                if (toggleBtn.classList.contains("e-btn-toggle"))
+                    toggleBtn.classList.remove("e-btn-toggle");
+            }
+        }
+        var fontStyle = ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Courier New', 'Georgia', 'Impact', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Symbol', 'Times New Roman', 'Verdana', 'Windings'
+        ];
+        var fontSize = ['8', '9', '10', '11', '12', '14', '16', '18',
+            '20', '22', '24', '26', '28', '36', '48', '72', '96'];
+        var toolBar = new ej.navigations.Toolbar({
+            clicked: toolbarButtonClick,
+            items: [
+                {
+                    prefixIcon: 'e-de-icon-Bold',
+                    tooltipText: 'Bold',
+                    id: 'bold',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Italic',
+                    tooltipText: 'Italic',
+                    id: 'italic',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Underline',
+                    tooltipText: 'Underline',
+                    id: 'underline',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Strikethrough',
+                    tooltipText: 'Strikethrough',
+                    id: 'strikethrough',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Subscript',
+                    tooltipText: 'Subscript',
+                    id: 'subscript',
+                },
+                {
+                    prefixIcon: 'e-de-icon-Superscript',
+                    tooltipText: 'Superscript',
+                    id: 'superscript',
+                },
+                { type: 'Seperator' },
+                {
+                    type: 'Input',
+                    template: new ColorPicker({
+                        value: '#000000',
+                        showButtons: true,
+                        change: changeFontColor
+                    }),
+                },
+                { type: 'Seperator' },
+                {
+                    type: 'Input',
+                    template: new ComboBox({
+                        dataSource: fontStyle,
+                        width: 120,
+                        index: 2,
+                        allowCustom: true,
+                        change: changeFontFamily,
+                        showClearButton: false,
+                    }),
+                },
+                {
+                    type: 'Input',
+                    template: new ComboBox({
+                        dataSource: fontSize,
+                        width: 80,
+                        allowCustom: true,
+                        index: 2,
+                        change: changeFontSize,
+                        showClearButton: false,
+                    }),
+                },
+            ],
+        });
+        toolBar.appendTo('#toolbar');
+    });
+</script>
+
+<style>
+    #container {
+        width: 100%;
+        height: 100%
+    }
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/document-editor.cs
new file mode 100644
index 000000000..048a3eb88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/document-editor.cs
@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+   
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/razor
new file mode 100644
index 000000000..597b8d130
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/razor
@@ -0,0 +1 @@
+@Html.EJS().DocumentEditor("container").LayoutType(Syncfusion.EJ2.DocumentEditor.LayoutType.Continuous).Render()
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/tagHelper
new file mode 100644
index 000000000..de1aaa91a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor/web-layout/tagHelper
@@ -0,0 +1 @@
+<ejs-documenteditor id="container" layoutType="Continuous"></ejs-documenteditor>
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/index.js
new file mode 100644
index 000000000..fadff773c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/index.js
@@ -0,0 +1,15 @@
+var documenteditorcontainer = new ej.documenteditor.DocumentEditorContainer({
+  isReadOnly: false
+});
+ej.documenteditor.DocumentEditorContainer.Inject(
+  ej.documenteditor.Toolbar
+);
+onCreated = function() {
+  var data =
+    {"optimizeSfdt":false,"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"headerDistance":36,"footerDistance":36,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false,"breakCode":"NewPage","endnoteNumberFormat":"LowerCaseRoman","footNoteNumberFormat":"Arabic","restartIndexForFootnotes":"DoNotRestart","restartIndexForEndnotes":"DoNotRestart","initialFootNoteNumber":1,"initialEndNoteNumber":1,"pageNumberStyle":"Arabic","numberOfColumns":1,"equalWidth":true,"lineBetweenColumns":false,"columns":[]},"blocks":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":18,"fontFamily":"Monotype Corsiva","fontSizeBidi":18,"fontFamilyAscii":"Monotype Corsiva","fontFamilyNonFarEast":"Monotype Corsiva","fontFamilyFarEast":"Monotype Corsiva"},"text":"List of text formatting options"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"bold":true,"boldBidi":true},"text":"Bold"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"boldBidi":true},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#808080FF"},"inlines":[{"characterFormat":{"fontColor":"#CC99FFFF"},"text":"C"},{"characterFormat":{"fontColor":"#333333FF"},"text":"o"},{"characterFormat":{"fontColor":"#FF6600FF"},"text":"l"},{"characterFormat":{"fontColor":"#3366FFFF"},"text":"o"},{"characterFormat":{"fontColor":"#FF9900FF"},"text":"r"},{"characterFormat":{"fontColor":"#FF6600FF"},"text":"e"},{"characterFormat":{"fontColor":"#808080FF"},"text":"d"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#808080FF"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"scaling":150},"inlines":[{"characterFormat":{"scaling":150},"text":"Scaling"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#808080FF"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"characterSpacing":2},"inlines":[{"characterFormat":{"characterSpacing":2},"text":"Spacing"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#00B0F0FF"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"boldBidi":true},"inlines":[{"characterFormat":{"strikethrough":"DoubleStrike"},"text":"Double Strike"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"strikethrough":"DoubleStrike"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#ED7D31FF"},"inlines":[{"characterFormat":{"highlightColor":"Turquoise","fontColor":"#ED7D31FF"},"text":"Highlighted"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"italic":true,"italicBidi":true},"text":"Italicized"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"italic":true,"italicBidi":true},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"strikethrough":"SingleStrike"},"inlines":[{"characterFormat":{"strikethrough":"SingleStrike"},"text":"Strikeout "}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"strikethrough":"SingleStrike"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"strikethrough":"SingleStrike"},"inlines":[{"characterFormat":{},"text":"Some"},{"characterFormat":{"baselineAlignment":"Subscript"},"text":"Subscript"},{"characterFormat":{"baselineAlignment":"Subscript"},"text":" "}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"baselineAlignment":"Subscript"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"baselineAlignment":"Subscript"},"inlines":[{"characterFormat":{},"text":"Some"},{"characterFormat":{"baselineAlignment":"Superscript"},"text":"Superscript"},{"characterFormat":{"baselineAlignment":"Superscript"},"text":" "}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"baselineAlignment":"Superscript"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"underline":"Single"},"inlines":[{"characterFormat":{"underline":"Single"},"text":"Underlined"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":" "}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":18,"fontFamily":"Monotype Corsiva","fontSizeBidi":18,"fontFamilyAscii":"Monotype Corsiva","fontFamilyNonFarEast":"Monotype Corsiva","fontFamilyFarEast":"Monotype Corsiva"},"text":"Text with different fonts and sizes"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":11,"fontFamily":"Book Antiqua","underline":"Double","fontColor":"#7028E8FF","fontSizeBidi":11,"fontFamilyAscii":"Book Antiqua","fontFamilyNonFarEast":"Book Antiqua","fontFamilyFarEast":"Book Antiqua"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":11,"fontFamily":"Book Antiqua","fontColor":"#7028E8FF","fontSizeBidi":11,"fontFamilyAscii":"Book Antiqua","fontFamilyNonFarEast":"Book Antiqua","fontFamilyFarEast":"Book Antiqua"},"text":"The quick brown fox jumps over the lazy dog [Book Antiqua]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontFamily":"Cambria","fontColor":"#F1C084FF","fontFamilyAscii":"Cambria","fontFamilyNonFarEast":"Cambria","fontFamilyFarEast":"Cambria"},"text":"The quick brown fox jumps over the lazy dog [Bitstream Vera Sans]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":13,"fontFamily":"Comic Sans MS","fontColor":"#BD5DCDFF","fontSizeBidi":13,"fontFamilyAscii":"Comic Sans MS","fontFamilyNonFarEast":"Comic Sans MS","fontFamilyFarEast":"Comic Sans MS"},"text":"The quick brown fox jumps over the lazy dog [Comic Sans MS]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":14,"fontFamily":"Microsoft Sans Serif","fontColor":"#4D72EEFF","fontSizeBidi":14,"fontFamilyAscii":"Microsoft Sans Serif","fontFamilyNonFarEast":"Microsoft Sans Serif","fontFamilyFarEast":"Microsoft Sans Serif"},"text":"The quick brown fox jumps over the lazy dog [Microsoft Sans Serif]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":15,"fontFamily":"바탕","fontColor":"#335388FF","fontSizeBidi":15,"fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"The quick brown fox jumps over the lazy dog ["},{"characterFormat":{"fontSize":15,"fontFamily":"바탕","fontColor":"#335388FF","fontSizeBidi":15,"fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"Batang"},{"characterFormat":{"fontSize":15,"fontFamily":"바탕","fontColor":"#335388FF","fontSizeBidi":15,"fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Arial","fontColor":"#31B463FF","fontSizeBidi":16,"fontFamilyAscii":"Arial","fontFamilyNonFarEast":"Arial","fontFamilyFarEast":"Arial"},"inlines":[{"characterFormat":{"fontSize":16,"fontFamily":"Arial","fontColor":"#31B463FF","fontSizeBidi":16,"fontFamilyAscii":"Arial","fontFamilyNonFarEast":"Arial","fontFamilyFarEast":"Arial"},"text":"The quick brown fox jumps over the lazy dog [Arial]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":16,"fontSizeBidi":16},"inlines":[{"characterFormat":{"fontSize":16,"fontFamily":"Book Antiqua","fontColor":"#7028E8FF","fontSizeBidi":16,"fontFamilyAscii":"Book Antiqua","fontFamilyNonFarEast":"Book Antiqua","fontFamilyFarEast":"Book Antiqua"},"text":"The quick brown fox jumps over the lazy dog [Book Antiqua]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":15,"fontSizeBidi":15},"inlines":[{"characterFormat":{"fontSize":15,"fontFamily":"Cambria","fontColor":"#F1C084FF","fontSizeBidi":15,"fontFamilyAscii":"Cambria","fontFamilyNonFarEast":"Cambria","fontFamilyFarEast":"Cambria"},"text":"The quick brown fox jumps over the lazy dog [Bitstream Vera Sans]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":14,"fontSizeBidi":14},"inlines":[{"characterFormat":{"fontSize":14,"fontFamily":"Comic Sans MS","fontColor":"#BD5DCDFF","fontSizeBidi":14,"fontFamilyAscii":"Comic Sans MS","fontFamilyNonFarEast":"Comic Sans MS","fontFamilyFarEast":"Comic Sans MS"},"text":"The quick brown fox jumps over the lazy dog [Comic Sans MS]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":13,"fontSizeBidi":13},"inlines":[{"characterFormat":{"fontSize":13,"fontFamily":"Microsoft Sans Serif","fontColor":"#4D72EEFF","fontSizeBidi":13,"fontFamilyAscii":"Microsoft Sans Serif","fontFamilyNonFarEast":"Microsoft Sans Serif","fontFamilyFarEast":"Microsoft Sans Serif"},"text":"The quick brown fox jumps over the lazy dog [Microsoft Sans Serif]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":11,"fontSizeBidi":11},"inlines":[{"characterFormat":{"fontFamily":"바탕","fontColor":"#335388FF","fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"The quick brown fox jumps over the lazy dog ["},{"characterFormat":{"fontFamily":"바탕","fontColor":"#335388FF","fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"Batang"},{"characterFormat":{"fontFamily":"바탕","fontColor":"#335388FF","fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontSizeBidi":10},"inlines":[{"characterFormat":{"fontSize":11,"fontFamily":"Arial","fontColor":"#31B463FF","fontSizeBidi":11,"fontFamilyAscii":"Arial","fontFamilyNonFarEast":"Arial","fontFamilyFarEast":"Arial"},"text":"The quick brown fox jumps over the lazy dog [Arial]"}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Times New Roman","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#00000000","boldBidi":false,"italicBidi":false,"fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false,"localeIdBidi":1025,"fontFamilyAscii":"Times New Roman","fontFamilyNonFarEast":"Times New Roman","fontFamilyFarEast":"Times New Roman"},"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"BodyText","bidi":false,"keepLinesTogether":false,"keepWithNext":false,"widowControl":true,"listFormat":{}},"fontSubstitutionTable":{},"themeFontLanguages":{},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"compatibilityMode":"Word2013","allowSpaceOfSameStyleInTable":false,"themes":{"fontScheme":{"fontSchemeName":"Office","majorFontScheme":{"fontSchemeList":[{"name":"latin","typeface":"Calibri Light","panose":"020F0302020204030204"},{"name":"ea","panose":"020F0302020204030204"},{"name":"cs","panose":"020F0302020204030204"}],"fontTypeface":{"Jpan":"游ゴシック Light","Hang":"맑은 고딕","Hans":"等线 Light","Hant":"新細明體","Arab":"Times New Roman","Hebr":"Times New Roman","Thai":"Angsana New","Ethi":"Nyala","Beng":"Vrinda","Gujr":"Shruti","Khmr":"MoolBoran","Knda":"Tunga","Guru":"Raavi","Cans":"Euphemia","Cher":"Plantagenet Cherokee","Yiii":"Microsoft Yi Baiti","Tibt":"Microsoft Himalaya","Thaa":"MV Boli","Deva":"Mangal","Telu":"Gautami","Taml":"Latha","Syrc":"Estrangelo Edessa","Orya":"Kalinga","Mlym":"Kartika","Laoo":"DokChampa","Sinh":"Iskoola Pota","Mong":"Mongolian Baiti","Viet":"Times New Roman","Uigh":"Microsoft Uighur","Geor":"Sylfaen","Armn":"Arial","Bugi":"Leelawadee UI","Bopo":"Microsoft JhengHei","Java":"Javanese Text","Lisu":"Segoe UI","Mymr":"Myanmar Text","Nkoo":"Ebrima","Olck":"Nirmala UI","Osma":"Ebrima","Phag":"Phagspa","Syrn":"Estrangelo Edessa","Syrj":"Estrangelo Edessa","Syre":"Estrangelo Edessa","Sora":"Nirmala UI","Tale":"Microsoft Tai Le","Talu":"Microsoft New Tai Lue","Tfng":"Ebrima"}},"minorFontScheme":{"fontSchemeList":[{"name":"latin","typeface":"Calibri","panose":"020F0502020204030204"},{"name":"ea","panose":"020F0502020204030204"},{"name":"cs","panose":"020F0502020204030204"}],"fontTypeface":{"Jpan":"游明朝","Hang":"맑은 고딕","Hans":"等线","Hant":"新細明體","Arab":"Arial","Hebr":"Arial","Thai":"Cordia New","Ethi":"Nyala","Beng":"Vrinda","Gujr":"Shruti","Khmr":"DaunPenh","Knda":"Tunga","Guru":"Raavi","Cans":"Euphemia","Cher":"Plantagenet Cherokee","Yiii":"Microsoft Yi Baiti","Tibt":"Microsoft Himalaya","Thaa":"MV Boli","Deva":"Mangal","Telu":"Gautami","Taml":"Latha","Syrc":"Estrangelo Edessa","Orya":"Kalinga","Mlym":"Kartika","Laoo":"DokChampa","Sinh":"Iskoola Pota","Mong":"Mongolian Baiti","Viet":"Arial","Uigh":"Microsoft Uighur","Geor":"Sylfaen","Armn":"Arial","Bugi":"Leelawadee UI","Bopo":"Microsoft JhengHei","Java":"Javanese Text","Lisu":"Segoe UI","Mymr":"Myanmar Text","Nkoo":"Ebrima","Olck":"Nirmala UI","Osma":"Ebrima","Phag":"Phagspa","Syrn":"Estrangelo Edessa","Syrj":"Estrangelo Edessa","Syre":"Estrangelo Edessa","Sora":"Nirmala UI","Tale":"Microsoft Tai Le","Talu":"Microsoft New Tai Lue","Tfng":"Ebrima"}}}},"background":{"color":"#FFFFFF"},"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"listFormat":{}},"characterFormat":{"fontSize":12,"fontSizeBidi":12},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":12,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontSizeBidi":16,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontSizeBidi":13,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","italicBidi":true,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontSizeBidi":16,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontSizeBidi":13,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763FF","fontSizeBidi":12,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","italicBidi":true,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 7","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level7","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#1F3763","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 7 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#1F3763","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 8","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level8","listFormat":{}},"characterFormat":{"fontSize":10.5,"fontFamily":"Calibri Light","fontColor":"#333333","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 8 Char","type":"Character","characterFormat":{"fontSize":10.5,"fontFamily":"Calibri Light","fontColor":"#333333","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 9","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level9","listFormat":{}},"characterFormat":{"italic":true,"fontSize":10.5,"fontFamily":"Calibri Light","fontColor":"#333333","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 9 Char","type":"Character","characterFormat":{"italic":true,"fontSize":10.5,"fontFamily":"Calibri Light","fontColor":"#333333","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Header","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{},"basedOn":"Normal","next":"Header"},{"name":"Footer","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{},"basedOn":"Normal","next":"Footer"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[],"images":{},"footnotes":{"separator":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"\u0003"}]}],"continuationSeparator":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"\u0004"}]}],"continuationNotice":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]}]},"endnotes":{"separator":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"\u0003"}]}],"continuationSeparator":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"\u0004"}]}],"continuationNotice":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]}]}};
+  documenteditorcontainer.documentEditor.open(data);
+};
+documenteditorcontainer.appendTo("#DocumentEditor");
+documenteditorcontainer.addEventListener("created", onCreated());
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/js/index.html
new file mode 100644
index 000000000..cc556940b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="../index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <h1>Syncfusion Word Processor(a.k.a)Document Editor Component</h1>
+    <div id="container">   
+        
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="../index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/accessibility-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/index.css
new file mode 100644
index 000000000..18578ab19
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/index.js
new file mode 100644
index 000000000..9be9e5549
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/index.js
@@ -0,0 +1,9 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+    documenteditor.acceptTab = true;
+    documenteditor.enableAllModules();
+    documenteditor.pageOutline = '#E0E0E0';
+    documenteditor.appendTo('#DocumentEditor');
+
+var sfdt  ={"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]};
+documenteditor.open(JSON.stringify(sfdt));
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/js/index.html
new file mode 100644
index 000000000..8b83f8cd9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/js/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css">
+    <link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css">
+    <link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css">
+    <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css">
+    <link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css">
+    <link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css">
+    <link href="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css">
+    <link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css">
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="http://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css">
+
+    <!-- EJ2 Document Editor Javascripts dependent -->
+    <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+      <!-- TypeScripts dependent -->
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor" style="height: 412px"></div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-cs1/systemjs.config.js
new file mode 100644
index 000000000..ec1789dce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/chart-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/index.js
new file mode 100644
index 000000000..28de21fc2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/index.js
@@ -0,0 +1,10 @@
+// Inject collaborative editing module.
+ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.CollaborativeEditingHandler);
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+let container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,  height: '590px',});
+
+container.serviceUrl = 'http://localhost:5000/api/documenteditor/';
+container.appendTo('#container');
+
+// Enable collaborative editing in Document Editor.
+container.documentEditor.enableCollaborativeEditing = true;
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-1.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-1.js
new file mode 100644
index 000000000..6c97c5a4c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-1.js
@@ -0,0 +1,45 @@
+let connectionId = "";
+
+var connection = new signalR.HubConnectionBuilder().withUrl(serviceUrl + '/documenteditorhub', {
+    skipNegotiation: true,
+    transport: signalR.HttpTransportType.WebSockets
+}).withAutomaticReconnect().build();
+
+connection.onclose(async () => {
+    if (connection.state === signalR.HubConnectionState.Disconnected) {
+        alert('Connection lost. Please relod the browser to continue.');
+    }
+});
+
+async function start(data) {
+    try {
+        connection.start().then(function () {
+            // Join the collaborative editing session with the specified room name.
+            connection.send('JoinGroup', { roomName: data.roomName, currentUser: data.currentUser });
+            console.log('server connected!!!');
+        });
+    } catch (err) {
+        console.log(err);
+        setTimeout(start, 5000);
+    }
+};
+// Event handler to handle data received
+connection.on('dataReceived', onDataRecived.bind(this));
+
+function onDataRecived(action, data) {
+    if (connections) {
+        if (action == 'connectionId') {
+            connectionId = data;
+        } else if (connectionId != data.connectionId) {
+            if (action == 'action' || action == 'addUser') {
+                // Add user info when new user join the collaborative editing session.
+                titleBar.addUser(data);
+            } else if (action == 'removeUser') {
+                // Remove user info from title bar once user is disconnected.
+                titleBar.removeUser(data);
+            }
+        }
+        // Apply remote changes to current document.
+        connections.applyRemoteAction(action, data);
+    }
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-2.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-2.js
new file mode 100644
index 000000000..8ec5cce7b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-2.js
@@ -0,0 +1,12 @@
+function openDocument(responseText, roomName) {
+    let data = JSON.parse(responseText);
+    // Get collaborative editing module.
+    connections = container.documentEditor.collaborativeEditingHandlerModule;
+    // Configure collaborative editing room name in collaborative editing module
+    connections.updateRoomInfo(roomName, data.version, serviceUrl);
+    container.documentEditor.open(data.sfdt);
+    setTimeout(function () {
+        // connect to signalR room with specified name.
+        start({ action: 'connect', roomName: roomName, currentUser: container.currentUser }, null);
+    });
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-3.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-3.js
new file mode 100644
index 000000000..8c9c2801d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-cs1/script-3.js
@@ -0,0 +1,6 @@
+container.contentChange = function (args) {
+    if (connections) {
+        // Send current changes to server to broadcast it to other users.
+        connections.sendActionToServer(args.operations)
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/index.js
new file mode 100644
index 000000000..9d6b575a7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/index.js
@@ -0,0 +1,8 @@
+// Inject collaborative editing module.
+ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.CollaborativeEditingHandler);
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+let container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,  height: '590px',});
+container.appendTo('#container');
+
+// Enable collaborative editing in Document Editor.
+container.documentEditor.enableCollaborativeEditing = true;
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-1.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-1.js
new file mode 100644
index 000000000..eac7cea86
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-1.js
@@ -0,0 +1,23 @@
+var stompClient = null;
+//Initialize SockJS
+function onCreated(data) {
+    var socket = new SockJS('/ws');
+    stompClient = Stomp.over(socket);
+    stompClient.connect({}, onConnected, function (error) {
+        console.error('Error during WebSocket connection', error);
+    });
+}
+// Subscribe to the topic.
+function onConnected() {
+    if (stompClient.connected) {
+        stompClient.subscribe('/topic/public/' + documentName, onMessageReceived);
+        joinGroup(documentName);
+    }
+}
+//Receive the remote action and apply to currenty document.
+function onMessageReceived(data) {
+    var content = JSON.parse(data.body);
+    if (content.payload.operations != null) {
+        container.documentEditor.collaborativeEditingHandlerModule.applyRemoteAction("action", content.payload);
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-2.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-2.js
new file mode 100644
index 000000000..a86c88f65
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-2.js
@@ -0,0 +1,22 @@
+function openDocument(responseText, roomName) {
+    let data = JSON.parse(responseText);
+    //Update the room and version information to collaborative editing handler.
+    connections.updateRoomInfo(roomName, data.version, serviceUrl + 'api/collaborativeediting/');
+    //open the document
+    container.documentEditor.open(data.sfdt);
+    setTimeout(function () {
+        // connect to server using ScketJS
+        connectToRoom({ action: 'connect', roomName: roomName, currentUser: container.currentUser });
+    });
+}
+//Send the user information to the other users that I have joined.
+function connectToRoom(documentName) {
+    var userInfo = {
+        currentUser: username,
+        clientVersion: 0,
+        roomName: documentName,
+        connectionId: "",
+    };
+    // Send the joinGroup message to the server
+    stompClient.send("/app/join/" + documentName, {}, JSON.stringify(userInfo));
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-3.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-3.js
new file mode 100644
index 000000000..24fdd44a0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/collaborative-editing-java-cs1/script-3.js
@@ -0,0 +1,5 @@
+container.contentChange = function (args) {
+    if (connections) {
+        connections.sendActionToServer(args.operations);
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/index.js
new file mode 100644
index 000000000..35f008995
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/index.js
@@ -0,0 +1,50 @@
+ej.documenteditor.Editor,ej.documenteditor.Selection,ej.documenteditor.OptionsPane, ej.documenteditor.Search, ej.documenteditor.ContextMenu, ej.documenteditor.EditorHistory,ej.documenteditor.ImageResizer, ej.documenteditor.ListDialog,ej.documenteditor.TableDialog, ej.documenteditor.HyperlinkDialog, ej.documenteditor.ParagraphDialog, ej.documenteditor.FontDialog, ej.documenteditor.PageSetupDialog, ej.documenteditor.BookmarkDialog, ej.documenteditor.StyleDialog, ej.documenteditor.TablePropertiesDialog, ej.documenteditor.BordersAndShadingDialog, ej.documenteditor.TableOptionsDialog, ej.documenteditor.CellOptionsDialog, ej.documenteditor.TableOfContentsDialog
+
+var defaultCheckBoxObj = new  ej.buttons.CheckBox({ label: 'Hide Default Context Menu', change: contextmenuHelper });
+defaultCheckBoxObj.appendTo('#default-context-menu');
+var positionCheckBoxObj = new  ej.buttons.CheckBox({ label: 'Add Custom option at bottom', change: contextmenuHelper });
+positionCheckBoxObj.appendTo('#position-context-menu');
+
+var editor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false,
+    serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+editor.enableAllModules();
+editor.appendTo('#DocumentEditor');
+
+
+// Creating custom menu items
+var menuItems = [
+    {
+        text: 'Search In Google',
+        id: 'search_in_google',
+        iconCss: 'e-icons e-de-ctnr-find'
+    }];
+// Adding custom options
+editor.contextMenu.addCustomMenu(menuItems, false);
+// To show/hide custom menu item
+editor.customContextMenuBeforeOpen = function(args) {
+    var search = document.getElementById(args.ids[0]);
+    search.style.display = 'none';
+    var searchContent = editor.selection.text;
+    if ((!editor.selection.isEmpty) && (/\S/.test(searchContent))) {
+        search.style.display = 'block';
+    }
+}
+// To handle contextmenu select event
+editor.customContextMenuSelect = function(args) {
+    var item = args.id;
+    var id = editor.element.id;
+    switch (item) {
+        case id + 'search_in_google':
+            var searchContent = editor.selection.text;
+            if (!editor.selection.isEmpty && /\S/.test(searchContent)) {
+                window.open('http://google.com/search?q=' + searchContent);
+            }
+            break;
+    }
+}
+function contextmenuHelper(args) {
+    editor.contextMenu.addCustomMenu(menuItems, defaultCheckBoxObj.checked, positionCheckBoxObj.checked);
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/js/index.html
new file mode 100644
index 000000000..0ad5d94d5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <input id="default-context-menu" type="checkbox">
+    <input id="position-context-menu" type="checkbox">
+    <div id="container">         
+        <div id="DocumentEditor">           
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/customize-context-menu-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/index.js
new file mode 100644
index 000000000..8d9ce73c1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/index.js
@@ -0,0 +1,12 @@
+var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true });
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+    documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+    //DocumentEditorContainer control rendering starts
+    documenteditorContainer.appendTo('#DocumentEditor');
+
+
+var sfdt  ={"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="};
+
+documenteditorContainer.documentEditor.open(JSON.stringify(sfdt));
+documenteditorContainer.documentEditor.currentUser = 'engineer@mycompany.com';
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/js/index.html
new file mode 100644
index 000000000..f23fe3d33
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/js/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
+          <title>Essential JS 2</title>
+
+          <!-- EJ2 Document Editor dependent theme -->
+          <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css">
+
+          <!-- EJ2 Document Editor theme -->
+          <link href="http://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css">
+
+          <!-- EJ2 Document Editor Javascript dependent -->
+          <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+          <!-- TypeScripts Dependent -->
+          <link href="index.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+         
+         
+       <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+<!--element which is going to render-->
+<div id="DocumentEditor" style="height:420px">
+
+</div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/index.js
new file mode 100644
index 000000000..8d9ce73c1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/index.js
@@ -0,0 +1,12 @@
+var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true });
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+    documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+    //DocumentEditorContainer control rendering starts
+    documenteditorContainer.appendTo('#DocumentEditor');
+
+
+var sfdt  ={"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="};
+
+documenteditorContainer.documentEditor.open(JSON.stringify(sfdt));
+documenteditorContainer.documentEditor.currentUser = 'engineer@mycompany.com';
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/js/index.html
new file mode 100644
index 000000000..f23fe3d33
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/js/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
+          <title>Essential JS 2</title>
+
+          <!-- EJ2 Document Editor dependent theme -->
+          <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css">
+          <link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css">
+
+          <!-- EJ2 Document Editor theme -->
+          <link href="http://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css">
+
+          <!-- EJ2 Document Editor Javascript dependent -->
+          <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+          <!-- TypeScripts Dependent -->
+          <link href="index.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+         
+         
+       <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+<!--element which is going to render-->
+<div id="DocumentEditor" style="height:420px">
+
+</div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/data-protection-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/index.js
new file mode 100644
index 000000000..33fc3818b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableBookmarkDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Bookmark');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/index.js
new file mode 100644
index 000000000..c9ec0f388
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableListDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('List');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs10/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/index.js
new file mode 100644
index 000000000..78e556db7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableBordersAndShadingDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+documenteditor.editor.insertTable(2,2);
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('BordersAndShading');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs11/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/index.js
new file mode 100644
index 000000000..2ebca9d14
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableTableOptionsDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true, enableTableOptionsDialog: true, enableTablePropertiesDialog: true, enableBordersAndShadingDialog: true, });
+// documenteditor.enableAllModules();
+documenteditor.appendTo('#DocumentEditor');
+documenteditor.editor.insertTable(2,2);
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('TableOptions');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs12/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/index.js
new file mode 100644
index 000000000..f491ba6e2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/index.js
@@ -0,0 +1,18 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+  isReadOnly: false,
+  enableSelection: true,
+  enableEditor: true,
+  enableTableOptionsDialog: true,
+  enableTablePropertiesDialog:true,
+  enableBordersAndShadingDialog:true,
+  enableSfdtExport: true,
+  enableEditorHistory: true
+});
+var button = document.getElementById('dialog');
+button.addEventListener('click', function() {
+  //To open table properties dialog
+  documenteditor.showDialog('TableProperties');
+});
+documenteditor.appendTo('#DocumentEditor');
+documenteditor.editor.insertTable(2,2);
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs13/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/index.js
new file mode 100644
index 000000000..d3b515801
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enablePageSetupDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('PageSetup');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs14/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/index.js
new file mode 100644
index 000000000..dbd6ff737
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableColumnsDialog: true, enablePageSetupDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Columns');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/js/index.html
new file mode 100644
index 000000000..7d286194f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs15/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/index.js
new file mode 100644
index 000000000..27e349d2e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableHyperlinkDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Hyperlink');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs16/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/index.js
new file mode 100644
index 000000000..144e92049
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableFontDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Font');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs2/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/index.js
new file mode 100644
index 000000000..7ebb13be0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableParagraphDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Paragraph');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/index.js
new file mode 100644
index 000000000..4b558d37b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableTableDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Table');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs4/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/index.js
new file mode 100644
index 000000000..33fc3818b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableBookmarkDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Bookmark');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs5/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/index.js
new file mode 100644
index 000000000..27e349d2e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableHyperlinkDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Hyperlink');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs6/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/index.js
new file mode 100644
index 000000000..c52cd781a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableTableOfContentsDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('TableOfContents');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs7/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/index.js
new file mode 100644
index 000000000..2a739f03d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableStyleDialog: true,enableStylesDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Styles');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs8/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/index.js
new file mode 100644
index 000000000..c7991cef6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableStyleDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Style');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/js/index.html
new file mode 100644
index 000000000..608b55c03
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/js/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">    
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/dialog-cs9/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs1/index.ts
new file mode 100644
index 000000000..4dbf75058
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs1/index.ts
@@ -0,0 +1,62 @@
+
+
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+      <title>Essential JS 2</title>
+      <!-- EJ2 Document Editor dependent theme -->
+      <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+      <!-- EJ2 Document Editor theme -->
+      <link href="https://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+      <!-- EJ2 Document Editor dependent scripts -->
+      <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+      <!-- EJ2 Document Editor script -->
+      <script src="https://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+      <!--element which is going to render-->
+          <div id='DocumentEditor' style='height:350px'></div>
+      <script>
+          // Initialize DocumentEditor component.
+          var documenteditor = new ej.documenteditor.DocumentEditor({ height: '370px', isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+          documenteditor.acceptTab = true;
+          //Enable all the build in modules.
+          documenteditor.enableAllModules();
+
+          //Set page border color.
+          documenteditor.pageOutline = '#E0E0E0';
+
+          //Documenteditor control rendering starts
+          documenteditor.appendTo('#DocumentEditor');
+      </script>
+  </body>
+  </html>
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs1/js/index.html
new file mode 100644
index 000000000..08a4e86b9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs1/js/index.html
@@ -0,0 +1,58 @@
+
+<!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+                
+  <title>Essential JS 2</title>
+  <!-- EJ2 Document Editor dependent theme -->
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+  <!-- EJ2 Document Editor theme -->
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+  <!-- EJ2 Document Editor dependent scripts -->
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-svg-base/dist/global/ej2-svg-base.min.js"type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+  <!-- EJ2 Document Editor script -->
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+  <!--element which is going to render-->
+      <div id='DocumentEditor' style='height:350px'></div>
+  <script>
+      // Initialize DocumentEditor component.
+      var documenteditor = new ej.documenteditor.DocumentEditor({ height: '370px', isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+      documenteditor.acceptTab = true;
+      //Enable all the build in modules.
+      documenteditor.enableAllModules();
+
+      //Set page border color.
+      documenteditor.pageOutline = '#E0E0E0';
+
+      //Documenteditor control rendering starts
+      documenteditor.appendTo('#DocumentEditor');
+  </script>
+  </body>
+  </html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs2/index.ts
new file mode 100644
index 000000000..408d6ae3a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs2/index.ts
@@ -0,0 +1,59 @@
+
+
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+      <title>Essential JS 2</title>
+
+      <!-- EJ2 Document Editor dependent theme -->
+      <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+      <!-- EJ2 Document Editor theme -->
+      <link href="https://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+      <!-- EJ2 Document Editor dependent scripts -->
+      <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+      <!-- EJ2 Document Editor script -->
+      <script src="https://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+  <!--Element which is going to render as Document Editor-->
+  <div id='DocumentEditor' style='height:620px'>
+
+  </div>
+  <script>
+      // Initialize DocumentEditorContainer component.
+      var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+      ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+      documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+      //DocumentEditorContainer control rendering starts
+      documenteditorContainer.appendTo('#DocumentEditor');
+  </script>
+  </body>
+
+  </html>
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs2/js/index.html
new file mode 100644
index 000000000..c8709396a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/es5-getting-started-cs2/js/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+
+  <title>Essential JS 2</title>
+
+  <!-- EJ2 Document Editor dependent theme -->
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+  <!-- EJ2 Document Editor theme -->
+  <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+  <!-- EJ2 Document Editor dependent scripts -->
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+  <!-- EJ2 Document Editor script -->
+  <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+  <!--Element which is going to render as Document Editor-->
+  <div id='DocumentEditor' style='height:620px'>
+
+  </div>
+  <script>
+    // Initialize DocumentEditorContainer component.
+    var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+    documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+    //DocumentEditorContainer control rendering starts
+    documenteditorContainer.appendTo('#DocumentEditor');
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/index.css
new file mode 100644
index 000000000..fa3d16073
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/index.css
@@ -0,0 +1,12 @@
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/index.js
new file mode 100644
index 000000000..7fb44fb73
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/index.js
@@ -0,0 +1,9 @@
+var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,  height: '590px'});
+
+container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+
+container.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', function () {
+    container.documentEditor.save('sample', 'Sfdt');
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/js/index.html
new file mode 100644
index 000000000..c1023f44c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/js/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    <script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditorContainer -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/index.css
new file mode 100644
index 000000000..fa3d16073
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/index.css
@@ -0,0 +1,12 @@
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/index.js
new file mode 100644
index 000000000..efe97b964
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/index.js
@@ -0,0 +1,9 @@
+var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,  height: '590px'});
+
+container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+
+container.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', function () {
+    container.documentEditor.save('sample', 'Docx');
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/js/index.html
new file mode 100644
index 000000000..c1023f44c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/js/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    <script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditorContainer -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/index.css
new file mode 100644
index 000000000..fa3d16073
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/index.css
@@ -0,0 +1,12 @@
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/index.js
new file mode 100644
index 000000000..2be92d9d1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/index.js
@@ -0,0 +1,9 @@
+var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,  height: '590px'});
+
+container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+
+container.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', function () {
+    container.documentEditor.save('sample', 'Txt');
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/js/index.html
new file mode 100644
index 000000000..c1023f44c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/js/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    <script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditorContainer -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/index.css
new file mode 100644
index 000000000..fa3d16073
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/index.css
@@ -0,0 +1,12 @@
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/index.js
new file mode 100644
index 000000000..34c3ddf3b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/index.js
@@ -0,0 +1,9 @@
+var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,  height: '590px'});
+
+container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+
+container.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', function () {
+    container.documentEditor.save('sample', 'Dotx');
+}); 
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/js/index.html
new file mode 100644
index 000000000..c1023f44c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/js/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    <script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditorContainer -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-container-cs4/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/index.js
new file mode 100644
index 000000000..0247a1c57
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', function () {
+    documenteditor.save('sample', 'Sfdt');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/js/index.html
new file mode 100644
index 000000000..d336c1d48
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/js/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/index.js
new file mode 100644
index 000000000..94a02bfe4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableWordExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', function () {
+    documenteditor.save('sample', 'Docx');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/js/index.html
new file mode 100644
index 000000000..d336c1d48
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/js/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs2/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/index.js
new file mode 100644
index 000000000..ce02ad9bb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableTextExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', function () {
+    documenteditor.save('sample', 'Txt');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/js/index.html
new file mode 100644
index 000000000..d336c1d48
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/js/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/index.js
new file mode 100644
index 000000000..950a4f070
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableWordExport: true, enableTextExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', function () {
+    documenteditor.save('sample', 'Dotx');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/js/index.html
new file mode 100644
index 000000000..d336c1d48
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/js/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/export-cs4/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/index.js
new file mode 100644
index 000000000..b454ab313
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/index.js
@@ -0,0 +1,26 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableSelection: true, enableSearch: true, enableEditor: true, isReadOnly: false, enableOptionsPane: true });
+documenteditor.appendTo('#DocumentEditor');
+var sfdt = `{
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "inlines": [
+                        {
+                            "characterFormat": {
+                                "bold": true,
+                                "italic": true
+                            },
+                            "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}`;
+documenteditor.open(sfdt);
+document.getElementById('showhidepane').addEventListener('click', () => {
+    documenteditor.showOptionsPane();
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/js/index.html
new file mode 100644
index 000000000..95704d263
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/js/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="display: inline">
+            <button id="showhidepane" class="e-control e-btn e-primary">Optionspane</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/find-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/js/index.html
new file mode 100644
index 000000000..d6931d2ce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs1/systemjs.config.js
new file mode 100644
index 000000000..f95e28ad4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/js/index.html
new file mode 100644
index 000000000..d6931d2ce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/getting-started-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/index.css
new file mode 100644
index 000000000..774438806
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #Documenteditor {
+      width: 100%;
+      height: 100%;
+  }
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/index.js
new file mode 100644
index 000000000..fcde5ae98
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/index.js
@@ -0,0 +1,15 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+documenteditor.requestNavigate = (args) => {
+  if (args.linkType !== 'Bookmark') {
+    var link = args.navigationLink;
+    if (args.localReference.length > 0) {
+      link += '#' + args.localReference;
+    }
+    window.open(link);
+    args.isHandled = true;
+  }
+};
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/js/index.html
new file mode 100644
index 000000000..47022d674
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/js/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">           
+        <div id="DocumentEditor">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/index.css
new file mode 100644
index 000000000..774438806
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #Documenteditor {
+      width: 100%;
+      height: 100%;
+  }
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/index.js
new file mode 100644
index 000000000..f4f64f7a8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/index.js
@@ -0,0 +1,15 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableSelection: true, isReadOnly: false, enableEditor: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+documenteditor.requestNavigate = (args) => {
+  if (args.linkType !== 'Bookmark') {
+    var link = args.navigationLink;
+    if (args.localReference.length > 0) {
+      link += '#' + args.localReference;
+    }
+    window.open(link);
+    args.isHandled = true;
+  }
+};
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/js/index.html
new file mode 100644
index 000000000..e580162fd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/js/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">           
+        <div id="DocumentEditor">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/hyperlink-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/index.js
new file mode 100644
index 000000000..ff293b936
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/index.js
@@ -0,0 +1,41 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false,
+    enableEditor: true,
+    enableSection: true,
+    enableImageResizer: true,
+    enableEditorHistory: true
+});
+documenteditor.appendTo('#DocumentEditor');
+//Insert Image From URL with alternate text
+documenteditor.editor.insertImage('https://cdn.syncfusion.com/content/images/Logo/Logo_Black_72dpi_without.png', 200, 200, 'Syncfusion');
+document.getElementById('insert-picture').addEventListener('click', () => {
+    var pictureUpload = document.getElementById("insertImageButton");
+    pictureUpload.value = '';
+    pictureUpload.click();
+});
+document.getElementById('insertImageButton').addEventListener('change', onInsertImage);
+function onInsertImage(args) {
+    if (navigator.userAgent.match('Chrome') || navigator.userAgent.match('Firefox') || navigator.userAgent.match('Edge') || navigator.userAgent.match('MSIE') || navigator.userAgent.match('.NET')) {
+        if (args.target.files[0]) {
+            var path = args.target.files[0];
+            var reader = new FileReader();
+            reader.onload = function (frEvent) {
+                var base64String = frEvent.target.result;
+                var image = document.createElement('img');
+                image.addEventListener('load', function () {
+                    documenteditor.editor.insertImage(base64String, this.width, this.height);
+                })
+                image.src = base64String;
+            };
+            reader.readAsDataURL(path);
+        }
+        //Safari does not Support FileReader Class
+    } else {
+        var image = document.createElement('img');
+        image.addEventListener('load', function () {
+            documenteditor.editor.insertImage(args.target.value);
+        })
+        image.src = args.target.value;
+    }
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/js/index.html
new file mode 100644
index 000000000..cd8b750f2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/js/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <input type="file" id="insertImageButton" style="position:fixed; left:-110em" accept=".jpg,.jpeg,.png,.bmp">
+        <div id="toolbar">
+            <button id="insert-picture">Image</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/image-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/index.css
new file mode 100644
index 000000000..d1c5c0fb0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/index.js
new file mode 100644
index 000000000..04f4b2786
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/index.js
@@ -0,0 +1,28 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ });
+
+documenteditor.appendTo('#DocumentEditor');
+
+var sfdt  ={
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "inlines": [
+                        {
+                            "characterFormat": {
+                                "bold": true,
+                                "italic": true
+                            },
+                            "text": "Hello World"
+                        }
+                    ]
+                }
+            ],
+            "headersFooters": {
+            }
+        }
+    ]
+};
+
+documenteditor.open(JSON.stringify(sfdt));
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/js/index.html
new file mode 100644
index 000000000..2174c361f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/js/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/index.css
new file mode 100644
index 000000000..d1c5c0fb0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/index.js
new file mode 100644
index 000000000..5dc7ca6c1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/index.js
@@ -0,0 +1,25 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('file_upload').setAttribute('accept', '.sfdt');
+
+document.getElementById("import").addEventListener("click", function () {
+    document.getElementById('file_upload').click();
+});
+
+document.getElementById('file_upload').addEventListener("change", function (e) {
+    if (e.target.files[0]) {
+        var file = e.target.files[0];
+        if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+            var fileReader = new FileReader();
+            fileReader.onload = function (e) {
+                var contents = e.target.result;
+                documenteditor.open(contents);
+            };
+            fileReader.readAsText(file);
+            documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
+        }
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/js/index.html
new file mode 100644
index 000000000..97f7043af
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/js/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <input type="file" id="file_upload" style="position:fixed; left:-100em">
+    <div id="container">
+        <div>
+            <button id="import">Import</button>
+        </div>
+        <!--Element which will render as DocumentEditor -->
+        <div id="DocumentEditor"></div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/import-sfdt-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/index.js
new file mode 100644
index 000000000..d688a869e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/index.js
@@ -0,0 +1,47 @@
+ej.base.enableRipple(true);
+
+ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.Editor, ej.documenteditor.Selection,ej.documenteditor.EditorHistory);
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true,enableEditorHistory:true,height: '370px'});
+
+function toolbarAction (args){
+  switch (args.item.id) {
+    case 'Bullets':
+      //To create bullet list
+      documenteditor.editor.applyBullet('\uf0b7', 'Symbol');
+      break;
+    case 'Numbering':
+      //To create numbering list
+      documenteditor.editor.applyNumbering('%1)', 'UpRoman');
+      break;
+    case 'clearlist':
+      //To clear list
+      documenteditor.editor.clearList();
+      break;
+  }
+};
+
+var toolbar = new ej.navigations.Toolbar({
+  clicked: toolbarAction,
+  items: [
+    {
+      prefixIcon: 'e-de-ctnr-bullets e-icons',
+      tooltipText: 'Bullets',
+      id: 'Bullets',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-numbering e-icons',
+      tooltipText: 'Numbering',
+      id: 'Numbering',
+    },
+    {
+      text: 'Clear',
+      id: 'clearlist',
+      tooltipText: 'Clear List',
+    },
+  ],
+});
+toolbar.appendTo('#toolbar');
+
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/js/index.html
new file mode 100644
index 000000000..658a88815
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/js/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">            
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/list-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/index.ts
new file mode 100644
index 000000000..5823bb908
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromS3',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/js/index.html
new file mode 100644
index 000000000..2c3728c53
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/js/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From AWS S3 Bucket</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+
+        document.getElementById('load').addEventListener('click', function () {
+            load();
+        });
+
+        function load() {
+            fetch(
+                'http://localhost:62870/api/documenteditor/LoadFromS3',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    documenteditorContainer.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                        console.error(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-aws-s3/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/index.ts
new file mode 100644
index 000000000..f3cd037e2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+    load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromAzure',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/js/index.html
new file mode 100644
index 000000000..86613b2a3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/js/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From Azure Blob Storage</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        document.getElementById('load').addEventListener('click', function () {
+            load();
+        });
+        
+        function load() {
+            fetch(
+                'http://localhost:62870/api/documenteditor/LoadFromAzure',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    documenteditorContainer.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                        console.error(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-azure-blob/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/index.ts
new file mode 100644
index 000000000..aa18d08b2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/index.ts
@@ -0,0 +1,41 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromBoxCloud',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+} console.error(error);
+  });
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/js/index.html
new file mode 100644
index 000000000..af9f0966a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/js/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From Box cloud file storage</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+
+        document.getElementById('load').addEventListener('click', function () {
+            load();
+        });
+        
+        function load() {
+            fetch(
+                'http://localhost:62870/api/documenteditor/LoadFromBoxCloud',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    documenteditorContainer.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                        console.error(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-box-cloud-file-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/index.js
new file mode 100644
index 000000000..c81357b33
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/index.js
@@ -0,0 +1,12 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+documenteditor.enableAllModules();
+onCreated = function (){
+    var data = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+    documenteditor.open(data);
+};
+documenteditor.appendTo('#DocumentEditor');
+documenteditor.addEventListener("created", onCreated());
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/js/index.html
new file mode 100644
index 000000000..d6931d2ce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/index.js
new file mode 100644
index 000000000..da91a1cff
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/index.js
@@ -0,0 +1,15 @@
+var documenteditorcontainer = new ej.documenteditor.DocumentEditorContainer({
+  isReadOnly: false
+});
+ej.documenteditor.DocumentEditorContainer.Inject(
+  ej.documenteditor.Toolbar
+);
+onCreated = function() {
+  var data =
+    '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+  documenteditorcontainer.documentEditor.open(data);
+};
+documenteditorcontainer.appendTo("#DocumentEditor");
+documenteditorcontainer.addEventListener("created", onCreated());
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/js/index.html
new file mode 100644
index 000000000..d6931d2ce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-default-document-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/index.ts
new file mode 100644
index 000000000..624c792a4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/index.ts
@@ -0,0 +1,39 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromDropBox',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/js/index.html
new file mode 100644
index 000000000..42482c1f0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/js/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From DropBox cloud file storage</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+
+        document.getElementById('load').addEventListener('click', function () {
+            load();
+        });
+        
+        function load() {
+            fetch(
+                'http://localhost:62870/api/documenteditor/LoadFromDropBox',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    documenteditorContainer.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                        console.error(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-dropbox-cloud-file-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/index.ts
new file mode 100644
index 000000000..d9c21433e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromGoogleCloud',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/js/index.html
new file mode 100644
index 000000000..db37751c2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/js/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From Google cloud storage</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        
+        document.getElementById('load').addEventListener('click', function () {
+            load();
+        });
+        
+        function load() {
+            fetch(
+                'http://localhost:62870/api/documenteditor/LoadFromGoogleCloud',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    documenteditorContainer.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                        console.error(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-cloud-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/index.ts
new file mode 100644
index 000000000..71aa81eda
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromGoogleDrive',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/js/index.html
new file mode 100644
index 000000000..9513aedb2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/js/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From Google Drive</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        
+        document.getElementById('load').addEventListener('click', function () {
+            load();
+        });
+        
+        function load() {
+            fetch(
+                'http://localhost:62870/api/documenteditor/LoadFromGoogleDrive',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    documenteditorContainer.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                        console.error(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-google-drive/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/index.ts
new file mode 100644
index 000000000..07d75091c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromOneDrive',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/js/index.html
new file mode 100644
index 000000000..5128c94fa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/js/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From One Drive</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        
+        document.getElementById('load').addEventListener('click', function () {
+            load();
+        });
+        
+        function load() {
+            fetch(
+                'http://localhost:62870/api/documenteditor/LoadFromOneDrive',
+                {
+                    method: 'Post',
+                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
+                }
+            )
+                .then(response => {
+                    if (response.status === 200 || response.status === 304) {
+                        return response.json(); // Return the Promise
+                    } else {
+                        throw new Error('Error loading data');
+                    }
+                })
+                .then(json => {
+                    documenteditorContainer.documentEditor.open(JSON.stringify(json));
+                })
+                .catch(error => {
+                        console.error(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/open-one-drive/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/index.js
new file mode 100644
index 000000000..09f7c4ded
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/index.js
@@ -0,0 +1,24 @@
+ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.Selection,ej.documenteditor.Editor,ej.documenteditor.SfdtExport,ej.documenteditor.WordExport)
+
+var documentEditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport : true, enableWordExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documentEditor.appendTo('#DocumentEditor');
+
+documentEditor.keyDown = function (args) {
+    var keyCode = args.event.which || args.event.keyCode;
+
+    var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+    var isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+   // 83 is the character code for 'S'
+    if (isCtrlKey && !isAltKey && keyCode === 83) {
+        //To prevent default save operation, set the isHandled property to true
+        args.isHandled = true;
+       documentEditor.save('sample', 'Docx');
+       args.event.preventDefault();
+    } else if (isCtrlKey && isAltKey && keyCode === 83) {
+       documentEditor.save('sample', 'Sfdt');
+    }
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/js/index.html
new file mode 100644
index 000000000..218a030a7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/index.js
new file mode 100644
index 000000000..09f7c4ded
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/index.js
@@ -0,0 +1,24 @@
+ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.Selection,ej.documenteditor.Editor,ej.documenteditor.SfdtExport,ej.documenteditor.WordExport)
+
+var documentEditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport : true, enableWordExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documentEditor.appendTo('#DocumentEditor');
+
+documentEditor.keyDown = function (args) {
+    var keyCode = args.event.which || args.event.keyCode;
+
+    var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+    var isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+   // 83 is the character code for 'S'
+    if (isCtrlKey && !isAltKey && keyCode === 83) {
+        //To prevent default save operation, set the isHandled property to true
+        args.isHandled = true;
+       documentEditor.save('sample', 'Docx');
+       args.event.preventDefault();
+    } else if (isCtrlKey && isAltKey && keyCode === 83) {
+       documentEditor.save('sample', 'Sfdt');
+    }
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/js/index.html
new file mode 100644
index 000000000..218a030a7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/override-keyboard-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/index.js
new file mode 100644
index 000000000..81ba909ed
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/index.js
@@ -0,0 +1,154 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+  isReadOnly: false, enableSelection: true, enableEditorHistory: true, enableEditor: true, enableContextMenu: true, enableSfdtExport: true,height: '370px'
+});
+function toolbarButtonClick(arg) {
+  switch (arg.item.id) {
+    case 'AlignLeft':
+      //Toggle the Left alignment for selected or current paragraph
+      documenteditor.editor.toggleTextAlignment('Left');
+      break;
+    case 'AlignRight':
+      //Toggle the Right alignment for selected or current paragraph
+      documenteditor.editor.toggleTextAlignment('Right');
+      break;
+    case 'AlignCenter':
+      //Toggle the Center alignment for selected or current paragraph
+      documenteditor.editor.toggleTextAlignment('Center');
+      break;
+    case 'Justify':
+      //Toggle the Justify alignment for selected or current paragraph
+      documenteditor.editor.toggleTextAlignment('Justify');
+      break;
+    case 'IncreaseIndent':
+      //Increase the left indent of selected or current paragraph
+      documenteditor.editor.increaseIndent();
+      break;
+    case 'DecreaseIndent':
+      //Decrease the left indent of selected or current paragraph
+      documenteditor.editor.decreaseIndent();
+      break;
+    case 'ClearFormat':
+      documenteditor.editor.clearFormatting();
+      break;
+  }
+}
+//Change the line spacing of selected or current paragraph
+function lineSpacingAction(args) {
+  var text = args.item.text;
+  switch (text) {
+    case 'Single':
+      documenteditor.selection.paragraphFormat.lineSpacing = 1;
+      break;
+    case '1.15':
+      documenteditor.selection.paragraphFormat.lineSpacing = 1.15;
+      break;
+    case '1.5':
+      documenteditor.selection.paragraphFormat.lineSpacing = 1.5;
+      break;
+    case 'Double':
+      documenteditor.selection.paragraphFormat.lineSpacing = 2;
+      break;
+  }
+  setTimeout(function () {
+    documenteditor.focusIn();
+  }, 30);
+}
+documenteditor.selectionChange = () => {
+  setTimeout(() => {
+    onSelectionChange();
+  }, 20);
+};
+// Selection change to retrieve formatting
+function onSelectionChange() {
+  if (documenteditor.selection) {
+    var paragraphFormat = documenteditor.selection.paragraphFormat;
+    var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify'];
+    for (var i = 0; i < toggleBtnId.length; i++) {
+      var toggleBtn = document.getElementById(
+        toggleBtnId[i]
+      );
+      toggleBtn.classList.remove('e-btn-toggle');
+    }
+    if (paragraphFormat.textAlignment === 'Left') {
+      document.getElementById('AlignLeft').classList.add('e-btn-toggle');
+    } else if (paragraphFormat.textAlignment === 'Right') {
+      document.getElementById('AlignRight').classList.add('e-btn-toggle');
+    } else if (paragraphFormat.textAlignment === 'Center') {
+      document
+        .getElementById('AlignCenter')
+        .classList.add('e-btn-toggle');
+    } else {
+      document.getElementById('Justify').classList.add('e-btn-toggle');
+    }
+    // #endregion
+  }
+}
+//Toolbar configuration to add paragraph formatting options
+var toolBar = new ej.navigations.Toolbar({
+  clicked: toolbarButtonClick,
+  items: [
+    {
+      prefixIcon: 'e-de-ctnr-alignleft e-icons',
+      tooltipText: 'Align Left',
+      id: 'AlignLeft',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-aligncenter e-icons',
+      tooltipText: 'Align Center',
+      id: 'AlignCenter',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-alignright e-icons',
+      tooltipText: 'Align Right',
+      id: 'AlignRight',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-justify e-icons',
+      tooltipText: 'Justify',
+      id: 'Justify',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-increaseindent e-icons',
+      tooltipText: 'Increase Indent',
+      id: 'IncreaseIndent',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-decreaseindent e-icons',
+      tooltipText: 'Decrease Indent',
+      id: 'DecreaseIndent',
+    },
+    { type: 'Separator' },
+    {
+      id: 'lineSpacing',
+    }, {
+      prefixIcon: 'e-de-ctnr-clearall e-icons',
+      tooltipText: 'ClearFormatting',
+      id: 'ClearFormat',
+    }
+  ],
+});
+toolBar.appendTo('#toolbar');
+var items = [
+  {
+    text: 'Single',
+  },
+  {
+    text: '1.15',
+  },
+  {
+    text: '1.5',
+  },
+  {
+    text: 'Double',
+  },
+];
+var dropdown = new ej.splitbuttons.DropDownButton({
+  items: items,
+  iconCss: 'e-de-ctnr-linespacing e-icons',
+  select: lineSpacingAction,
+});
+dropdown.appendTo('#lineSpacing');
+
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/js/index.html
new file mode 100644
index 000000000..658a88815
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/js/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">            
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/paragraph-format-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/index.js
new file mode 100644
index 000000000..9bbea1bda
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/index.js
@@ -0,0 +1,16 @@
+ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.Selection,ej.documenteditor.Editor,ej.documenteditor.SfdtExport)
+
+var documentEditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documentEditor.appendTo('#DocumentEditor');
+
+documentEditor.keyDown = function (args) {
+    var keyCode = args.event.which || args.event.keyCode;
+    var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+    //67 is the character code for 'C'
+    if (isCtrlKey && keyCode === 67) {
+        //To prevent copy operation set isHandled to true
+        args.isHandled = true;
+    }
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/js/index.html
new file mode 100644
index 000000000..218a030a7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/index.js
new file mode 100644
index 000000000..9bbea1bda
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/index.js
@@ -0,0 +1,16 @@
+ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.Selection,ej.documenteditor.Editor,ej.documenteditor.SfdtExport)
+
+var documentEditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documentEditor.appendTo('#DocumentEditor');
+
+documentEditor.keyDown = function (args) {
+    var keyCode = args.event.which || args.event.keyCode;
+    var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+    //67 is the character code for 'C'
+    if (isCtrlKey && keyCode === 67) {
+        //To prevent copy operation set isHandled to true
+        args.isHandled = true;
+    }
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/js/index.html
new file mode 100644
index 000000000..218a030a7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/prevent-keyboard-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/index.css
new file mode 100644
index 000000000..3bc51e47c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+    width: 100%;
+    height: 100%;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/index.js
new file mode 100644
index 000000000..ac479562a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/index.js
@@ -0,0 +1,38 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+    enablePrint: true
+});
+
+documenteditor.appendTo('#DocumentEditor');
+
+var sfdt ={
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "inlines": [
+                        {
+                            "characterFormat": {
+                                "bold": true,
+                                "italic": true
+                            },
+                            "text": "Hello World"
+                        }
+                    ]
+                }
+            ],
+            "headersFooters": {
+            }
+        }
+    ]
+};
+
+documenteditor.open(JSON.stringify(sfdt));
+
+var printButton = new ej.buttons.Button();
+printButton.appendTo('#print');
+
+document.getElementById('print').addEventListener('click',function (){
+    documenteditor.print();
+});
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/js/index.html
new file mode 100644
index 000000000..7e191814d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/js/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        <button id="print">Print</button>        
+        <div id="DocumentEditor"> 
+        </div>
+        <div id="DocumentEditor2"></div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/index.css
new file mode 100644
index 000000000..3bc51e47c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+    width: 100%;
+    height: 100%;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/index.js
new file mode 100644
index 000000000..425ede030
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/index.js
@@ -0,0 +1,18 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false,
+    enablePrint: true,
+    enableEditor: true,
+    enableSelection: true,
+    enableEditorHistory: true
+});
+
+documenteditor.appendTo('#DocumentEditor');
+
+var printButton = new ej.buttons.Button();
+printButton.appendTo('#print');
+
+document.getElementById('print').addEventListener('click',function (){
+    documenteditor.print();
+});
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/js/index.html
new file mode 100644
index 000000000..7e191814d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/js/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        <button id="print">Print</button>        
+        <div id="DocumentEditor"> 
+        </div>
+        <div id="DocumentEditor2"></div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/index.css
new file mode 100644
index 000000000..3bc51e47c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+    width: 100%;
+    height: 100%;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/index.js
new file mode 100644
index 000000000..df94730d4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/index.js
@@ -0,0 +1,36 @@
+var documenteditor1 = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false,
+    enablePrint: true,
+    enableEditor: true,
+    enableSelection: true,
+    enableEditorHistory: true,
+    enableSfdtExport: true
+});
+
+documenteditor1.appendTo('#DocumentEditor');
+
+var documenteditor2 = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false,
+    enablePrint: true,
+    enableEditor: true,
+    enableSelection: true,
+    enableEditorHistory: true,
+    enableSfdtExport: true
+});
+
+documenteditor2.appendTo('#DocumentEditor2');
+
+
+
+var printButton = new ej.buttons.Button();
+printButton.appendTo('#print');
+
+document.getElementById('print').addEventListener('click',function (){
+    var sfdtData = documenteditor1.serialize();
+    documenteditor2.open(sfdtData);
+    //Set A5 paper size
+    documenteditor2.selection.sectionFormat.pageWidth = 419.55;
+    documenteditor2.selection.sectionFormat.pageHeight = 595.30;
+    documenteditor2.print();
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/js/index.html
new file mode 100644
index 000000000..7e191814d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/js/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        <button id="print">Print</button>        
+        <div id="DocumentEditor"> 
+        </div>
+        <div id="DocumentEditor2"></div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/print-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/index.js
new file mode 100644
index 000000000..186d79f20
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/index.js
@@ -0,0 +1,12 @@
+var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true });
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+    documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+    //DocumentEditorContainer control rendering starts
+    documenteditorContainer.documentChange = () => {
+    documenteditorContainer.restrictEditing=true;
+};
+documenteditorContainer.appendTo('#DocumentEditor');
+let data= {"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]};
+// Open the default document
+documenteditorContainer.documentEditor.open(JSON.stringify(data));
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/js/index.html
new file mode 100644
index 000000000..0b70f9b64
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+ 
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+ 
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-container-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/index.js
new file mode 100644
index 000000000..28b677efe
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/index.js
@@ -0,0 +1,14 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false
+});
+
+documenteditor.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+documenteditor.documentChange = () => {
+    documenteditor.isReadOnly=true;
+};
+documenteditor.enableAllModules();
+documenteditor.appendTo('#DocumentEditor');
+let data = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+// Open the default document
+documenteditor.open(data);
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/js/index.html
new file mode 100644
index 000000000..0b70f9b64
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+ 
+<body>
+    
+    <div id="container">   
+        
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+ 
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/read-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/index.js
new file mode 100644
index 000000000..36a3e2270
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/index.js
@@ -0,0 +1,35 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableSelection: true, enableSearch: true, enableEditor: true, isReadOnly: false });
+documenteditor.appendTo('#DocumentEditor');
+var sfdt = `{
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "inlines": [
+                        {
+                            "characterFormat": {
+                                "bold": true,
+                                "italic": true
+                            },
+                            "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}`;
+documenteditor.open(sfdt);
+document.getElementById('replace_all').addEventListener('click',function () {
+    var textToFind = (document.getElementById('find_text')).value;
+    var textToReplace = (document.getElementById('replace_text')).value;
+    if (textToFind !== '') {
+        // Find all the occurences of given text
+        documenteditor.searchModule.findAll(textToFind);
+        if (documenteditor.searchModule.searchResults.length > 0) {
+            // Replace all the occurences of given text
+            documenteditor.searchModule.searchResults.replaceAll(textToReplace);
+        }
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/js/index.html
new file mode 100644
index 000000000..5e24936b4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/js/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div>
+            <table>
+                <tbody><tr>
+                    <td>
+                        <label>Text to find:</label>
+                    </td>
+                    <td>
+                        <input type="text" id="find_text">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label>Text to replace:</label>
+                    </td>
+                    <td>
+                        <input type="text" id="replace_text">
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <button id="replace_all" v-on:click="onReplaceButtonClick" style="float:right;margin-top: 10px;" class="e-control e-btn">Replace All</button>
+                    </td>
+                </tr>
+            </tbody></table>
+        </div>
+
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/replace-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/index.js
new file mode 100644
index 000000000..00aaa93a7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/index.js
@@ -0,0 +1,331 @@
+ej.base.L10n.load({
+    'ar-AE': {
+        'documenteditor': {
+            'Table': 'لجدول',
+            'Row': 'لصف',
+            'Cell': 'الخليه',
+            'Ok': 'موافق',
+            'Cancel': 'إلغاء الأمر',
+            'Size': 'حجم',
+            'Preferred Width': 'العرض المفضل',
+            'Points': 'نقاط',
+            'Percent': 'المائه',
+            'Measure in': 'القياس في',
+            'Alignment': 'محاذاه',
+            'Left': 'ليسار',
+            'Center': 'مركز',
+            'Right': 'الحق',
+            'Justify': 'تبرير',
+            'Indent from left': 'مسافة بادئه من اليسار',
+            'Borders and Shading': 'الحدود والتظليل',
+            'Options': 'خيارات',
+            'Specify height': 'تحديد الارتفاع',
+            'At least': 'الاقل',
+            'Exactly': 'تماما',
+            'Row height is': 'ارتفاع الصف هو',
+            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
+            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
+            'Vertical alignment': 'محاذاة عمودي',
+            'Top': 'أعلى',
+            'Bottom': 'اسفل',
+            'Default cell margins': 'هوامش الخلية الافتراضية',
+            'Default cell spacing': 'تباعد الخلايا الافتراضي',
+            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
+            'Cell margins': 'هوامش الخلية',
+            'Same as the whole table': 'نفس الجدول بأكمله',
+            'Borders': 'الحدود',
+            'None': 'اي',
+            'Single': 'واحد',
+            'Dot': 'نقطه',
+            'DashSmallGap': 'داشسمجاب',
+            'DashLargeGap': 'الاتحاد الخاص',
+            'DashDot': 'داشدوت',
+            'DashDotDot': 'ددهدودوت',
+            'Double': 'انقر نقرا مزدوجا',
+            'Triple': 'الثلاثي',
+            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
+            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
+            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
+            'ThinThickMediumGap': 'فجوه متوسطه سميك',
+            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
+            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
+            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
+            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
+            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
+            'SingleWavy': 'واحد مائج',
+            'DoubleWavy': 'مزدوج مائج',
+            'DashDotStroked': 'اندفاعه نقطه القوية',
+            'Emboss3D': 'D3مزخرف',
+            'Engrave3D': 'D3نقش',
+            'Outset': 'البدايه',
+            'Inset': 'الداخلي',
+            'Thick': 'سميكه',
+            'Style': 'نمط',
+            'Width': 'عرض',
+            'Height': 'ارتفاع',
+            'Letter': 'رساله',
+            'Tabloid': 'التابلويد',
+            'Legal': 'القانونيه',
+            'Statement': 'بيان',
+            'Executive': 'التنفيذي',
+            'A3': 'A3',
+            'A4': 'A4',
+            'A5': 'A5',
+            'B4': 'B4',
+            'B5': 'B5',
+            'Custom Size': 'حجم مخصص',
+            'Different odd and even': 'مختلفه غريبه وحتى',
+            'Different first page': 'الصفحة الاولي مختلفه',
+            'From edge': 'من الحافة',
+            'Header': 'راس',
+            'Footer': 'تذييل الصفحه',
+            'Margin': 'الهوامش',
+            'Paper': 'الورق',
+            'Layout': 'تخطيط',
+            'Orientation': 'التوجه',
+            'Landscape': 'المناظر الطبيعيه',
+            'Portrait': 'صوره',
+            'Table Of Contents': 'جدول المحتويات',
+            'Show page numbers': 'إظهار أرقام الصفحات',
+            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
+            'Nothing': 'شيء',
+            'Tab leader': 'قائد علامة التبويب',
+            'Show levels': 'إظهار المستويات',
+            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
+            'Build table of contents from': 'بناء جدول محتويات من',
+            'Styles': 'انماط',
+            'Available styles': 'الأنماط المتوفرة',
+            'TOC level': 'مستوي جدول المحتويات',
+            'Heading': 'عنوان',
+            'Heading 1': 'عنوان 1',
+            'Heading 2': 'عنوان 2',
+            'Heading 3': 'عنوان 3',
+            'Heading 4': 'عنوان 4',
+            'Heading 5': 'عنوان 5',
+            'Heading 6': 'عنوان 6',
+            'List Paragraph': 'فقره القائمة',
+            'Normal': 'العاديه',
+            'Outline levels': 'مستويات المخطط التفصيلي',
+            'Table entry fields': 'حقول إدخال الجدول',
+            'Modify': 'تعديل',
+            'Color': 'لون',
+            'Setting': 'اعداد',
+            'Box': 'مربع',
+            'All': 'جميع',
+            'Custom': 'المخصصه',
+            'Preview': 'معاينه',
+            'Shading': 'التظليل',
+            'Fill': 'ملء',
+            'Apply To': 'تنطبق علي',
+            'Table Properties': 'خصائص الجدول',
+            'Cell Options': 'خيارات الخلية',
+            'Table Options': 'خيارات الجدول',
+            'Insert Table': 'ادراج جدول',
+            'Number of columns': 'عدد الاعمده',
+            'Number of rows': 'عدد الصفوف',
+            'Text to display': 'النص الذي سيتم عرضه',
+            'Address': 'عنوان',
+            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
+            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
+            'Insert': 'ادراج',
+            'General': 'العامه',
+            'Indentation': 'المسافه البادئه',
+            'Before text': 'قبل النص',
+            'Special': 'الخاصه',
+            'First line': 'السطر الأول',
+            'Hanging': 'معلقه',
+            'After text': 'بعد النص',
+            'By': 'من',
+            'Before': 'قبل',
+            'Line Spacing': 'تباعد الأسطر',
+            'After': 'بعد',
+            'At': 'في',
+            'Multiple': 'متعدده',
+            'Spacing': 'تباعد',
+            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
+            'List level': 'مستوي القائمة',
+            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
+            'Level': 'مستوي',
+            'Number format': 'تنسيق الأرقام',
+            'Number style for this level': 'نمط الرقم لهذا المستوي',
+            'Enter formatting for number': 'إدخال تنسيق لرقم',
+            'Start at': 'بداية من',
+            'Restart list after': 'أعاده تشغيل قائمه بعد',
+            'Position': 'موقف',
+            'Text indent at': 'المسافة البادئة للنص في',
+            'Aligned at': 'محاذاة في',
+            'Follow number with': 'اتبع الرقم مع',
+            'Tab character': 'حرف علامة التبويب',
+            'Space': 'الفضاء',
+            'Arabic': 'العربية',
+            'UpRoman': 'حتى الروماني',
+            'LowRoman': 'الرومانية منخفضه',
+            'UpLetter': '',
+            'LowLetter': '',
+            'Number': 'عدد',
+            'Leading zero': 'يؤدي صفر',
+            'Bullet': 'رصاصه',
+            'Ordinal': 'الترتيبيه',
+            'Ordinal Text': 'النص الترتيبي',
+            'For East': 'للشرق',
+            'No Restart': 'لا أعاده تشغيل',
+            'Font': 'الخط',
+            'Font style': 'نمط الخط',
+            'Underline style': 'نمط التسطير',
+            'Font color': 'لون الخط',
+            'Effects': 'الاثار',
+            'Strikethrough': 'يتوسطه',
+            'Superscript': 'مرتفع',
+            'Subscript': 'منخفض',
+            'Double strikethrough': 'خط مزدوج يتوسطه خط',
+            'Regular': 'العاديه',
+            'Bold': 'جريئه',
+            'Italic': 'مائل',
+            'Cut': 'قطع',
+            'Copy': 'نسخ',
+            'Paste': 'لصق',
+            'Hyperlink': 'الارتباط التشعبي',
+            'Open Hyperlink': 'فتح ارتباط تشعبي',
+            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
+            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
+            'Paragraph': 'الفقره',
+            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
+            'Character': 'حرف',
+            'Merge Cells': 'دمج الخلايا',
+            'Insert Above': 'ادراج أعلاه',
+            'Insert Below': 'ادراج أدناه',
+            'Insert Left': 'ادراج إلى اليسار',
+            'Insert Right': 'ادراج اليمين',
+            'Delete': 'حذف',
+            'Delete Table': 'حذف جدول',
+            'Delete Row': 'حذف صف',
+            'Delete Column': 'حذف عمود',
+            'File Name': 'اسم الملف',
+            'Format Type': 'نوع التنسيق',
+            'Save': 'حفظ',
+            'Navigation': 'التنقل',
+            'Results': 'نتائج',
+            'Replace': 'استبدال',
+            'Replace All': 'استبدال الكل',
+            'We replaced all': 'استبدلنا جميع',
+            'Find': 'العثور',
+            'No matches': 'لا توجد تطابقات',
+            'All Done': 'كل القيام به',
+            'Result': 'نتيجه',
+            'of': 'من',
+            'instances': 'الحالات',
+            'with': 'مع',
+            'Click to follow link': 'انقر لمتابعه الارتباط',
+            'Continue Numbering': 'متابعه الترقيم',
+            'Bookmark name': 'اسم الإشارة المرجعية',
+            'Close': 'اغلاق',
+            'Restart At': 'أعاده التشغيل عند',
+            'Properties': 'خصائص',
+            'Name': 'اسم',
+            'Style type': 'نوع النمط',
+            'Style based on': 'نمط استنادا إلى',
+            'Style for following paragraph': 'نمط للفقرة التالية',
+            'Formatting': 'التنسيق',
+            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
+            'Numbering': 'ترقيم',
+            'Update Field': 'تحديث الحقل',
+            'Edit Field': 'تحرير الحقل',
+            'Bookmark': 'الإشارة المرجعية',
+            'Page Setup': 'اعداد الصفحة',
+            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
+            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
+                + '</br>' + 'الفصل نون-البند' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
+                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
+            'Format': 'تنسيق',
+            'Create New Style': 'إنشاء نمط جديد',
+            'Modify Style': 'تعديل النمط',
+            'New': 'الجديد',
+            'Bullets': 'الرصاص',
+            'Use bookmarks': 'استخدام الإشارات المرجعية',
+            'Table of Contents': 'جدول المحتويات',
+            'AutoFit': 'الاحتواء',
+            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
+            'AutoFit to Window': 'احتواء تلقائي للإطار',
+            'Fixed Column Width': 'عرض العمود الثابت',
+            'Reset': 'اعاده تعيين',
+            'Match case': 'حاله المباراة',
+            'Whole words': 'كلمات كامل',
+            'Add': 'اضافه',
+            'Go To': 'الانتقال إلى',
+            'Search for': 'البحث عن',
+            'Replace with': 'استبدال',
+            'TOC 1': 'جدول المحتويات 1',
+            'TOC 2': 'جدول المحتويات 2',
+            'TOC 3': 'جدول المحتويات 3',
+            'TOC 4': 'جدول المحتويات 4',
+            'TOC 5': 'جدول المحتويات 5',
+            'TOC 6': 'جدول المحتويات 6',
+            'TOC 7': 'جدول المحتويات 7',
+            'TOC 8': 'جدول المحتويات 8',
+            'TOC 9': 'جدول المحتويات 9',
+            'Right-to-left': 'من اليمين إلى اليسار',
+            'Left-to-right': 'من اليسار إلى اليمين',
+            'Direction': 'الاتجاه',
+            'Table direction': 'اتجاه الجدول',
+            'Indent from right': 'مسافة بادئه من اليمين',
+            'Page': 'صفحه',
+            'Fit one page': 'احتواء صفحه واحد',
+            'Fit page width': 'احتواء عرض الصفحة',
+            // tslint:disable-next-line:max-line-length
+            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
+        },
+        'colorpicker': {
+            'Apply': 'تطبيق',
+            'Cancel': 'إلغاء الأمر',
+            'ModeSwitcher': 'مفتاح كهربائي الوضع'
+        }
+    }
+});
+var documenteditor = new ej.documenteditor.DocumentEditor({isReadOnly: false,enableRtl: true,locale: 'ar-AE', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'});
+documenteditor.enableAllModules();
+var containerPanel = document.getElementById('container');
+function updateContainerSize() {
+  this.containerPanel.style.height = window.innerHeight + 'px';
+}
+
+updateContainerSize();
+documenteditor.appendTo('#DocumentEditor');
+
+var sfdt=`{
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "characterFormat": {
+                        "fontSize": 18.0,
+                        "fontFamily": "Calibri",
+                        "fontFamilyBidi": "Calibri"
+                    },
+                    "paragraphFormat": {
+                        "beforeSpacing": 18.0,
+                        "afterSpacing": 30.0,
+                        "styleName": "Heading 1",
+                        "bidi": true
+                    },
+                    "inlines": [
+                        {
+                            "text": "اعمال المغامرة دورات",
+                            "characterFormat": {
+                                "fontSize": 18.0,
+                                "bidi": true,
+                                "fontSizeBidi": 18.0
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}`;
+
+documenteditor.open(sfdt);
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/js/index.html
new file mode 100644
index 000000000..658a88815
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/js/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">            
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/rtl-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/index.js
new file mode 100644
index 000000000..d1e302258
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/index.js
@@ -0,0 +1,17 @@
+//Initialize Document Editor component.
+var documenteditor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false, height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/', documentEditorSettings: { showRuler: true }
+});
+
+//Enable all built in modules.
+documenteditor.enableAllModules();
+
+document.getElementById('container_ruler_button').addEventListener('click',
+    function () {
+        documenteditor.documentEditorSettings.showRuler = !documenteditor.documentEditorSettings.showRuler;
+    });
+
+//Render Document Editor component.
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/js/index.html
new file mode 100644
index 000000000..627a467ad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        <button id="container_ruler_button">Show/Hide Ruler</button>
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/index.js
new file mode 100644
index 000000000..5869ba3ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/index.js
@@ -0,0 +1,17 @@
+//Initialize Document Editor Container component.
+var documenteditorcontainer = new ej.documenteditor.DocumentEditorContainer({
+  height: '590px', documentEditorSettings: { showRuler: true }
+});
+
+//Inject require modules.
+ej.documenteditor.DocumentEditorContainer.Inject(
+  ej.documenteditor.Toolbar
+);
+
+document.getElementById('container_ruler_button').addEventListener('click',
+  function () {
+    documenteditorcontainer.documentEditorSettings.showRuler = !documenteditorcontainer.documentEditorSettings.showRuler;
+  });
+
+//Render Document Editor Container component.
+documenteditorcontainer.appendTo("#DocumentEditor");
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/js/index.html
new file mode 100644
index 000000000..627a467ad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        <button id="container_ruler_button">Show/Hide Ruler</button>
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/ruler-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/index.ts
new file mode 100644
index 000000000..bfe0970e3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToS3',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/js/index.html
new file mode 100644
index 000000000..1beab65e7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/js/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to AWS S3 Bucket</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        document.getElementById('export').addEventListener('click', function () {
+            save();
+        });
+
+        async function save() {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    'http://localhost:62870/api/documenteditor/SaveToS3',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        }
+    </script>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-aws-s3/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/index.ts
new file mode 100644
index 000000000..721860d53
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToAzure',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/js/index.html
new file mode 100644
index 000000000..37ccf43e3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/js/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to Azure Blob Storage</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        document.getElementById('export').addEventListener('click', function () {
+            save();
+        });
+        
+        async function save() {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    'http://localhost:62870/api/documenteditor/SaveToAzure',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-azure-blob/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/index.ts
new file mode 100644
index 000000000..d41306829
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToBoxCloud',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/js/index.html
new file mode 100644
index 000000000..2c7a394a2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/js/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to Box Cloud</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        document.getElementById('export').addEventListener('click', function () {
+            save();
+        });
+
+        async function save() {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    'http://localhost:62870/api/documenteditor/SaveToBoxCloud',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-box-cloud-file-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/index.ts
new file mode 100644
index 000000000..5f4a832c1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToDropBox',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/js/index.html
new file mode 100644
index 000000000..a2211ae0b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/js/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to DropBox Cloud</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        document.getElementById('export').addEventListener('click', function () {
+            save();
+        });
+
+        async function save() {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    'http://localhost:62870/api/documenteditor/SaveToDropBox',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-dropbox-cloud-file-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/index.ts
new file mode 100644
index 000000000..84d3399e0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToGoogleCloud',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/js/index.html
new file mode 100644
index 000000000..74d4ea3bc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/js/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to Google Cloud</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        document.getElementById('export').addEventListener('click', function () {
+            save();
+        });
+
+        async function save() {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    'http://localhost:62870/api/documenteditor/SaveToGoogleCloud',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-cloud-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/index.ts
new file mode 100644
index 000000000..dbcb7846b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToGoogleDrive',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/js/index.html
new file mode 100644
index 000000000..479168d22
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/js/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to Google Drive</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        document.getElementById('export').addEventListener('click', function () {
+            save();
+        });
+
+        async function save() {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    'http://localhost:62870/api/documenteditor/SaveToGoogleDrive',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-google-drive/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/index.ts
new file mode 100644
index 000000000..e3a623c08
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToOneDrive',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/js/index.html
new file mode 100644
index 000000000..f30726a62
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/js/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 DocumentEditor</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">
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
+        rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet"
+        type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/dist/global/ej2-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-data/dist/global/ej2-data.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-compression/dist/global/ej2-compression.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/dist/global/ej2-buttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-popups/dist/global/ej2-popups.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/dist/global/ej2-inputs.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/dist/global/ej2-lists.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/dist/global/ej2-navigations.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/dist/global/ej2-calendars.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-charts/dist/global/ej2-charts.min.js"
+        type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js"
+        type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
+        type="text/javascript"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to One Drive</button>
+    </div>
+    <div id='DocumentEditor' style='height:620px'></div>
+    <script>
+        // Initialize DocumentEditorContainer component.
+        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
+        //DocumentEditorContainer control rendering starts
+        documenteditorContainer.appendTo('#DocumentEditor');
+        document.getElementById('export').addEventListener('click', function () {
+            save();
+        });
+
+        async function save() {
+            container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                var exportedDocument = blob;
+                //Now, save the document where ever you want.
+                var formData = new FormData();
+                formData.append('documentName', container.documentEditor.documentName);
+                formData.append('data', exportedDocument);
+                /* tslint:disable */
+                var req = new XMLHttpRequest();
+                // Replace your running Url here
+                req.open(
+                    'POST',
+                    'http://localhost:62870/api/documenteditor/SaveToOneDrive',
+                    true
+                );
+                req.onreadystatechange = () => {
+                    if (req.readyState === 4) {
+                        if (req.status === 200 || req.status === 304) {
+                            console.log('Saved sucessfully');
+                        }
+                    }
+                };
+                req.send(formData);
+            });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/save-one-drive/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/index.css
new file mode 100644
index 000000000..8368ebd5f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/index.css
@@ -0,0 +1,26 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+      width: 100%;
+      height: 100%;
+  }
+
+  .e-de-statusbar-zoom {
+    float: right;
+    text-align: center;
+    padding: 2px;
+    line-height: 19px;
+    margin-top: 1px;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/index.js
new file mode 100644
index 000000000..87d3c2b85
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/index.js
@@ -0,0 +1,62 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false, enableEditor: true,
+});
+documenteditor.appendTo('#DocumentEditor');
+onLoadDefault();
+documenteditor.scrollToPage(2);
+
+ function onLoadDefault() {
+    var defaultDocument = {
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "paragraphFormat": {
+                        "styleName": "Normal"
+                    },
+                    "inlines": [
+                        {
+                            "text": "First page"
+                        }
+                    ]
+                }
+            ],
+            "headersFooters": {},
+        },
+        {
+            "blocks": [
+                {
+                    "paragraphFormat": {
+                        "styleName": "Normal"
+                    },
+                    "inlines": [
+                        {
+                            "text": "Second page"
+                        }
+                    ]
+                }
+            ],
+            "headersFooters": {},
+        }
+    ],
+    "characterFormat": {},
+    "paragraphFormat": {},
+    "background": {
+        "color": "#FFFFFFFF"
+    },
+    "styles": [
+        {
+            "type": "Paragraph",
+            "name": "Normal",
+            "next": "Normal"
+        },
+        {
+            "type": "Character",
+            "name": "Default Paragraph Font"
+        }
+    ]
+}
+documenteditor.open(JSON.stringify(defaultDocument));
+documenteditor.focusIn();
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/js/index.html
new file mode 100644
index 000000000..42b2245fc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="DocumentEditor">
+        </div>
+        <div id="page-fit-type-div"></div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/index.css
new file mode 100644
index 000000000..8368ebd5f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/index.css
@@ -0,0 +1,26 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+      width: 100%;
+      height: 100%;
+  }
+
+  .e-de-statusbar-zoom {
+    float: right;
+    text-align: center;
+    padding: 2px;
+    line-height: 19px;
+    margin-top: 1px;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/index.js
new file mode 100644
index 000000000..4f94670d8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/index.js
@@ -0,0 +1,78 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+  isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+documenteditor.enableAllModules();
+documenteditor.appendTo('#DocumentEditor');
+onLoadDefaultDocument();
+documenteditor.selection.goToPage(3);
+
+function onLoadDefaultDocument() {
+  var defaultDocument = {
+    "sections": [
+      {
+        "blocks": [
+          {
+            "paragraphFormat": {
+              "styleName": "Normal"
+            },
+            "inlines": [
+              {
+                "text": "First page"
+              }
+            ]
+          }
+        ],
+        "headersFooters": {},
+      },
+      {
+        "blocks": [
+          {
+            "paragraphFormat": {
+              "styleName": "Normal"
+            },
+            "inlines": [
+              {
+                "text": "Second page"
+              }
+            ]
+          }
+        ],
+        "headersFooters": {},
+      },
+      {
+        "blocks": [
+          {
+            "paragraphFormat": {
+              "styleName": "Normal"
+            },
+            "inlines": [
+              {
+                "text": "Third page"
+              }
+            ]
+          }
+        ],
+        "headersFooters": {},
+      }
+    ],
+    "characterFormat": {},
+    "paragraphFormat": {},
+    "background": {
+      "color": "#FFFFFFFF"
+    },
+    "styles": [
+      {
+        "type": "Paragraph",
+        "name": "Normal",
+        "next": "Normal"
+      },
+      {
+        "type": "Character",
+        "name": "Default Paragraph Font"
+      }
+    ]
+  }
+  documenteditor.open(JSON.stringify(defaultDocument));
+  documenteditor.focusIn();
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/js/index.html
new file mode 100644
index 000000000..42b2245fc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="DocumentEditor">
+        </div>
+        <div id="page-fit-type-div"></div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/index.css
new file mode 100644
index 000000000..8368ebd5f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/index.css
@@ -0,0 +1,26 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+      width: 100%;
+      height: 100%;
+  }
+
+  .e-de-statusbar-zoom {
+    float: right;
+    text-align: center;
+    padding: 2px;
+    line-height: 19px;
+    margin-top: 1px;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/index.js
new file mode 100644
index 000000000..5091d95da
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/index.js
@@ -0,0 +1,153 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+  isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+documenteditor.enableAllModules();
+documenteditor.appendTo('#DocumentEditor');
+var statusBarDiv = document.getElementById('page-fit-type-div');
+var startPage = 1;
+var label = document.createElement('label');
+label.styles = 'margin-top: 6px;margin-right: 2px';
+label.textContent = 'Page ';
+statusBarDiv.appendChild(label);
+var pageNumberLabel = document.createElement('label');
+pageNumberLabel.id = 'documenteditor_page_no';
+pageNumberLabel.style= 'text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text;height:17px;max-width:150px';
+
+var editablePageNumber = document.createElement('div');
+pageNumberLabel.id= 'editablePageNumber';
+pageNumberLabel.style= 'border: 1px solid #F1F1F1;display: inline-flex;height: 17px;padding: 0px 4px;';
+pageNumberLabel.className= 'single-line e-de-pagenumber-text';
+editablePageNumber.appendChild(pageNumberLabel);
+updatePageNumber();
+statusBarDiv.appendChild(editablePageNumber);
+editablePageNumber.setAttribute('title', 'The current page number in the document. Click or tap to navigate specific page.');
+var label1 = document.createElement('label');
+label1.id = 'documenteditor_pagecount';
+label1.styles = 'margin-left:2px;varter-spacing: 1.05px;';
+label1.textContent = 'of';
+statusBarDiv.appendChild(label1);
+var pageCount = document.createElement('label');
+pageCount.id = 'documenteditor_pagecount'
+pageCount.style = 'margin-left:6px;varter-spacing: 1.05px;';
+updatePageCount();
+statusBarDiv.appendChild(pageCount);
+var editorPageCount = undefined;
+var zoom;
+var zoomBtn = document.createElement('button');
+zoomBtn.id= 'documenteditor-zoom';
+zoomBtn.className = 'e-de-statusbar-zoom';
+statusBarDiv.appendChild(zoomBtn);
+zoomBtn.setAttribute('title', 'Zoom level. Click or tap to open the Zoom options.');
+var items = [
+  {
+    text: '200%',
+  },
+  {
+    text: '175%',
+  },
+  {
+    text: '150%',
+  },
+  {
+    text: '125%',
+  },
+  {
+    text: '100%',
+  },
+  {
+    text: '75%',
+  },
+  {
+    text: '50%',
+  },
+  {
+    text: '25%',
+  },
+  {
+    separator: true
+  },
+  {
+    text: 'Fit one page'
+  },
+  {
+    text: 'Fit page width',
+  },
+];
+zoom = new ej.splitbuttons.DropDownButton({ content: '100%', items: items, select: onZoom }, zoomBtn);
+editablePageNumber.addEventListener('click', updateDocumentEditorPageNumber);
+editablePageNumber.addEventListener('keydown', onKeyDown);
+editablePageNumber.addEventListener('blur', onBlur);
+documenteditor.viewChange = function (e) {
+  updatePageNumberOnViewChange(e);
+};
+documenteditor.contentChange = function () {
+  //Set page count
+  updatePageCount();
+};
+function updatePageNumberOnViewChange(args) {
+  if (documenteditor.selection
+    && documenteditor.selection.startPage >= args.startPage && documenteditor.selection.startPage <= args.endPage) {
+    startPage = documenteditor.selection.startPage;
+  } else {
+    startPage = args.startPage;
+  }
+  updatePageNumber();
+}
+function onBlur() {
+  if (editablePageNumber.textContent === '' || parseInt(editablePageNumber.textContent, 0) > editorPageCount) {
+    updatePageNumber();
+  }
+  editablePageNumber.contentEditable = 'false';
+}
+function onKeyDown(e) {
+  if (e.which === 13) {
+    e.preventDefault();
+    var pageNumber = parseInt(editablePageNumber.textContent, 0);
+    if (pageNumber > editorPageCount) {
+      updatePageNumber();
+    } else {
+      if (documenteditor.selection) {
+        documenteditor.selection.goToPage(parseInt(editablePageNumber.textContent, 0));
+      } else {
+        documenteditor.scrollToPage(parseInt(editablePageNumber.textContent, 0));
+      }
+    }
+    editablePageNumber.contentEditable = 'false';
+    if (editablePageNumber.textContent === '') {
+      updatePageNumber();
+    }
+  }
+  if (e.which > 64) {
+    e.preventDefault();
+  }
+}
+function onZoom(args) {
+  setZoomValue(args.item.text);
+  updateZoomContent();
+}
+function setZoomValue(text) {
+  if (text.match('Fit one page')) {
+    documenteditor.fitPage('FitOnePage');
+  } else if (text.match('Fit page width')) {
+    documenteditor.fitPage('FitPageWidth');
+  } else {
+    documenteditor.zoomFactor = parseInt(text, 0) / 100;
+  }
+}
+function updateZoomContent() {
+  zoom.content = Math.round(documenteditor.zoomFactor * 100) + '%';
+}
+function updatePageNumber() {
+  pageNumberLabel.textContent = startPage.toString();
+}
+function updatePageCount() {
+  editorPageCount = documenteditor.pageCount;
+  pageCount.textContent = editorPageCount.toString();
+}
+function updateDocumentEditorPageNumber() {
+  var editablePageNumber = document.getElementById('editablePageNumber');
+  editablePageNumber.contentEditable = 'true';
+  editablePageNumber.focus();
+  window.getSelection().selectAllChildren(editablePageNumber);
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/js/index.html
new file mode 100644
index 000000000..42b2245fc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="DocumentEditor">
+        </div>
+        <div id="page-fit-type-div"></div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/scrolling-zooming-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/index.js
new file mode 100644
index 000000000..a6252eada
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/index.js
@@ -0,0 +1,27 @@
+
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+var container = new ej.documenteditor.DocumentEditorContainer({
+    enableToolbar: true, height:"400"
+});
+ej.popups.createSpinner({
+  // Specify the target for the spinner to show
+    target: document.getElementById('container')
+});
+
+document.getElementById('import').addEventListener('click',function(){
+    // load your default document here
+    var data= '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+    ej.popups.showSpinner(document.getElementById('DocumentEditor'));
+    // Open the default document
+    container.documentEditor.open(data);
+    setInterval(function(){
+
+    // hideSpinner() method used hide spinner
+    ej.popups.hideSpinner(document.getElementById('DocumentEditor'));
+
+    }, 5000);
+});
+container.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/js/index.html
new file mode 100644
index 000000000..f1c342468
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        <button id="import">Load Document</button>
+        <div id="DocumentEditor" style="height:420px">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/spinner-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/index.js
new file mode 100644
index 000000000..034db0cac
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/index.js
@@ -0,0 +1,119 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({
+  isReadOnly: false,
+  enableSelection: true,
+  enableEditorHistory: true,
+  enableEditor: true,
+  enableTableDialog: true,
+  enableContextMenu: true,
+  enableSfdtExport: true,
+  height: '370px'
+});
+function toolbarButtonClick(arg) {
+  switch (arg.item.id) {
+    case 'table':
+      //Insert table API to add table
+      documenteditor.editor.insertTable(3, 2);
+      break;
+    case 'insert_above':
+      //Insert the specified number of rows to the table above to the row at cursor position
+      documenteditor.editor.insertRow(true, 2);
+      break;
+    case 'insert_below':
+      //Insert the specified number of rows to the table below to the row at cursor position
+      documenteditor.editor.insertRow();
+      break;
+    case 'insert_left':
+      //Insert the specified number of columns to the table left to the column at cursor position
+      documenteditor.editor.insertColumn(true, 2);
+      break;
+    case 'insert_right':
+      //Insert the specified number of columns to the table right to the column at cursor position
+      documenteditor.editor.insertColumn();
+      break;
+    case 'delete_table':
+      //Delete the entire table
+      documenteditor.editor.deleteTable();
+      break;
+    case 'delete_row':
+      //Delete the selected number of rows
+      documenteditor.editor.deleteRow();
+      break;
+    case 'delete_column':
+      //Delete the selected number of columns
+      documenteditor.editor.deleteColumn();
+      break;
+    case 'merge_cell':
+      //Merge the selected cells into one (both vertically and horizontally)
+      documenteditor.editor.mergeCells();
+      break;
+    case 'table_dialog':
+      //Opens insert table dialog
+      documenteditor.showDialog('Table');
+      break;
+  }
+}
+var toolBar = new ej.navigations.Toolbar({
+  clicked: toolbarButtonClick,
+  items: [
+    {
+      prefixIcon: 'e-de-ctnr-table e-icons',
+      tooltipText: 'Insert Table',
+      id: 'table',
+    },
+    {type: 'Separator' },
+    {
+      prefixIcon: 'e-de-ctnr-insertabove e-icons',
+      tooltipText: 'Insert new row above',
+      id: 'insert_above',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-insertbelow e-icons',
+      tooltipText: 'Insert new row below',
+      id: 'insert_below',
+    },
+    {type: 'Separator' },
+    {
+      prefixIcon: 'e-de-ctnr-insertleft e-icons',
+      tooltipText: 'Insert new column to the left',
+      id: 'insert_left',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-insertright e-icons',
+      tooltipText: 'Insert new column to the right',
+      id: 'insert_right',
+    },
+    {type: 'Separator' },
+    {
+      prefixIcon: 'e-icons e-de-delete-table',
+      tooltipText: 'Delete Entire table',
+      id: 'delete_table',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-deleterows e-icons',
+      tooltipText: 'Delete the selected row',
+      id: 'delete_row',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-deletecolumns e-icons',
+      tooltipText: 'Delete the selected column',
+      id: 'delete_column',
+    },
+    {type: 'Separator' },
+    {
+      prefixIcon: 'e-de-ctnr-mergecell e-icons',
+      tooltipText: 'Merge the selected cells',
+      id: 'merge_cell',
+    },
+    {type: 'Separator' },
+    {
+      text: 'Dialog',
+      tooltipText: 'Open insert table dialog',
+      id: 'table_dialog',
+    },
+  ],
+});
+toolBar.appendTo('#toolbar');
+documenteditor.appendTo('#DocumentEditor');
+documenteditor.editor.insertTable(2, 2);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/js/index.html
new file mode 100644
index 000000000..fbd63bb08
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/js/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">   
+        <div id="toolbar"></div>
+        <div id="DocumentEditor">
+            
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/index.js
new file mode 100644
index 000000000..8f91bdef1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/index.js
@@ -0,0 +1,13 @@
+ej.base.enableRipple(true);
+
+var editor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true });
+var documentString = '{"sections":[{"blocks":[{"paragraphFormat":{"styleName":"Heading 1"},"inlines":[{"text":"Headin"},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1},{"text":"g1"}]},{"paragraphFormat":{"styleName":"Heading 2"},"inlines":[{"text":"Heading2"}]},{"paragraphFormat":{"styleName":"Heading 3"},"inlines":[{"text":"Heading3"}]},{"paragraphFormat":{"styleName":"Heading 4"},"inlines":[{"text":"Heading4"}]},{"paragraphFormat":{"styleName":"Heading 5"},"inlines":[{"text":"Heading5"}]},{"paragraphFormat":{"styleName":"Heading 6"},"inlines":[{"text":"Heading6"}]},{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"text":"Normal"}]}],"headersFooters":{},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Paragraph","name":"Heading 1","basedOn":"Normal","next":"Normal","link":"Heading 1 Char","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":12.0,"afterSpacing":0.0,"outlineLevel":"Level1"}},{"type":"Paragraph","name":"Heading 2","basedOn":"Normal","next":"Normal","link":"Heading 2 Char","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level2"}},{"type":"Paragraph","name":"Heading 3","basedOn":"Normal","next":"Normal","link":"Heading 3 Char","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level3"}},{"type":"Paragraph","name":"Heading 4","basedOn":"Normal","next":"Normal","link":"Heading 4 Char","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level4"}},{"type":"Paragraph","name":"Heading 5","basedOn":"Normal","next":"Normal","link":"Heading 5 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level5"}},{"type":"Paragraph","name":"Heading 6","basedOn":"Normal","next":"Normal","link":"Heading 6 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level6"}},{"type":"Character","name":"Default Paragraph Font"},{"type":"Character","name":"Heading 1 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 2 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 3 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}},{"type":"Character","name":"Heading 4 Char","basedOn":"Default Paragraph Font","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 5 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 6 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}}]}';
+editor.appendTo('#DocumentEditor');
+
+editor.open(documentString);
+var tocSettings =
+{
+    startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true
+};
+editor.editorModule.insertTableOfContents(tocSettings);
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/js/index.html
new file mode 100644
index 000000000..c523958a9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/js/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">        
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/table-of-contents-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/index.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/index.js
new file mode 100644
index 000000000..7ffab904d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/index.js
@@ -0,0 +1,146 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, enableSelection: true, enableEditorHistory: true, enableEditor: true, enableSfdtExport: true });
+function toolbarButtonClick(arg) {
+  switch (arg.item.id) {
+    case 'bold':
+      //Toggles the bold of selected content
+      documenteditor.editor.toggleBold();
+      break;
+    case 'italic':
+      //Toggles the Italic of selected content
+      documenteditor.editor.toggleItalic();
+      break;
+    case 'underline':
+      //Toggles the underline of selected content
+      documenteditor.editor.toggleUnderline('Single');
+      break;
+    case 'strikethrough':
+      //Toggles the strikethrough of selected content
+      documenteditor.editor.toggleStrikethrough();
+      break;
+    case 'subscript':
+      //Toggles the subscript of selected content
+      documenteditor.editor.toggleSubscript();
+      break;
+    case 'superscript':
+      //Toggles the superscript of selected content
+      documenteditor.editor.toggleSuperscript();
+      break;
+  }
+}
+//To change the font Style of selected content
+function changeFontFamily(args) {
+  documenteditor.selection.characterFormat.fontFamily = args.value;
+  documenteditor.focusIn();
+}
+//To Change the font Size of selected content
+function changeFontSize(args) {
+  documenteditor.selection.characterFormat.fontSize = args.value;
+  documenteditor.focusIn();
+}
+//To Change the font Color of selected content
+function changeFontColor(args) {
+  documenteditor.selection.characterFormat.fontColor = args.currentValue.hex;
+  documenteditor.focusIn();
+}
+documenteditor.selectionChange = () => {
+  setTimeout(() => { onSelectionChange(); }, 20);
+};
+//Selection change to retrieve formatting
+function onSelectionChange() {
+  if (documenteditor.selection) {
+    enableDisableFontOptions();
+    // #endregion
+  }
+}
+function enableDisableFontOptions() {
+  var characterformat = documenteditor.selection.characterFormat;
+  var properties = [characterformat.bold, characterformat.italic, characterformat.underline, characterformat.strikeThrough];
+  var toggleBtnId = ["bold", "italic", "underline", "strikethrough"];
+  for (var i = 0; i < properties.length; i++) {
+    changeActiveState(properties[i], toggleBtnId[i]);
+  }
+}
+function changeActiveState(property, btnId) {
+  var toggleBtn = document.getElementById(btnId);
+  if ((typeof (property) == 'boolean' && property == true) || (typeof (property) == 'string' && property !== 'None'))
+    toggleBtn.classList.add("e-btn-toggle");
+  else {
+    if (toggleBtn.classList.contains("e-btn-toggle"))
+      toggleBtn.classList.remove("e-btn-toggle");
+  }
+}
+var fontStyle = ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Courier New', 'Georgia', 'Impact', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Symbol', 'Times New Roman', 'Verdana', 'Windings'
+];
+var fontSize = ['8', '9', '10', '11', '12', '14', '16', '18',
+  '20', '22', '24', '26', '28', '36', '48', '72', '96'];
+var toolBar = new ej.navigations.Toolbar({
+  clicked: toolbarButtonClick,
+  items: [
+    {
+      prefixIcon: 'e-de-ctnr-bold e-icons',
+      tooltipText: 'Bold',
+      id: 'bold',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-italic e-icons',
+      tooltipText: 'Italic',
+      id: 'italic',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-underline e-icons',
+      tooltipText: 'Underline',
+      id: 'underline',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-strikethrough e-icons',
+      tooltipText: 'Strikethrough',
+      id: 'strikethrough',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-subscript e-icons',
+      tooltipText: 'Subscript',
+      id: 'subscript',
+    },
+    {
+      prefixIcon: 'e-de-ctnr-superscript e-icons',
+      tooltipText: 'Superscript',
+      id: 'superscript',
+    },
+    { type: 'Separator' },
+    {
+      type: 'Input',
+      template: new ej.inputs.ColorPicker({
+        value: '#000000',
+        showButtons: true,
+        change: changeFontColor
+      }),
+    },
+    { type: 'Separator' },
+    {
+      type: 'Input',
+      template: new ej.dropdowns.ComboBox({
+        dataSource: fontStyle,
+        width: 120,
+        index: 2,
+        allowCustom: true,
+        change: changeFontFamily,
+        showClearButton: false,
+      }),
+    },
+    {
+      type: 'Input',
+      template: new ej.dropdowns.ComboBox({
+        dataSource: fontSize,
+        width: 80,
+        allowCustom: true,
+        index: 2,
+        change: changeFontSize,
+        showClearButton: false,
+      }),
+    },
+  ],
+});
+toolBar.appendTo('#toolbar');
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/js/index.html b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/js/index.html
new file mode 100644
index 000000000..658a88815
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/js/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Animation</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">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
+    
+    
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+    
+    <div id="container">
+        <div id="toolbar">            
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es5/document-editor/text-format-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/index.ts
new file mode 100644
index 000000000..fb4ff73a4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/index.ts
@@ -0,0 +1,22 @@
+
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component.
+let container: DocumentEditorContainer = new DocumentEditorContainer({
+    enableToolbar: true, height: '590px'
+});
+
+//Open the default document in `created` event.
+container.created = function () {
+    //load your default document here
+    let data: string = '{"sfdt":"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"}';
+    container.documentEditor.open(data);
+};
+//Render Document Editor Container component.
+container.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/ts/index.html
new file mode 100644
index 000000000..1d0d04ccb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/accessibility-cs1/ts/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <h1>Syncfusion Word Processor(a.k.a)Document Editor Component</h1>
+    <div id='container'>   
+        
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/index.css
new file mode 100644
index 000000000..18578ab19
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/index.ts
new file mode 100644
index 000000000..6fab84d93
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/index.ts
@@ -0,0 +1,15 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+
+//Initialize DocumentEditor Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px'});
+
+documenteditor.appendTo('#DocumentEditor');
+
+let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]}`;
+
+//Open the document in Document Editor.
+documenteditor.open(sfdt);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/systemjs.config.js
new file mode 100644
index 000000000..ec1789dce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/ts/index.html
new file mode 100644
index 000000000..3a1623af3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/chart-cs1/ts/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <!-- EJ2 Document Editor dependent theme -->
+    <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor theme -->
+    <link href="http://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+    <!-- EJ2 Document Editor Javascripts dependent -->
+    <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+    <script src="http://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+      <!-- TypeScripts dependent -->
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor" style="height: 412px"></div>
+    </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/index.ts
new file mode 100644
index 000000000..776e0bba3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/index.ts
@@ -0,0 +1,12 @@
+import { DocumentEditorContainer, DocumentEditor, CollaborativeEditingHandler} from '@syncfusion/ej2-documenteditor';
+
+//Inject collaborative editing module.
+DocumentEditor.Inject(CollaborativeEditingHandler);
+DocumentEditorContainer.Inject(Toolbar);
+let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,  height: '590px',});
+
+container.serviceUrl = 'http://localhost:5000/api/documenteditor/';
+container.appendTo('#container');
+
+//Enable collaborative editing in Document Editor.
+container.documentEditor.enableCollaborativeEditing = true;
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-1.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-1.ts
new file mode 100644
index 000000000..4fe5f45d0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-1.ts
@@ -0,0 +1,47 @@
+import {HubConnectionBuilder, HttpTransportType, HubConnectionState } from '@microsoft/signalr';
+
+let connectionId: string= "";
+
+var connection = new HubConnectionBuilder().withUrl(serviceUrl + '/documenteditorhub', {
+    skipNegotiation: true,
+    transport: HttpTransportType.WebSockets
+}).withAutomaticReconnect().build();
+
+connection.onclose(async () => {
+    if (connection.state === HubConnectionState.Disconnected) {
+        alert('Connection lost. Please relod the browser to continue.');
+    }
+});
+
+async function start(data: any) {
+    try {
+        connection.start().then(function () {
+            //Join the collaborative editing session with the specified room name.
+            connection.send('JoinGroup', { roomName: data.roomName, currentUser: data.currentUser });
+            console.log('server connected!!!');
+        });
+    } catch (err) {
+        console.log(err);
+        setTimeout(start, 5000);
+    }
+};
+//Event handler to handle data received
+connection.on('dataReceived', onDataRecived.bind(this));
+
+function onDataRecived(action: string, data: any) {
+    if (connections) {
+        if (action == 'connectionId') {
+            connectionId = data;
+        } else if (connectionId != data.connectionId) {
+            if (action == 'action' || action == 'addUser') {
+                //Add user info when new user join the collaborative editing session.
+                titleBar.addUser(data);
+            } else if (action == 'removeUser') {
+                //Remove user info from title bar once user is disconnected.
+                titleBar.removeUser(data);
+            }
+        }
+        //Apply remote changes to current document.
+        connections.applyRemoteAction(action, data);
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-2.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-2.ts
new file mode 100644
index 000000000..69acb420b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-2.ts
@@ -0,0 +1,12 @@
+function openDocument(responseText: string, roomName: string): void {
+    let data = JSON.parse(responseText);
+    //Get collaborative editing module.
+    connections = container.documentEditor.collaborativeEditingHandlerModule;
+    //Configure collaborative editing room name in collaborative editing module
+    connections.updateRoomInfo(roomName, data.version, serviceUrl);
+    container.documentEditor.open(data.sfdt);
+    setTimeout(function () {
+        // connect to signalR room with specified name.
+        start({ action: 'connect', roomName: roomName, currentUser: container.currentUser }, null);
+    });
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-3.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-3.ts
new file mode 100644
index 000000000..7979f5edc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-cs1/script-3.ts
@@ -0,0 +1,6 @@
+container.contentChange = function (args: ContainerContentChangeEventArgs) {
+    if (connections) {
+        //Send current changes to server to broadcast it to other users.
+        connections.sendActionToServer(args.operations)
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/index.ts
new file mode 100644
index 000000000..d16682132
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/index.ts
@@ -0,0 +1,9 @@
+import { DocumentEditorContainer, DocumentEditor, CollaborativeEditingHandler} from '@syncfusion/ej2-documenteditor';
+
+//Inject collaborative editing module.
+DocumentEditor.Inject(CollaborativeEditingHandler);
+let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,  height: '590px'});
+container.appendTo('#container');
+
+//Enable collaborative editing in Document Editor.
+container.documentEditor.enableCollaborativeEditing = true;
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-1.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-1.ts
new file mode 100644
index 000000000..bf5a3deab
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-1.ts
@@ -0,0 +1,31 @@
+import { Stomp, CompatClient } from '@stomp/stompjs';
+import SockJS from 'sockjs-client';
+
+let currentRoomName: string = '';
+let webSocketEndPoint: string = 'http://localhost:8024/ws';
+let stompClient!: CompatClient;
+//Initialize SockJS
+function initializeSockJs(): void {
+    let ws = new SockJS(webSocketEndPoint);
+    stompClient = Stomp.over(ws);
+    stompClient.connect({}, () => {
+        onConnected();
+    });
+}
+// Subscribe to the topic.
+function onConnected() {
+    if (stompClient.connected) {
+        // Subscribe to the specific topic            
+        stompClient.subscribe('/topic/public/' + currentRoomName, onDataRecived);
+        connectToRoom(currentRoomName);
+    }
+}
+//Receive the remote action and apply to currenty document.
+function onDataRecived(data: any) {
+    if (collborativeEditingHandler) {
+        var content = JSON.parse(data.body);
+        if (content.payload.operations != null) {
+            container.documentEditor.collaborativeEditingHandlerModule.applyRemoteAction("action", content.payload);
+        }
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-2.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-2.ts
new file mode 100644
index 000000000..ff21bdc54
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-2.ts
@@ -0,0 +1,22 @@
+function openDocument(responseText: string, roomName: string): void {
+    let data = JSON.parse(responseText);
+    //Update the room and version information to collaborative editing handler.
+    collborativeEditingHandler.updateRoomInfo(roomName, data.version, serviceUrl + 'api/collaborativeediting/');
+    //Open the document
+    container.documentEditor.open(data.sfdt);
+    setTimeout(function () {
+        // connect to server using ScketJS
+        connectToRoom({ action: 'connect', roomName: roomName, currentUser: container.currentUser });
+    });
+}
+//Send the user information to the other users that I have joined.
+function connectToRoom(data: any) {
+    var userInfo = {
+        currentUser: container.currentUser,
+        clientVersion: 0,
+        roomName: currentRoomName,
+        connectionId: "",
+    };
+    //Send the user information to server
+    stompClient.send("/app/join/" + currentRoomName, {}, JSON.stringify(userInfo));
+};
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-3.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-3.ts
new file mode 100644
index 000000000..b36f0ae5a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/collaborative-editing-java-cs1/script-3.ts
@@ -0,0 +1,6 @@
+container.contentChange = function (args: ContainerContentChangeEventArgs) {
+    if (collborativeEditingHandler) {
+        //Send the editing action to server
+        collborativeEditingHandler.sendActionToServer(args.operations as Operation[]);
+    }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/index.ts
new file mode 100644
index 000000000..b26374172
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/index.ts
@@ -0,0 +1,64 @@
+
+
+import { DocumentEditor, Editor, Selection, OptionsPane, Search, ContextMenu, EditorHistory, ImageResizer, ListDialog, TableDialog, HyperlinkDialog, ParagraphDialog, FontDialog, PageSetupDialog, BookmarkDialog, StyleDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, TableOfContentsDialog } from '@syncfusion/ej2-documenteditor';
+import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
+
+let defaultCheckBoxObj: CheckBox = new CheckBox({ label: 'Hide Default Context Menu', change: contextmenuHelper });
+defaultCheckBoxObj.appendTo('#default-context-menu');
+
+let positionCheckBoxObj: CheckBox = new CheckBox({ label: 'Add Custom option at bottom', change: contextmenuHelper });
+positionCheckBoxObj.appendTo('#position-context-menu');
+
+//Initialize Document Editor component.
+let documentEditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false, height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+
+//Enable all built in modules.
+documentEditor.enableAllModules();
+
+//Render Document Editor component.
+documentEditor.appendTo('#DocumentEditor');
+
+//Creating custom menu items
+let menuItems: MenuItemModel[] = [
+    {
+        text: 'Search In Google',
+        id: 'search_in_google',
+        iconCss: 'e-icons e-de-ctnr-find'
+    }];
+
+//Adding custom options
+documentEditor.contextMenu.addCustomMenu(menuItems, false);
+
+//To show/hide custom menu item
+documentEditor.customContextMenuBeforeOpen = (args: BeforeOpenCloseCustomContentMenuEventArgs): void => {
+    let search: HTMLElement = document.getElementById(args.ids[0]);
+    search.style.display = 'none';
+    let searchContent: string = documentEditor.selection.text;
+    if ((!documentEditor.selection.isEmpty) && (/\S/.test(searchContent))) {
+        search.style.display = 'block';
+    }
+};
+
+//To handle contextmenu select event
+documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
+    let item: string = args.id;
+    let id: string = documentEditor.element.id;
+    switch (item) {
+        case id + 'search_in_google':
+            let searchContent: string = documentEditor.selection.text;
+            if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+                window.open('http://google.com/search?q=' + searchContent);
+            }
+            break;
+    }
+};
+
+//function to handle the CheckBox change event
+function contextmenuHelper(args: ChangeEventArgs): void {
+    documentEditor.contextMenu.addCustomMenu(menuItems, defaultCheckBoxObj.checked, positionCheckBoxObj.checked);
+}
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/ts/index.html
new file mode 100644
index 000000000..1bd762ed0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/customize-context-menu-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <input id="default-context-menu" type="checkbox" />
+    <input id="position-context-menu" type="checkbox" />
+    <div id='container'>         
+        <div id='DocumentEditor'>           
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/index.ts
new file mode 100644
index 000000000..a36042f3d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/index.ts
@@ -0,0 +1,18 @@
+
+
+import { DocumentEditorContainer,Toolbar } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditorContainer.Inject(Toolbar);
+let container: DocumentEditorContainer = new DocumentEditorContainer({
+      enableToolbar: true, height: '590px'
+});
+container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+container.appendTo('#DocumentEditor');
+container.documentEditor.currentUser = 'engineer@mycompany.com';
+
+let sfdt: string =`{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+
+//Open the document in Document Editor.
+container.documentEditor.open(sfdt);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/ts/index.html
new file mode 100644
index 000000000..a25998fb3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs1/ts/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+       <head>
+          <title>Essential JS 2</title>
+
+          <!-- EJ2 Document Editor dependent theme -->
+          <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+          <!-- EJ2 Document Editor theme -->
+          <link href="http://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+          <!-- EJ2 Document Editor Javascript dependent -->
+          <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+          <!-- TypeScripts Dependent -->
+          <link href="index.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+         <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+         <script src="systemjs.config.js"></script>
+       </head>
+
+<body>
+<!--element which is going to render-->
+<div id='DocumentEditor' style='height:420px'>
+
+</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/index.ts
new file mode 100644
index 000000000..0016fb607
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/index.ts
@@ -0,0 +1,18 @@
+
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditorContainer.Inject(Toolbar);
+let container: DocumentEditorContainer = new DocumentEditorContainer({
+    enableToolbar: true, height: '590px'
+});
+container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+container.appendTo('#DocumentEditor');
+container.documentEditor.currentUser = 'engineer@mycompany.com';
+
+let sfdt: string = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+
+//Open the document in Document Editor.
+container.documentEditor.open(sfdt);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/ts/index.html
new file mode 100644
index 000000000..a25998fb3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/data-protection-cs2/ts/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+       <head>
+          <title>Essential JS 2</title>
+
+          <!-- EJ2 Document Editor dependent theme -->
+          <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+          <link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+          <!-- EJ2 Document Editor theme -->
+          <link href="http://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+          <!-- EJ2 Document Editor Javascript dependent -->
+          <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+          <script src="http://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+          <!-- TypeScripts Dependent -->
+          <link href="index.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+         <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+         <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+         <script src="systemjs.config.js"></script>
+       </head>
+
+<body>
+<!--element which is going to render-->
+<div id='DocumentEditor' style='height:420px'>
+
+</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/index.ts
new file mode 100644
index 000000000..642992b83
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/index.ts
@@ -0,0 +1,24 @@
+
+
+import { DocumentEditor, Editor, Selection, SfdtExport, EditorHistory, BookmarkDialog } from '@syncfusion/ej2-documenteditor';
+
+// Enable requir modules
+DocumentEditor.Inject(Editor, Selection, SfdtExport, EditorHistory, BookmarkDialog);
+
+// Initialize Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableEditor: true,
+    enableSelection: true,
+    enableEditorHistory: true,
+    enableBookmarkDialog: true,
+    height: '590px'
+});
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', () => {
+    //Open bookmark dialog.
+    documenteditor.showDialog('Bookmark');
+});
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs1/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/index.ts
new file mode 100644
index 000000000..c58c559a5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/index.ts
@@ -0,0 +1,22 @@
+
+
+
+import { DocumentEditor, Editor, Selection, ListDialog, SfdtExport, } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, ListDialog);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableListDialog: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open list dialog
+    documenteditor.showDialog('List');
+});
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs10/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/index.ts
new file mode 100644
index 000000000..b726de258
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/index.ts
@@ -0,0 +1,24 @@
+
+
+
+import { DocumentEditor, Editor, Selection, BordersAndShadingDialog, SfdtExport, EditorHistory } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, BordersAndShadingDialog, EditorHistory);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableBordersAndShadingDialog: true,
+    enableSfdtExport: true,
+    height: '370px',
+    enableEditorHistory: true
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open hyperlink dialog
+    documenteditor.showDialog('BordersAndShading');
+});
+documenteditor.appendTo('#DocumentEditor');
+documenteditor.editor.insertTable(2, 2);
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs11/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/index.ts
new file mode 100644
index 000000000..3eb8ae85f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/index.ts
@@ -0,0 +1,26 @@
+
+
+
+import { DocumentEditor, Editor, Selection, TableOptionsDialog, TablePropertiesDialog, BordersAndShadingDialog, SfdtExport, EditorHistory } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, EditorHistory);
+let documenteditor: DocumentEditor = new DocumentEditor({
+      isReadOnly: false,
+      enableSelection: true,
+      enableEditor: true,
+      enableTableOptionsDialog: true,
+      enableTablePropertiesDialog: true,
+      enableBordersAndShadingDialog: true,
+      enableSfdtExport: true,
+      height: '370px',
+      enableEditorHistory: true
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open table options dialog
+    documenteditor.showDialog('TableOptions');
+});
+documenteditor.appendTo('#DocumentEditor');
+documenteditor.editor.insertTable(2, 2);
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs12/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/index.ts
new file mode 100644
index 000000000..eb4e759a4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/index.ts
@@ -0,0 +1,29 @@
+
+
+
+import { DocumentEditor, Editor, Selection, TableOptionsDialog, TablePropertiesDialog, BordersAndShadingDialog, SfdtExport, EditorHistory } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, EditorHistory);
+let documenteditor: DocumentEditor = new DocumentEditor({
+      isReadOnly: false,
+      enableSelection: true,
+      enableEditor: true,
+      enableTableOptionsDialog: true,
+      enableTablePropertiesDialog: true,
+      enableBordersAndShadingDialog: true,
+      enableSfdtExport: true,
+      height: '370px',
+      enableEditorHistory: true
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open table properties dialog
+    documenteditor.showDialog('TableProperties');
+});
+
+documenteditor.appendTo('#DocumentEditor');
+
+// Insert a new table.
+documenteditor.editor.insertTable(2, 2);
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs13/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/index.ts
new file mode 100644
index 000000000..44a034ab6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/index.ts
@@ -0,0 +1,22 @@
+
+
+
+import { DocumentEditor, Editor, Selection, PageSetupDialog, SfdtExport } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, PageSetupDialog);
+let documenteditor: DocumentEditor = new DocumentEditor({
+      isReadOnly: false,
+      enableSelection: true,
+      enableEditor: true,
+      enablePageSetupDialog: true,
+      enableSfdtExport: true,
+      height: '370px'
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open page setup dialog
+    documenteditor.showDialog('PageSetup');
+});
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs14/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/index.ts
new file mode 100644
index 000000000..76fcdb502
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/index.ts
@@ -0,0 +1,23 @@
+
+
+
+import { DocumentEditor, Editor, Selection, ColumnsDialog, SfdtExport, EditorHistory } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, ColumnsDialog, EditorHistory);
+let documenteditor: DocumentEditor = new DocumentEditor({
+      isReadOnly: false,
+      enableSelection: true,
+      enableEditor: true,
+      enableColumnsDialog: true,
+      enableSfdtExport: true,
+      enableEditorHistory: true,
+      height: '370px'
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open page setup dialog
+    documenteditor.showDialog('Columns');
+});
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs15/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/index.ts
new file mode 100644
index 000000000..27da8b36b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/index.ts
@@ -0,0 +1,24 @@
+
+
+import { DocumentEditor, Editor, Selection, EditorHistory, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-documenteditor';
+//Inject the required module
+DocumentEditor.Inject(Editor, Selection, EditorHistory, HyperlinkDialog, SfdtExport);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditorHistory: true,
+    enableEditor: true,
+    enableHyperlinkDialog: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+//Click the hyperlink button, the hyperlink dialog will open
+function showHyperlinkDialog() {
+    //Open the hyperlink dialog.
+    documenteditor.showDialog('Hyperlink');
+}
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', showHyperlinkDialog)
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs16/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/index.ts
new file mode 100644
index 000000000..6ed7e90ed
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/index.ts
@@ -0,0 +1,29 @@
+
+
+
+import { DocumentEditor, Editor, Selection, FontDialog, SfdtExport, } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditor.Inject(Editor, Selection, SfdtExport, FontDialog);
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableFontDialog: true,
+    enableSfdtExport: true,
+     height: '370px'
+});
+
+let containerPanel: HTMLElement = document.getElementById('container');
+
+let button: HTMLElement = document.getElementById('dialog');
+
+button.addEventListener('click', function () {
+    // To open Font Dialog
+    documenteditor.showDialog('Font');
+});
+
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs2/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/index.ts
new file mode 100644
index 000000000..12fd0ccb4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/index.ts
@@ -0,0 +1,22 @@
+
+
+
+import { DocumentEditor, Editor, Selection, ParagraphDialog, SfdtExport, } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, ParagraphDialog);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableParagraphDialog: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open paragraph dialog
+    documenteditor.showDialog('Paragraph');
+});
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs3/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/index.ts
new file mode 100644
index 000000000..bfdc95c61
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/index.ts
@@ -0,0 +1,22 @@
+
+
+
+import { DocumentEditor, Editor, Selection, TableDialog, SfdtExport, } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, TableDialog);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableTableDialog: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open table dialog
+    documenteditor.showDialog('Table');
+});
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs4/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/index.ts
new file mode 100644
index 000000000..cf48bb492
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/index.ts
@@ -0,0 +1,22 @@
+
+
+
+import { DocumentEditor, Editor, Selection, BookmarkDialog, SfdtExport, } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, BookmarkDialog);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableBookmarkDialog: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open bookmark dialog
+    documenteditor.showDialog('Bookmark');
+});
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs5/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/index.ts
new file mode 100644
index 000000000..99361e1e9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/index.ts
@@ -0,0 +1,22 @@
+
+
+
+import { DocumentEditor, Editor, Selection, HyperlinkDialog, SfdtExport, } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, HyperlinkDialog);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableHyperlinkDialog: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open hyperlink dialog
+    documenteditor.showDialog('Hyperlink');
+});
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs6/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/index.ts
new file mode 100644
index 000000000..99e2d4a82
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/index.ts
@@ -0,0 +1,22 @@
+
+
+
+import { DocumentEditor, Editor, Selection, TableOfContentsDialog, SfdtExport } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Editor, Selection, SfdtExport, TableOfContentsDialog);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableTableOfContentsDialog: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+    //To open table of contents dialog
+    documenteditor.showDialog('TableOfContents');
+});
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs7/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/index.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/index.js
new file mode 100644
index 000000000..2a739f03d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/index.js
@@ -0,0 +1,8 @@
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableStyleDialog: true,enableStylesDialog: true, enableSelection: true, enableEditor: true, isReadOnly: false, enableEditorHistory: true });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('dialog').addEventListener('click', function () {
+    documenteditor.showDialog('Styles');
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs8/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/index.ts
new file mode 100644
index 000000000..8587403fc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/index.ts
@@ -0,0 +1,28 @@
+
+
+
+import { DocumentEditor, Editor, Selection, StyleDialog, SfdtExport, StylesDialog, EditorHistory } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditor.Inject(Editor, Selection, SfdtExport, StyleDialog, StylesDialog, EditorHistory);
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditor: true,
+    enableStyleDialog: true,
+    enableSfdtExport: true,
+    enableEditorHistory: true,
+    height: '370px'
+});
+
+let button: HTMLElement = document.getElementById('dialog');
+button.addEventListener('click', function () {
+
+    //To open style dialog
+    documenteditor.showDialog('Style');
+});
+
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/ts/index.html
new file mode 100644
index 000000000..36a004d10
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/dialog-cs9/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>
+            <button id="dialog">Dialog</button>  
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs1/index.ts
new file mode 100644
index 000000000..4dbf75058
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs1/index.ts
@@ -0,0 +1,62 @@
+
+
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+      <title>Essential JS 2</title>
+      <!-- EJ2 Document Editor dependent theme -->
+      <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+      <!-- EJ2 Document Editor theme -->
+      <link href="https://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+      <!-- EJ2 Document Editor dependent scripts -->
+      <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+      <!-- EJ2 Document Editor script -->
+      <script src="https://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+      <!--element which is going to render-->
+          <div id='DocumentEditor' style='height:350px'></div>
+      <script>
+          // Initialize DocumentEditor component.
+          var documenteditor = new ej.documenteditor.DocumentEditor({ height: '370px', isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+          documenteditor.acceptTab = true;
+          //Enable all the build in modules.
+          documenteditor.enableAllModules();
+
+          //Set page border color.
+          documenteditor.pageOutline = '#E0E0E0';
+
+          //Documenteditor control rendering starts
+          documenteditor.appendTo('#DocumentEditor');
+      </script>
+  </body>
+  </html>
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs1/ts/index.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs2/index.ts
new file mode 100644
index 000000000..408d6ae3a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs2/index.ts
@@ -0,0 +1,59 @@
+
+
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+      <title>Essential JS 2</title>
+
+      <!-- EJ2 Document Editor dependent theme -->
+      <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+      <link href="https://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+      <!-- EJ2 Document Editor theme -->
+      <link href="https://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+
+      <!-- EJ2 Document Editor dependent scripts -->
+      <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+      <script src="https://cdn.syncfusion.com/ej2/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+      <!-- EJ2 Document Editor script -->
+      <script src="https://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+  <!--Element which is going to render as Document Editor-->
+  <div id='DocumentEditor' style='height:620px'>
+
+  </div>
+  <script>
+      // Initialize DocumentEditorContainer component.
+      var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+      ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+      documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+      //DocumentEditorContainer control rendering starts
+      documenteditorContainer.appendTo('#DocumentEditor');
+  </script>
+  </body>
+
+  </html>
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/es5-getting-started-cs2/ts/index.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/index.css
new file mode 100644
index 000000000..fa3d16073
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/index.css
@@ -0,0 +1,12 @@
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/index.ts
new file mode 100644
index 000000000..3ebb4b01d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/index.ts
@@ -0,0 +1,11 @@
+import { DocumentEditorContainer, Toolbar,Editor, SfdtExport } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditorContainer.Inject(Toolbar, Editor, SfdtExport);
+
+let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '390px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+container.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', () => {
+    container.documentEditor.save('sample', 'Sfdt');
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/ts/index.html
new file mode 100644
index 000000000..8184c7b0a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs1/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditorContainer -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/index.css
new file mode 100644
index 000000000..fa3d16073
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/index.css
@@ -0,0 +1,12 @@
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/index.ts
new file mode 100644
index 000000000..17e429349
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/index.ts
@@ -0,0 +1,11 @@
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditorContainer.Inject(Toolbar);
+
+let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '390px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+container.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', () => {
+    container.documentEditor.save('sample', 'Docx');
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/ts/index.html
new file mode 100644
index 000000000..8184c7b0a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs2/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditorContainer -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/index.css
new file mode 100644
index 000000000..fa3d16073
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/index.css
@@ -0,0 +1,12 @@
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/index.ts
new file mode 100644
index 000000000..9e0bd8411
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/index.ts
@@ -0,0 +1,11 @@
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditorContainer.Inject(Toolbar);
+
+let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '390px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+container.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', () => {
+    container.documentEditor.save('sample', 'Txt');
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/ts/index.html
new file mode 100644
index 000000000..8184c7b0a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs3/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditorContainer -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/index.css
new file mode 100644
index 000000000..fa3d16073
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/index.css
@@ -0,0 +1,12 @@
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/index.ts
new file mode 100644
index 000000000..6f48942ee
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/index.ts
@@ -0,0 +1,11 @@
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditorContainer.Inject(Toolbar);
+
+let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '390px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+container.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', () => {
+    container.documentEditor.save('sample', 'Dotx');
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/ts/index.html
new file mode 100644
index 000000000..8184c7b0a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-container-cs4/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id="container">
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditorContainer -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/index.ts
new file mode 100644
index 000000000..32f703927
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/index.ts
@@ -0,0 +1,16 @@
+
+
+import { DocumentEditor, FormatType, Selection, Editor, SfdtExport } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditor.Inject(SfdtExport, Selection, Editor);
+
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', enableSfdtExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', () => {
+    documenteditor.save('sample', 'Sfdt');
+});
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/ts/index.html
new file mode 100644
index 000000000..9211a7bad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs1/ts/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/index.ts
new file mode 100644
index 000000000..86fd93dc9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/index.ts
@@ -0,0 +1,16 @@
+
+
+import { DocumentEditor, FormatType, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditor.Inject(SfdtExport, WordExport, Selection, Editor);
+
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', enableWordExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', () => {
+    documenteditor.save('sample', 'Docx');
+});
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/ts/index.html
new file mode 100644
index 000000000..9211a7bad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs2/ts/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/index.ts
new file mode 100644
index 000000000..e82bf9fd3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/index.ts
@@ -0,0 +1,18 @@
+
+
+import { DocumentEditor, FormatType, Selection, Editor, SfdtExport, TextExport} from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules for Export.
+DocumentEditor.Inject(SfdtExport, TextExport, Selection, Editor);
+
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', enableTextExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', () => {
+    //Export the document as text file.
+    documenteditor.save('sample', 'Txt');
+});
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/ts/index.html
new file mode 100644
index 000000000..9211a7bad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs3/ts/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/index.ts
new file mode 100644
index 000000000..986c58ec2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/index.ts
@@ -0,0 +1,18 @@
+
+
+import { DocumentEditor, FormatType, Selection, Editor, SfdtExport, WordExport} from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules for Export.
+DocumentEditor.Inject(SfdtExport, WordExport, Selection, Editor);
+
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', enableWordExport: true, enableSelection: true, enableEditor: true, isReadOnly: false });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', () => {
+    //Export the document as text file.
+    documenteditor.save('sample', 'Dotx');
+});
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/ts/index.html
new file mode 100644
index 000000000..9211a7bad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/export-cs4/ts/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div style="display: inline">
+            <button id="export" class="e-control e-btn e-primary">Save</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/index.ts
new file mode 100644
index 000000000..a5424f0bc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/index.ts
@@ -0,0 +1,31 @@
+
+
+import { DocumentEditor, Selection, Editor, Search, OptionsPane, EditorHistory } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Selection, Search, Editor, OptionsPane, EditorHistory);
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', enableSelection: true, enableSearch: true, enableEditor: true, isReadOnly: false, enableOptionsPane: true, enableEditorHistory : true });
+documenteditor.appendTo('#DocumentEditor');
+let sfdt: string = `{
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "inlines": [
+                        {
+                            "characterFormat": {
+                                "bold": true,
+                                "italic": true
+                            },
+                            "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}`;
+documenteditor.open(sfdt);
+document.getElementById('showhidepane').addEventListener('click', () => {
+    documenteditor.showOptionsPane();
+});
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/ts/index.html
new file mode 100644
index 000000000..81db37a7a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/find-cs1/ts/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div style="display: inline">
+            <button id="showhidepane" class="e-control e-btn e-primary">Optionspane</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/index.ts
new file mode 100644
index 000000000..31d9e0bbf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/index.ts
@@ -0,0 +1,15 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+
+// Initialize Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false,  height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+// Enable all built in modules.
+documenteditor.enableAllModules();
+
+// Render the Document Editor component.
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/systemjs.config.js
new file mode 100644
index 000000000..f95e28ad4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/ts/index.html
new file mode 100644
index 000000000..1016f51dc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/index.ts
new file mode 100644
index 000000000..e69651200
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/index.ts
@@ -0,0 +1,15 @@
+
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documenteditor: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+// Render Document Editor component.
+documenteditor.appendTo('#DocumentEditor');
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/ts/index.html
new file mode 100644
index 000000000..1016f51dc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/getting-started-cs2/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/index.css
new file mode 100644
index 000000000..774438806
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #Documenteditor {
+      width: 100%;
+      height: 100%;
+  }
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/index.ts
new file mode 100644
index 000000000..6a80a683a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/index.ts
@@ -0,0 +1,24 @@
+
+
+import { DocumentEditor, SfdtExport, Selection, RequestNavigateEventArgs, Editor } from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules.
+DocumentEditor.Inject(Selection, SfdtExport, Editor);
+//Initilize the Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({ enableSelection: true, height: '370px', enableEditor: true, isReadOnly: false });
+documenteditor.appendTo('#DocumentEditor');
+
+// Add event listener for requestNavigate event to customize hyperlink navigation functionality
+documenteditor.requestNavigate = (args: RequestNavigateEventArgs) => {
+    if (args.linkType !== 'Bookmark') {
+        let link: string = args.navigationLink;
+        if (args.localReference.length > 0) {
+            link += '#' + args.localReference;
+        }
+        //Navigate to the selected URL.
+        window.open(link);
+        args.isHandled = true;
+    }
+};
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/ts/index.html
new file mode 100644
index 000000000..fb4a6cc27
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs1/ts/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>           
+        <div id='DocumentEditor'>
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/index.css
new file mode 100644
index 000000000..774438806
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #Documenteditor {
+      width: 100%;
+      height: 100%;
+  }
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/index.ts
new file mode 100644
index 000000000..a83deee13
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/index.ts
@@ -0,0 +1,20 @@
+
+
+import { DocumentEditor, SfdtExport, Selection, Editor, RequestNavigateEventArgs } from '@syncfusion/ej2-documenteditor';
+DocumentEditor.Inject(Selection, SfdtExport, Editor);
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', isReadOnly: false, enableSelection: true, enableEditor: true });
+documenteditor.appendTo('#DocumentEditor');
+
+// Add event listener for requestNavigate event to customize hyperlink navigation functionality.
+documenteditor.requestNavigate = (args: RequestNavigateEventArgs) => {
+    if (args.linkType !== 'Bookmark') {
+        let link: string = args.navigationLink;
+        if (args.localReference.length > 0) {
+            link += '#' + args.localReference;
+        }
+        window.open(link);
+        args.isHandled = true;
+    }
+};
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/ts/index.html
new file mode 100644
index 000000000..fb4a6cc27
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/hyperlink-cs2/ts/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>           
+        <div id='DocumentEditor'>
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/index.css
new file mode 100644
index 000000000..ace870e02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+      width:100%;
+      height: 100%;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/index.ts
new file mode 100644
index 000000000..cc8cf1a7e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/index.ts
@@ -0,0 +1,57 @@
+
+
+import { DocumentEditor, Editor, Selection, ImageResizer, EditorHistory } from '@syncfusion/ej2-documenteditor';
+import { Button } from '@syncfusion/ej2-buttons';
+//Inject require modules.
+DocumentEditor.Inject(Editor, Selection, ImageResizer, EditorHistory);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableEditor: true,
+    enableSection: true,
+    enableImageResizer: true,
+    enableEditorHistory: true,
+    height: '370px'
+});
+documenteditor.appendTo('#DocumentEditor');
+//Insert Image From URL with alternate text
+documenteditor.editor.insertImage('https://cdn.syncfusion.com/content/images/Logo/Logo_Black_72dpi_without.png', 200, 200, 'Syncfusion');
+let insertPictureButton: Button = new Button();
+insertPictureButton.appendTo('#insert-picture');
+
+//Open file picker.
+document.getElementById('insert-picture').addEventListener('click', () => {
+    let pictureUpload: HTMLInputElement = document.getElementById("insertImageButton") as HTMLInputElement;
+    pictureUpload.value = '';
+    pictureUpload.click();
+});
+// File picker change event.
+document.getElementById('insertImageButton').addEventListener('change', onInsertImage);
+
+//Get select image from file picker and insert it in Document Editor.
+function onInsertImage(args: any): void {
+    if (navigator.userAgent.match('Chrome') || navigator.userAgent.match('Firefox') || navigator.userAgent.match('Edge') || navigator.userAgent.match('MSIE') || navigator.userAgent.match('.NET')) {
+        if (args.target.files[0]) {
+            let path = args.target.files[0];
+            let reader = new FileReader();
+            reader.onload = function (frEvent: any) {
+                let base64String = frEvent.target.result;
+                let image = document.createElement('img');
+                image.addEventListener('load', function () {
+                    //Insert image.
+                    documenteditor.editor.insertImage(base64String, this.width, this.height);
+                })
+                image.src = base64String;
+            };
+            reader.readAsDataURL(path);
+        }
+        //Safari does not Support FileReader Class
+    } else {
+        let image = document.createElement('img');
+        image.addEventListener('load', function () {
+            documenteditor.editor.insertImage(args.target.value);
+        })
+        image.src = args.target.value;
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/ts/index.html
new file mode 100644
index 000000000..efb3b1bd6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/image-cs1/ts/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <input type="file" id="insertImageButton" style="position:fixed; left:-110em" accept=".jpg,.jpeg,.png,.bmp" />
+        <div id='toolbar'>
+            <button id="insert-picture">Image</button>
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/index.css
new file mode 100644
index 000000000..d1c5c0fb0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/index.ts
new file mode 100644
index 000000000..63c442058
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/index.ts
@@ -0,0 +1,35 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+
+// Initialize the Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px' });
+
+documenteditor.appendTo('#DocumentEditor');
+
+let sfdt: string = `{
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "inlines": [
+                        {
+                            "characterFormat": {
+                                "bold": true,
+                                "italic": true
+                            },
+                            "text": "Hello World"
+                        }
+                    ]
+                }
+            ],
+            "headersFooters": {
+            }
+        }
+    ]
+}`;
+
+//Open the sfdt document in the Document Editor.
+documenteditor.open(sfdt);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/ts/index.html
new file mode 100644
index 000000000..4a1cefd45
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-cs1/ts/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/index.css
new file mode 100644
index 000000000..d1c5c0fb0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/index.ts
new file mode 100644
index 000000000..ef6b1f806
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/index.ts
@@ -0,0 +1,36 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+
+// Initialize the Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px' });
+
+documenteditor.appendTo('#DocumentEditor');
+
+document.getElementById('file_upload').setAttribute('accept', '.sfdt');
+
+//Open file picker.
+document.getElementById("import").addEventListener("click", (): void => {
+    document.getElementById('file_upload').click();
+});
+
+document.getElementById('file_upload').addEventListener("change", (e: any): void => {
+    if (e.target.files[0]) {
+        //Get the selected file.
+        let file = e.target.files[0];
+        if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+            let fileReader: FileReader = new FileReader();
+            fileReader.onload = (e: any) => {
+                let contents: string = e.target.result;
+                //Open the sfdt document in the Document Editor.
+                documenteditor.open(contents);
+            };
+            //Read the file content.
+            fileReader.readAsText(file);
+            documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
+        }
+    }
+});
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/ts/index.html
new file mode 100644
index 000000000..ef4e22835
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/import-sfdt-cs1/ts/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <input type="file" id="file_upload" style="position:fixed; left:-100em" />
+    <div id='container'>
+        <div>
+            <button id="import">Import</button>
+        </div>
+        <!--Element which will render as DocumentEditor -->
+        <div id="DocumentEditor"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/index.ts
new file mode 100644
index 000000000..fb18e80dd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/index.ts
@@ -0,0 +1,58 @@
+
+
+import { DocumentEditor, Editor, Selection, EditorHistory } from '@syncfusion/ej2-documenteditor';
+import { Toolbar } from '@syncfusion/ej2-navigations';
+
+//Inject the require module
+DocumentEditor.Inject(Editor, Selection, EditorHistory);
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditorHistory: true,
+    enableEditor: true,
+    height: '370px'
+});
+
+function toolbarAction(args) {
+    switch (args.item.id) {
+        case 'Bullets':
+            //To create bullet list
+            documenteditor.editor.applyBullet('\uf0b7', 'Symbol');
+            break;
+        case 'Numbering':
+            //To create numbering list
+            documenteditor.editor.applyNumbering('%1)', 'UpRoman');
+            break;
+        case 'clearlist':
+            //To clear list
+            documenteditor.editor.clearList();
+            break;
+    }
+};
+
+let toolbar: Toolbar = new Toolbar({
+    clicked: toolbarAction,
+    items: [
+        {
+            prefixIcon: 'e-de-ctnr-bullets e-icons',
+            tooltipText: 'Bullets',
+            id: 'Bullets',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-numbering e-icons',
+            tooltipText: 'Numbering',
+            id: 'Numbering',
+        },
+        {
+            text: 'Clear',
+            id: 'clearlist',
+            tooltipText: 'Clear List',
+        }
+    ],
+});
+toolbar.appendTo('#toolbar');
+
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/ts/index.html
new file mode 100644
index 000000000..a95028d31
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/list-cs1/ts/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>            
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/index.ts
new file mode 100644
index 000000000..5823bb908
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromS3',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/ts/index.html
new file mode 100644
index 000000000..9a5ea7402
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-aws-s3/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From AWS S3 Bucket</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/index.ts
new file mode 100644
index 000000000..f3cd037e2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+    load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromAzure',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/ts/index.html
new file mode 100644
index 000000000..bcf880d5c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-azure-blob/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From Azure Blob Storage</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/index.ts
new file mode 100644
index 000000000..aa18d08b2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/index.ts
@@ -0,0 +1,41 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromBoxCloud',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+} console.error(error);
+  });
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/ts/index.html
new file mode 100644
index 000000000..6b6e41885
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-box-cloud-file-storage/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From Box cloud file storage</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/index.ts
new file mode 100644
index 000000000..c7a35249a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/index.ts
@@ -0,0 +1,23 @@
+
+
+import { DocumentEditor, Editor } from '@syncfusion/ej2-documenteditor';
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false, height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+
+//Enable all built in modules.
+documenteditor.enableAllModules();
+
+//Open the default document in `created` event.
+documenteditor.created = function () {
+    //load your default document here
+    let data: string = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+    //Open the default document
+    documenteditor.open(data);
+};
+
+//Render Document Editor component.
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/ts/index.html
new file mode 100644
index 000000000..1016f51dc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/index.ts
new file mode 100644
index 000000000..453f49a19
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/index.ts
@@ -0,0 +1,23 @@
+
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component.
+let container: DocumentEditorContainer = new DocumentEditorContainer({
+    enableToolbar: true, height: '590px'
+});
+
+//Open the default document in `created` event.
+container.created = function () {
+    //load your default document here
+    let data: string = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+    //Open the default document
+    container.documentEditor.open(data);
+};
+//Render Document Editor Container component.
+container.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/ts/index.html
new file mode 100644
index 000000000..1016f51dc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-default-document-cs2/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/index.ts
new file mode 100644
index 000000000..624c792a4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/index.ts
@@ -0,0 +1,39 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromDropBox',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/ts/index.html
new file mode 100644
index 000000000..49d1d647d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-dropbox-cloud-file-storage/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From DropBox cloud file storage</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/index.ts
new file mode 100644
index 000000000..d9c21433e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromGoogleCloud',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/ts/index.html
new file mode 100644
index 000000000..dd7e45e1b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-cloud-storage/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From Google cloud storage</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/index.ts
new file mode 100644
index 000000000..71aa81eda
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromGoogleDrive',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/ts/index.html
new file mode 100644
index 000000000..abe6b7585
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-google-drive/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From Google Drive</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/index.ts
new file mode 100644
index 000000000..07d75091c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/index.ts
@@ -0,0 +1,40 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('load').addEventListener('click', (): void => {
+  load();
+});
+
+function load(): void {
+  fetch(
+    'http://localhost:62870/api/documenteditor/LoadFromOneDrive',
+    {
+      method: 'Post',
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      body: JSON.stringify({ documentName: 'Getting Started.docx' })
+    }
+  )
+    .then(response => {
+      if (response.status === 200 || response.status === 304) {
+        return response.json(); // Return the Promise
+      } else {
+        throw new Error('Error loading data');
+      }
+    })
+    .then(json => {
+      documentEditorContainer.documentEditor.open(JSON.stringify(json));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/ts/index.html
new file mode 100644
index 000000000..92b52019c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/open-one-drive/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="load">Open Document From One Drive</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/index.ts
new file mode 100644
index 000000000..8cc9b6bc6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/index.ts
@@ -0,0 +1,32 @@
+
+
+import { DocumentEditor, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules.
+DocumentEditor.Inject(Selection, Editor, SfdtExport, WordExport);
+
+//Initialize Document Editor.
+let documentEditor: DocumentEditor = new DocumentEditor({ height: '370px', enableEditor: true, enableSfdtExport: true, enableWordExport: true, isReadOnly: false });
+
+documentEditor.appendTo('#DocumentEditor');
+
+//Override keyboard shortcut inside `keyDown` event.
+documentEditor.keyDown = function (args: DocumentEditorKeyDownEventArgs) {
+    let keyCode: number = args.event.which || args.event.keyCode;
+
+    let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+    let isAltKey: boolean = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+    // 83 is the character code for 'S'
+    if (isCtrlKey && !isAltKey && keyCode === 83) {
+        //To prevent default save operation, set the isHandled property to true
+        args.isHandled = true;
+        documentEditor.save('sample', 'Docx');
+        args.event.preventDefault();
+    } else if (isCtrlKey && isAltKey && keyCode === 83) {
+        documentEditor.save('sample', 'Sfdt');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/ts/index.html
new file mode 100644
index 000000000..ff0239777
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor'>
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/index.ts
new file mode 100644
index 000000000..514338536
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/index.ts
@@ -0,0 +1,32 @@
+
+
+import { DocumentEditor, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules.
+DocumentEditor.Inject(Selection, Editor, SfdtExport, WordExport);
+
+//Initialize Document Editor.
+let documentEditor: DocumentEditor = new DocumentEditor({ height: '370px', enableEditor: true, enableSfdtExport: true, enableWordExport: true, isReadOnly: false });
+
+documentEditor.appendTo('#DocumentEditor');
+
+//Override keyboard shortcut inside `keyDown` event.
+documentEditor.keyDown = function (args: DocumentEditorKeyDownEventArgs) {
+    let keyCode: number = args.event.which || args.event.keyCode;
+
+    let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+    let isAltKey: boolean = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+    //83 is the character code for 'S'
+    if (isCtrlKey && !isAltKey && keyCode === 83) {
+        //To prevent default save operation, set the isHandled property to true
+        args.isHandled = true;
+        documentEditor.save('sample', 'Docx');
+        args.event.preventDefault();
+    } else if (isCtrlKey && isAltKey && keyCode === 83) {
+        documentEditor.save('sample', 'Sfdt');
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/ts/index.html
new file mode 100644
index 000000000..ff0239777
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/override-keyboard-cs2/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor'>
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/index.ts
new file mode 100644
index 000000000..ab006f44c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/index.ts
@@ -0,0 +1,181 @@
+
+
+import { DocumentEditor, Editor, Selection, EditorHistory, SfdtExport, ContextMenu } from '@syncfusion/ej2-documenteditor';
+import { Toolbar } from '@syncfusion/ej2-navigations';
+import { ItemModel, DropDownButton } from '@syncfusion/ej2-splitbuttons';
+
+//Inject the require module
+DocumentEditor.Inject(Editor, Selection, EditorHistory, SfdtExport, ContextMenu);
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    height: '370px', isReadOnly: false, enableSelection: true, enableEditorHistory: true, enableEditor: true, enableContextMenu: true, enableSfdtExport: true
+});
+
+function toolbarButtonClick(arg) {
+    switch (arg.item.id) {
+        case 'AlignLeft':
+            //Toggle the Left alignment for selected or current paragraph
+            documenteditor.editor.toggleTextAlignment('Left');
+            break;
+        case 'AlignRight':
+            //Toggle the Right alignment for selected or current paragraph
+            documenteditor.editor.toggleTextAlignment('Right');
+            break;
+        case 'AlignCenter':
+            //Toggle the Center alignment for selected or current paragraph
+            documenteditor.editor.toggleTextAlignment('Center');
+            break;
+        case 'Justify':
+            //Toggle the Justify alignment for selected or current paragraph
+            documenteditor.editor.toggleTextAlignment('Justify');
+            break;
+        case 'IncreaseIndent':
+            //Increase the left indent of selected or current paragraph
+            documenteditor.editor.increaseIndent();
+            break;
+        case 'DecreaseIndent':
+            //Decrease the left indent of selected or current paragraph
+            documenteditor.editor.decreaseIndent();
+            break;
+        case 'ClearFormat':
+            //Clear all formattiing of the selected paragraph or content.
+            documenteditor.editor.clearFormatting();
+            break;
+        case 'ShowParagraphMark':
+            //Show or hide the hidden characters like spaces, tab, paragraph marks, and breaks.
+            documenteditor.documentEditorSettings.showHiddenMarks = !documenteditor.documentEditorSettings.showHiddenMarks;
+            break;
+    }
+}
+//Change the line spacing of selected or current paragraph
+function lineSpacingAction(args: any) {
+    let text: string = args.item.text;
+    switch (text) {
+        case 'Single':
+            documenteditor.selection.paragraphFormat.lineSpacing = 1;
+            break;
+        case '1.15':
+            documenteditor.selection.paragraphFormat.lineSpacing = 1.15;
+            break;
+        case '1.5':
+            documenteditor.selection.paragraphFormat.lineSpacing = 1.5;
+            break;
+        case 'Double':
+            documenteditor.selection.paragraphFormat.lineSpacing = 2;
+            break;
+    }
+    setTimeout((): void => {
+        documenteditor.focusIn();
+    }, 30);
+}
+documenteditor.selectionChange = () => {
+    setTimeout(() => {
+        onSelectionChange();
+    }, 20);
+};
+// Selection change to retrieve formatting
+function onSelectionChange() {
+    if (documenteditor.selection) {
+        var paragraphFormat = documenteditor.selection.paragraphFormat;
+        var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify', 'ShowParagraphMark'];
+        for (var i = 0; i < toggleBtnId.length; i++) {
+            let toggleBtn: HTMLElement = document.getElementById(toggleBtnId[i]);
+            //Remove toggle state.
+            toggleBtn.classList.remove('e-btn-toggle');
+        }
+        //Add toggle state based on selection paragraph format.
+        if (paragraphFormat.textAlignment === 'Left') {
+            document.getElementById('AlignLeft').classList.add('e-btn-toggle');
+        } else if (paragraphFormat.textAlignment === 'Right') {
+            document.getElementById('AlignRight').classList.add('e-btn-toggle');
+        } else if (paragraphFormat.textAlignment === 'Center') {
+            document.getElementById('AlignCenter').classList.add('e-btn-toggle');
+        } else {
+            document.getElementById('Justify').classList.add('e-btn-toggle');
+        }
+        if (documenteditor.documentEditorSettings.showHiddenMarks) {
+            document.getElementById('ShowParagraphMark').classList.add('e-btn-toggle');
+        }
+        // #endregion
+    }
+}
+//Toolbar configuration to add paragraph formatting options
+let toolBar: Toolbar = new Toolbar({
+    clicked: toolbarButtonClick,
+    items: [
+        {
+            prefixIcon: 'e-de-ctnr-alignleft e-icons',
+            tooltipText: 'Align Left',
+            id: 'AlignLeft',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-aligncenter e-icons',
+            tooltipText: 'Align Center',
+            id: 'AlignCenter',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-alignright e-icons',
+            tooltipText: 'Align Right',
+            id: 'AlignRight',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-justify e-icons',
+            tooltipText: 'Justify',
+            id: 'Justify',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-increaseindent e-icons',
+            tooltipText: 'Increase Indent',
+            id: 'IncreaseIndent',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-decreaseindent e-icons',
+            tooltipText: 'Decrease Indent',
+            id: 'DecreaseIndent',
+        },
+        {
+            type: 'Separator'
+        },
+        {
+            id: 'lineSpacing'
+        },
+        {
+            prefixIcon: 'e-de-ctnr-clearall e-icons',
+            tooltipText: 'ClearFormatting',
+            id: 'ClearFormat',
+        },
+        {
+            type: 'Separator'
+        },
+        {
+            prefixIcon: 'e-de-e-paragraph-mark e-icons',
+            tooltipText: 'Show the hidden characters like spaces, tab, paragraph marks, and breaks.(Ctrl + *)',
+            id: 'ShowParagraphMark',
+        }
+    ],
+});
+toolBar.appendTo('#toolbar');
+let items: ItemModel[] = [
+    {
+        text: 'Single',
+    },
+    {
+        text: '1.15',
+    },
+    {
+        text: '1.5',
+    },
+    {
+        text: 'Double',
+    },
+];
+let dropdown = new DropDownButton({
+    items: items,
+    iconCss: 'e-de-ctnr-linespacing e-icons',
+    select: lineSpacingAction,
+});
+dropdown.appendTo('#lineSpacing');
+
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/ts/index.html
new file mode 100644
index 000000000..a95028d31
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/paragraph-format-cs1/ts/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>            
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/index.ts
new file mode 100644
index 000000000..f5a3f7c89
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/index.ts
@@ -0,0 +1,24 @@
+
+
+import { DocumentEditor, Selection, Editor, DocumentEditorKeyDownEventArgs } from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules.
+DocumentEditor.Inject(Selection, Editor)
+
+//Initialize Document Editor.
+let documentEditor: DocumentEditor = new DocumentEditor({ height: '370px', enableEditor: true, isReadOnly: false });
+
+documentEditor.appendTo('#DocumentEditor');
+
+//Prevent keyboard shortcut inside `keyDown` event.
+documentEditor.keyDown = function (args: DocumentEditorKeyDownEventArgs) {
+      let keyCode: number = args.event.which || args.event.keyCode;
+      let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+      //67 is the character code for 'C'
+      if (isCtrlKey && keyCode === 67) {
+          //To prevent copy operation set isHandled to true
+          args.isHandled = true;
+      }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/ts/index.html
new file mode 100644
index 000000000..ff0239777
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor'>
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/index.ts
new file mode 100644
index 000000000..7aadf844e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/index.ts
@@ -0,0 +1,24 @@
+
+
+import { DocumentEditor, Selection, Editor, DocumentEditorKeyDownEventArgs } from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules.
+DocumentEditor.Inject(Selection, Editor)
+
+//Initialize Document Editor.
+let documentEditor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false, height: '370px' });
+
+documentEditor.appendTo('#DocumentEditor');
+
+//Prevent keyboard shortcut inside `keyDown` event.
+documentEditor.keyDown = function (args: DocumentEditorKeyDownEventArgs) {
+    let keyCode: number = args.event.which || args.event.keyCode;
+    let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+    //67 is the character code for 'C'
+    if (isCtrlKey && keyCode === 67) {
+        //To prevent copy operation set isHandled to true
+        args.isHandled = true;
+    }
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/ts/index.html
new file mode 100644
index 000000000..ff0239777
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/prevent-keyboard-cs2/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor'>
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/index.css
new file mode 100644
index 000000000..3bc51e47c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+    width: 100%;
+    height: 100%;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/index.ts
new file mode 100644
index 000000000..4c93ece85
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/index.ts
@@ -0,0 +1,42 @@
+
+
+import { DocumentEditor, Print } from '@syncfusion/ej2-documenteditor';
+import { Button } from '@syncfusion/ej2-buttons';
+
+DocumentEditor.Inject(Print);
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    enablePrint: true, height: '370px'
+});
+documenteditor.appendTo('#DocumentEditor');
+
+let sfdt: string = `{
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "inlines": [
+                        {
+                            "characterFormat": {
+                                "bold": true,
+                                "italic": true
+                            },
+                            "text": "Hello World"
+                        }
+                    ]
+                }
+            ],
+            "headersFooters": {
+            }
+        }
+    ]
+}`;
+
+documenteditor.open(sfdt);
+let printButton: Button = new Button();
+printButton.appendTo('#print');
+document.getElementById('print').addEventListener('click', () => {
+    documenteditor.print();
+});
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/ts/index.html
new file mode 100644
index 000000000..2ea94b2b4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs1/ts/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        <button id="print">Print</button>        
+        <div id='DocumentEditor'> 
+        </div>
+        <div id='DocumentEditor2'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/index.css
new file mode 100644
index 000000000..3bc51e47c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+    width: 100%;
+    height: 100%;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/index.ts
new file mode 100644
index 000000000..f71bd7a72
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/index.ts
@@ -0,0 +1,24 @@
+
+
+import { DocumentEditor, Print, Editor, Selection, EditorHistory } from '@syncfusion/ej2-documenteditor';
+import { Button } from '@syncfusion/ej2-buttons';
+
+DocumentEditor.Inject(Print, Editor, Selection, EditorHistory);
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enablePrint: true,
+    enableEditor: true,
+    enableSelection: true,
+    enableEditorHistory: true,
+    height: '370px'
+});
+documenteditor.appendTo('#DocumentEditor');
+let printButton: Button = new Button();
+printButton.appendTo('#print');
+
+document.getElementById('print').addEventListener('click', () => {
+    documenteditor.print();
+});
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/ts/index.html
new file mode 100644
index 000000000..2ea94b2b4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs2/ts/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        <button id="print">Print</button>        
+        <div id='DocumentEditor'> 
+        </div>
+        <div id='DocumentEditor2'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/index.css
new file mode 100644
index 000000000..3bc51e47c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/index.css
@@ -0,0 +1,18 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+    width: 100%;
+    height: 100%;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/index.ts
new file mode 100644
index 000000000..6a50502ef
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/index.ts
@@ -0,0 +1,36 @@
+
+
+import { DocumentEditor, Print, Editor, Selection, EditorHistory, SfdtExport } from '@syncfusion/ej2-documenteditor';
+import { Button } from '@syncfusion/ej2-buttons';
+
+//Inject require modules.
+DocumentEditor.Inject(Print, Editor, Selection, EditorHistory, SfdtExport);
+
+let documenteditor1: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enablePrint: true,
+    enableEditor: true,
+    enableSelection: true,
+    enableEditorHistory: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+documenteditor1.appendTo('#DocumentEditor');
+let printButton: Button = new Button();
+printButton.appendTo('#print');
+
+let documenteditor2: DocumentEditor = new DocumentEditor({
+    enablePrint: true, enableSelection: true, isReadOnly: false, enableEditor: true, height: '370px'
+});
+documenteditor2.appendTo('#DocumentEditor2');
+//Print the document
+document.getElementById('print').addEventListener('click', () => {
+    let sfdtData = documenteditor1.serialize();
+    documenteditor2.open(sfdtData);
+    //Set A5 paper size
+    documenteditor2.selection.sectionFormat.pageWidth = 419.55;
+    documenteditor2.selection.sectionFormat.pageHeight = 595.30;
+    documenteditor2.print();
+});
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/ts/index.html
new file mode 100644
index 000000000..2ea94b2b4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/print-cs3/ts/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        <button id="print">Print</button>        
+        <div id='DocumentEditor'> 
+        </div>
+        <div id='DocumentEditor2'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/index.ts
new file mode 100644
index 000000000..d1d9581dc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/index.ts
@@ -0,0 +1,23 @@
+
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initiliaze Document Editor Container component.
+let documenteditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '500px' });
+
+documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
+
+//Enable read only mode inside `documentChange` event.
+documenteditorContainer.documentChange = (): void => {
+    documenteditorContainer.restrictEditing = true;
+};
+//Render Document Editor container component.
+documenteditorContainer.appendTo('#DocumentEditor');
+
+let data: string = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+//Open the default document
+documenteditorContainer.documentEditor.open(data);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/ts/index.html
new file mode 100644
index 000000000..a541d81aa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-container-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+ 
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+ 
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+ 
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/index.ts
new file mode 100644
index 000000000..1bbce7149
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/index.ts
@@ -0,0 +1,26 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+
+//Initialize Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
+
+//Enable all the built in modules.
+documenteditor.enableAllModules();
+
+//Open the default document inside `created` event.
+documenteditor.created = function () {
+    //Load your default document here
+    let data: string = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+    //Open the default document
+    documenteditor.open(data);
+};
+
+//Enable read only mode inside `documentChange` event.
+documenteditor.documentChange = (): void => {
+    documenteditor.isReadOnly = true;
+};
+
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/ts/index.html
new file mode 100644
index 000000000..a541d81aa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/read-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+ 
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+ 
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+ 
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/index.ts
new file mode 100644
index 000000000..f78d0d8da
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/index.ts
@@ -0,0 +1,45 @@
+
+
+import { DocumentEditor, Selection, Editor, Search } from '@syncfusion/ej2-documenteditor';
+//Inject require modules.
+DocumentEditor.Inject(Selection, Search, Editor);
+
+//Initialize the Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', enableSelection: true, enableSearch: true, enableEditor: true, isReadOnly: false });
+documenteditor.appendTo('#DocumentEditor');
+let sfdt: string = `{
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "inlines": [
+                        {
+                            "characterFormat": {
+                                "bold": true,
+                                "italic": true
+                            },
+                            "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}`;
+
+//Open the SFDT document in Document Editor.
+documenteditor.open(sfdt);
+document.getElementById('replace_all').addEventListener('click', () => {
+    let textToFind: string = (document.getElementById('find_text') as HTMLInputElement).value;
+    let textToReplace: string = (document.getElementById('replace_text') as HTMLInputElement).value;
+    if (textToFind !== '') {
+        // Find all the occurences of given text
+        documenteditor.searchModule.findAll(textToFind);
+        if (documenteditor.searchModule.searchResults.length > 0) {
+            // Replace all the occurences of given text
+            documenteditor.searchModule.searchResults.replaceAll(textToReplace);
+        }
+    }
+});
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/ts/index.html
new file mode 100644
index 000000000..f73f4d617
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/replace-cs1/ts/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div>
+            <table>
+                <tr>
+                    <td>
+                        <label>Text to find:</label>
+                    </td>
+                    <td>
+                        <input type="text" id="find_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label>Text to replace:</label>
+                    </td>
+                    <td>
+                        <input type="text" id="replace_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <button id="replace_all" v-on:click='onReplaceButtonClick' style="float:right;margin-top: 10px;" class="e-control e-btn">Replace All</button>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/index.ts
new file mode 100644
index 000000000..ff92425f0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/index.ts
@@ -0,0 +1,339 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+import { L10n } from '@syncfusion/ej2-base';
+
+//Set locale object
+L10n.load({
+    'ar-AE': {
+        'documenteditor': {
+            'Table': 'لجدول',
+            'Row': 'لصف',
+            'Cell': 'الخليه',
+            'Ok': 'موافق',
+            'Cancel': 'إلغاء الأمر',
+            'Size': 'حجم',
+            'Preferred Width': 'العرض المفضل',
+            'Points': 'نقاط',
+            'Percent': 'المائه',
+            'Measure in': 'القياس في',
+            'Alignment': 'محاذاه',
+            'Left': 'ليسار',
+            'Center': 'مركز',
+            'Right': 'الحق',
+            'Justify': 'تبرير',
+            'Indent from left': 'مسافة بادئه من اليسار',
+            'Borders and Shading': 'الحدود والتظليل',
+            'Options': 'خيارات',
+            'Specify height': 'تحديد الارتفاع',
+            'At least': 'الاقل',
+            'Exactly': 'تماما',
+            'Row height is': 'ارتفاع الصف هو',
+            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
+            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
+            'Vertical alignment': 'محاذاة عمودي',
+            'Top': 'أعلى',
+            'Bottom': 'اسفل',
+            'Default cell margins': 'هوامش الخلية الافتراضية',
+            'Default cell spacing': 'تباعد الخلايا الافتراضي',
+            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
+            'Cell margins': 'هوامش الخلية',
+            'Same as the whole table': 'نفس الجدول بأكمله',
+            'Borders': 'الحدود',
+            'None': 'اي',
+            'Single': 'واحد',
+            'Dot': 'نقطه',
+            'DashSmallGap': 'داشسمجاب',
+            'DashLargeGap': 'الاتحاد الخاص',
+            'DashDot': 'داشدوت',
+            'DashDotDot': 'ددهدودوت',
+            'Double': 'انقر نقرا مزدوجا',
+            'Triple': 'الثلاثي',
+            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
+            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
+            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
+            'ThinThickMediumGap': 'فجوه متوسطه سميك',
+            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
+            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
+            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
+            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
+            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
+            'SingleWavy': 'واحد مائج',
+            'DoubleWavy': 'مزدوج مائج',
+            'DashDotStroked': 'اندفاعه نقطه القوية',
+            'Emboss3D': 'D3مزخرف',
+            'Engrave3D': 'D3نقش',
+            'Outset': 'البدايه',
+            'Inset': 'الداخلي',
+            'Thick': 'سميكه',
+            'Style': 'نمط',
+            'Width': 'عرض',
+            'Height': 'ارتفاع',
+            'Letter': 'رساله',
+            'Tabloid': 'التابلويد',
+            'Legal': 'القانونيه',
+            'Statement': 'بيان',
+            'Executive': 'التنفيذي',
+            'A3': 'A3',
+            'A4': 'A4',
+            'A5': 'A5',
+            'B4': 'B4',
+            'B5': 'B5',
+            'Custom Size': 'حجم مخصص',
+            'Different odd and even': 'مختلفه غريبه وحتى',
+            'Different first page': 'الصفحة الاولي مختلفه',
+            'From edge': 'من الحافة',
+            'Header': 'راس',
+            'Footer': 'تذييل الصفحه',
+            'Margin': 'الهوامش',
+            'Paper': 'الورق',
+            'Layout': 'تخطيط',
+            'Orientation': 'التوجه',
+            'Landscape': 'المناظر الطبيعيه',
+            'Portrait': 'صوره',
+            'Table Of Contents': 'جدول المحتويات',
+            'Show page numbers': 'إظهار أرقام الصفحات',
+            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
+            'Nothing': 'شيء',
+            'Tab leader': 'قائد علامة التبويب',
+            'Show levels': 'إظهار المستويات',
+            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
+            'Build table of contents from': 'بناء جدول محتويات من',
+            'Styles': 'انماط',
+            'Available styles': 'الأنماط المتوفرة',
+            'TOC level': 'مستوي جدول المحتويات',
+            'Heading': 'عنوان',
+            'Heading 1': 'عنوان 1',
+            'Heading 2': 'عنوان 2',
+            'Heading 3': 'عنوان 3',
+            'Heading 4': 'عنوان 4',
+            'Heading 5': 'عنوان 5',
+            'Heading 6': 'عنوان 6',
+            'List Paragraph': 'فقره القائمة',
+            'Normal': 'العاديه',
+            'Outline levels': 'مستويات المخطط التفصيلي',
+            'Table entry fields': 'حقول إدخال الجدول',
+            'Modify': 'تعديل',
+            'Color': 'لون',
+            'Setting': 'اعداد',
+            'Box': 'مربع',
+            'All': 'جميع',
+            'Custom': 'المخصصه',
+            'Preview': 'معاينه',
+            'Shading': 'التظليل',
+            'Fill': 'ملء',
+            'Apply To': 'تنطبق علي',
+            'Table Properties': 'خصائص الجدول',
+            'Cell Options': 'خيارات الخلية',
+            'Table Options': 'خيارات الجدول',
+            'Insert Table': 'ادراج جدول',
+            'Number of columns': 'عدد الاعمده',
+            'Number of rows': 'عدد الصفوف',
+            'Text to display': 'النص الذي سيتم عرضه',
+            'Address': 'عنوان',
+            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
+            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
+            'Insert': 'ادراج',
+            'General': 'العامه',
+            'Indentation': 'المسافه البادئه',
+            'Before text': 'قبل النص',
+            'Special': 'الخاصه',
+            'First line': 'السطر الأول',
+            'Hanging': 'معلقه',
+            'After text': 'بعد النص',
+            'By': 'من',
+            'Before': 'قبل',
+            'Line Spacing': 'تباعد الأسطر',
+            'After': 'بعد',
+            'At': 'في',
+            'Multiple': 'متعدده',
+            'Spacing': 'تباعد',
+            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
+            'List level': 'مستوي القائمة',
+            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
+            'Level': 'مستوي',
+            'Number format': 'تنسيق الأرقام',
+            'Number style for this level': 'نمط الرقم لهذا المستوي',
+            'Enter formatting for number': 'إدخال تنسيق لرقم',
+            'Start at': 'بداية من',
+            'Restart list after': 'أعاده تشغيل قائمه بعد',
+            'Position': 'موقف',
+            'Text indent at': 'المسافة البادئة للنص في',
+            'Aligned at': 'محاذاة في',
+            'Follow number with': 'اتبع الرقم مع',
+            'Tab character': 'حرف علامة التبويب',
+            'Space': 'الفضاء',
+            'Arabic': 'العربية',
+            'UpRoman': 'حتى الروماني',
+            'LowRoman': 'الرومانية منخفضه',
+            'UpLetter': '',
+            'LowLetter': '',
+            'Number': 'عدد',
+            'Leading zero': 'يؤدي صفر',
+            'Bullet': 'رصاصه',
+            'Ordinal': 'الترتيبيه',
+            'Ordinal Text': 'النص الترتيبي',
+            'For East': 'للشرق',
+            'No Restart': 'لا أعاده تشغيل',
+            'Font': 'الخط',
+            'Font style': 'نمط الخط',
+            'Underline style': 'نمط التسطير',
+            'Font color': 'لون الخط',
+            'Effects': 'الاثار',
+            'Strikethrough': 'يتوسطه',
+            'Superscript': 'مرتفع',
+            'Subscript': 'منخفض',
+            'Double strikethrough': 'خط مزدوج يتوسطه خط',
+            'Regular': 'العاديه',
+            'Bold': 'جريئه',
+            'Italic': 'مائل',
+            'Cut': 'قطع',
+            'Copy': 'نسخ',
+            'Paste': 'لصق',
+            'Hyperlink': 'الارتباط التشعبي',
+            'Open Hyperlink': 'فتح ارتباط تشعبي',
+            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
+            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
+            'Paragraph': 'الفقره',
+            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
+            'Character': 'حرف',
+            'Merge Cells': 'دمج الخلايا',
+            'Insert Above': 'ادراج أعلاه',
+            'Insert Below': 'ادراج أدناه',
+            'Insert Left': 'ادراج إلى اليسار',
+            'Insert Right': 'ادراج اليمين',
+            'Delete': 'حذف',
+            'Delete Table': 'حذف جدول',
+            'Delete Row': 'حذف صف',
+            'Delete Column': 'حذف عمود',
+            'File Name': 'اسم الملف',
+            'Format Type': 'نوع التنسيق',
+            'Save': 'حفظ',
+            'Navigation': 'التنقل',
+            'Results': 'نتائج',
+            'Replace': 'استبدال',
+            'Replace All': 'استبدال الكل',
+            'We replaced all': 'استبدلنا جميع',
+            'Find': 'العثور',
+            'No matches': 'لا توجد تطابقات',
+            'All Done': 'كل القيام به',
+            'Result': 'نتيجه',
+            'of': 'من',
+            'instances': 'الحالات',
+            'with': 'مع',
+            'Click to follow link': 'انقر لمتابعه الارتباط',
+            'Continue Numbering': 'متابعه الترقيم',
+            'Bookmark name': 'اسم الإشارة المرجعية',
+            'Close': 'اغلاق',
+            'Restart At': 'أعاده التشغيل عند',
+            'Properties': 'خصائص',
+            'Name': 'اسم',
+            'Style type': 'نوع النمط',
+            'Style based on': 'نمط استنادا إلى',
+            'Style for following paragraph': 'نمط للفقرة التالية',
+            'Formatting': 'التنسيق',
+            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
+            'Numbering': 'ترقيم',
+            'Update Field': 'تحديث الحقل',
+            'Edit Field': 'تحرير الحقل',
+            'Bookmark': 'الإشارة المرجعية',
+            'Page Setup': 'اعداد الصفحة',
+            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
+            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
+                + '</br>' + 'الفصل نون-البند' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
+                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
+            'Format': 'تنسيق',
+            'Create New Style': 'إنشاء نمط جديد',
+            'Modify Style': 'تعديل النمط',
+            'New': 'الجديد',
+            'Bullets': 'الرصاص',
+            'Use bookmarks': 'استخدام الإشارات المرجعية',
+            'Table of Contents': 'جدول المحتويات',
+            'AutoFit': 'الاحتواء',
+            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
+            'AutoFit to Window': 'احتواء تلقائي للإطار',
+            'Fixed Column Width': 'عرض العمود الثابت',
+            'Reset': 'اعاده تعيين',
+            'Match case': 'حاله المباراة',
+            'Whole words': 'كلمات كامل',
+            'Add': 'اضافه',
+            'Go To': 'الانتقال إلى',
+            'Search for': 'البحث عن',
+            'Replace with': 'استبدال',
+            'TOC 1': 'جدول المحتويات 1',
+            'TOC 2': 'جدول المحتويات 2',
+            'TOC 3': 'جدول المحتويات 3',
+            'TOC 4': 'جدول المحتويات 4',
+            'TOC 5': 'جدول المحتويات 5',
+            'TOC 6': 'جدول المحتويات 6',
+            'TOC 7': 'جدول المحتويات 7',
+            'TOC 8': 'جدول المحتويات 8',
+            'TOC 9': 'جدول المحتويات 9',
+            'Right-to-left': 'من اليمين إلى اليسار',
+            'Left-to-right': 'من اليسار إلى اليمين',
+            'Direction': 'الاتجاه',
+            'Table direction': 'اتجاه الجدول',
+            'Indent from right': 'مسافة بادئه من اليمين',
+            'Page': 'صفحه',
+            'Fit one page': 'احتواء صفحه واحد',
+            'Fit page width': 'احتواء عرض الصفحة',
+            // tslint:disable-next-line:max-line-length
+            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
+        },
+        'colorpicker': {
+            'Apply': 'تطبيق',
+            'Cancel': 'إلغاء الأمر',
+            'ModeSwitcher': 'مفتاح كهربائي الوضع'
+        }
+    }
+});
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+      isReadOnly: false,
+      enableRtl: true, locale: 'ar-AE', height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+//Enable all the built in modules.
+documenteditor.enableAllModules();
+
+documenteditor.appendTo('#DocumentEditor');
+
+let sfdt: string = `{
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "characterFormat": {
+                        "fontSize": 18.0,
+                        "fontFamily": "Calibri",
+                        "fontFamilyBidi": "Calibri"
+                    },
+                    "paragraphFormat": {
+                        "beforeSpacing": 18.0,
+                        "afterSpacing": 30.0,
+                        "styleName": "Heading 1",
+                        "bidi": true
+                    },
+                    "inlines": [
+                        {
+                            "text": "اعمال المغامرة دورات",
+                            "characterFormat": {
+                                "fontSize": 18.0,
+                                "bidi": true,
+                                "fontSizeBidi": 18.0
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}`;
+
+//Open the sfdt content in Document Editor.
+documenteditor.open(sfdt);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/ts/index.html
new file mode 100644
index 000000000..a95028d31
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/rtl-cs1/ts/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>            
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/index.ts
new file mode 100644
index 000000000..f4b7113df
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/index.ts
@@ -0,0 +1,21 @@
+
+
+import { DocumentEditor, Editor } from '@syncfusion/ej2-documenteditor';
+
+//Initialize Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false, height: '370px', documentEditorSettings: {showRuler: true}, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+
+//Enable all built in modules.
+documenteditor.enableAllModules();
+
+document.getElementById('container_ruler_button').addEventListener('click', 
+function () {
+    documenteditor.documentEditorSettings.showRuler = !documenteditor.documentEditorSettings.showRuler;
+});
+
+//Render Document Editor component.
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/ts/index.html
new file mode 100644
index 000000000..aa87bb1d5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        <button id="container_ruler_button">Show/Hide Ruler</button>
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/index.ts
new file mode 100644
index 000000000..51bec90d9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/index.ts
@@ -0,0 +1,21 @@
+
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+//Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor Container component.
+let container: DocumentEditorContainer = new DocumentEditorContainer({
+    height: '590px', documentEditorSettings: {showRuler: true}
+});
+
+document.getElementById('container_ruler_button').addEventListener('click', 
+function () {
+    container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
+});
+
+//Render Document Editor Container component.
+container.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/ts/index.html
new file mode 100644
index 000000000..aa87bb1d5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/ruler-cs2/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        <button id="container_ruler_button">Show/Hide Ruler</button>
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/index.ts
new file mode 100644
index 000000000..bfe0970e3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToS3',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/ts/index.html
new file mode 100644
index 000000000..ca49dedb4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-aws-s3/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to AWS S3 Bucket</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/index.ts
new file mode 100644
index 000000000..721860d53
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToAzure',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/ts/index.html
new file mode 100644
index 000000000..c3963399f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-azure-blob/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to Azure Blob Storage</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/index.ts
new file mode 100644
index 000000000..d41306829
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToBoxCloud',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/ts/index.html
new file mode 100644
index 000000000..7df35ac5d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-box-cloud-file-storage/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to Box Cloud</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/index.ts
new file mode 100644
index 000000000..5f4a832c1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToDropBox',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/ts/index.html
new file mode 100644
index 000000000..cbc68c981
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-dropbox-cloud-file-storage/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to DropBox Cloud</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/index.ts
new file mode 100644
index 000000000..84d3399e0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToGoogleCloud',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/ts/index.html
new file mode 100644
index 000000000..fb0dc7116
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-cloud-storage/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to Google Cloud</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/index.ts
new file mode 100644
index 000000000..dbcb7846b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToGoogleDrive',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/ts/index.html
new file mode 100644
index 000000000..a68684295
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-google-drive/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to Google Drive</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/index.ts
new file mode 100644
index 000000000..e3a623c08
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/index.ts
@@ -0,0 +1,42 @@
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+// Inject require modules.
+DocumentEditorContainer.Inject(Toolbar);
+
+//Initialize Document Editor component
+let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });
+
+// Render Document Editor component.
+documentEditorContainer.appendTo('#DocumentEditor');
+
+document.getElementById('export').addEventListener('click', (): void => {
+    save();
+});
+
+async function save(): Promise<void> {
+    documentEditorContainer.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
+        let exportedDocument = blob;
+        //Now, save the document where ever you want.
+        let formData: FormData = new FormData();
+        formData.append('documentName', documentEditorContainer.documentEditor.documentName);
+        formData.append('data', exportedDocument);
+        /* tslint:disable */
+        let req = new XMLHttpRequest();
+        // Replace your running Url here
+        req.open(
+            'POST',
+            'http://localhost:62870/api/documenteditor/SaveToOneDrive',
+            true
+        );
+        req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+                if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                }
+            }
+        };
+        req.send(formData);
+    });
+}
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/systemjs.config.js
new file mode 100644
index 000000000..fdafc9451
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/systemjs.config.js
@@ -0,0 +1,45 @@
+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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/ts/index.html
new file mode 100644
index 000000000..82f30ec7c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/save-one-drive/ts/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div>
+        <button id="export">Save to One Drive</button>
+    </div>
+    <div id="DocumentEditor"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/index.css
new file mode 100644
index 000000000..8368ebd5f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/index.css
@@ -0,0 +1,26 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+      width: 100%;
+      height: 100%;
+  }
+
+  .e-de-statusbar-zoom {
+    float: right;
+    text-align: center;
+    padding: 2px;
+    line-height: 19px;
+    margin-top: 1px;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/index.ts
new file mode 100644
index 000000000..2530a3ac4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/index.ts
@@ -0,0 +1,68 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false, height: '370px', enableEditor: true
+});
+documenteditor.appendTo('#DocumentEditor');
+//Open default document in DocumentEditor
+onLoadDefault();
+documenteditor.scrollToPage(2);
+
+function onLoadDefault(): void {
+    let defaultDocument: object = {
+        "sections": [
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "First page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            },
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "Second page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            }
+        ],
+        "characterFormat": {},
+        "paragraphFormat": {},
+        "background": {
+            "color": "#FFFFFFFF"
+        },
+        "styles": [
+            {
+                "type": "Paragraph",
+                "name": "Normal",
+                "next": "Normal"
+            },
+            {
+                "type": "Character",
+                "name": "Default Paragraph Font"
+            }
+        ]
+    }
+    documenteditor.open(JSON.stringify(defaultDocument));
+    documenteditor.focusIn();
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/ts/index.html
new file mode 100644
index 000000000..8d9bec726
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='DocumentEditor'>
+        </div>
+        <div id='page-fit-type-div'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/index.css
new file mode 100644
index 000000000..8368ebd5f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/index.css
@@ -0,0 +1,26 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+      width: 100%;
+      height: 100%;
+  }
+
+  .e-de-statusbar-zoom {
+    float: right;
+    text-align: center;
+    padding: 2px;
+    line-height: 19px;
+    margin-top: 1px;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/index.ts
new file mode 100644
index 000000000..e9f327fcc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/index.ts
@@ -0,0 +1,83 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+//Initialize the Document Editor component.
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false, height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+documenteditor.enableAllModules();
+documenteditor.appendTo('#DocumentEditor');
+onLoadDefaultDocument();
+documenteditor.selection.goToPage(3);
+
+function onLoadDefaultDocument(): void {
+    let defaultDocument: object = {
+        "sections": [
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "First page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            },
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "Second page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            },
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "Third page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            }
+        ],
+        "characterFormat": {},
+        "paragraphFormat": {},
+        "background": {
+            "color": "#FFFFFFFF"
+        },
+        "styles": [
+            {
+                "type": "Paragraph",
+                "name": "Normal",
+                "next": "Normal"
+            },
+            {
+                "type": "Character",
+                "name": "Default Paragraph Font"
+            }
+        ]
+    }
+    documenteditor.open(JSON.stringify(defaultDocument));
+    documenteditor.focusIn();
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/ts/index.html
new file mode 100644
index 000000000..8d9bec726
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs2/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='DocumentEditor'>
+        </div>
+        <div id='page-fit-type-div'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/index.css
new file mode 100644
index 000000000..8368ebd5f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/index.css
@@ -0,0 +1,26 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor {
+      width: 100%;
+      height: 100%;
+  }
+
+  .e-de-statusbar-zoom {
+    float: right;
+    text-align: center;
+    padding: 2px;
+    line-height: 19px;
+    margin-top: 1px;
+}
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/index.ts
new file mode 100644
index 000000000..d12ebbd38
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/index.ts
@@ -0,0 +1,163 @@
+
+
+import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+import { createElement } from '@syncfusion/ej2-base';
+import { DropDownButton, ItemModel, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';
+
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false, height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
+});
+documenteditor.enableAllModules();
+
+documenteditor.appendTo('#DocumentEditor');
+
+let statusBarDiv = document.getElementById('page-fit-type-div');
+let startPage: number = 1;
+let label: HTMLElement = createElement('label', { styles: 'margin-top: 6px;margin-right: 2px' });
+label.textContent = 'Page ';
+statusBarDiv.appendChild(label);
+let pageNumberLabel = createElement('label', { id: 'documenteditor_page_no', styles: 'text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text;height:17px;max-width:150px' });
+let editablePageNumber = createElement('div', { id: 'editablePageNumber', styles: 'border: 1px solid #F1F1F1;display: inline-flex;height: 17px;padding: 0px 4px;', className: 'single-line e-de-pagenumber-text' });
+editablePageNumber.appendChild(pageNumberLabel);
+updatePageNumber();
+statusBarDiv.appendChild(editablePageNumber);
+editablePageNumber.setAttribute('title', 'The current page number in the document. Click or tap to navigate specific page.');
+let label1: HTMLElement = createElement('label', { id: 'documenteditor_pagecount', styles: 'margin-left:2px;letter-spacing: 1.05px;' });
+label1.textContent = 'of';
+statusBarDiv.appendChild(label1);
+let pageCount = createElement('label', { id: 'documenteditor_pagecount', styles: 'margin-left:6px;letter-spacing: 1.05px;' });
+statusBarDiv.appendChild(pageCount);
+let editorPageCount = undefined;
+updatePageCount();
+let zoom: DropDownButton;
+let zoomBtn: HTMLButtonElement = createElement('button', {
+    id: 'documenteditor-zoom',
+    // tslint:disable-next-line:max-line-length
+    className: 'e-de-statusbar-zoom'
+}) as HTMLButtonElement;
+statusBarDiv.appendChild(zoomBtn);
+zoomBtn.setAttribute('title', 'Zoom level. Click or tap to open the Zoom options.');
+
+let items: ItemModel[] = [
+    {
+        text: '200%',
+    },
+    {
+        text: '175%',
+    },
+    {
+        text: '150%',
+    },
+    {
+        text: '125%',
+    },
+    {
+        text: '100%',
+    },
+    {
+        text: '75%',
+    },
+    {
+        text: '50%',
+    },
+    {
+        text: '25%',
+    },
+    {
+        separator: true
+    },
+    {
+        text: 'Fit one page'
+    },
+    {
+        text: 'Fit page width',
+    },
+];
+zoom = new DropDownButton({ content: '100%', items: items, select: onZoom }, zoomBtn);
+editablePageNumber.addEventListener('click', updateDocumentEditorPageNumber);
+editablePageNumber.addEventListener('keydown', onKeyDown);
+editablePageNumber.addEventListener('blur', onBlur);
+
+//Update page number on `viewChange` event
+documenteditor.viewChange = (e): void => {
+    updatePageNumberOnViewChange(e);
+};
+
+//Update page count on `contentChange` event.
+documenteditor.contentChange = (): void => {
+    //Set page count
+    updatePageCount();
+};
+
+function updatePageNumberOnViewChange(args) {
+    if (documenteditor.selection
+        && documenteditor.selection.startPage >= args.startPage && documenteditor.selection.startPage <= args.endPage) {
+        startPage = documenteditor.selection.startPage;
+    } else {
+        startPage = args.startPage;
+    }
+    updatePageNumber();
+}
+
+function onBlur() {
+    if (editablePageNumber.textContent === '' || parseInt(editablePageNumber.textContent, 0) > editorPageCount) {
+        updatePageNumber();
+    }
+    editablePageNumber.contentEditable = 'false';
+}
+
+function onKeyDown(e) {
+    if (e.which === 13) {
+        e.preventDefault();
+        let pageNumber: number = parseInt(editablePageNumber.textContent, 0);
+        if (pageNumber > editorPageCount) {
+            updatePageNumber();
+        } else {
+            if (documenteditor.selection) {
+                documenteditor.selection.goToPage(parseInt(editablePageNumber.textContent, 0));
+            } else {
+                documenteditor.scrollToPage(parseInt(editablePageNumber.textContent, 0));
+            }
+        }
+        editablePageNumber.contentEditable = 'false';
+        if (editablePageNumber.textContent === '') {
+            updatePageNumber();
+        }
+    }
+    if (e.which > 64) {
+        e.preventDefault();
+    }
+}
+
+//Update zoom factor.
+function onZoom(args) {
+    setZoomValue(args.item.text);
+    updateZoomContent();
+}
+function setZoomValue(text) {
+    if (text.match('Fit one page')) {
+        documenteditor.fitPage('FitOnePage');
+    } else if (text.match('Fit page width')) {
+        documenteditor.fitPage('FitPageWidth');
+    } else {
+        documenteditor.zoomFactor = parseInt(text, 0) / 100;
+    }
+}
+function updateZoomContent() {
+    zoom.content = Math.round(documenteditor.zoomFactor * 100) + '%';
+}
+function updatePageNumber() {
+    pageNumberLabel.textContent = startPage.toString();
+}
+function updatePageCount() {
+    editorPageCount = documenteditor.pageCount;
+    pageCount.textContent = editorPageCount.toString();
+}
+function updateDocumentEditorPageNumber() {
+    let editablePageNumber = document.getElementById('editablePageNumber');
+    editablePageNumber.contentEditable = 'true';
+    editablePageNumber.focus();
+    window.getSelection().selectAllChildren(editablePageNumber);
+}
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/ts/index.html
new file mode 100644
index 000000000..8d9bec726
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/scrolling-zooming-cs3/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='DocumentEditor'>
+        </div>
+        <div id='page-fit-type-div'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/index.ts
new file mode 100644
index 000000000..80410b8d4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/index.ts
@@ -0,0 +1,32 @@
+
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+
+DocumentEditorContainer.Inject(Toolbar);
+let container: DocumentEditorContainer = new DocumentEditorContainer({
+    enableToolbar: true, height: "400"
+});
+createSpinner({
+    // Specify the target for the spinner to show
+    target: document.getElementById('container')
+});
+
+document.getElementById('import').addEventListener('click', function () {
+    // load your default document here
+    let data: string = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+    // showSpinner() will make the spinner visible
+    showSpinner(document.getElementById('DocumentEditor'));
+    // Open the default document
+    container.documentEditor.open(data);
+    setInterval(function () {
+
+        // hideSpinner() method used hide spinner
+        hideSpinner(document.getElementById('DocumentEditor'));
+
+    }, 5000);
+});
+container.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/systemjs.config.js
new file mode 100644
index 000000000..1a2f334a1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",      
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",        
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+		"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/ts/index.html
new file mode 100644
index 000000000..b28d39b34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/spinner-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        <button id="import">Load Document</button>
+        <div id='DocumentEditor' style="height:420px">
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/index.ts
new file mode 100644
index 000000000..6866664b3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/index.ts
@@ -0,0 +1,137 @@
+
+
+import { DocumentEditor, Editor, Selection, SfdtExport, EditorHistory, TableDialog, ContextMenu } from '@syncfusion/ej2-documenteditor';
+import { Toolbar } from '@syncfusion/ej2-navigations';
+DocumentEditor.Inject(Editor, Selection, EditorHistory, TableDialog, ContextMenu, SfdtExport);
+let documenteditor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditorHistory: true,
+    enableEditor: true,
+    enableTableDialog: true,
+    enableContextMenu: true,
+    enableSfdtExport: true,
+    height: '370px'
+});
+function toolbarButtonClick(arg) {
+    switch (arg.item.id) {
+        case 'table':
+            //Insert table API to add table
+            documenteditor.editor.insertTable(3, 2);
+            break;
+        case 'insert_above':
+            //Insert the specified number of rows to the table above to the row at cursor position
+            documenteditor.editor.insertRow(true, 2);
+            break;
+        case 'insert_below':
+            //Insert the specified number of rows to the table below to the row at cursor position
+            documenteditor.editor.insertRow();
+            break;
+        case 'insert_left':
+            //Insert the specified number of columns to the table left to the column at cursor position
+            documenteditor.editor.insertColumn(true, 2);
+            break;
+        case 'insert_right':
+            //Insert the specified number of columns to the table right to the column at cursor position
+            documenteditor.editor.insertColumn();
+            break;
+        case 'delete_table':
+            //Delete the entire table
+            documenteditor.editor.deleteTable();
+            break;
+        case 'delete_row':
+            //Delete the selected number of rows
+            documenteditor.editor.deleteRow();
+            break;
+        case 'delete_column':
+            //Delete the selected number of columns
+            documenteditor.editor.deleteColumn();
+            break;
+        case 'merge_cell':
+            //Merge the selected cells into one (both vertically and horizontally)
+            documenteditor.editor.mergeCells();
+            break;
+        case 'table_dialog':
+            //Opens insert table dialog
+            documenteditor.showDialog('Table');
+            break;
+    }
+}
+
+let toolBar: Toolbar = new Toolbar({
+    clicked: toolbarButtonClick,
+    items: [
+        {
+            prefixIcon: 'e-de-ctnr-table e-icons',
+            tooltipText: 'Insert Table',
+            id: 'table',
+        },
+        {
+            type: 'Separator'
+        },
+        {
+            prefixIcon: 'e-de-ctnr-insertabove e-icons',
+            tooltipText: 'Insert new row above',
+            id: 'insert_above',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-insertbelow e-icons',
+            tooltipText: 'Insert new row below',
+            id: 'insert_below',
+        },
+        {
+            type: 'Separator'
+        },
+        {
+            prefixIcon: 'e-de-ctnr-insertleft e-icons',
+            tooltipText: 'Insert new column to the left',
+            id: 'insert_left',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-insertright e-icons',
+            tooltipText: 'Insert new column to the right',
+            id: 'insert_right',
+        },
+        {
+            type: 'Separator'
+        },
+        {
+            prefixIcon: 'e-de-delete-table e-icons',
+            tooltipText: 'Delete Entire table',
+            id: 'delete_table',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-deleterows e-icons',
+            tooltipText: 'Delete the selected row',
+            id: 'delete_row',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-deletecolumns e-icons',
+            tooltipText: 'Delete the selected column',
+            id: 'delete_column',
+        },
+        {
+            type: 'Separator'
+        },
+        {
+            prefixIcon: 'e-de-ctnr-mergecell e-icons',
+            tooltipText: 'Merge the selected cells',
+            id: 'merge_cell',
+        },
+        {
+            type: 'Separator'
+        },
+        {
+            text: 'Dialog',
+            tooltipText: 'Open insert table dialog',
+            id: 'table_dialog',
+        },
+    ],
+});
+toolBar.appendTo('#toolbar');
+
+documenteditor.appendTo('#DocumentEditor');
+//Insert table.
+documenteditor.editor.insertTable(2, 2);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/ts/index.html
new file mode 100644
index 000000000..29841bbc2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-cs1/ts/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>   
+        <div id='toolbar'></div>
+        <div id='DocumentEditor'>
+            
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/index.css
new file mode 100644
index 000000000..fcf73db8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/index.css
@@ -0,0 +1,13 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/index.ts
new file mode 100644
index 000000000..5450ef2b9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/index.ts
@@ -0,0 +1,13 @@
+
+
+import { DocumentEditor, Editor, Selection } from '@syncfusion/ej2-documenteditor';
+//Inject require modules.
+DocumentEditor.Inject(Editor, Selection);
+//Initialize the Document Editor component.
+let editor: DocumentEditor = new DocumentEditor({ height: '370px', enableEditor: true, isReadOnly: false, enableSelection: true });
+let documentString: string = '{"sections":[{"blocks":[{"paragraphFormat":{"styleName":"Heading 1"},"inlines":[{"text":"Headin"},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1},{"text":"g1"}]},{"paragraphFormat":{"styleName":"Heading 2"},"inlines":[{"text":"Heading2"}]},{"paragraphFormat":{"styleName":"Heading 3"},"inlines":[{"text":"Heading3"}]},{"paragraphFormat":{"styleName":"Heading 4"},"inlines":[{"text":"Heading4"}]},{"paragraphFormat":{"styleName":"Heading 5"},"inlines":[{"text":"Heading5"}]},{"paragraphFormat":{"styleName":"Heading 6"},"inlines":[{"text":"Heading6"}]},{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"text":"Normal"}]}],"headersFooters":{},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Paragraph","name":"Heading 1","basedOn":"Normal","next":"Normal","link":"Heading 1 Char","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":12.0,"afterSpacing":0.0,"outlineLevel":"Level1"}},{"type":"Paragraph","name":"Heading 2","basedOn":"Normal","next":"Normal","link":"Heading 2 Char","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level2"}},{"type":"Paragraph","name":"Heading 3","basedOn":"Normal","next":"Normal","link":"Heading 3 Char","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level3"}},{"type":"Paragraph","name":"Heading 4","basedOn":"Normal","next":"Normal","link":"Heading 4 Char","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level4"}},{"type":"Paragraph","name":"Heading 5","basedOn":"Normal","next":"Normal","link":"Heading 5 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level5"}},{"type":"Paragraph","name":"Heading 6","basedOn":"Normal","next":"Normal","link":"Heading 6 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level6"}},{"type":"Character","name":"Default Paragraph Font"},{"type":"Character","name":"Heading 1 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 2 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 3 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}},{"type":"Character","name":"Heading 4 Char","basedOn":"Default Paragraph Font","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 5 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 6 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}}]}';
+editor.appendTo('#DocumentEditor');
+/*Open any existing document*/
+editor.open(documentString);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/ts/index.html
new file mode 100644
index 000000000..e1e4e14e5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/table-of-contents-cs1/ts/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>        
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/app.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/index.css b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/index.css
new file mode 100644
index 000000000..a1f9e52f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/index.css
@@ -0,0 +1,19 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+  
+  #container {
+      visibility: hidden;
+  }
+
+  #DocumentEditor{
+    width:100%;
+    height: 100%;
+}
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/index.ts b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/index.ts
new file mode 100644
index 000000000..9080e1348
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/index.ts
@@ -0,0 +1,156 @@
+
+
+import { DocumentEditor, Editor, Selection, EditorHistory, SfdtExport } from '@syncfusion/ej2-documenteditor';
+import { Toolbar } from '@syncfusion/ej2-navigations';
+import { ComboBox } from '@syncfusion/ej2-dropdowns';
+import { ColorPicker } from '@syncfusion/ej2-inputs';
+//Inject required modules.
+DocumentEditor.Inject(Editor, Selection, EditorHistory, SfdtExport);
+let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', isReadOnly: false, enableSelection: true, enableEditorHistory: true, enableEditor: true, enableSfdtExport: true });
+
+function toolbarButtonClick(arg) {
+    switch (arg.item.id) {
+        case 'bold':
+            //Toggles the bold of selected content
+            documenteditor.editor.toggleBold();
+            break;
+        case 'italic':
+            //Toggles the Italic of selected content
+            documenteditor.editor.toggleItalic();
+            break;
+        case 'underline':
+            //Toggles the underline of selected content
+            documenteditor.editor.toggleUnderline('Single');
+            break;
+        case 'strikethrough':
+            //Toggles the strikethrough of selected content
+            documenteditor.editor.toggleStrikethrough();
+            break;
+        case 'subscript':
+            //Toggles the subscript of selected content
+            documenteditor.editor.toggleSubscript();
+            break;
+        case 'superscript':
+            //Toggles the superscript of selected content
+            documenteditor.editor.toggleSuperscript();
+            break;
+    }
+}
+//To change the font Style of selected content
+function changeFontFamily(args) {
+    documenteditor.selection.characterFormat.fontFamily = args.value;
+    documenteditor.focusIn();
+}
+//To Change the font Size of selected content
+function changeFontSize(args) {
+    documenteditor.selection.characterFormat.fontSize = args.value;
+    documenteditor.focusIn();
+}
+//To Change the font Color of selected content
+function changeFontColor(args) {
+    documenteditor.selection.characterFormat.fontColor = args.currentValue.hex;
+    documenteditor.focusIn();
+}
+documenteditor.selectionChange = () => {
+    setTimeout(() => { onSelectionChange(); }, 20);
+};
+//Selection change to retrieve formatting
+function onSelectionChange() {
+    if (documenteditor.selection) {
+        enableDisableFontOptions();
+        // #endregion
+    }
+}
+function enableDisableFontOptions() {
+    var characterformat = documenteditor.selection.characterFormat;
+    var properties = [characterformat.bold, characterformat.italic, characterformat.underline, characterformat.strikethrough];
+    var toggleBtnId = ["bold", "italic", "underline", "strikethrough"];
+    for (var i = 0; i < properties.length; i++) {
+        changeActiveState(properties[i], toggleBtnId[i]);
+    }
+}
+function changeActiveState(property, btnId) {
+    let toggleBtn: HTMLElement = document.getElementById(btnId);
+    if ((typeof (property) == 'boolean' && property == true) || (typeof (property) == 'string' && property !== 'None'))
+        toggleBtn.classList.add("e-btn-toggle");
+    else {
+        if (toggleBtn.classList.contains("e-btn-toggle"))
+            toggleBtn.classList.remove("e-btn-toggle");
+    }
+}
+let fontStyle: string[] = ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Courier New', 'Georgia', 'Impact', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Symbol', 'Times New Roman', 'Verdana', 'Windings'
+];
+let fontSize: string[] = ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72', '96'];
+
+let toolBar: Toolbar = new Toolbar({
+    clicked: toolbarButtonClick,
+    items: [
+        {
+            prefixIcon: 'e-de-ctnr-bold e-icons',
+            tooltipText: 'Bold',
+            id: 'bold',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-italic e-icons',
+            tooltipText: 'Italic',
+            id: 'italic',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-underline e-icons',
+            tooltipText: 'Underline',
+            id: 'underline',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-strikethrough e-icons',
+            tooltipText: 'Strikethrough',
+            id: 'strikethrough',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-subscript e-icons',
+            tooltipText: 'Subscript',
+            id: 'subscript',
+        },
+        {
+            prefixIcon: 'e-de-ctnr-superscript e-icons',
+            tooltipText: 'Superscript',
+            id: 'superscript',
+        },
+        { type: 'Separator' },
+        {
+            type: 'Input',
+            template: new ColorPicker({
+                value: '#000000',
+                showButtons: true,
+                change: changeFontColor
+            }),
+        },
+        { type: 'Separator' },
+        {
+            type: 'Input',
+            template: new ComboBox({
+                dataSource: fontStyle,
+                width: 120,
+                index: 2,
+                allowCustom: true,
+                change: changeFontFamily,
+                showClearButton: false,
+            }),
+        },
+        {
+            type: 'Input',
+            template: new ComboBox({
+                dataSource: fontSize,
+                width: 80,
+                allowCustom: true,
+                index: 2,
+                change: changeFontSize,
+                showClearButton: false,
+            }),
+        },
+    ],
+});
+toolBar.appendTo('#toolbar');
+
+documenteditor.appendTo('#DocumentEditor');
+
+
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/systemjs.config.js
new file mode 100644
index 000000000..f92e1ba9d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-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: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
+        "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
+        "@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/ts/index.html b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/ts/index.html
new file mode 100644
index 000000000..a95028d31
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/javascript-es6/document-editor/text-format-cs1/ts/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</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" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='toolbar'>            
+        </div>
+        <div style="width:100%;height: 100%">
+            <!--Element which will render as DocumentEditor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/index.jsx
new file mode 100644
index 000000000..72a3094cd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/index.jsx
@@ -0,0 +1,27 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let documenteditorcontainer;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function created() {
+        let data ='{"sfdt":"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"}';
+        documenteditorcontainer.documentEditor.open(data);
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    return (<div><h1>Syncfusion Word Processor(a.k.a)Document Editor Component</h1>
+    <DocumentEditorContainerComponent height={'590px'} id="container" ref={(scope) => {
+            documenteditorcontainer = scope;
+            created();
+        }} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true}/></div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/index.tsx
new file mode 100644
index 000000000..1fd9cab1c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/app/index.tsx
@@ -0,0 +1,35 @@
+
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let documenteditorcontainer: DocumentEditorContainerComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function created() {
+        // load your default document here
+        let data = '{"sfdt":"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"}';
+        documenteditorcontainer.documentEditor.open(data);
+
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    return (<div><h1>Syncfusion Word Processor(a.k.a)Document Editor Component</h1>
+    <DocumentEditorContainerComponent height={'590px'} id="container" ref={(scope) => {
+            documenteditorcontainer = scope;
+            created();
+        }} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true}/></div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'))
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/index.css
new file mode 100644
index 000000000..1897af8d0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/index.css
@@ -0,0 +1,9 @@
+
+#loader {
+color: #008cff;
+height: 40px;
+left: 45%;
+position: absolute;
+top: 45%;
+width: 30%;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/index.html
new file mode 100644
index 000000000..eee310a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/systemjs.config.js
new file mode 100644
index 000000000..f2350dd13
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/accessibility-cs1/systemjs.config.js
@@ -0,0 +1,56 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/index.jsx
new file mode 100644
index 000000000..cdcf2c94b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/index.jsx
@@ -0,0 +1,23 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let container;
+    React.useEffect(() => {
+        ComponentDidMount();
+    }, []);
+    function ComponentDidMount() {
+        let sfdt = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            container.documentEditor.open(sfdt);
+        });
+        container.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+    }
+    return (<DocumentEditorContainerComponent id="container" height={'590px'} enableToolbar={true} ref={(scope) => { container = scope; }}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/index.tsx
new file mode 100644
index 000000000..f15c7815c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/app/index.tsx
@@ -0,0 +1,31 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+let container: DocumentEditorContainerComponent;
+React.useEffect(() => {
+ComponentDidMount();
+}, []);
+    function ComponentDidMount() {
+        let sfdt: string = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            container.documentEditor.open(sfdt);
+        });
+        container.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+    }
+
+        return (
+            <DocumentEditorContainerComponent id="container" height={'590px'} enableToolbar={true} ref={(scope) => {container = scope; }} />
+        );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/index.html
new file mode 100644
index 000000000..eee310a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/systemjs.config.js
new file mode 100644
index 000000000..42571f9d7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",   
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/index.jsx
new file mode 100644
index 000000000..944f6d097
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/index.jsx
@@ -0,0 +1,10 @@
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+function Default() {
+    return (<DocumentEditorComponent id="container" height={'330px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
+}
+export default Default;
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<Default />);
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/index.tsx
new file mode 100644
index 000000000..5d32bd8a5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/app/index.tsx
@@ -0,0 +1,32 @@
+
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+
+import {
+    DocumentEditorComponent, DocumentEditor, RequestNavigateEventArgs, ViewChangeEventArgs,
+    Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory,
+    ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog,
+    PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog,
+    TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog
+} from '@syncfusion/ej2-react-documenteditor';
+
+
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+function Default() {
+    return (
+        <DocumentEditorComponent id="container" height={'330px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" isReadOnly={false} enablePrint={true}
+            enableSelection={true} enableEditor={true} enableEditorHistory={true}
+            enableContextMenu={true} enableSearch={true} enableOptionsPane={true}
+            enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true}
+            enablePageSetupDialog={true} enableSfdtExport={true}
+            enableStyleDialog={true} enableTableOfContentsDialog={true}
+            enableTableOptionsDialog={true} enableTablePropertiesDialog={true}
+            enableTextExport={true} enableWordExport={true} />
+    );
+}
+export default Default
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<Default />);
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/index.html
new file mode 100644
index 000000000..eee310a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/systemjs.config.js
new file mode 100644
index 000000000..d2fd5118a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs2/systemjs.config.js
@@ -0,0 +1,56 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",   
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+        "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/index.jsx
new file mode 100644
index 000000000..8b7f7182f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/index.jsx
@@ -0,0 +1,10 @@
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function Default() {
+    return (<DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true}/>);
+}
+export default Default;
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<Default />);
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/index.tsx
new file mode 100644
index 000000000..03b31bbc7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/app/index.tsx
@@ -0,0 +1,19 @@
+
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import {
+    DocumentEditorContainerComponent, Toolbar
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorContainerComponent.Inject(Toolbar);
+function Default() {
+    return (
+    <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} />);
+}
+export default Default
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<Default />);
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/index.html
new file mode 100644
index 000000000..eee310a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/systemjs.config.js
new file mode 100644
index 000000000..de70ddb37
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs3/systemjs.config.js
@@ -0,0 +1,56 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",  
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+        "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/index.jsx
new file mode 100644
index 000000000..ae6d76a6f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/index.jsx
@@ -0,0 +1,28 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+function App() {
+    let documentEditor;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function onLoadDefault() {
+        // load your default document here
+        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // Open the default document
+        documentEditor.open(data);
+        //Enable read only mode.
+        documentEditor.isReadOnly = true;
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            onLoadDefault();
+        });
+    }
+    return (<DocumentEditorComponent id="container" ref={(scope) => { documentEditor = scope; }} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true} height={'330px'}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/index.tsx
new file mode 100644
index 000000000..8124986a7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/app/index.tsx
@@ -0,0 +1,48 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+    DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory,
+    ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog,
+    PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog,
+    TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog
+} from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require modules.
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+function App() {
+    let documentEditor: DocumentEditorComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function onLoadDefault() {
+        // load your default document here
+        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // Open the default document
+        documentEditor.open(data)
+        //Enable read only mode.
+        documentEditor.isReadOnly = true;
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            onLoadDefault();
+        });
+    }
+    return (
+        <DocumentEditorComponent id="container" ref={(scope) => { documentEditor = scope; }} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" isReadOnly={false} enablePrint={true}
+            enableSelection={true} enableEditor={true} enableEditorHistory={true}
+            enableContextMenu={true} enableSearch={true} enableOptionsPane={true}
+            enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true}
+            enablePageSetupDialog={true} enableSfdtExport={true}
+            enableStyleDialog={true} enableTableOfContentsDialog={true}
+            enableTableOptionsDialog={true} enableTablePropertiesDialog={true}
+            enableTextExport={true} enableWordExport={true} height={'330px'} />
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/index.html
new file mode 100644
index 000000000..eee310a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/systemjs.config.js
new file mode 100644
index 000000000..fe03cb005
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs4/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",   
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/index.jsx
new file mode 100644
index 000000000..a62bfc145
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/index.jsx
@@ -0,0 +1,26 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let documenteditorcontainer;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function onLoadDefault() {
+        // load your default document here
+        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // Open the default document
+        documenteditorcontainer.documentEditor.open(data);
+        //Enable read only mode.
+        documenteditorcontainer.restrictEditing = true;
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            onLoadDefault();
+        });
+    }
+    return (<DocumentEditorContainerComponent id="container" ref={(scope) => { documenteditorcontainer = scope; onLoadDefault(); }} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" height={'590px'} enableToolbar={true}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/index.tsx
new file mode 100644
index 000000000..565e21a8f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/app/index.tsx
@@ -0,0 +1,34 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let documenteditorcontainer: DocumentEditorContainerComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function onLoadDefault() {
+        // load your default document here
+        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // Open the default document
+        documenteditorcontainer.documentEditor.open(data);
+        //Enable read only mode.
+        documenteditorcontainer.restrictEditing = true;
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            onLoadDefault();
+        });
+    }
+    return (<DocumentEditorContainerComponent id="container" ref={(scope) => { documenteditorcontainer = scope; onLoadDefault(); }}
+        serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" height={'590px'} enableToolbar={true} />);
+
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/index.html
new file mode 100644
index 000000000..eee310a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/systemjs.config.js
new file mode 100644
index 000000000..1eba2ec1d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs5/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",    
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/index.jsx
new file mode 100644
index 000000000..3b562c0da
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/index.jsx
@@ -0,0 +1,20 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditorContainerComponent.Inject(Toolbar);
+export class Default extends React.Component {
+    container;
+    componentDidMount() {
+        let sfdt = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            this.container.documentEditor.open(sfdt);
+        });
+        this.container.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+    }
+    render() {
+        return (<DocumentEditorContainerComponent id="container" height={'590px'} enableToolbar={true} ref={(scope) => { this.container = scope; }}/>);
+    }
+}
+ReactDOM.render(<Default />, document.getElementById('sample'));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/index.tsx
new file mode 100644
index 000000000..60d02f4c5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/app/index.tsx
@@ -0,0 +1,29 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditorContainerComponent.Inject(Toolbar);
+export class Default extends React.Component<{}, {}> {
+    public container: DocumentEditorContainerComponent;
+
+    public componentDidMount(): void {
+        let sfdt: string = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            this.container.documentEditor.open(sfdt);
+        });
+        this.container.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+    }
+
+    render() {
+        return (
+            <DocumentEditorContainerComponent id="container" height={'590px'} enableToolbar={true} ref={(scope) => { this.container = scope; }} />
+        );
+    }
+}
+ReactDOM.render(<Default />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/index.html
new file mode 100644
index 000000000..eee310a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/systemjs.config.js
new file mode 100644
index 000000000..72a41b508
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/base-cs6/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",  
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",      
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/app/index.jsx
new file mode 100644
index 000000000..6899b5439
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/app/index.jsx
@@ -0,0 +1,19 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent } from '@syncfusion/ej2-react-documenteditor';
+function App() {
+    let documenteditor = new DocumentEditorComponent(undefined);
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function componentDidMount() {
+        let sfdt = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]}`;
+        setTimeout(() => {
+            //Open the default document in Document Editor.
+            documenteditor.open(sfdt);
+        });
+    }
+    return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/app/index.tsx
new file mode 100644
index 000000000..f34b11376
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/app/index.tsx
@@ -0,0 +1,21 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent } from '@syncfusion/ej2-react-documenteditor';
+function App(){
+    let documenteditor: DocumentEditorComponent= new DocumentEditorComponent(undefined);
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function componentDidMount(){
+        let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]}`;
+        setTimeout(() => {
+            //Open the default document in Document Editor.
+            documenteditor.open(sfdt);
+        });
+    }
+        return (
+            <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {documenteditor = scope; }} />
+        );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/index.css
new file mode 100644
index 000000000..ad47c9be9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/index.css
@@ -0,0 +1,15 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+#file_upload {
+  display: none;
+}
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/chart-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/index.jsx
new file mode 100644
index 000000000..5ce693bba
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/index.jsx
@@ -0,0 +1,49 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar, } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let container;
+    React.useEffect(() => {
+        onCreate();
+    }, []);
+    function onCreate() {
+        // creating Custom Options
+        let menuItems = [
+            {
+                text: 'Search In Google',
+                id: 'search_in_google',
+                iconCss: 'e-icons e-de-ctnr-find',
+            },
+        ];
+        // adding Custom Options
+        container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+        // custom Options Select Event
+        container.documentEditor.customContextMenuSelect = (args) => {
+            // custom Options Functionality
+            let id = container.documentEditor.element.id;
+            switch (args.id) {
+                case id + 'search_in_google':
+                    let searchContent = container.documentEditor.selection.text;
+                    if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+                        window.open('http://google.com/search?q=' + searchContent);
+                    }
+                    break;
+            }
+        };
+        //  custom options hide/show functionality
+        container.documentEditor.customContextMenuBeforeOpen = (args) => {
+            let search = document.getElementById(args.ids[0]);
+            search.style.display = 'none';
+            let searchContent = container.documentEditor.selection.text;
+            if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+                search.style.display = 'block';
+            }
+        };
+    }
+    return (<DocumentEditorContainerComponent id="container" ref={(scope) => {
+            container = scope;
+        }} height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} created={onCreate}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/index.tsx
new file mode 100644
index 000000000..2758788e7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/app/index.tsx
@@ -0,0 +1,67 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+  DocumentEditorContainerComponent,
+  Toolbar,
+} from '@syncfusion/ej2-react-documenteditor';
+import { MenuItemModel } from '@syncfusion/ej2-navigations';
+
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+  let container: DocumentEditorContainerComponent;
+  React.useEffect(() => {
+    onCreate()
+  }, []);
+  function onCreate() {
+    // creating Custom Options
+    let menuItems: MenuItemModel[] = [
+      {
+        text: 'Search In Google',
+        id: 'search_in_google',
+        iconCss: 'e-icons e-de-ctnr-find',
+      },
+    ];
+    // adding Custom Options
+    container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+    // custom Options Select Event
+    container.documentEditor.customContextMenuSelect = (args: any): void => {
+      // custom Options Functionality
+      let id: string = container.documentEditor.element.id;
+      switch (args.id) {
+        case id + 'search_in_google':
+          let searchContent: string = container.documentEditor.selection.text;
+          if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+            window.open('http://google.com/search?q=' + searchContent);
+          }
+          break;
+      }
+    };
+    //  custom options hide/show functionality
+    container.documentEditor.customContextMenuBeforeOpen = (args: any): void => {
+      let search: any = document.getElementById(args.ids[0]);
+      search.style.display = 'none';
+      let searchContent: string = container.documentEditor.selection.text;
+      if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+        search.style.display = 'block';
+      }
+    };
+  }
+  return (
+    <DocumentEditorContainerComponent
+      id="container"
+      ref={(scope) => {
+        container = scope;
+      }}
+      height={'590px'}
+      serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+      enableToolbar={true}
+      created={onCreate}
+    />
+  );
+} export default App
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/index.html
new file mode 100644
index 000000000..eee310a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/customize-context-menu-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/index.jsx
new file mode 100644
index 000000000..3fb6f213f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/index.jsx
@@ -0,0 +1,17 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor, FontDialog } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, FontDialog);
+let documenteditor;
+function App() {
+    return (<div>
+      <button onClick={showFontDialog}>Dialog</button>
+      <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableFontDialog={true}/>
+    </div>);
+    function showFontDialog() {
+        //Open font dialog.
+        documenteditor.showDialog('Font');
+    }
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/index.tsx
new file mode 100644
index 000000000..c6c615814
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/app/index.tsx
@@ -0,0 +1,23 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor, FontDialog } from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, FontDialog);
+let documenteditor: DocumentEditorComponent;
+function App() {
+  return (
+    <div>
+      <button onClick={showFontDialog}>Dialog</button>
+      <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableFontDialog={true} />
+    </div>
+  );
+  function showFontDialog() {
+    //Open font dialog.
+    documenteditor.showDialog('Font');
+  }
+}
+export default App
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/index.html
new file mode 100644
index 000000000..1d9397816
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/systemjs.config.js
new file mode 100644
index 000000000..20c523a52
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/dialog-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",  
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",      
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/index.jsx
new file mode 100644
index 000000000..11e1bda33
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/index.jsx
@@ -0,0 +1,21 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { useRef } from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+    var container = useRef(null);
+    function save() {
+        //Download the document in sfdt format.
+        container.current.documentEditor.save('sample', 'Sfdt');
+    }
+    return (<div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} ref={container} />
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/index.tsx
new file mode 100644
index 000000000..5e92d3d00
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/app/index.tsx
@@ -0,0 +1,27 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { useRef } from 'react';
+import {
+    DocumentEditorContainerComponent, Toolbar
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+    // Creating a reference to the DocumentEditorContainerComponent using useRef hook
+    let container = useRef<DocumentEditorContainerComponent>(null); 
+    function save(){
+        //Download the document in sfdt format.
+        container.current.documentEditor.save('sample', 'Sfdt');
+    }
+    return (
+        <div>
+            <button onClick={save}>Save</button>
+            <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} ref={container}/>;
+        </div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/index.jsx
new file mode 100644
index 000000000..0830d60db
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/index.jsx
@@ -0,0 +1,22 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { useRef } from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+    var container = useRef(null);
+    function save() {
+        //Download the document in Docx format.
+        container.current.documentEditor.save('sample', 'Docx');
+    }
+    return (<div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} ref={container} />
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/index.tsx
new file mode 100644
index 000000000..05edf5c6f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/app/index.tsx
@@ -0,0 +1,28 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { useRef } from 'react';
+import {
+    DocumentEditorContainerComponent, Toolbar
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+    // Creating a reference to the DocumentEditorContainerComponent using useRef hook
+    let container = useRef<DocumentEditorContainerComponent>(null); 
+    function save(){
+        //Download the document in Docx format.
+        container.current.documentEditor.save('sample', 'Docx');
+    }
+    return (
+        <div>
+            <button onClick={save}>Save</button>
+            <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} ref={container}/>;
+        </div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/systemjs.config.js
new file mode 100644
index 000000000..20c523a52
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",  
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",      
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/index.jsx
new file mode 100644
index 000000000..a10d28b22
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/index.jsx
@@ -0,0 +1,22 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { useRef } from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+    var container = useRef(null);
+    function save() {
+        //Download the document in Txt format.
+        container.current.documentEditor.save('sample', 'Txt');
+    }
+    return (<div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} ref={container} />
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/index.tsx
new file mode 100644
index 000000000..89854637d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/app/index.tsx
@@ -0,0 +1,26 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { useRef } from 'react';
+import {
+    DocumentEditorContainerComponent, Toolbar
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+    let container = useRef<DocumentEditorContainerComponent>(null);
+    function save(){
+        //Download the document in Txt format.
+        container.current.documentEditor.save('sample', 'Txt');
+    }
+    return (
+        <div>
+            <button onClick={save}>Save</button>
+            <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} ref={container}/>;
+        </div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/index.jsx
new file mode 100644
index 000000000..f64fe63ba
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/index.jsx
@@ -0,0 +1,21 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { useRef } from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+    var container = useRef(null);
+    function save() {
+        //Download the document in Dotx format.
+        container.current.documentEditor.save('sample', 'Dotx');
+    }
+    return (<div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} ref={container} />
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/index.tsx
new file mode 100644
index 000000000..590108552
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/app/index.tsx
@@ -0,0 +1,26 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { useRef } from 'react';
+import {
+    DocumentEditorContainerComponent, Toolbar
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+    let container = useRef<DocumentEditorContainerComponent>(null);
+    function save(){
+        //Download the document in Dotx format.
+        container.current.documentEditor.save('sample', 'Dotx');
+    }
+    return (
+        <div>
+            <button onClick={save}>Save</button>
+            <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} ref={container}/>;
+        </div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-container-cs4/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/index.jsx
new file mode 100644
index 000000000..c48630bf1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/index.jsx
@@ -0,0 +1,19 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
+function App() {
+    let documenteditor;
+    return (<div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true}/>
+            </div>);
+    function save() {
+        //Download the document in sfdt format.
+        documenteditor.save('sample', 'Sfdt');
+    }
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/index.tsx
new file mode 100644
index 000000000..12a2aaddf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/app/index.tsx
@@ -0,0 +1,27 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require modules.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
+
+    function App() {
+    let  documenteditor: DocumentEditorComponent;
+        return (
+            <div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} />
+            </div>
+        );
+        function save(){
+          //Download the document in sfdt format.
+          documenteditor.save('sample', 'Sfdt');
+      }
+    }
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/index.jsx
new file mode 100644
index 000000000..f5ad4fd8b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/index.jsx
@@ -0,0 +1,19 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, WordExport, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+//Inject require module.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, WordExport);
+function App() {
+    let documenteditor;
+    function save() {
+        //Download the document in docx format.
+        documenteditor.save('sample', 'Docx');
+    }
+    return (<div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableWordExport={true}/>
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/index.tsx
new file mode 100644
index 000000000..c7981805d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/app/index.tsx
@@ -0,0 +1,26 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, WordExport, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require module.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, WordExport);
+function App() {
+    let documenteditor: DocumentEditorComponent;
+    function save() {
+        //Download the document in docx format.
+        documenteditor.save('sample', 'Docx');
+    }
+        return (
+            <div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableWordExport={true} />
+            </div>
+        );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/index.jsx
new file mode 100644
index 000000000..238323090
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/index.jsx
@@ -0,0 +1,19 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor, TextExport } from '@syncfusion/ej2-react-documenteditor';
+//Inject require module.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, TextExport);
+function App() {
+    let documenteditor;
+    function save() {
+        //Download the document in txt format.
+        documenteditor.save('sample', 'Txt');
+    }
+    return (<div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableTextExport={true}/>
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/index.tsx
new file mode 100644
index 000000000..d55792a3c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/app/index.tsx
@@ -0,0 +1,27 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor, TextExport } from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require module.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, TextExport);
+function App() {
+    let documenteditor: DocumentEditorComponent;
+    function save() {
+        //Download the document in txt format.
+        documenteditor.save('sample', 'Txt');
+    }
+        return (
+            <div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableTextExport={true} />
+            </div>
+        );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/index.jsx
new file mode 100644
index 000000000..b27e870fa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/index.jsx
@@ -0,0 +1,19 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor, WordExport } from '@syncfusion/ej2-react-documenteditor';
+//Inject require module.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, WordExport);
+function App() {
+    let documenteditor;
+    function save() {
+        //Download the document in txt format.
+        documenteditor.save('sample', 'Dotx');
+    }
+    return (<div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableWordExport={true}/>
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/index.tsx
new file mode 100644
index 000000000..a19b5d217
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/app/index.tsx
@@ -0,0 +1,25 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor, WordExport } from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require module.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, WordExport);
+function App() {
+    let documenteditor: DocumentEditorComponent;
+    function save() {
+        //Download the document in txt format.
+        documenteditor.save('sample', 'Dotx');
+    }
+        return (
+            <div>
+                <button onClick={save}>Save</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enableWordExport={true} />
+            </div>
+        );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/systemjs.config.js
new file mode 100644
index 000000000..20c523a52
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/export-cs4/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",  
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",      
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/index.jsx
new file mode 100644
index 000000000..248801e79
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/index.jsx
@@ -0,0 +1,40 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent } from '@syncfusion/ej2-react-documenteditor';
+function App() {
+    let documenteditor;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function componentDidMount() {
+        let sfdt = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Hello World"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {
+                    }
+                }
+            ]
+        }`;
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            documenteditor.open(sfdt);
+        });
+    }
+    return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/index.tsx
new file mode 100644
index 000000000..283602158
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/app/index.tsx
@@ -0,0 +1,50 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+    DocumentEditorComponent, DocumentEditor
+} from '@syncfusion/ej2-react-documenteditor';
+
+function App() {
+    let documenteditor: DocumentEditorComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function componentDidMount() {
+        let sfdt: string = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Hello World"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {
+                    }
+                }
+            ]
+        }`;
+
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            documenteditor.open(sfdt);
+        });
+    }
+
+    return (
+        <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} />
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/index.css
new file mode 100644
index 000000000..ad47c9be9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/index.css
@@ -0,0 +1,15 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+#file_upload {
+  display: none;
+}
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/index.jsx
new file mode 100644
index 000000000..faa528852
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/index.jsx
@@ -0,0 +1,39 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, } from '@syncfusion/ej2-react-documenteditor';
+function App() {
+    let documenteditor;
+    function onImportClick() {
+        //Open file picker.
+        document.getElementById('file_upload').click();
+    }
+    function onFileChange(e) {
+        if (e.target.files[0]) {
+            //Get selected file.
+            let file = e.target.files[0];
+            //Open sfdt document.
+            if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+                let fileReader = new FileReader();
+                fileReader.onload = (e) => {
+                    let contents = e.target.result;
+                    let proxy = documenteditor;
+                    //Open the document in Document Editor.
+                    proxy.open(contents);
+                };
+                //Read the file as text.
+                fileReader.readAsText(file);
+                documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
+            }
+        }
+    }
+    return (<div>
+            <input type='file' id='file_upload' accept='.sfdt' onChange={onFileChange}/>
+            <button onClick={onImportClick}>Import</button>
+            <DocumentEditorComponent id="container" ref={scope => {
+            documenteditor = scope;
+        }} height={'330px'}/>
+        </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/index.tsx
new file mode 100644
index 000000000..cbab4a650
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/app/index.tsx
@@ -0,0 +1,55 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+    DocumentEditorComponent,
+    DocumentEditor,
+} from '@syncfusion/ej2-react-documenteditor';
+
+function App() {
+    let documenteditor: DocumentEditorComponent;
+
+    function onImportClick() {
+        //Open file picker.
+        document.getElementById('file_upload').click();
+    }
+    function onFileChange(e: any) {
+        if (e.target.files[0]) {
+            //Get selected file.
+            let file = e.target.files[0];
+            //Open sfdt document.
+            if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+                let fileReader: FileReader = new FileReader();
+                fileReader.onload = (e: any) => {
+                    let contents: string = e.target.result;
+                    let proxy: any = documenteditor;
+                    //Open the document in Document Editor.
+                    proxy.open(contents);
+                };
+                //Read the file as text.
+                fileReader.readAsText(file);
+                documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
+            }
+        }
+    }
+    return (
+        <div>
+            <input type='file' id='file_upload' accept='.sfdt' onChange={onFileChange} />
+            <button onClick={onImportClick}>Import</button>
+            <DocumentEditorComponent
+                id="container"
+                ref={scope => {
+                    documenteditor = scope;
+                }}
+                height={'330px'}
+            />
+        </div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/index.css
new file mode 100644
index 000000000..ad47c9be9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/index.css
@@ -0,0 +1,15 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+#file_upload {
+  display: none;
+}
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/import-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/index.jsx
new file mode 100644
index 000000000..6b4d6d968
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/index.jsx
@@ -0,0 +1,23 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Selection, SfdtExport, Editor);
+function App() {
+    let documenteditor;
+    // Add event listener for requestNavigate event to customize hyperlink navigation functionality
+    let requestNavigate = (args) => {
+        if (args.linkType !== 'Bookmark') {
+            let link = args.navigationLink;
+            if (args.localReference.length > 0) {
+                link += '#' + args.localReference;
+            }
+            //Navigate to the specified URL.
+            window.open(link);
+            args.isHandled = true;
+        }
+    };
+    return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} enableSelection={true} enableSfdtExport={true} requestNavigate={requestNavigate} isReadOnly={false} enableEditor={true}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/index.tsx
new file mode 100644
index 000000000..e54d246be
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/app/index.tsx
@@ -0,0 +1,34 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+    DocumentEditorComponent, SfdtExport, Selection, RequestNavigateEventArgs, Editor
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorComponent.Inject(Selection, SfdtExport, Editor);
+function App() {
+    let documenteditor: DocumentEditorComponent;
+
+    // Add event listener for requestNavigate event to customize hyperlink navigation functionality
+   let requestNavigate = (args: RequestNavigateEventArgs) => {
+        if (args.linkType !== 'Bookmark') {
+            let link: string = args.navigationLink;
+            if (args.localReference.length > 0) {
+                link += '#' + args.localReference;
+            }
+            //Navigate to the specified URL.
+            window.open(link);
+            args.isHandled = true;
+        }
+    };
+
+        return (
+            <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {documenteditor = scope; }} enableSelection={true} enableSfdtExport={true} requestNavigate={requestNavigate} enableEditor={true} isReadOnly={false} />
+        );
+
+}
+export default App
+ReactDOM.render(<App/>, document.getElementById('sample'));
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/index.html
new file mode 100644
index 000000000..1d9397816
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/index.jsx
new file mode 100644
index 000000000..73059b44d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/index.jsx
@@ -0,0 +1,23 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Selection, SfdtExport, Editor);
+function App() {
+    let documenteditor;
+    // Add event listener for requestNavigate event to customize hyperlink navigation functionality.
+    let requestNavigate = (args) => {
+        if (args.linkType !== 'Bookmark') {
+            let link = args.navigationLink;
+            if (args.localReference.length > 0) {
+                link += '#' + args.localReference;
+            }
+            //Navigate to the specified URL.
+            window.open(link);
+            args.isHandled = true;
+        }
+    };
+    return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} requestNavigate={requestNavigate}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/index.tsx
new file mode 100644
index 000000000..42ba5f297
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/app/index.tsx
@@ -0,0 +1,35 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+    DocumentEditorComponent, SfdtExport, Selection, Editor, RequestNavigateEventArgs
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorComponent.Inject(Selection, SfdtExport, Editor);
+function App() {
+    let documenteditor: DocumentEditorComponent;
+
+    // Add event listener for requestNavigate event to customize hyperlink navigation functionality.
+    let requestNavigate = (args: RequestNavigateEventArgs) => {
+        if (args.linkType !== 'Bookmark') {
+            let link: string = args.navigationLink;
+            if (args.localReference.length > 0) {
+                link += '#' + args.localReference;
+            }
+            //Navigate to the specified URL.
+            window.open(link);
+            args.isHandled = true;
+        }
+    };
+    return (
+        <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true}
+            requestNavigate={requestNavigate} />
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/index.html
new file mode 100644
index 000000000..1d9397816
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/index.jsx
new file mode 100644
index 000000000..d1fa2a0de
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/index.jsx
@@ -0,0 +1,19 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, SfdtExport, Selection, Editor, HyperlinkDialog } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Selection, SfdtExport, Editor, HyperlinkDialog);
+function App() {
+    let documenteditor;
+    //Click the hyperlink button, the hyperlink dialog will open
+    function showHyperlinkDialog() {
+        //Open hyperlink dialog.
+        documenteditor.showDialog('Hyperlink');
+    }
+    return (<div>
+                <button onClick={showHyperlinkDialog}>Dialog</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableHyperlinkDialog={true}/>
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/index.tsx
new file mode 100644
index 000000000..a354c5d41
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/app/index.tsx
@@ -0,0 +1,29 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+    DocumentEditorComponent, SfdtExport, Selection, Editor, HyperlinkDialog
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorComponent.Inject(Selection, SfdtExport, Editor, HyperlinkDialog);
+function App() {
+   let documenteditor: DocumentEditorComponent;
+
+    //Click the hyperlink button, the hyperlink dialog will open
+    function showHyperlinkDialog() {
+        //Open hyperlink dialog.
+        documenteditor.showDialog('Hyperlink');
+    }
+
+        return (
+            <div>
+                <button onClick={showHyperlinkDialog}>Dialog</button>
+                <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableHyperlinkDialog={true} />
+            </div>
+        );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/index.html
new file mode 100644
index 000000000..1d9397816
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/link-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/index.jsx
new file mode 100644
index 000000000..0b0c7c767
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/index.jsx
@@ -0,0 +1,37 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Selection, Editor, EditorHistory, ContextMenu, TableDialog } from '@syncfusion/ej2-react-documenteditor';
+import { ToolbarComponent, ItemDirective, ItemsDirective, } from '@syncfusion/ej2-react-navigations';
+DocumentEditorComponent.Inject(Selection, Editor, EditorHistory, ContextMenu, TableDialog);
+function App() {
+    let documenteditor;
+    function toolbarButtonClick(args) {
+        switch (args.item.id) {
+            case 'Bullets':
+                //To create bullet list
+                documenteditor.editor.applyBullet('\uf0b7', 'Symbol');
+                break;
+            case 'Numbering':
+                //To create numbering list
+                documenteditor.editor.applyNumbering('%1)', 'UpRoman');
+                break;
+            case 'clearlist':
+                //To clear list
+                documenteditor.editor.clearList();
+                break;
+        }
+    }
+    return (<div>
+            <ToolbarComponent id="toolbar" clicked={toolbarButtonClick}>
+                <ItemsDirective>
+                    <ItemDirective id="Bullets" prefixIcon="e-de-ctnr-bullets e-icons" tooltipText="Bullets"/>
+                    <ItemDirective id="Numbering" prefixIcon="e-de-ctnr-numbering e-icons" tooltipText="Numbering"/>
+                    <ItemDirective id="clearlist" text="Clear" tooltipText="Clear List"/>
+                </ItemsDirective>
+            </ToolbarComponent>
+            <DocumentEditorComponent id="container" height={'330px'} ref={scope => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableEditorHistory={true}/>
+        </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/index.tsx
new file mode 100644
index 000000000..9cb512824
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/app/index.tsx
@@ -0,0 +1,46 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Selection, Editor, EditorHistory, ContextMenu, TableDialog } from '@syncfusion/ej2-react-documenteditor';
+import { ToolbarComponent, ItemDirective, ItemsDirective, } from '@syncfusion/ej2-react-navigations';
+
+DocumentEditorComponent.Inject(Selection, Editor, EditorHistory, ContextMenu, TableDialog);
+function App() {
+    let documenteditor: DocumentEditorComponent;
+
+    function toolbarButtonClick(args) {
+        switch (args.item.id) {
+            case 'Bullets':
+                //To create bullet list
+                documenteditor.editor.applyBullet('\uf0b7', 'Symbol');
+                break;
+            case 'Numbering':
+                //To create numbering list
+                documenteditor.editor.applyNumbering('%1)', 'UpRoman');
+                break;
+            case 'clearlist':
+                //To clear list
+                documenteditor.editor.clearList();
+                break;
+        }
+    }
+    return (
+        <div>
+            <ToolbarComponent id="toolbar" clicked={toolbarButtonClick} >
+                <ItemsDirective>
+                    <ItemDirective id="Bullets" prefixIcon="e-de-ctnr-bullets e-icons" tooltipText="Bullets" />
+                    <ItemDirective id="Numbering" prefixIcon="e-de-ctnr-numbering e-icons" tooltipText="Numbering" />
+                    <ItemDirective id="clearlist" text="Clear" tooltipText="Clear List" />
+                </ItemsDirective>
+            </ToolbarComponent>
+            <DocumentEditorComponent id="container" height={'330px'} ref={scope => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableEditorHistory={true} />
+        </div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/index.css
new file mode 100644
index 000000000..1897af8d0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/index.css
@@ -0,0 +1,9 @@
+
+#loader {
+color: #008cff;
+height: 40px;
+left: 45%;
+position: absolute;
+top: 45%;
+width: 30%;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/index.html
new file mode 100644
index 000000000..6be852083
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />    
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
+<style>
+    /** Document editor sample level font icons*/
+
+@font-face {
+  font-family: 'Sample brower icons';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,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YQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAEYAaQBuAGEAbAAgAFMAYQBtAHAAbABlACAAYgByAG8AdwBlAHIAIABpAGMAbwBuAHMARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/AQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAAtTdHJva2VTdHlsZQhCb29rbWFyawdQaWN0dXJlBEZpbmQNT3V0c2lkZUJvcmRlcgdKdXN0aWZ5BUNsb3NlDkRlY3JlYXNlSW5kZW50FVBpeGVsQWxpZ25DZW50ZXJUYWJsZQ9CYWNrZ3JvdW5kQ29sb3ILQWxpZ25Cb3R0b20JUGFnZVNldHVwDkhpZ2hsaWdodENvbG9yC1N1cGVyc2NyaXB0BVRhYmxlBFVuZG8LSW5zZXJ0QmVsb3cJVG9wQm9yZGVyClBhZ2VOdW1iZXIQQWxpZ25DZW50ZXJUYWJsZQ5JbmNyZWFzZUluZGVudARCb2xkCUFsaWduTGVmdAZGb290ZXILSW5zZXJ0UmlnaHQJVW5kZXJsaW5lCkluc2VydExlZnQETG9jawZIZWFkZXINU3RyaWtldGhyb3VnaAhDbGVhckFsbAtSaWdodEJvcmRlcgpBbGlnblJpZ2h0BE9wZW4KU3Ryb2tlU2l6ZQVQcmludAtEZWxldGVUYWJsZQlGb250Q29sb3INSW5zaWRlQm9yZGVycwpEZWxldGVSb3dzCERvd25sb2FkC0xpbmVTcGFjaW5nFEluc2lkZVZlcnRpY2FsQm9yZGVyCEFsaWduVE9wBFJlZG8MQm90dG9tQm9yZGVyA05ldwVQYXN0ZQdCdWxsZXRzBENlbGwNRGVsZXRlQ29sdW1ucwpBbGxCb3JkZXJzCVN1YnNjcmlwdBBTaG93SGlkZVByb3BlcnR5DlRhYmxlT2ZDb250ZW50Bkl0YWxpYxZJbnNpZGVIb3Jpem9uZGFsYm9yZGVyC0xlZnRCb3JkZXJzCU51bWJlcmluZwRMaW5rC0FsaWduQ2VudGVyC0luc2VydEFib3ZlAAAAAAA=) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+  font-family: 'Sample brower icons';
+}   
+
+.e-de-icon-Bullets:before {
+  content: "\e730";
+}
+
+.e-de-icon-Numbering:before {
+  content: "\e73a";
+}
+
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/systemjs.config.js
new file mode 100644
index 000000000..ae45d69cb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/list-cs1/systemjs.config.js
@@ -0,0 +1,56 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",  
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",      
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/app/index.jsx
new file mode 100644
index 000000000..0e516a17c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/app/index.jsx
@@ -0,0 +1,28 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Editor } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Editor);
+function App() {
+    let container;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function created() {
+        // load your default document here
+        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // Open the default document
+        container.open(data);
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    return (<DocumentEditorComponent id="container" height={'590px'} ref={(scope) => {
+            container = scope;
+            created();
+        }} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/app/index.tsx
new file mode 100644
index 000000000..d525aeea2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/app/index.tsx
@@ -0,0 +1,35 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Editor } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Editor);
+
+function App() {
+    let container: DocumentEditorComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function created() {
+        // load your default document here
+        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // Open the default document
+        container.open(data);
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    return (<DocumentEditorComponent id="container" height={'590px'} ref={(scope) => {
+        container = scope;
+        created();
+    }}
+        serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+    />
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/index.css
new file mode 100644
index 000000000..1897af8d0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/index.css
@@ -0,0 +1,9 @@
+
+#loader {
+color: #008cff;
+height: 40px;
+left: 45%;
+position: absolute;
+top: 45%;
+width: 30%;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/index.html
new file mode 100644
index 000000000..6be852083
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />    
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
+<style>
+    /** Document editor sample level font icons*/
+
+@font-face {
+  font-family: 'Sample brower icons';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,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YQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAEYAaQBuAGEAbAAgAFMAYQBtAHAAbABlACAAYgByAG8AdwBlAHIAIABpAGMAbwBuAHMARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/AQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAAtTdHJva2VTdHlsZQhCb29rbWFyawdQaWN0dXJlBEZpbmQNT3V0c2lkZUJvcmRlcgdKdXN0aWZ5BUNsb3NlDkRlY3JlYXNlSW5kZW50FVBpeGVsQWxpZ25DZW50ZXJUYWJsZQ9CYWNrZ3JvdW5kQ29sb3ILQWxpZ25Cb3R0b20JUGFnZVNldHVwDkhpZ2hsaWdodENvbG9yC1N1cGVyc2NyaXB0BVRhYmxlBFVuZG8LSW5zZXJ0QmVsb3cJVG9wQm9yZGVyClBhZ2VOdW1iZXIQQWxpZ25DZW50ZXJUYWJsZQ5JbmNyZWFzZUluZGVudARCb2xkCUFsaWduTGVmdAZGb290ZXILSW5zZXJ0UmlnaHQJVW5kZXJsaW5lCkluc2VydExlZnQETG9jawZIZWFkZXINU3RyaWtldGhyb3VnaAhDbGVhckFsbAtSaWdodEJvcmRlcgpBbGlnblJpZ2h0BE9wZW4KU3Ryb2tlU2l6ZQVQcmludAtEZWxldGVUYWJsZQlGb250Q29sb3INSW5zaWRlQm9yZGVycwpEZWxldGVSb3dzCERvd25sb2FkC0xpbmVTcGFjaW5nFEluc2lkZVZlcnRpY2FsQm9yZGVyCEFsaWduVE9wBFJlZG8MQm90dG9tQm9yZGVyA05ldwVQYXN0ZQdCdWxsZXRzBENlbGwNRGVsZXRlQ29sdW1ucwpBbGxCb3JkZXJzCVN1YnNjcmlwdBBTaG93SGlkZVByb3BlcnR5DlRhYmxlT2ZDb250ZW50Bkl0YWxpYxZJbnNpZGVIb3Jpem9uZGFsYm9yZGVyC0xlZnRCb3JkZXJzCU51bWJlcmluZwRMaW5rC0FsaWduQ2VudGVyC0luc2VydEFib3ZlAAAAAAA=) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+  font-family: 'Sample brower icons';
+}   
+
+.e-de-icon-Bullets:before {
+  content: "\e730";
+}
+
+.e-de-icon-Numbering:before {
+  content: "\e73a";
+}
+
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/systemjs.config.js
new file mode 100644
index 000000000..f2350dd13
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs1/systemjs.config.js
@@ -0,0 +1,56 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/app/index.jsx
new file mode 100644
index 000000000..fd58fa9fa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/app/index.jsx
@@ -0,0 +1,28 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let documenteditorcontainer;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function created() {
+        // load your default document here
+        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // Open the default document
+        documenteditorcontainer.documentEditor.open(data);
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    return (<DocumentEditorContainerComponent height={'590px'} id="container" ref={(scope) => {
+            documenteditorcontainer = scope;
+            created();
+        }} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/app/index.tsx
new file mode 100644
index 000000000..5b528e20f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/app/index.tsx
@@ -0,0 +1,36 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let documenteditorcontainer: DocumentEditorContainerComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function created() {
+        // load your default document here
+        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}`;
+        // Open the default document
+        documenteditorcontainer.documentEditor.open(data);
+
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    return (<DocumentEditorContainerComponent height={'590px'} id="container" ref={(scope) => {
+        documenteditorcontainer = scope;
+        created();
+    }}
+        serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} />
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'))
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/index.css
new file mode 100644
index 000000000..1897af8d0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/index.css
@@ -0,0 +1,9 @@
+
+#loader {
+color: #008cff;
+height: 40px;
+left: 45%;
+position: absolute;
+top: 45%;
+width: 30%;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/index.html
new file mode 100644
index 000000000..6be852083
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />    
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
+<style>
+    /** Document editor sample level font icons*/
+
+@font-face {
+  font-family: 'Sample brower icons';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,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YQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAEYAaQBuAGEAbAAgAFMAYQBtAHAAbABlACAAYgByAG8AdwBlAHIAIABpAGMAbwBuAHMARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAUwBhAG0AcABsAGUAIABiAHIAbwB3AGUAcgAgAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/AQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAAtTdHJva2VTdHlsZQhCb29rbWFyawdQaWN0dXJlBEZpbmQNT3V0c2lkZUJvcmRlcgdKdXN0aWZ5BUNsb3NlDkRlY3JlYXNlSW5kZW50FVBpeGVsQWxpZ25DZW50ZXJUYWJsZQ9CYWNrZ3JvdW5kQ29sb3ILQWxpZ25Cb3R0b20JUGFnZVNldHVwDkhpZ2hsaWdodENvbG9yC1N1cGVyc2NyaXB0BVRhYmxlBFVuZG8LSW5zZXJ0QmVsb3cJVG9wQm9yZGVyClBhZ2VOdW1iZXIQQWxpZ25DZW50ZXJUYWJsZQ5JbmNyZWFzZUluZGVudARCb2xkCUFsaWduTGVmdAZGb290ZXILSW5zZXJ0UmlnaHQJVW5kZXJsaW5lCkluc2VydExlZnQETG9jawZIZWFkZXINU3RyaWtldGhyb3VnaAhDbGVhckFsbAtSaWdodEJvcmRlcgpBbGlnblJpZ2h0BE9wZW4KU3Ryb2tlU2l6ZQVQcmludAtEZWxldGVUYWJsZQlGb250Q29sb3INSW5zaWRlQm9yZGVycwpEZWxldGVSb3dzCERvd25sb2FkC0xpbmVTcGFjaW5nFEluc2lkZVZlcnRpY2FsQm9yZGVyCEFsaWduVE9wBFJlZG8MQm90dG9tQm9yZGVyA05ldwVQYXN0ZQdCdWxsZXRzBENlbGwNRGVsZXRlQ29sdW1ucwpBbGxCb3JkZXJzCVN1YnNjcmlwdBBTaG93SGlkZVByb3BlcnR5DlRhYmxlT2ZDb250ZW50Bkl0YWxpYxZJbnNpZGVIb3Jpem9uZGFsYm9yZGVyC0xlZnRCb3JkZXJzCU51bWJlcmluZwRMaW5rC0FsaWduQ2VudGVyC0luc2VydEFib3ZlAAAAAAA=) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="e-de-icon-"],
+[class*=" e-de-icon-"] {
+  font-family: 'Sample brower icons';
+}   
+
+.e-de-icon-Bullets:before {
+  content: "\e730";
+}
+
+.e-de-icon-Numbering:before {
+  content: "\e73a";
+}
+
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/systemjs.config.js
new file mode 100644
index 000000000..f2350dd13
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/open-default-document-cs2/systemjs.config.js
@@ -0,0 +1,56 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/index.jsx
new file mode 100644
index 000000000..2b852d861
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/index.jsx
@@ -0,0 +1,51 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Print } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditorComponent.Inject(Print);
+function App() {
+    let documenteditor;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function onPrint() {
+        //Print the document content.
+        documenteditor.print();
+    }
+    function componentDidMount() {
+        let sfdt = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Hello World"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {
+                    }
+                }
+            ]
+        }`;
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            documenteditor.open(sfdt);
+        });
+    }
+    return (<div>
+                <button onClick={onPrint}>Print</button>
+                <DocumentEditorComponent id="container" ref={scope => {
+            documenteditor = scope;
+        }} enablePrint={true} height={'330px'}/>
+            </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/index.tsx
new file mode 100644
index 000000000..ea0e25690
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/app/index.tsx
@@ -0,0 +1,61 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Print } from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require modules.
+DocumentEditorComponent.Inject(Print);
+function App(){
+    let documenteditor: DocumentEditorComponent;
+     React.useEffect(() => {
+    componentDidMount()
+    }, []);
+    function onPrint() {
+        //Print the document content.
+        documenteditor.print();
+    }
+   function componentDidMount() {
+        let sfdt: string = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Hello World"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {
+                    }
+                }
+            ]
+        }`;
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            documenteditor.open(sfdt);
+        });
+    }
+
+
+        return (
+            <div>
+                <button onClick={onPrint}>Print</button>
+                <DocumentEditorComponent
+                    id="container"
+                    ref={scope => {
+                        documenteditor = scope;
+                    }}
+                    enablePrint={true}
+                    height={'330px'}
+                />
+            </div>
+        );
+}
+export default App
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/index.jsx
new file mode 100644
index 000000000..325866906
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/index.jsx
@@ -0,0 +1,23 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {  DocumentEditorComponent, Print, Editor, Selection, EditorHistory, SfdtExport
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorComponent.Inject(Print, Editor, Selection, SfdtExport, EditorHistory);
+let documenteditor;
+function App() {
+  return (
+    <div>
+      <button onClick={onPrint}>Print</button>
+      <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}
+      />
+    </div>
+  );
+  function onPrint() {
+    //Print the document content.
+    documenteditor.print();
+  }
+}
+export default App
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/index.tsx
new file mode 100644
index 000000000..c6e90d986
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/app/index.tsx
@@ -0,0 +1,23 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {  DocumentEditorComponent, Print, Editor, Selection, EditorHistory, SfdtExport
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorComponent.Inject(Print, Editor, Selection, SfdtExport, EditorHistory);
+let documenteditor: DocumentEditorComponent;
+function App() {
+  return (
+    <div>
+      <button onClick={onPrint}>Print</button>
+      <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}
+      />
+    </div>
+  );
+  function onPrint() {
+    //Print the document content.
+    documenteditor.print();
+  }
+}
+export default App
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/systemjs.config.js
new file mode 100644
index 000000000..20c523a52
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",  
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",      
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/index.jsx
new file mode 100644
index 000000000..f881ecf2e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/index.jsx
@@ -0,0 +1,32 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, DocumentEditor, Print, Editor, Selection, EditorHistory, SfdtExport, } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditor.Inject(Print, Editor, Selection, EditorHistory, SfdtExport);
+function App() {
+    let documenteditor1 = new DocumentEditorComponent(undefined);
+    let documenteditor2 = new DocumentEditorComponent(undefined);
+    function onPrint() {
+        //Serialize the document content.
+        let sfdtData = documenteditor1.serialize();
+        //Open the serialized content in Document Editor.
+        documenteditor2.open(sfdtData);
+        //Set A5 paper size
+        documenteditor2.selection.sectionFormat.pageWidth = 419.55;
+        documenteditor2.selection.sectionFormat.pageHeight = 595.3;
+        //Print the document content.
+        documenteditor2.print();
+    }
+    return (<div>
+      <button onClick={onPrint}>Print</button>
+      <DocumentEditorComponent id="DocumentEditor" height={'330px'} ref={scope => {
+            documenteditor1 = scope;
+        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}/>
+      <DocumentEditorComponent id="DocumentEditor2" height={'330px'} ref={scope => {
+            documenteditor2 = scope;
+        }} enablePrint={true} isReadOnly={false} enableSelection={true} enableSfdtExport={true} enableEditor={true} enableEditorHistory={true}/>
+    </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/index.tsx
new file mode 100644
index 000000000..3c6db4601
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/app/index.tsx
@@ -0,0 +1,59 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, DocumentEditor, Print, Editor, Selection, EditorHistory, SfdtExport, } from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require modules.
+DocumentEditor.Inject(Print, Editor, Selection, EditorHistory, SfdtExport);
+function App() {
+  let documenteditor1: DocumentEditorComponent = new DocumentEditorComponent(undefined);
+  let documenteditor2: DocumentEditorComponent = new DocumentEditorComponent(undefined);
+  function onPrint() {
+    //Serialize the document content.
+    let sfdtData = documenteditor1.serialize();
+    //Open the serialized content in Document Editor.
+    documenteditor2.open(sfdtData);
+    //Set A5 paper size
+    documenteditor2.selection.sectionFormat.pageWidth = 419.55;
+    documenteditor2.selection.sectionFormat.pageHeight = 595.3;
+    //Print the document content.
+    documenteditor2.print();
+  }
+  return (
+    <div>
+      <button onClick={onPrint}>Print</button>
+      <DocumentEditorComponent
+        id="DocumentEditor"
+        height={'330px'}
+        ref={scope => {
+          documenteditor1 = scope;
+        }}
+        enablePrint={true}
+        isReadOnly={false}
+        enableSelection={true}
+        enableSfdtExport={true}
+        enableEditor={true}
+        enableEditorHistory={true}
+      />
+      <DocumentEditorComponent
+        id="DocumentEditor2"
+        height={'330px'}
+        ref={scope => {
+          documenteditor2 = scope;
+        }}
+        enablePrint={true}
+        isReadOnly={false}
+        enableSelection={true}
+        enableSfdtExport={true}
+        enableEditor={true}
+        enableEditorHistory={true}
+      />
+    </div>
+  );
+
+} export default App
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/print-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/index.jsx
new file mode 100644
index 000000000..1ebf4422b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/index.jsx
@@ -0,0 +1,341 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor';
+import { L10n } from '@syncfusion/ej2-base';
+//Inject require modules.
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+//Load locale constant for Document Editor.
+L10n.load({
+    'ar-AE': {
+        'documenteditor': {
+            'Table': 'لجدول',
+            'Row': 'لصف',
+            'Cell': 'الخليه',
+            'Ok': 'موافق',
+            'Cancel': 'إلغاء الأمر',
+            'Size': 'حجم',
+            'Preferred Width': 'العرض المفضل',
+            'Points': 'نقاط',
+            'Percent': 'المائه',
+            'Measure in': 'القياس في',
+            'Alignment': 'محاذاه',
+            'Left': 'ليسار',
+            'Center': 'مركز',
+            'Right': 'الحق',
+            'Justify': 'تبرير',
+            'Indent from left': 'مسافة بادئه من اليسار',
+            'Borders and Shading': 'الحدود والتظليل',
+            'Options': 'خيارات',
+            'Specify height': 'تحديد الارتفاع',
+            'At least': 'الاقل',
+            'Exactly': 'تماما',
+            'Row height is': 'ارتفاع الصف هو',
+            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
+            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
+            'Vertical alignment': 'محاذاة عمودي',
+            'Top': 'أعلى',
+            'Bottom': 'اسفل',
+            'Default cell margins': 'هوامش الخلية الافتراضية',
+            'Default cell spacing': 'تباعد الخلايا الافتراضي',
+            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
+            'Cell margins': 'هوامش الخلية',
+            'Same as the whole table': 'نفس الجدول بأكمله',
+            'Borders': 'الحدود',
+            'None': 'اي',
+            'Single': 'واحد',
+            'Dot': 'نقطه',
+            'DashSmallGap': 'داشسمجاب',
+            'DashLargeGap': 'الاتحاد الخاص',
+            'DashDot': 'داشدوت',
+            'DashDotDot': 'ددهدودوت',
+            'Double': 'انقر نقرا مزدوجا',
+            'Triple': 'الثلاثي',
+            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
+            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
+            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
+            'ThinThickMediumGap': 'فجوه متوسطه سميك',
+            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
+            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
+            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
+            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
+            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
+            'SingleWavy': 'واحد مائج',
+            'DoubleWavy': 'مزدوج مائج',
+            'DashDotStroked': 'اندفاعه نقطه القوية',
+            'Emboss3D': 'D3مزخرف',
+            'Engrave3D': 'D3نقش',
+            'Outset': 'البدايه',
+            'Inset': 'الداخلي',
+            'Thick': 'سميكه',
+            'Style': 'نمط',
+            'Width': 'عرض',
+            'Height': 'ارتفاع',
+            'Letter': 'رساله',
+            'Tabloid': 'التابلويد',
+            'Legal': 'القانونيه',
+            'Statement': 'بيان',
+            'Executive': 'التنفيذي',
+            'A3': 'A3',
+            'A4': 'A4',
+            'A5': 'A5',
+            'B4': 'B4',
+            'B5': 'B5',
+            'Custom Size': 'حجم مخصص',
+            'Different odd and even': 'مختلفه غريبه وحتى',
+            'Different first page': 'الصفحة الاولي مختلفه',
+            'From edge': 'من الحافة',
+            'Header': 'راس',
+            'Footer': 'تذييل الصفحه',
+            'Margin': 'الهوامش',
+            'Paper': 'الورق',
+            'Layout': 'تخطيط',
+            'Orientation': 'التوجه',
+            'Landscape': 'المناظر الطبيعيه',
+            'Portrait': 'صوره',
+            'Table Of Contents': 'جدول المحتويات',
+            'Show page numbers': 'إظهار أرقام الصفحات',
+            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
+            'Nothing': 'شيء',
+            'Tab leader': 'قائد علامة التبويب',
+            'Show levels': 'إظهار المستويات',
+            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
+            'Build table of contents from': 'بناء جدول محتويات من',
+            'Styles': 'انماط',
+            'Available styles': 'الأنماط المتوفرة',
+            'TOC level': 'مستوي جدول المحتويات',
+            'Heading': 'عنوان',
+            'Heading 1': 'عنوان 1',
+            'Heading 2': 'عنوان 2',
+            'Heading 3': 'عنوان 3',
+            'Heading 4': 'عنوان 4',
+            'Heading 5': 'عنوان 5',
+            'Heading 6': 'عنوان 6',
+            'List Paragraph': 'فقره القائمة',
+            'Normal': 'العاديه',
+            'Outline levels': 'مستويات المخطط التفصيلي',
+            'Table entry fields': 'حقول إدخال الجدول',
+            'Modify': 'تعديل',
+            'Color': 'لون',
+            'Setting': 'اعداد',
+            'Box': 'مربع',
+            'All': 'جميع',
+            'Custom': 'المخصصه',
+            'Preview': 'معاينه',
+            'Shading': 'التظليل',
+            'Fill': 'ملء',
+            'Apply To': 'تنطبق علي',
+            'Table Properties': 'خصائص الجدول',
+            'Cell Options': 'خيارات الخلية',
+            'Table Options': 'خيارات الجدول',
+            'Insert Table': 'ادراج جدول',
+            'Number of columns': 'عدد الاعمده',
+            'Number of rows': 'عدد الصفوف',
+            'Text to display': 'النص الذي سيتم عرضه',
+            'Address': 'عنوان',
+            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
+            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
+            'Insert': 'ادراج',
+            'General': 'العامه',
+            'Indentation': 'المسافه البادئه',
+            'Before text': 'قبل النص',
+            'Special': 'الخاصه',
+            'First line': 'السطر الأول',
+            'Hanging': 'معلقه',
+            'After text': 'بعد النص',
+            'By': 'من',
+            'Before': 'قبل',
+            'Line Spacing': 'تباعد الأسطر',
+            'After': 'بعد',
+            'At': 'في',
+            'Multiple': 'متعدده',
+            'Spacing': 'تباعد',
+            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
+            'List level': 'مستوي القائمة',
+            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
+            'Level': 'مستوي',
+            'Number format': 'تنسيق الأرقام',
+            'Number style for this level': 'نمط الرقم لهذا المستوي',
+            'Enter formatting for number': 'إدخال تنسيق لرقم',
+            'Start at': 'بداية من',
+            'Restart list after': 'أعاده تشغيل قائمه بعد',
+            'Position': 'موقف',
+            'Text indent at': 'المسافة البادئة للنص في',
+            'Aligned at': 'محاذاة في',
+            'Follow number with': 'اتبع الرقم مع',
+            'Tab character': 'حرف علامة التبويب',
+            'Space': 'الفضاء',
+            'Arabic': 'العربية',
+            'UpRoman': 'حتى الروماني',
+            'LowRoman': 'الرومانية منخفضه',
+            'UpLetter': '',
+            'LowLetter': '',
+            'Number': 'عدد',
+            'Leading zero': 'يؤدي صفر',
+            'Bullet': 'رصاصه',
+            'Ordinal': 'الترتيبيه',
+            'Ordinal Text': 'النص الترتيبي',
+            'For East': 'للشرق',
+            'No Restart': 'لا أعاده تشغيل',
+            'Font': 'الخط',
+            'Font style': 'نمط الخط',
+            'Underline style': 'نمط التسطير',
+            'Font color': 'لون الخط',
+            'Effects': 'الاثار',
+            'Strikethrough': 'يتوسطه',
+            'Superscript': 'مرتفع',
+            'Subscript': 'منخفض',
+            'Double strikethrough': 'خط مزدوج يتوسطه خط',
+            'Regular': 'العاديه',
+            'Bold': 'جريئه',
+            'Italic': 'مائل',
+            'Cut': 'قطع',
+            'Copy': 'نسخ',
+            'Paste': 'لصق',
+            'Hyperlink': 'الارتباط التشعبي',
+            'Open Hyperlink': 'فتح ارتباط تشعبي',
+            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
+            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
+            'Paragraph': 'الفقره',
+            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
+            'Character': 'حرف',
+            'Merge Cells': 'دمج الخلايا',
+            'Insert Above': 'ادراج أعلاه',
+            'Insert Below': 'ادراج أدناه',
+            'Insert Left': 'ادراج إلى اليسار',
+            'Insert Right': 'ادراج اليمين',
+            'Delete': 'حذف',
+            'Delete Table': 'حذف جدول',
+            'Delete Row': 'حذف صف',
+            'Delete Column': 'حذف عمود',
+            'File Name': 'اسم الملف',
+            'Format Type': 'نوع التنسيق',
+            'Save': 'حفظ',
+            'Navigation': 'التنقل',
+            'Results': 'نتائج',
+            'Replace': 'استبدال',
+            'Replace All': 'استبدال الكل',
+            'We replaced all': 'استبدلنا جميع',
+            'Find': 'العثور',
+            'No matches': 'لا توجد تطابقات',
+            'All Done': 'كل القيام به',
+            'Result': 'نتيجه',
+            'of': 'من',
+            'instances': 'الحالات',
+            'with': 'مع',
+            'Click to follow link': 'انقر لمتابعه الارتباط',
+            'Continue Numbering': 'متابعه الترقيم',
+            'Bookmark name': 'اسم الإشارة المرجعية',
+            'Close': 'اغلاق',
+            'Restart At': 'أعاده التشغيل عند',
+            'Properties': 'خصائص',
+            'Name': 'اسم',
+            'Style type': 'نوع النمط',
+            'Style based on': 'نمط استنادا إلى',
+            'Style for following paragraph': 'نمط للفقرة التالية',
+            'Formatting': 'التنسيق',
+            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
+            'Numbering': 'ترقيم',
+            'Update Field': 'تحديث الحقل',
+            'Edit Field': 'تحرير الحقل',
+            'Bookmark': 'الإشارة المرجعية',
+            'Page Setup': 'اعداد الصفحة',
+            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
+            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
+                + '</br>' + 'الفصل نون-البند' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
+                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
+            'Format': 'تنسيق',
+            'Create New Style': 'إنشاء نمط جديد',
+            'Modify Style': 'تعديل النمط',
+            'New': 'الجديد',
+            'Bullets': 'الرصاص',
+            'Use bookmarks': 'استخدام الإشارات المرجعية',
+            'Table of Contents': 'جدول المحتويات',
+            'AutoFit': 'الاحتواء',
+            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
+            'AutoFit to Window': 'احتواء تلقائي للإطار',
+            'Fixed Column Width': 'عرض العمود الثابت',
+            'Reset': 'اعاده تعيين',
+            'Match case': 'حاله المباراة',
+            'Whole words': 'كلمات كامل',
+            'Add': 'اضافه',
+            'Go To': 'الانتقال إلى',
+            'Search for': 'البحث عن',
+            'Replace with': 'استبدال',
+            'TOC 1': 'جدول المحتويات 1',
+            'TOC 2': 'جدول المحتويات 2',
+            'TOC 3': 'جدول المحتويات 3',
+            'TOC 4': 'جدول المحتويات 4',
+            'TOC 5': 'جدول المحتويات 5',
+            'TOC 6': 'جدول المحتويات 6',
+            'TOC 7': 'جدول المحتويات 7',
+            'TOC 8': 'جدول المحتويات 8',
+            'TOC 9': 'جدول المحتويات 9',
+            'Right-to-left': 'من اليمين إلى اليسار',
+            'Left-to-right': 'من اليسار إلى اليمين',
+            'Direction': 'الاتجاه',
+            'Table direction': 'اتجاه الجدول',
+            'Indent from right': 'مسافة بادئه من اليمين',
+            'Page': 'صفحه',
+            'Fit one page': 'احتواء صفحه واحد',
+            'Fit page width': 'احتواء عرض الصفحة',
+            // tslint:disable-next-line:max-line-length
+            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
+        },
+        'colorpicker': {
+            'Apply': 'تطبيق',
+            'Cancel': 'إلغاء الأمر',
+            'ModeSwitcher': 'مفتاح كهربائي الوضع'
+        }
+    }
+});
+function App() {
+    let documenteditor;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function componentDidMount() {
+        let sfdt = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "characterFormat": {
+                                "fontSize": 18.0,
+                                "fontFamily": "Calibri",
+                                "fontFamilyBidi": "Calibri"
+                            },
+                            "paragraphFormat": {
+                                "beforeSpacing": 18.0,
+                                "afterSpacing": 30.0,
+                                "styleName": "Heading 1",
+                                "bidi": true
+                            },
+                            "inlines": [
+                                {
+                                    "text": "اعمال المغامرة دورات",
+                                    "characterFormat": {
+                                        "fontSize": 18.0,
+                                        "bidi": true,
+                                        "fontSizeBidi": 18.0
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }`;
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            documenteditor.open(sfdt);
+        });
+    }
+    return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true} enableRtl={true} locale={'ar-AE'}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/index.tsx
new file mode 100644
index 000000000..0486608fc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/app/index.tsx
@@ -0,0 +1,365 @@
+
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+    DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory,
+    ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog,
+    PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog,
+    TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog
+} from '@syncfusion/ej2-react-documenteditor';
+import { L10n } from '@syncfusion/ej2-base';
+
+//Inject require modules.
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+//Load locale constant for Document Editor.
+L10n.load({
+    'ar-AE': {
+        'documenteditor': {
+            'Table': 'لجدول',
+            'Row': 'لصف',
+            'Cell': 'الخليه',
+            'Ok': 'موافق',
+            'Cancel': 'إلغاء الأمر',
+            'Size': 'حجم',
+            'Preferred Width': 'العرض المفضل',
+            'Points': 'نقاط',
+            'Percent': 'المائه',
+            'Measure in': 'القياس في',
+            'Alignment': 'محاذاه',
+            'Left': 'ليسار',
+            'Center': 'مركز',
+            'Right': 'الحق',
+            'Justify': 'تبرير',
+            'Indent from left': 'مسافة بادئه من اليسار',
+            'Borders and Shading': 'الحدود والتظليل',
+            'Options': 'خيارات',
+            'Specify height': 'تحديد الارتفاع',
+            'At least': 'الاقل',
+            'Exactly': 'تماما',
+            'Row height is': 'ارتفاع الصف هو',
+            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
+            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
+            'Vertical alignment': 'محاذاة عمودي',
+            'Top': 'أعلى',
+            'Bottom': 'اسفل',
+            'Default cell margins': 'هوامش الخلية الافتراضية',
+            'Default cell spacing': 'تباعد الخلايا الافتراضي',
+            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
+            'Cell margins': 'هوامش الخلية',
+            'Same as the whole table': 'نفس الجدول بأكمله',
+            'Borders': 'الحدود',
+            'None': 'اي',
+            'Single': 'واحد',
+            'Dot': 'نقطه',
+            'DashSmallGap': 'داشسمجاب',
+            'DashLargeGap': 'الاتحاد الخاص',
+            'DashDot': 'داشدوت',
+            'DashDotDot': 'ددهدودوت',
+            'Double': 'انقر نقرا مزدوجا',
+            'Triple': 'الثلاثي',
+            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
+            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
+            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
+            'ThinThickMediumGap': 'فجوه متوسطه سميك',
+            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
+            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
+            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
+            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
+            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
+            'SingleWavy': 'واحد مائج',
+            'DoubleWavy': 'مزدوج مائج',
+            'DashDotStroked': 'اندفاعه نقطه القوية',
+            'Emboss3D': 'D3مزخرف',
+            'Engrave3D': 'D3نقش',
+            'Outset': 'البدايه',
+            'Inset': 'الداخلي',
+            'Thick': 'سميكه',
+            'Style': 'نمط',
+            'Width': 'عرض',
+            'Height': 'ارتفاع',
+            'Letter': 'رساله',
+            'Tabloid': 'التابلويد',
+            'Legal': 'القانونيه',
+            'Statement': 'بيان',
+            'Executive': 'التنفيذي',
+            'A3': 'A3',
+            'A4': 'A4',
+            'A5': 'A5',
+            'B4': 'B4',
+            'B5': 'B5',
+            'Custom Size': 'حجم مخصص',
+            'Different odd and even': 'مختلفه غريبه وحتى',
+            'Different first page': 'الصفحة الاولي مختلفه',
+            'From edge': 'من الحافة',
+            'Header': 'راس',
+            'Footer': 'تذييل الصفحه',
+            'Margin': 'الهوامش',
+            'Paper': 'الورق',
+            'Layout': 'تخطيط',
+            'Orientation': 'التوجه',
+            'Landscape': 'المناظر الطبيعيه',
+            'Portrait': 'صوره',
+            'Table Of Contents': 'جدول المحتويات',
+            'Show page numbers': 'إظهار أرقام الصفحات',
+            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
+            'Nothing': 'شيء',
+            'Tab leader': 'قائد علامة التبويب',
+            'Show levels': 'إظهار المستويات',
+            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
+            'Build table of contents from': 'بناء جدول محتويات من',
+            'Styles': 'انماط',
+            'Available styles': 'الأنماط المتوفرة',
+            'TOC level': 'مستوي جدول المحتويات',
+            'Heading': 'عنوان',
+            'Heading 1': 'عنوان 1',
+            'Heading 2': 'عنوان 2',
+            'Heading 3': 'عنوان 3',
+            'Heading 4': 'عنوان 4',
+            'Heading 5': 'عنوان 5',
+            'Heading 6': 'عنوان 6',
+            'List Paragraph': 'فقره القائمة',
+            'Normal': 'العاديه',
+            'Outline levels': 'مستويات المخطط التفصيلي',
+            'Table entry fields': 'حقول إدخال الجدول',
+            'Modify': 'تعديل',
+            'Color': 'لون',
+            'Setting': 'اعداد',
+            'Box': 'مربع',
+            'All': 'جميع',
+            'Custom': 'المخصصه',
+            'Preview': 'معاينه',
+            'Shading': 'التظليل',
+            'Fill': 'ملء',
+            'Apply To': 'تنطبق علي',
+            'Table Properties': 'خصائص الجدول',
+            'Cell Options': 'خيارات الخلية',
+            'Table Options': 'خيارات الجدول',
+            'Insert Table': 'ادراج جدول',
+            'Number of columns': 'عدد الاعمده',
+            'Number of rows': 'عدد الصفوف',
+            'Text to display': 'النص الذي سيتم عرضه',
+            'Address': 'عنوان',
+            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
+            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
+            'Insert': 'ادراج',
+            'General': 'العامه',
+            'Indentation': 'المسافه البادئه',
+            'Before text': 'قبل النص',
+            'Special': 'الخاصه',
+            'First line': 'السطر الأول',
+            'Hanging': 'معلقه',
+            'After text': 'بعد النص',
+            'By': 'من',
+            'Before': 'قبل',
+            'Line Spacing': 'تباعد الأسطر',
+            'After': 'بعد',
+            'At': 'في',
+            'Multiple': 'متعدده',
+            'Spacing': 'تباعد',
+            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
+            'List level': 'مستوي القائمة',
+            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
+            'Level': 'مستوي',
+            'Number format': 'تنسيق الأرقام',
+            'Number style for this level': 'نمط الرقم لهذا المستوي',
+            'Enter formatting for number': 'إدخال تنسيق لرقم',
+            'Start at': 'بداية من',
+            'Restart list after': 'أعاده تشغيل قائمه بعد',
+            'Position': 'موقف',
+            'Text indent at': 'المسافة البادئة للنص في',
+            'Aligned at': 'محاذاة في',
+            'Follow number with': 'اتبع الرقم مع',
+            'Tab character': 'حرف علامة التبويب',
+            'Space': 'الفضاء',
+            'Arabic': 'العربية',
+            'UpRoman': 'حتى الروماني',
+            'LowRoman': 'الرومانية منخفضه',
+            'UpLetter': '',
+            'LowLetter': '',
+            'Number': 'عدد',
+            'Leading zero': 'يؤدي صفر',
+            'Bullet': 'رصاصه',
+            'Ordinal': 'الترتيبيه',
+            'Ordinal Text': 'النص الترتيبي',
+            'For East': 'للشرق',
+            'No Restart': 'لا أعاده تشغيل',
+            'Font': 'الخط',
+            'Font style': 'نمط الخط',
+            'Underline style': 'نمط التسطير',
+            'Font color': 'لون الخط',
+            'Effects': 'الاثار',
+            'Strikethrough': 'يتوسطه',
+            'Superscript': 'مرتفع',
+            'Subscript': 'منخفض',
+            'Double strikethrough': 'خط مزدوج يتوسطه خط',
+            'Regular': 'العاديه',
+            'Bold': 'جريئه',
+            'Italic': 'مائل',
+            'Cut': 'قطع',
+            'Copy': 'نسخ',
+            'Paste': 'لصق',
+            'Hyperlink': 'الارتباط التشعبي',
+            'Open Hyperlink': 'فتح ارتباط تشعبي',
+            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
+            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
+            'Paragraph': 'الفقره',
+            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
+            'Character': 'حرف',
+            'Merge Cells': 'دمج الخلايا',
+            'Insert Above': 'ادراج أعلاه',
+            'Insert Below': 'ادراج أدناه',
+            'Insert Left': 'ادراج إلى اليسار',
+            'Insert Right': 'ادراج اليمين',
+            'Delete': 'حذف',
+            'Delete Table': 'حذف جدول',
+            'Delete Row': 'حذف صف',
+            'Delete Column': 'حذف عمود',
+            'File Name': 'اسم الملف',
+            'Format Type': 'نوع التنسيق',
+            'Save': 'حفظ',
+            'Navigation': 'التنقل',
+            'Results': 'نتائج',
+            'Replace': 'استبدال',
+            'Replace All': 'استبدال الكل',
+            'We replaced all': 'استبدلنا جميع',
+            'Find': 'العثور',
+            'No matches': 'لا توجد تطابقات',
+            'All Done': 'كل القيام به',
+            'Result': 'نتيجه',
+            'of': 'من',
+            'instances': 'الحالات',
+            'with': 'مع',
+            'Click to follow link': 'انقر لمتابعه الارتباط',
+            'Continue Numbering': 'متابعه الترقيم',
+            'Bookmark name': 'اسم الإشارة المرجعية',
+            'Close': 'اغلاق',
+            'Restart At': 'أعاده التشغيل عند',
+            'Properties': 'خصائص',
+            'Name': 'اسم',
+            'Style type': 'نوع النمط',
+            'Style based on': 'نمط استنادا إلى',
+            'Style for following paragraph': 'نمط للفقرة التالية',
+            'Formatting': 'التنسيق',
+            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
+            'Numbering': 'ترقيم',
+            'Update Field': 'تحديث الحقل',
+            'Edit Field': 'تحرير الحقل',
+            'Bookmark': 'الإشارة المرجعية',
+            'Page Setup': 'اعداد الصفحة',
+            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
+            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
+                + '</br>' + 'الفصل نون-البند' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
+                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
+            'Format': 'تنسيق',
+            'Create New Style': 'إنشاء نمط جديد',
+            'Modify Style': 'تعديل النمط',
+            'New': 'الجديد',
+            'Bullets': 'الرصاص',
+            'Use bookmarks': 'استخدام الإشارات المرجعية',
+            'Table of Contents': 'جدول المحتويات',
+            'AutoFit': 'الاحتواء',
+            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
+            'AutoFit to Window': 'احتواء تلقائي للإطار',
+            'Fixed Column Width': 'عرض العمود الثابت',
+            'Reset': 'اعاده تعيين',
+            'Match case': 'حاله المباراة',
+            'Whole words': 'كلمات كامل',
+            'Add': 'اضافه',
+            'Go To': 'الانتقال إلى',
+            'Search for': 'البحث عن',
+            'Replace with': 'استبدال',
+            'TOC 1': 'جدول المحتويات 1',
+            'TOC 2': 'جدول المحتويات 2',
+            'TOC 3': 'جدول المحتويات 3',
+            'TOC 4': 'جدول المحتويات 4',
+            'TOC 5': 'جدول المحتويات 5',
+            'TOC 6': 'جدول المحتويات 6',
+            'TOC 7': 'جدول المحتويات 7',
+            'TOC 8': 'جدول المحتويات 8',
+            'TOC 9': 'جدول المحتويات 9',
+            'Right-to-left': 'من اليمين إلى اليسار',
+            'Left-to-right': 'من اليسار إلى اليمين',
+            'Direction': 'الاتجاه',
+            'Table direction': 'اتجاه الجدول',
+            'Indent from right': 'مسافة بادئه من اليمين',
+            'Page': 'صفحه',
+            'Fit one page': 'احتواء صفحه واحد',
+            'Fit page width': 'احتواء عرض الصفحة',
+            // tslint:disable-next-line:max-line-length
+            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
+        },
+        'colorpicker': {
+            'Apply': 'تطبيق',
+            'Cancel': 'إلغاء الأمر',
+            'ModeSwitcher': 'مفتاح كهربائي الوضع'
+        }
+    }
+});
+function App() {
+    let documenteditor: DocumentEditorComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function componentDidMount() {
+        let sfdt: string = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "characterFormat": {
+                                "fontSize": 18.0,
+                                "fontFamily": "Calibri",
+                                "fontFamilyBidi": "Calibri"
+                            },
+                            "paragraphFormat": {
+                                "beforeSpacing": 18.0,
+                                "afterSpacing": 30.0,
+                                "styleName": "Heading 1",
+                                "bidi": true
+                            },
+                            "inlines": [
+                                {
+                                    "text": "اعمال المغامرة دورات",
+                                    "characterFormat": {
+                                        "fontSize": 18.0,
+                                        "bidi": true,
+                                        "fontSizeBidi": 18.0
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }`;
+
+        setTimeout(() => {
+            //Open the document in Document Editor.
+            documenteditor.open(sfdt);
+        });
+    }
+
+    return (
+        <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }}
+            isReadOnly={false} enablePrint={true}
+            enableSelection={true} enableEditor={true} enableEditorHistory={true}
+            enableContextMenu={true} enableSearch={true} enableOptionsPane={true}
+            enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true}
+            enablePageSetupDialog={true} enableSfdtExport={true}
+            enableStyleDialog={true} enableTableOfContentsDialog={true}
+            enableTableOptionsDialog={true} enableTablePropertiesDialog={true}
+            enableTextExport={true} enableWordExport={true} enableRtl={true} locale={'ar-AE'} />
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/systemjs.config.js
new file mode 100644
index 000000000..20c523a52
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/rtl-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",  
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",      
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/app/index.jsx
new file mode 100644
index 000000000..6a7ce5c88
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/app/index.jsx
@@ -0,0 +1,35 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Editor, Selection } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Editor, Selection);
+function App() {
+    let container;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function created() {
+        container.documentEditorSettings.showRuler = true;     
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    function onClick() {
+        container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
+    }
+    return (<div>
+        <button id='container_ruler_button' onClick={onClick}>Show/Hide Ruler</button>
+        <DocumentEditorComponent id="container" height={'590px'} isReadOnly={false} ref={(scope) => {
+            container = scope;
+            created();
+        }} enableEditor={true} enableSelection={true}
+            serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+        />
+    </div>
+        
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/app/index.tsx
new file mode 100644
index 000000000..ec42d500e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/app/index.tsx
@@ -0,0 +1,45 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Editor, Selection } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Editor, Selection);
+
+
+function App() {
+    let container: DocumentEditorComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+
+    function created() {
+        container.documentEditorSettings.showRuler = true;  
+    }
+
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+
+    function onClick() {
+        container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
+    }
+
+    return ( <div>
+        <button id='container_ruler_button' onClick={onClick}>Show/Hide Ruler</button>
+        <DocumentEditorComponent id="container" height={'590px'} isReadOnly={false} ref={(scope) => {
+            container = scope;
+            created();
+        }} enableEditor={true} enableSelection={true}
+            serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+        />
+    </div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('root'));
+
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/index.html
new file mode 100644
index 000000000..377569d6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='root'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/systemjs.config.js
new file mode 100644
index 000000000..5bf47d429
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/app/index.jsx
new file mode 100644
index 000000000..c95776d89
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/app/index.jsx
@@ -0,0 +1,36 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let documenteditorcontainer;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function onClick() {
+        documenteditorcontainer.documentEditorSettings.showRuler = !documenteditorcontainer.documentEditorSettings.showRuler;
+    }
+
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    function created() {
+        documenteditorcontainer.documentEditorSettings.showRuler = true;
+    }
+    return (
+        <div>
+            <button id='container_ruler_button' onClick={onClick}>Show/Hide Ruler</button>
+        <DocumentEditorContainerComponent height={'590px'} id="container" ref={(scope) => {
+            documenteditorcontainer = scope;
+            created();
+        }}
+            serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} />
+        </div>
+        
+        );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/app/index.tsx
new file mode 100644
index 000000000..cb5d4fe35
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/app/index.tsx
@@ -0,0 +1,38 @@
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let documenteditorcontainer: DocumentEditorContainerComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function onClick() {
+        documenteditorcontainer.documentEditorSettings.showRuler = !documenteditorcontainer.documentEditorSettings.showRuler;
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            created();
+        });
+    }
+    function created() {
+        documenteditorcontainer.documentEditorSettings.showRuler = true;
+    }
+    return (
+        <div>
+            <button id='container_ruler_button' onClick={onClick}>Show/Hide Ruler</button>
+            <DocumentEditorContainerComponent height={'590px'} id="container" ref={(scope) => {
+                documenteditorcontainer = scope;
+                created();
+            }}
+            serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true} />
+        </div>
+
+        
+        )
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('root'))
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/index.html
new file mode 100644
index 000000000..ff5f74246
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='root'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/ruler-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/index.jsx
new file mode 100644
index 000000000..bffdb02b0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/index.jsx
@@ -0,0 +1,76 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Selection, Editor);
+function App() {
+    let documenteditor;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function onLoadDefault() {
+        let defaultDocument = {
+            sections: [
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'First page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'Second page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+            ],
+            characterFormat: {},
+            paragraphFormat: {},
+            background: {
+                color: '#FFFFFFFF',
+            },
+            styles: [
+                {
+                    type: 'Paragraph',
+                    name: 'Normal',
+                    next: 'Normal',
+                },
+                {
+                    type: 'Character',
+                    name: 'Default Paragraph Font',
+                },
+            ],
+        };
+        documenteditor.open(JSON.stringify(defaultDocument));
+        documenteditor.focusIn();
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            //Load default document.
+            onLoadDefault();
+            //Scroll to specified page.
+            documenteditor.scrollToPage(2);
+        });
+    }
+    return (<DocumentEditorComponent id="DocumentEditor" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableEditor={true} />);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/index.tsx
new file mode 100644
index 000000000..8e8414cbf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/app/index.tsx
@@ -0,0 +1,79 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Selection, Editor);
+function App() {
+    let documenteditor: DocumentEditorComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function onLoadDefault() {
+        let defaultDocument: object = {
+            sections: [
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'First page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'Second page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+            ],
+            characterFormat: {},
+            paragraphFormat: {},
+            background: {
+                color: '#FFFFFFFF',
+            },
+            styles: [
+                {
+                    type: 'Paragraph',
+                    name: 'Normal',
+                    next: 'Normal',
+                },
+                {
+                    type: 'Character',
+                    name: 'Default Paragraph Font',
+                },
+            ],
+        };
+        documenteditor.open(JSON.stringify(defaultDocument));
+        documenteditor.focusIn();
+    }
+
+    function componentDidMount() {
+        setTimeout(() => {
+            //Load default document.
+            onLoadDefault();
+            //Scroll to specified page.
+            documenteditor.scrollToPage(2);
+        });
+    }
+    return (
+        <DocumentEditorComponent id="DocumentEditor" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableEditor={true} />
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/index.css
new file mode 100644
index 000000000..befaa5fb6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/index.css
@@ -0,0 +1,47 @@
+#loader {
+  color: #008cff;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+.e-de-statusbar-zoom {
+  float: right;
+  text-align: center;
+  padding: 2px;
+  line-height: 19px;
+  margin-top: 1px;
+}
+
+#page {
+  margin: 6px 2px 0 0;
+}
+
+#editablePageNumber {
+  border: 1px solid #F1F1F1;
+  display: inline-flex;
+  height: 17px;
+  padding: 0 4px;
+}
+
+#documenteditor_page_no {
+  text-transform: capitalize;
+  white-space: pre;
+  overflow: hidden;
+  user-select: none;
+  cursor: text;
+  height: 17px;
+  max-width: 150px;
+}
+
+#of {
+  margin: 0 0 0 2px;
+  letter-spacing: 1.05px;
+}
+
+#documenteditor_pagecount {
+  margin: 0 0 0 2px;
+  letter-spacing: 1.05px;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/systemjs.config.js
new file mode 100644
index 000000000..a223ecb0e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+        "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js",   
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/index.jsx
new file mode 100644
index 000000000..642b9a7ab
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/index.jsx
@@ -0,0 +1,94 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog, } from '@syncfusion/ej2-react-documenteditor';
+//Inject require modules.
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+function App() {
+    let documenteditor;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function onLoadDefaultDocument() {
+        let defaultDocument = {
+            sections: [
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'First page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'Second page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'Third page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+            ],
+            characterFormat: {},
+            paragraphFormat: {},
+            background: {
+                color: '#FFFFFFFF',
+            },
+            styles: [
+                {
+                    type: 'Paragraph',
+                    name: 'Normal',
+                    next: 'Normal',
+                },
+                {
+                    type: 'Character',
+                    name: 'Default Paragraph Font',
+                },
+            ],
+        };
+        documenteditor.open(JSON.stringify(defaultDocument));
+        documenteditor.focusIn();
+    }
+    function componentDidMount() {
+        setTimeout(() => {
+            //Load default document.
+            onLoadDefaultDocument();
+            //Navigate to specified page.
+            documenteditor.viewer.scrollToPage(3);
+        });
+    }
+    return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {
+            documenteditor = scope;
+        }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/index.tsx
new file mode 100644
index 000000000..9ed200845
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/app/index.tsx
@@ -0,0 +1,126 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require modules.
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+function App() {
+    let documenteditor: DocumentEditorComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function onLoadDefaultDocument(): void {
+        let defaultDocument: object = {
+            sections: [
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'First page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'Second page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+                {
+                    blocks: [
+                        {
+                            paragraphFormat: {
+                                styleName: 'Normal',
+                            },
+                            inlines: [
+                                {
+                                    text: 'Third page',
+                                },
+                            ],
+                        },
+                    ],
+                    headersFooters: {},
+                },
+            ],
+            characterFormat: {},
+            paragraphFormat: {},
+            background: {
+                color: '#FFFFFFFF',
+            },
+            styles: [
+                {
+                    type: 'Paragraph',
+                    name: 'Normal',
+                    next: 'Normal',
+                },
+                {
+                    type: 'Character',
+                    name: 'Default Paragraph Font',
+                },
+            ],
+        };
+        documenteditor.open(JSON.stringify(defaultDocument));
+        documenteditor.focusIn();
+    }
+
+    function componentDidMount() {
+        setTimeout(() => {
+            //Load default document.
+            onLoadDefaultDocument();
+            //Navigate to specified page.
+            documenteditor.viewer.scrollToPage(3);
+        });
+    }
+    return (
+        <DocumentEditorComponent
+            id="container"
+            height={'330px'}
+            ref={(scope) => {
+                documenteditor = scope;
+            }}
+            isReadOnly={false}
+            enablePrint={true}
+            enableSelection={true}
+            enableEditor={true}
+            enableEditorHistory={true}
+            enableContextMenu={true}
+            enableSearch={true}
+            enableOptionsPane={true}
+            enableBookmarkDialog={true}
+            enableBordersAndShadingDialog={true}
+            enableFontDialog={true}
+            enableTableDialog={true}
+            enableParagraphDialog={true}
+            enableHyperlinkDialog={true}
+            enableImageResizer={true}
+            enableListDialog={true}
+            enablePageSetupDialog={true}
+            enableSfdtExport={true}
+            enableStyleDialog={true}
+            enableTableOfContentsDialog={true}
+            enableTableOptionsDialog={true}
+            enableTablePropertiesDialog={true}
+            enableTextExport={true}
+            enableWordExport={true}
+        />
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/index.css
new file mode 100644
index 000000000..befaa5fb6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/index.css
@@ -0,0 +1,47 @@
+#loader {
+  color: #008cff;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+.e-de-statusbar-zoom {
+  float: right;
+  text-align: center;
+  padding: 2px;
+  line-height: 19px;
+  margin-top: 1px;
+}
+
+#page {
+  margin: 6px 2px 0 0;
+}
+
+#editablePageNumber {
+  border: 1px solid #F1F1F1;
+  display: inline-flex;
+  height: 17px;
+  padding: 0 4px;
+}
+
+#documenteditor_page_no {
+  text-transform: capitalize;
+  white-space: pre;
+  overflow: hidden;
+  user-select: none;
+  cursor: text;
+  height: 17px;
+  max-width: 150px;
+}
+
+#of {
+  margin: 0 0 0 2px;
+  letter-spacing: 1.05px;
+}
+
+#documenteditor_pagecount {
+  margin: 0 0 0 2px;
+  letter-spacing: 1.05px;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/systemjs.config.js
new file mode 100644
index 000000000..a223ecb0e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+        "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js",   
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/index.jsx
new file mode 100644
index 000000000..614e792d7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/index.jsx
@@ -0,0 +1,227 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+  DocumentEditorComponent,
+  Print,
+  SfdtExport,
+  WordExport,
+  TextExport,
+  Selection,
+  Search,
+  Editor,
+  ImageResizer,
+  EditorHistory,
+  ContextMenu,
+  OptionsPane,
+  HyperlinkDialog,
+  TableDialog,
+  BookmarkDialog,
+  TableOfContentsDialog,
+  PageSetupDialog,
+  StyleDialog,
+  ListDialog,
+  ParagraphDialog,
+  BulletsAndNumberingDialog,
+  FontDialog,
+  TablePropertiesDialog,
+  BordersAndShadingDialog,
+  TableOptionsDialog,
+  CellOptionsDialog,
+  StylesDialog,
+} from '@syncfusion/ej2-react-documenteditor';
+import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
+
+DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
+
+function App() {
+  const documentEditorRef = React.useRef(null);
+  const pageCountRef = React.useRef(null);
+  const editablePageNumberRef = React.useRef(null);
+  const pageNumberLabelRef = React.useRef(null);
+  const zoomRef = React.useRef(null);
+  let startPage = 1;
+  let editorPageCount;
+
+  const items = [
+    { text: '200%' },
+    { text: '175%' },
+    { text: '150%' },
+    { text: '125%' },
+    { text: '100%' },
+    { text: '75%' },
+    { text: '50%' },
+    { text: '25%' },
+    { separator: true },
+    { text: 'Fit one page' },
+    { text: 'Fit page width' },
+  ];
+
+  React.useEffect(() => {
+    const documenteditor = documentEditorRef.current;
+
+    if (documenteditor) {
+      documenteditor.viewChange = (e) => updatePageNumberOnViewChange(e);
+      documenteditor.contentChange = () => updatePageCount();
+
+      if (editablePageNumberRef.current) {
+        editablePageNumberRef.current.onclick = () => updateDocumentEditorPageNumber();
+        editablePageNumberRef.current.onkeydown = (e) => onKeyDown(e);
+        editablePageNumberRef.current.onblur = () => onBlur();
+      }
+
+      updatePageCount();
+      updatePageNumber();
+    }
+  }, []);
+
+  function updatePageNumberOnViewChange(args) {
+    const documenteditor = documentEditorRef.current;
+    if (
+      documenteditor.selection &&
+      documenteditor.selection.startPage >= args.startPage &&
+      documenteditor.selection.startPage <= args.endPage
+    ) {
+      startPage = documenteditor.selection.startPage;
+    } else {
+      startPage = args.startPage;
+    }
+    updatePageNumber();
+  }
+
+  function onBlur() {
+    const editablePageNumber = editablePageNumberRef.current;
+    if (
+      editablePageNumber.textContent === '' ||
+      parseInt(editablePageNumber.textContent, 0) > editorPageCount
+    ) {
+      updatePageNumber();
+    }
+    editablePageNumber.contentEditable = 'false';
+  }
+
+  function onKeyDown(e) {
+    const documenteditor = documentEditorRef.current;
+    const editablePageNumber = editablePageNumberRef.current;
+    if (e.which === 13) {
+      e.preventDefault();
+      const pageNumber = parseInt(editablePageNumber.textContent, 0);
+      if (pageNumber > editorPageCount) {
+        updatePageNumber();
+      } else {
+        if (documenteditor.selection) {
+          documenteditor.selection.goToPage(pageNumber);
+        } else {
+          documenteditor.scrollToPage(pageNumber);
+        }
+      }
+      editablePageNumber.contentEditable = 'false';
+      if (editablePageNumber.textContent === '') {
+        updatePageNumber();
+      }
+    }
+    if (e.which > 64) {
+      e.preventDefault();
+    }
+  }
+
+  function onZoom(args) {
+    setZoomValue(args.item.text);
+    updateZoomContent();
+  }
+
+  function setZoomValue(text) {
+    const documenteditor = documentEditorRef.current;
+    if (text.match('Fit one page')) {
+      documenteditor.fitPage('FitOnePage');
+    } else if (text.match('Fit page width')) {
+      documenteditor.fitPage('FitPageWidth');
+    } else {
+      documenteditor.zoomFactor = parseInt(text, 0) / 100;
+    }
+  }
+
+  function updateZoomContent() {
+    if (zoomRef.current) {
+      zoomRef.current.content = Math.round(documentEditorRef.current.zoomFactor * 100) + '%';
+    }
+  }
+
+  function updatePageNumber() {
+    if (pageNumberLabelRef.current) {
+      pageNumberLabelRef.current.textContent = startPage.toString();
+    }
+  }
+
+  function updatePageCount() {
+    const documenteditor = documentEditorRef.current;
+    editorPageCount = documenteditor.pageCount;
+    if (pageCountRef.current) {
+      pageCountRef.current.textContent = editorPageCount.toString();
+    }
+  }
+
+  function updateDocumentEditorPageNumber() {
+    const editPageNumber = editablePageNumberRef.current;
+    if (editPageNumber) {
+      editPageNumber.contentEditable = 'true';
+      editPageNumber.focus();
+      window.getSelection().selectAllChildren(editPageNumber);
+    }
+  }
+
+  return (
+    <div>
+      <DocumentEditorComponent
+        id="container"
+        height={'330px'}
+        ref={documentEditorRef}
+        isReadOnly={false}
+        enablePrint={true}
+        enableSelection={true}
+        enableEditor={true}
+        enableEditorHistory={true}
+        enableContextMenu={true}
+        enableSearch={true}
+        enableOptionsPane={true}
+        enableBookmarkDialog={true}
+        enableBordersAndShadingDialog={true}
+        enableFontDialog={true}
+        enableTableDialog={true}
+        enableParagraphDialog={true}
+        enableHyperlinkDialog={true}
+        enableImageResizer={true}
+        enableListDialog={true}
+        enablePageSetupDialog={true}
+        enableSfdtExport={true}
+        enableStyleDialog={true}
+        enableTableOfContentsDialog={true}
+        enableTableOptionsDialog={true}
+        enableTablePropertiesDialog={true}
+        enableTextExport={true}
+        enableWordExport={true}
+      />
+      <div id="page-fit-type-div">
+        <label id="page"> Page </label>
+        <div id="editablePageNumber" ref={editablePageNumberRef}>
+          <label id="documenteditor_page_no" ref={pageNumberLabelRef} />
+        </div>
+        <label id="of">of</label>
+        <label id="documenteditor_pagecount" ref={pageCountRef} />
+        <DropDownButtonComponent
+          ref={zoomRef}
+          items={items}
+          cssClass="e-de-statusbar-zoom"
+          select={onZoom}
+        >
+          100%
+        </DropDownButtonComponent>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+ReactDOM.render(<App />, document.getElementById('sample'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/index.tsx
new file mode 100644
index 000000000..48d4db3b0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/app/index.tsx
@@ -0,0 +1,255 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+  DocumentEditorComponent,
+  Print,
+  SfdtExport,
+  WordExport,
+  TextExport,
+  Selection,
+  Search,
+  Editor,
+  ImageResizer,
+  EditorHistory,
+  ContextMenu,
+  OptionsPane,
+  HyperlinkDialog,
+  TableDialog,
+  BookmarkDialog,
+  TableOfContentsDialog,
+  PageSetupDialog,
+  StyleDialog,
+  ListDialog,
+  ParagraphDialog,
+  BulletsAndNumberingDialog,
+  FontDialog,
+  TablePropertiesDialog,
+  BordersAndShadingDialog,
+  TableOptionsDialog,
+  CellOptionsDialog,
+  StylesDialog,
+} from '@syncfusion/ej2-react-documenteditor';
+import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
+
+DocumentEditorComponent.Inject(
+  Print,
+  SfdtExport,
+  WordExport,
+  TextExport,
+  Selection,
+  Search,
+  Editor,
+  ImageResizer,
+  EditorHistory,
+  ContextMenu,
+  OptionsPane,
+  HyperlinkDialog,
+  TableDialog,
+  BookmarkDialog,
+  TableOfContentsDialog,
+  PageSetupDialog,
+  StyleDialog,
+  ListDialog,
+  ParagraphDialog,
+  BulletsAndNumberingDialog,
+  FontDialog,
+  TablePropertiesDialog,
+  BordersAndShadingDialog,
+  TableOptionsDialog,
+  CellOptionsDialog,
+  StylesDialog
+);
+
+function App() {
+  const documentEditorRef: DocumentEditorComponent = React.useRef(null);
+  const pageCountRef:any = React.useRef(null);
+  const editablePageNumberRef: any = React.useRef(null);
+  const pageNumberLabelRef: any = React.useRef(null);
+  const zoomRef: any = React.useRef(null);
+  let startPage = 1;
+  let editorPageCount: any;
+
+  const items: ItemModel[] = [
+    { text: '200%' },
+    { text: '175%' },
+    { text: '150%' },
+    { text: '125%' },
+    { text: '100%' },
+    { text: '75%' },
+    { text: '50%' },
+    { text: '25%' },
+    { separator: true },
+    { text: 'Fit one page' },
+    { text: 'Fit page width' },
+  ];
+
+  React.useEffect(() => {
+    const documenteditor = documentEditorRef.current;
+
+    if (documenteditor) {
+      documenteditor.viewChange = (e) => updatePageNumberOnViewChange(e);
+      documenteditor.contentChange = () => updatePageCount();
+
+      if (editablePageNumberRef.current) {
+        editablePageNumberRef.current.onclick = () => updateDocumentEditorPageNumber();
+        editablePageNumberRef.current.onkeydown = (e) => onKeyDown(e);
+        editablePageNumberRef.current.onblur = () => onBlur();
+      }
+
+      updatePageCount();
+      updatePageNumber();
+    }
+  }, []);
+
+  function updatePageNumberOnViewChange(args: any) {
+    const documenteditor = documentEditorRef.current;
+    if (
+      documenteditor?.selection &&
+      documenteditor.selection.startPage >= args.startPage &&
+      documenteditor.selection.startPage <= args.endPage
+    ) {
+      startPage = documenteditor.selection.startPage;
+    } else {
+      startPage = args.startPage;
+    }
+    updatePageNumber();
+  }
+
+  function onBlur() {
+    const editablePageNumber = editablePageNumberRef.current;
+    if (
+      editablePageNumber?.textContent === '' ||
+      parseInt(editablePageNumber.textContent, 0) > editorPageCount
+    ) {
+      updatePageNumber();
+    }
+    if (editablePageNumber) editablePageNumber.contentEditable = 'false';
+  }
+
+  function onKeyDown(e: any) {
+    const documenteditor = documentEditorRef.current;
+    const editablePageNumber = editablePageNumberRef.current;
+    if (e.which === 13) {
+      e.preventDefault();
+      const pageNumber = parseInt(editablePageNumber?.textContent || '0', 0);
+      if (pageNumber > editorPageCount) {
+        updatePageNumber();
+      } else {
+        if (documenteditor?.selection) {
+          documenteditor.selection.goToPage(pageNumber);
+        } else {
+          documenteditor?.scrollToPage(pageNumber);
+        }
+      }
+      if (editablePageNumber) editablePageNumber.contentEditable = 'false';
+      if (editablePageNumber?.textContent === '') {
+        updatePageNumber();
+      }
+    }
+    if (e.which > 64) {
+      e.preventDefault();
+    }
+  }
+
+  function onZoom(args: any) {
+    setZoomValue(args.item.text);
+    updateZoomContent();
+  }
+
+  function setZoomValue(text: string) {
+    const documenteditor = documentEditorRef.current;
+    if (text.match('Fit one page')) {
+      documenteditor?.fitPage('FitOnePage');
+    } else if (text.match('Fit page width')) {
+      documenteditor?.fitPage('FitPageWidth');
+    } else {
+      documenteditor.zoomFactor = parseInt(text, 0) / 100;
+    }
+  }
+
+  function updateZoomContent() {
+    if (zoomRef.current) {
+      zoomRef.current.content = Math.round(documentEditorRef.current?.zoomFactor * 100) + '%';
+    }
+  }
+
+  function updatePageNumber() {
+    if (pageNumberLabelRef.current) {
+      pageNumberLabelRef.current.textContent = startPage.toString();
+    }
+  }
+
+  function updatePageCount() {
+    const documenteditor = documentEditorRef.current;
+    editorPageCount = documenteditor?.pageCount || 0;
+    if (pageCountRef.current) {
+      pageCountRef.current.textContent = editorPageCount.toString();
+    }
+  }
+
+  function updateDocumentEditorPageNumber() {
+    const editPageNumber = editablePageNumberRef.current;
+    if (editPageNumber) {
+      editPageNumber.contentEditable = 'true';
+      editPageNumber.focus();
+      window.getSelection()?.selectAllChildren(editPageNumber);
+    }
+  }
+
+  return (
+    <div>
+      <DocumentEditorComponent
+        id="container"
+        height={'330px'}
+        ref={documentEditorRef}
+        isReadOnly={false}
+        enablePrint={true}
+        enableSelection={true}
+        enableEditor={true}
+        enableEditorHistory={true}
+        enableContextMenu={true}
+        enableSearch={true}
+        enableOptionsPane={true}
+        enableBookmarkDialog={true}
+        enableBordersAndShadingDialog={true}
+        enableFontDialog={true}
+        enableTableDialog={true}
+        enableParagraphDialog={true}
+        enableHyperlinkDialog={true}
+        enableImageResizer={true}
+        enableListDialog={true}
+        enablePageSetupDialog={true}
+        enableSfdtExport={true}
+        enableStyleDialog={true}
+        enableTableOfContentsDialog={true}
+        enableTableOptionsDialog={true}
+        enableTablePropertiesDialog={true}
+        enableTextExport={true}
+        enableWordExport={true}
+      />
+      <div id="page-fit-type-div">
+        <label id="page"> Page </label>
+        <div id="editablePageNumber" ref={editablePageNumberRef}>
+          <label id="documenteditor_page_no" ref={pageNumberLabelRef} />
+        </div>
+        <label id="of">of</label>
+        <label id="documenteditor_pagecount" ref={pageCountRef} />
+        <DropDownButtonComponent
+          ref={zoomRef}
+          items={items}
+          cssClass="e-de-statusbar-zoom"
+          select={onZoom}
+        >
+          100%
+        </DropDownButtonComponent>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/index.css
new file mode 100644
index 000000000..befaa5fb6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/index.css
@@ -0,0 +1,47 @@
+#loader {
+  color: #008cff;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+.e-de-statusbar-zoom {
+  float: right;
+  text-align: center;
+  padding: 2px;
+  line-height: 19px;
+  margin-top: 1px;
+}
+
+#page {
+  margin: 6px 2px 0 0;
+}
+
+#editablePageNumber {
+  border: 1px solid #F1F1F1;
+  display: inline-flex;
+  height: 17px;
+  padding: 0 4px;
+}
+
+#documenteditor_page_no {
+  text-transform: capitalize;
+  white-space: pre;
+  overflow: hidden;
+  user-select: none;
+  cursor: text;
+  height: 17px;
+  max-width: 150px;
+}
+
+#of {
+  margin: 0 0 0 2px;
+  letter-spacing: 1.05px;
+}
+
+#documenteditor_pagecount {
+  margin: 0 0 0 2px;
+  letter-spacing: 1.05px;
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/index.html
new file mode 100644
index 000000000..100ed3b3e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/systemjs.config.js
new file mode 100644
index 000000000..492064c9f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/scrolling-zooming-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", 
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js", 
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",       
+        "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js",   
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/App.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/App.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/index.jsx
new file mode 100644
index 000000000..f0101d8ab
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/index.jsx
@@ -0,0 +1,38 @@
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
+import { showSpinner, hideSpinner, createSpinner } from '@syncfusion/ej2-popups';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let container;
+    React.useEffect(() => {
+        componentDidMount();
+    }, []);
+    function componentDidMount() {
+        createSpinner({
+            // Specify the target for the spinner to show
+            target: document.getElementById('container')
+        });
+    }
+    function onClick() {
+        // load your default document here
+        let data = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+        // showSpinner() will make the spinner visible
+        showSpinner(document.getElementById('container'));
+        // Open the default document
+        container.documentEditor.open(data);
+        setInterval(function () {
+            // hideSpinner() method used hide spinner
+            hideSpinner(document.getElementById('container'));
+        }, 5000);
+    }
+    return (<div>
+            <button id='import' onClick={onClick}>Load Document</button>
+            <DocumentEditorContainerComponent id="container" ref={(scope) => {
+            container = scope;
+        }} height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/" enableToolbar={true}/>
+        </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/index.tsx
new file mode 100644
index 000000000..eecca66ab
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/app/index.tsx
@@ -0,0 +1,56 @@
+
+
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+    DocumentEditorContainerComponent,
+    Toolbar, SectionFormatProperties
+} from '@syncfusion/ej2-react-documenteditor';
+import { showSpinner, hideSpinner, createSpinner } from '@syncfusion/ej2-popups';
+
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+    let container: DocumentEditorContainerComponent;
+    React.useEffect(() => {
+        componentDidMount()
+    }, []);
+    function componentDidMount() {
+        createSpinner({
+            // Specify the target for the spinner to show
+            target: document.getElementById('container')
+        });
+    }
+    function onClick() {
+        // load your default document here
+        let data: string = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+        // showSpinner() will make the spinner visible
+        showSpinner(document.getElementById('container'));
+        // Open the default document
+        container.documentEditor.open(data);
+        setInterval(function () {
+
+            // hideSpinner() method used hide spinner
+            hideSpinner(document.getElementById('container'));
+
+        }, 5000);
+    }
+    return (
+        <div>
+            <button id='import' onClick={onClick}>Load Document</button>
+            <DocumentEditorContainerComponent
+                id="container"
+                ref={(scope) => {
+                    container = scope;
+                }}
+                height={'590px'}
+                serviceUrl="https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+                enableToolbar={true}
+            />
+        </div>
+    );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('root'));
+
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/index.css b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/index.css
new file mode 100644
index 000000000..6fb2c05ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/index.css
@@ -0,0 +1,11 @@
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+  }
+
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/index.html b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/index.html
new file mode 100644
index 000000000..ff5f74246
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Button</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+        <div id='root'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/systemjs.config.js
new file mode 100644
index 000000000..380113d34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/react/document-editor/spinner-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: "app",
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",      
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",        
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",        
+        "@syncfusion/ej2-react-documenteditor": "syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js",        
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/app-composition.vue
new file mode 100644
index 000000000..7e24d632e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/app-composition.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='showBookmarkDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableEditorHistory='true' :enableBookmarkDialog='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport, EditorHistory, BookmarkDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, BookmarkDialog, EditorHistory, SfdtExport]);
+const showBookmarkDialog = function () {
+    //Open bookmark dialog.
+    documenteditor.value.showDialog('Bookmark');
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/app.vue
new file mode 100644
index 000000000..78dfe77d8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/app.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='showBookmarkDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableEditorHistory='true' :enableBookmarkDialog='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, SfdtExport, EditorHistory, BookmarkDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [Selection, Editor, BookmarkDialog, EditorHistory, SfdtExport]
+    },
+    methods: {
+        showBookmarkDialog: function () {
+            //Open bookmark dialog.
+            this.$refs.documenteditor.showDialog('Bookmark');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/index.css
new file mode 100644
index 000000000..5237d534e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/index.css
@@ -0,0 +1,2 @@
+
+    
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-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/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/index.js
new file mode 100644
index 000000000..18efc77fd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/index.js
@@ -0,0 +1,34 @@
+
+      import Vue from 'vue'
+      import { DocumentEditorPlugin, Selection, Editor, SfdtExport, EditorHistory, BookmarkDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+Vue.use(DocumentEditorPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app">
+          <div>
+              <button v-on:click='showBookmarkDialog'>Open dialog</button>
+          </div>
+          <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' :enableEditorHistory='true' :enableBookmarkDialog='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+      </div>
+`,
+
+          data: function() {
+              return {
+              };
+          },
+          provide: {
+              //Inject require modules.
+              DocumentEditor : [Selection, Editor, BookmarkDialog , EditorHistory, SfdtExport]
+          }
+          methods: {
+              showBookmarkDialog: function() {
+                  //Open bookmark dialog.
+                  this.$refs.documenteditor.showDialog('Bookmark');
+              }
+          }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/app-composition.vue
new file mode 100644
index 000000000..72f11ff14
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/app-composition.vue
@@ -0,0 +1,56 @@
+<template>
+    <div id="app">
+        <input id="insertImageButton" ref="insertImageButton" style="position:fixed; left:-100em" type="file"
+            v-on:change="onInsertImage" accept=".jpeg,.jpg,.png,.gif,.bmp">
+        <div>
+            <button v-on:click='insertImageButtonClick'>Insert Image</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true'
+            :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px"
+            style="width: 100%;display:block"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+const insertImageButton = ref(null);
+
+provide('DocumentEditor', [SfdtExport, WordExport, Selection, Editor]);
+
+const onInsertImage = function (args) {
+    if (navigator.userAgent.match('Chrome') || navigator.userAgent.match('Firefox') || navigator.userAgent.match('Edge') || navigator.userAgent.match('MSIE') || navigator.userAgent.match('.NET')) {
+        if (args.target.files[0]) {
+            let path = args.target.files[0];
+            let reader = new FileReader();
+            reader.onload = function (frEvent) {
+                let base64String = frEvent.target.result;
+                let image = document.createElement('img');
+                image.addEventListener('load', function () {
+                    //Insert image in Document Editor.
+                    documenteditor.value.ej2Instances.editor.insertImage(base64String, width, height);
+                })
+                image.src = base64String;
+            };
+            reader.readAsDataURL(path);
+        }
+        //Safari does not Support FileReader Class
+    } else {
+        let image = document.createElement('img');
+        image.addEventListener('load', function () {
+            //Insert image in Document Editor.
+            documenteditor.value.ej2Instances.editor.insertImage(args.target.value);
+        })
+        image.src = args.target.value;
+    }
+}
+const insertImageButtonClick = function () {
+    insertImageButton.value.value = '';
+    insertImageButton.value.click();
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/app.vue
new file mode 100644
index 000000000..c2e5842b9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/app.vue
@@ -0,0 +1,66 @@
+<template>
+    <div id="app">
+        <input id="insertImageButton" ref="insertImageButton" style="position:fixed; left:-100em" type="file"
+            v-on:change="onInsertImage" accept=".jpeg,.jpg,.png,.gif,.bmp">
+        <div>
+            <button v-on:click='insertImageButtonClick'>Insert Image</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true'
+            :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px"
+            style="width: 100%;display:block"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [SfdtExport, WordExport, Selection, Editor]
+    },
+    methods: {
+        onInsertImage: function (args) {
+            if (navigator.userAgent.match('Chrome') || navigator.userAgent.match('Firefox') || navigator.userAgent.match('Edge') || navigator.userAgent.match('MSIE') || navigator.userAgent.match('.NET')) {
+                let documenteditor = this.$refs.documenteditor;
+                if (args.target.files[0]) {
+                    let path = args.target.files[0];
+                    let reader = new FileReader();
+                    reader.onload = function (frEvent) {
+                        let base64String = frEvent.target.result;
+                        let image = document.createElement('img');
+                        image.addEventListener('load', function () {
+                            //Insert image in Document Editor.
+                            documenteditor.ej2Instances.editor.insertImage(base64String, this.width, this.height);
+                        })
+                        image.src = base64String;
+                    };
+                    reader.readAsDataURL(path);
+                }
+                //Safari does not Support FileReader Class
+            } else {
+                let image = document.createElement('img');
+                image.addEventListener('load', function () {
+                    //Insert image in Document Editor.
+                    documenteditor.ej2Instances.editor.insertImage(args.target.value);
+                })
+                image.src = args.target.value;
+            }
+        },
+        insertImageButtonClick: function () {
+            this.$refs.insertImageButton.value = '';
+            this.$refs.insertImageButton.click();
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-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/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/index.js
new file mode 100644
index 000000000..98828c55d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/index.js
@@ -0,0 +1,62 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <input id="insertImageButton" ref="insertImageButton" style="position:fixed; left:-100em" type="file" v-on:change="onInsertImage" accept=".jpeg,.jpg,.png,.gif,.bmp">
+            <div>
+                <button v-on:click='insertImageButtonClick' >Insert Image</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;display:block" ></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                //Inject require modules.
+                DocumentEditor : [SfdtExport, WordExport, Selection, Editor]
+            }
+            methods: {
+                onInsertImage: function(args: any): void {
+                    if (navigator.userAgent.match('Chrome') || navigator.userAgent.match('Firefox') || navigator.userAgent.match('Edge') || navigator.userAgent.match('MSIE') || navigator.userAgent.match('.NET')) {
+                        let documenteditor =this.$refs.documenteditor;
+                        if (args.target.files[0]) {
+                            let path = args.target.files[0];
+                            let reader = new FileReader();
+                            reader.onload = function (frEvent: any) {
+                                let base64String = frEvent.target.result;
+                                let image = document.createElement('img');
+                                image.addEventListener('load', function () {
+                                    //Insert image in Document Editor.
+                                    documenteditor.ej2Instances.editor.insertImage(base64String, this.width, this.height);
+                                })
+                                image.src = base64String;
+                            };
+                            reader.readAsDataURL(path);
+                        }
+                        //Safari does not Support FileReader Class
+                    } else {
+                            let image = document.createElement('img');
+                            image.addEventListener('load', function () {
+                                //Insert image in Document Editor.
+                                documenteditor.ej2Instances.editor.insertImage(args.target.value);
+                            })
+                            image.src = args.target.value;
+                    }
+                },
+                insertImageButtonClick: function() {
+                    this.$refs.insertImageButton.value = '';
+                    this.$refs.insertImageButton.click();
+                }
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/bookmark-cs2/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/app-composition.vue
new file mode 100644
index 000000000..6bdd67b27
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/app-composition.vue
@@ -0,0 +1,20 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" id="container_1" height="600px"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+
+onMounted(function () {
+    const sfdt = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]}`;
+    //Open default document in Document Editor.
+    documenteditor.value.open(sfdt);
+})
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/app.vue
new file mode 100644
index 000000000..5bb281328
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/app.vue
@@ -0,0 +1,27 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" id="container_1" height="600px"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    mounted: function () {
+        let sfdt = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]}`;
+        //Open default document in Document Editor.
+        this.$refs.documenteditor.open(sfdt);
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-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/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/index.js
new file mode 100644
index 000000000..772a69398
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/index.js
@@ -0,0 +1,26 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app">
+          <ejs-documenteditor ref="documenteditor" id="container_1" height="600px" ></ejs-documenteditor>
+      </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        mounted: function() {
+            let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]}`;
+            //Open default document in Document Editor.
+            this.$refs.documenteditor.open(sfdt);
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/chart-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/app-composition.vue
new file mode 100644
index 000000000..079b091ad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/app-composition.vue
@@ -0,0 +1,62 @@
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
+      id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import {  DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+const container = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+
+provide('DocumentEditorContainer', [Toolbar]);
+
+const onCreated = function () {
+  // creating Custom Options
+  let menuItems = [
+    {
+      text: 'Search In Google',
+      id: 'search_in_google',
+      iconCss: 'e-icons e-de-ctnr-find',
+    },
+  ];
+  // adding Custom Options
+  container.value.ej2Instances.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+  // custom Options Select Event
+  container.value.ej2Instances.documentEditor.customContextMenuSelect =
+    (args) => {
+      // custom Options Functionality
+      let id =
+        container.value.ej2Instances.documentEditor.element.id;
+      switch (args.id) {
+        case id + 'search_in_google':
+          // To get the selected content as plain text
+          let searchContent =
+            container.value.ej2Instances.documentEditor.selection
+              .text;
+          if (
+            !container.value.ej2Instances.documentEditor.selection
+              .isEmpty &&
+            /\S/.test(searchContent)
+          ) {
+            window.open('http://google.com/search?q=' + searchContent);
+          }
+          break;
+      }
+    };
+  //  custom options hide/show functionality
+  container.value.ej2Instances.documentEditor.customContextMenuBeforeOpen = (args) => {
+    let search = document.getElementById(args.ids[0]);
+    search.style.display = 'none';
+    let searchContent = container.value.ej2Instances.documentEditor.selection.text;
+    if (!container.value.ej2Instances.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+      search.style.display = 'block';
+    }
+  };
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/app.vue
new file mode 100644
index 000000000..7e37144ef
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/app.vue
@@ -0,0 +1,74 @@
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
+      id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script>
+
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+  },
+  data() {
+    return {
+      serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+    };
+  },
+  provide: {
+    //Inject require modules.
+    DocumentEditorContainer: [Toolbar],
+  },
+  methods: {
+    onCreated: function () {
+      // creating Custom Options
+      let menuItems = [
+        {
+          text: 'Search In Google',
+          id: 'search_in_google',
+          iconCss: 'e-icons e-de-ctnr-find',
+        },
+      ];
+      // adding Custom Options
+      this.$refs.container.ej2Instances.documentEditor.contextMenu.addCustomMenu(menuItems, false);
+      // custom Options Select Event
+      this.$refs.container.ej2Instances.documentEditor.customContextMenuSelect =
+        (args) => {
+          // custom Options Functionality
+          let id =
+            this.$refs.container.ej2Instances.documentEditor.element.id;
+          switch (args.id) {
+            case id + 'search_in_google':
+              // To get the selected content as plain text
+              let searchContent =
+                this.$refs.container.ej2Instances.documentEditor.selection
+                  .text;
+              if (
+                !this.$refs.container.ej2Instances.documentEditor.selection
+                  .isEmpty &&
+                /\S/.test(searchContent)
+              ) {
+                window.open('http://google.com/search?q=' + searchContent);
+              }
+              break;
+          }
+        };
+      //  custom options hide/show functionality
+      this.$refs.container.ej2Instances.documentEditor.customContextMenuBeforeOpen = (args) => {
+        let search = document.getElementById(args.ids[0]);
+        search.style.display = 'none';
+        let searchContent = this.$refs.container.ej2Instances.documentEditor.selection.text;
+        if (!this.$refs.container.ej2Instances.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+          search.style.display = 'block';
+        }
+      };
+    },
+  },
+};
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/index.css
new file mode 100644
index 000000000..d148bc8e8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/index.css
@@ -0,0 +1,2 @@
+
+ 
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-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/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/index.js
new file mode 100644
index 000000000..d7da83cda
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/index.js
@@ -0,0 +1,76 @@
+
+  import Vue from 'vue';
+  import {
+    DocumentEditorContainerPlugin,
+    DocumentEditorContainerComponent,
+    Toolbar,
+  } from '@syncfusion/ej2-vue-documenteditor';
+
+  Vue.use(DocumentEditorContainerPlugin);
+
+  ;
+new Vue({
+	el: '#app',
+	template: `
+    <div id="app">
+      <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+    </div>
+`,
+
+    data() {
+      return {
+        serviceUrl:
+          'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+      };
+    },
+    provide: {
+      //Inject require modules.
+      DocumentEditorContainer: [Toolbar],
+    },
+    methods: {
+      onCreated: function () {
+        // creating Custom Options
+        let menuItems = [
+          {
+            text: 'Search In Google',
+            id: 'search_in_google',
+            iconCss: 'e-icons e-de-ctnr-find',
+          },
+        ];
+        // adding Custom Options
+        this.$refs.container.ej2Instances.documentEditor.contextMenu.addCustomMenu( menuItems,false);
+        // custom Options Select Event
+        this.$refs.container.ej2Instances.documentEditor.customContextMenuSelect =
+          (args) => {
+            // custom Options Functionality
+            let id =
+              this.$refs.container.ej2Instances.documentEditor.element.id;
+            switch (args.id) {
+              case id + 'search_in_google':
+                // To get the selected content as plain text
+                let searchContent =
+                  this.$refs.container.ej2Instances.documentEditor.selection
+                    .text;
+                if (
+                  !this.$refs.container.ej2Instances.documentEditor.selection
+                    .isEmpty &&
+                  /\S/.test(searchContent)
+                ) {
+                  window.open('http://google.com/search?q=' + searchContent);
+                }
+                break;
+            }
+          };
+          //  custom options hide/show functionality
+        this.$refs.container.ej2Instances.documentEditor.customContextMenuBeforeOpen = (args) => {
+        let search = document.getElementById(args.ids[0]);
+        search.style.display = 'none';
+        let searchContent = this.$refs.container.ej2Instances.documentEditor.selection.text;
+        if (!this.$refs.container.ej2Instances.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
+            search.style.display = 'block';
+        }
+       };
+      },
+    },
+  
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/customize-context-menu-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/app-composition.vue
new file mode 100644
index 000000000..05bc78d71
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/app-composition.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='showFontDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableFontDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, FontDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, FontDialog, SfdtExport]);
+
+const showFontDialog = function () {
+    //Open the font dialog.
+    documenteditor.value.showDialog('Font');
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/app.vue
new file mode 100644
index 000000000..cf36f5770
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/app.vue
@@ -0,0 +1,36 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='showFontDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableFontDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, FontDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [Selection, Editor, FontDialog, SfdtExport]
+    },
+    methods: {
+        showFontDialog: function () {
+            //Open the font dialog.
+            this.$refs.documenteditor.showDialog('Font');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-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/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/index.js
new file mode 100644
index 000000000..ffabcb015
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/index.js
@@ -0,0 +1,34 @@
+
+      import Vue from 'vue'
+      import { DocumentEditorPlugin, Selection, Editor,  FontDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                  <button v-on:click='showFontDialog' >Open dialog</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' :enableFontDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+          data: function() {
+              return {
+              };
+          },
+          provide: {
+              //Inject require modules.
+              DocumentEditor : [Selection, Editor, FontDialog, SfdtExport]
+          }
+          methods: {
+              showFontDialog: function() {
+                  //Open the font dialog.
+                  this.$refs.documenteditor.showDialog('Font');
+              }
+          }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/app-composition.vue
new file mode 100644
index 000000000..e477ec0ee
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/app-composition.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='showParagraphDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableParagraphDialog='true' :enableSfdtExport='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, ParagraphDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, ParagraphDialog, SfdtExport]);
+
+const showParagraphDialog = function () {
+    //Open the paragraph dialog.
+    documenteditor.value.showDialog('Paragraph');
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/app.vue
new file mode 100644
index 000000000..99d54f553
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/app.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='showParagraphDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableParagraphDialog='true' :enableSfdtExport='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, ParagraphDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [Selection, Editor, ParagraphDialog, SfdtExport]
+    },
+    methods: {
+        showParagraphDialog: function () {
+            //Open the paragraph dialog.
+            this.$refs.documenteditor.showDialog('Paragraph');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-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/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/index.js
new file mode 100644
index 000000000..238632272
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/index.js
@@ -0,0 +1,34 @@
+
+      import Vue from 'vue'
+      import { DocumentEditorPlugin, Selection, Editor,  ParagraphDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app">
+          <div>
+              <button v-on:click='showParagraphDialog' >Open dialog</button>
+          </div>
+           <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' :enableParagraphDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+      </div>
+`,
+
+          data: function() {
+              return {
+              };
+          },
+          provide: {
+              //Inject require modules.
+              DocumentEditor : [Selection, Editor, ParagraphDialog, SfdtExport]
+          }
+          methods: {
+              showParagraphDialog: function() {
+                  //Open the paragraph dialog.
+                  this.$refs.documenteditor.showDialog('Paragraph');
+              }
+          }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs2/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/app-composition.vue
new file mode 100644
index 000000000..028592e6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/app-composition.vue
@@ -0,0 +1,24 @@
+<template>
+    <div id="app" style="height:400px">
+        <div>
+            <button v-on:click='showTableDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableTableDialog='true' :enableSfdtExport='true' style="width: 100%;" height="370px"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as Ejs, Selection, Editor, TableDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, TableDialog, SfdtExport]);
+
+const showTableDialog = function () {
+    //Open the table dialog.
+    documenteditor.value.showDialog('Table');
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/app.vue
new file mode 100644
index 000000000..8709a0879
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/app.vue
@@ -0,0 +1,36 @@
+<template>
+    <div id="app" style="height:400px">
+        <div>
+            <button v-on:click='showTableDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableTableDialog='true' :enableSfdtExport='true' style="width: 100%;" height="370px"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, TableDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules
+        DocumentEditor: [Selection, Editor, TableDialog, SfdtExport]
+    },
+    methods: {
+        showTableDialog: function () {
+            //Open the table dialog.
+            this.$refs.documenteditor.showDialog('Table');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/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/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/index.js
new file mode 100644
index 000000000..3cce428aa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/index.js
@@ -0,0 +1,34 @@
+
+      import Vue from 'vue'
+      import { DocumentEditorPlugin, Selection, Editor,  TableDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app" style="height:400px">
+          <div>
+              <button v-on:click='showTableDialog' >Open dialog</button>
+          </div>
+          <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' :enableTableDialog='true' :enableSfdtExport='true' style="width: 100%;" height="370px" ></ejs-documenteditor>
+      </div>
+`,
+
+          data: function() {
+              return {
+              };
+          },
+          provide: {
+              //Inject require modules
+              DocumentEditor : [Selection, Editor, TableDialog, SfdtExport]
+          }
+          methods: {
+              showTableDialog: function() {
+                  //Open the table dialog.
+                  this.$refs.documenteditor.showDialog('Table');
+              }
+          }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs3/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/app-composition.vue
new file mode 100644
index 000000000..6ccdaacb0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/app-composition.vue
@@ -0,0 +1,24 @@
+<template>
+    <div id="app" style="height:400px">
+        <div>
+            <button v-on:click='showBookmarkDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableBookmarkDialog='true' :enableSfdtExport='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, BookmarkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, BookmarkDialog, SfdtExport]);
+const showBookmarkDialog = function () {
+    //Open the bookmark dialog.
+    documenteditor.value.showDialog('Bookmark');
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/app.vue
new file mode 100644
index 000000000..ad0831899
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/app.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="app" style="height:400px">
+        <div>
+            <button v-on:click='showBookmarkDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableBookmarkDialog='true' :enableSfdtExport='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, BookmarkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules
+        DocumentEditor: [Selection, Editor, BookmarkDialog, SfdtExport]
+    },
+    methods: {
+        showBookmarkDialog: function () {
+            //Open the bookmark dialog.
+            this.$refs.documenteditor.showDialog('Bookmark');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/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/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/index.js
new file mode 100644
index 000000000..a16c8801a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/index.js
@@ -0,0 +1,34 @@
+
+      import Vue from 'vue'
+      import { DocumentEditorPlugin, Selection, Editor,  BookmarkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app" style="height:400px">
+          <div>
+                <button v-on:click='showBookmarkDialog' >Open dialog</button>
+          </div>
+          <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' :enableBookmarkDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+      </div>
+`,
+
+          data: function() {
+              return {
+              };
+          },
+          provide: {
+              //Inject require modules
+              DocumentEditor : [Selection, Editor, BookmarkDialog, SfdtExport]
+          }
+          methods: {
+              showBookmarkDialog: function() {
+                  //Open the bookmark dialog.
+                  this.$refs.documenteditor.showDialog('Bookmark');
+              }
+          }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs4/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/app-composition.vue
new file mode 100644
index 000000000..4d83cf109
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/app-composition.vue
@@ -0,0 +1,44 @@
+<template>
+    <div id="app" style="height:400px">
+        <div>
+            <button v-on:click='showHyperlinkDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' v-bind:requestNavigate="onRequestNavigate"
+            :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, HyperlinkDialog, SfdtExport]);
+
+const showHyperlinkDialog = function () {
+    //Opens hyperlink dialog.
+    documenteditor.value.showDialog('Hyperlink');
+}
+const onRequestNavigate= function (args) {
+    if (args.linkType !== 'Bookmark') {
+        let link = args.navigationLink;
+        if (args.localReference.length > 0) {
+            link += '#' + args.localReference;
+        }
+        window.open(link);
+        args.isHandled = true;
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+    @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+    @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+    @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+    @import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+    @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/app.vue
new file mode 100644
index 000000000..69c3b11c4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/app.vue
@@ -0,0 +1,56 @@
+<template>
+    <div id="app" style="height:400px">
+        <div>
+            <button v-on:click='showHyperlinkDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" v-bind:requestNavigate="onRequestNavigate"
+            style="width: 100%; "></ejs-documenteditor>
+    </div>
+  </template>
+  <script>
+  import { DocumentEditorComponent, Selection, Editor, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+  
+  export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules
+        DocumentEditor: [Selection, Editor, HyperlinkDialog, SfdtExport]
+    },
+    methods: {
+        showHyperlinkDialog: function () {
+            //Opens hyperlink dialog.
+            this.$refs.documenteditor.showDialog('Hyperlink');
+        },
+        onRequestNavigate: function (args) {
+              if (args.linkType !== 'Bookmark') {
+                  let link = args.navigationLink;
+                  if (args.localReference.length > 0) {
+                      link += '#' + args.localReference;
+                  }
+                  window.open(link);
+                  args.isHandled = true;
+              }
+          }
+    }
+  }
+  </script>
+  <style>
+  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+    @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+    @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+    @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+    @import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+    @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/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/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/index.js
new file mode 100644
index 000000000..284f00463
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/index.js
@@ -0,0 +1,34 @@
+
+      import Vue from 'vue'
+      import { DocumentEditorPlugin, Selection, Editor, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app" style="height:400px">
+          <div>
+                <button v-on:click='showHyperlinkDialog' >Open dialog</button>
+          </div>
+          <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+      </div>
+`,
+
+          data: function() {
+              return {
+              };
+          },
+          provide: {
+              //Inject require modules
+              DocumentEditor : [Selection, Editor, HyperlinkDialog, SfdtExport]
+          }
+          methods: {
+              showHyperlinkDialog: function() {
+                  //Opens hyperlink dialog.
+                  this.$refs.documenteditor.showDialog('Hyperlink');
+              }
+          }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs5/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/app-composition.vue
new file mode 100644
index 000000000..fe9a712f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/app-composition.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="app" style="height:400px">
+        <div>
+            <button v-on:click='showPageSetupDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableSfdtExport='true' :enablePageSetupDialog='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, PageSetupDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, PageSetupDialog, SfdtExport]);
+
+const showPageSetupDialog = function () {
+    //Open page setup dialog.
+    documenteditor.value.showDialog('PageSetup');
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/app.vue
new file mode 100644
index 000000000..ee9b86185
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/app.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="app" style="height:400px">
+        <div>
+            <button v-on:click='showPageSetupDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableSfdtExport='true' :enablePageSetupDialog='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, PageSetupDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [Selection, Editor, PageSetupDialog, SfdtExport]
+    },
+    methods: {
+        showPageSetupDialog: function () {
+            //Open page setup dialog.
+            this.$refs.documenteditor.showDialog('PageSetup');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/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/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/index.js
new file mode 100644
index 000000000..66a2c743c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/index.js
@@ -0,0 +1,34 @@
+
+      import Vue from 'vue'
+      import { DocumentEditorPlugin, Selection, Editor, PageSetupDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app" style="height:400px">
+            <div>
+                 <button v-on:click='showPageSetupDialog' >Open dialog</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' :enableSfdtExport='true' :enablePageSetupDialog='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+          data: function() {
+              return {
+              };
+          },
+          provide: {
+              //Inject require modules.
+              DocumentEditor : [Selection, Editor, PageSetupDialog, SfdtExport]
+          }
+          methods: {
+              showPageSetupDialog: function() {
+                  //Open page setup dialog.
+                  this.$refs.documenteditor.showDialog('PageSetup');
+              }
+          }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/dialog-cs6/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/app.vue
new file mode 100644
index 000000000..24432a574
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/app.vue
@@ -0,0 +1,56 @@
+<template>
+    <div id="app">
+      <div>
+        <button v-on:click="saveAsSfdt">Save</button>
+      </div>
+      <ejs-documenteditorcontainer
+        ref="documentEditorContainer"
+        height="590px"
+        :enableSfdtExport="true"
+        :enableSelection="true"
+        :enableEditor="true"
+        :isReadOnly="false"
+        style="width: 100%;"
+      ></ejs-documenteditorcontainer>
+    </div>
+  </template>
+  
+  <script>
+  import { DocumentEditorContainerComponent, Toolbar, SfdtExport, Selection, Editor } from "@syncfusion/ej2-vue-documenteditor";
+
+  
+  export default {
+    name: "App",
+    components: {
+      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+    },
+    data() {
+      return {
+        serviceUrl: "https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+      };
+    },
+    provide: {
+      // Inject required modules.
+      DocumentEditorContainer: [SfdtExport, Selection, Editor, Toolbar]
+    },
+    methods: {
+      saveAsSfdt() {
+        // Download the current document in SFDT format.
+        this.$refs.documentEditorContainer.ej2Instances.documentEditor.save("sample", "Sfdt");
+      }
+    }
+  };
+  </script>
+  
+  <style>
+  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/index.css
new file mode 100644
index 000000000..9ff67d82b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/index.css
@@ -0,0 +1,2 @@
+
+        
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/index.js
new file mode 100644
index 000000000..09822c18f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/index.js
@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar,Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+Vue.use(DocumentEditorContainerPlugin);
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                 <button v-on:click='saveAsSfdt' >Save</button>
+            </div>
+            <ejs-documenteditorcontainer ref="documentEditorContainer" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditorcontainer>
+        </div>
+    `,
+
+    data(){
+        return { serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/' }
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor : [SfdtExport, Selection, Editor , Toolbar]
+    },
+    methods: {
+        saveAsSfdt: function() {
+            //Download the current document in sfdt format.
+            this.$refs.documentEditorContainer.ej2Instances.documentEditor.save('sample', 'Sfdt');
+        }
+    }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/app.vue
new file mode 100644
index 000000000..ecf2b0754
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/app.vue
@@ -0,0 +1,55 @@
+<template>
+    <div id="app">
+      <div>
+        <button v-on:click="saveAsDocx">Save</button>
+      </div>
+      <ejs-documenteditorcontainer
+        ref="documentEditorContainer"
+        height="590px"
+        :enableSfdtExport="true"
+        :enableSelection="true"
+        :enableEditor="true"
+        :isReadOnly="false"
+        style="width: 100%;"
+      ></ejs-documenteditorcontainer>
+    </div>
+  </template>
+  
+  <script>
+  import { DocumentEditorContainerComponent, Toolbar, SfdtExport, Selection, Editor } from "@syncfusion/ej2-vue-documenteditor";
+  
+  export default {
+    name: "App",
+    components: {
+      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+    },
+    data() {
+      return {
+        serviceUrl: "https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+      };
+    },
+    provide: {
+      // Inject required modules.
+      DocumentEditorContainer: [SfdtExport, Selection, Editor, Toolbar]
+    },
+    methods: {
+      saveAsDocx() {
+        // Download the current document in SFDT format.
+        this.$refs.documentEditorContainer.ej2Instances.documentEditor.save("sample", "Docx");
+      }
+    }
+  };
+  </script>
+  
+  <style>
+  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/index.css
new file mode 100644
index 000000000..9ff67d82b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/index.css
@@ -0,0 +1,2 @@
+
+        
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/index.js
new file mode 100644
index 000000000..6cc03238e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/index.js
@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar,Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+Vue.use(DocumentEditorContainerPlugin);
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                 <button v-on:click='saveAsSfdt' >Save</button>
+            </div>
+            <ejs-documenteditorcontainer ref="documentEditorContainer" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditorcontainer>
+        </div>
+    `,
+
+    data(){
+        return { serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/' }
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor : [SfdtExport, Selection, Editor , Toolbar]
+    },
+    methods: {
+        saveAsSfdt: function() {
+            //Download the current document in Docx format.
+            this.$refs.documentEditorContainer.ej2Instances.documentEditor.save('sample', 'Docx');
+        }
+    }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs2/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/app.vue
new file mode 100644
index 000000000..c591a07c2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/app.vue
@@ -0,0 +1,55 @@
+<template>
+    <div id="app">
+      <div>
+        <button v-on:click="saveAsTxt">Save</button>
+      </div>
+      <ejs-documenteditorcontainer
+        ref="documentEditorContainer"
+        height="590px"
+        :enableSfdtExport="true"
+        :enableSelection="true"
+        :enableEditor="true"
+        :isReadOnly="false"
+        style="width: 100%;"
+      ></ejs-documenteditorcontainer>
+    </div>
+  </template>
+  
+  <script>
+  import { DocumentEditorContainerComponent, Toolbar, SfdtExport, Selection, Editor } from "@syncfusion/ej2-vue-documenteditor";
+  
+  export default {
+    name: "App",
+    components: {
+      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+    },
+    data() {
+      return {
+        serviceUrl: "https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+      };
+    },
+    provide: {
+      // Inject required modules.
+      DocumentEditorContainer: [SfdtExport, Selection, Editor, Toolbar]
+    },
+    methods: {
+      saveAsTxt() {
+        // Download the current document in SFDT format.
+        this.$refs.documentEditorContainer.ej2Instances.documentEditor.save("sample", "Txt");
+      }
+    }
+  };
+  </script>
+  
+  <style>
+  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/index.css
new file mode 100644
index 000000000..9ff67d82b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/index.css
@@ -0,0 +1,2 @@
+
+        
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/index.js
new file mode 100644
index 000000000..f57f1572b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/index.js
@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar,Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+Vue.use(DocumentEditorContainerPlugin);
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                 <button v-on:click='saveAsSfdt' >Save</button>
+            </div>
+            <ejs-documenteditorcontainer ref="documentEditorContainer" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditorcontainer>
+        </div>
+    `,
+
+    data(){
+        return { serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/' }
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor : [SfdtExport, Selection, Editor , Toolbar]
+    },
+    methods: {
+        saveAsSfdt: function() {
+            //Download the current document in Txt format.
+            this.$refs.documentEditorContainer.ej2Instances.documentEditor.save('sample', 'Txt');
+        }
+    }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs3/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/app.vue
new file mode 100644
index 000000000..a66ebb2ff
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/app.vue
@@ -0,0 +1,55 @@
+<template>
+    <div id="app">
+      <div>
+        <button v-on:click="saveAsDotx">Save</button>
+      </div>
+      <ejs-documenteditorcontainer
+        ref="documentEditorContainer"
+        height="590px"
+        :enableSfdtExport="true"
+        :enableSelection="true"
+        :enableEditor="true"
+        :isReadOnly="false"
+        style="width: 100%;"
+      ></ejs-documenteditorcontainer>
+    </div>
+  </template>
+  
+  <script>
+  import { DocumentEditorContainerComponent, Toolbar, SfdtExport, Selection, Editor } from "@syncfusion/ej2-vue-documenteditor";
+  
+  export default {
+    name: "App",
+    components: {
+      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+    },
+    data() {
+      return {
+        serviceUrl: "https://document.syncfusion.com/web-services/word-editor/api/documenteditor/"
+      };
+    },
+    provide: {
+      // Inject required modules.
+      DocumentEditorContainer: [SfdtExport, Selection, Editor, Toolbar]
+    },
+    methods: {
+      saveAsDotx() {
+        // Download the current document in SFDT format.
+        this.$refs.documentEditorContainer.ej2Instances.documentEditor.save("sample", "Dotx");
+      }
+    }
+  };
+  </script>
+  
+  <style>
+  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+  @import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/index.css
new file mode 100644
index 000000000..9ff67d82b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/index.css
@@ -0,0 +1,2 @@
+
+        
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/index.js
new file mode 100644
index 000000000..8cbae6d16
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/index.js
@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar,Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+Vue.use(DocumentEditorContainerPlugin);
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                 <button v-on:click='saveAsSfdt' >Save</button>
+            </div>
+            <ejs-documenteditorcontainer ref="documentEditorContainer" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditorcontainer>
+        </div>
+    `,
+
+    data(){
+        return { serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/' }
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor : [SfdtExport, Selection, Editor , Toolbar]
+    },
+    methods: {
+        saveAsSfdt: function() {
+            //Download the current document in Dotx format.
+            this.$refs.documentEditorContainer.ej2Instances.documentEditor.save('sample', 'Dotx');
+        }
+    }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-container-cs4/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/app-composition.vue
new file mode 100644
index 000000000..3fec71db6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/app-composition.vue
@@ -0,0 +1,23 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='saveAsSfdt'>Save</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true'
+            :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [SfdtExport, Selection, Editor]);
+const saveAsSfdt = function () {
+    //Download the current document in sfdt format.
+    documenteditor.save('sample', 'Sfdt');
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/app.vue
new file mode 100644
index 000000000..8467d792e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/app.vue
@@ -0,0 +1,36 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='saveAsSfdt'>Save</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true'
+            :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [SfdtExport, Selection, Editor]
+    },
+    methods: {
+        saveAsSfdt: function () {
+            //Download the current document in sfdt format.
+            this.$refs.documenteditor.save('sample', 'Sfdt');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/index.css
new file mode 100644
index 000000000..9ff67d82b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/index.css
@@ -0,0 +1,2 @@
+
+        
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/index.js
new file mode 100644
index 000000000..90f8f2eca
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/index.js
@@ -0,0 +1,34 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                 <button v-on:click='saveAsSfdt' >Save</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                //Inject require modules.
+                DocumentEditor : [SfdtExport, Selection, Editor]
+            }
+            methods: {
+                saveAsSfdt: function() {
+                    //Download the current document in sfdt format.
+                    this.$refs.documenteditor.save('sample', 'Sfdt');
+                }
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/app-composition.vue
new file mode 100644
index 000000000..4abaacd8c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/app-composition.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='saveAsDocx'>Save</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true'
+            :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [SfdtExport, WordExport, Selection, Editor]);
+
+const saveAsDocx = function () {
+    //Download the document in docx format.
+    documenteditor.value.save('sample', 'Docx');
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/app.vue
new file mode 100644
index 000000000..d38244701
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/app.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='saveAsDocx'>Save</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true'
+            :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent,
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [SfdtExport, WordExport, Selection, Editor]
+    },
+    methods: {
+        saveAsDocx: function () {
+            //Download the document in docx format.
+            this.$refs.documenteditor.save('sample', 'Docx');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/index.js
new file mode 100644
index 000000000..40d80b218
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/index.js
@@ -0,0 +1,34 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                  <button v-on:click='saveAsDocx' >Save</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                //Inject require modules.
+                DocumentEditor : [SfdtExport, WordExport, Selection, Editor]
+            }
+            methods: {
+                saveAsDocx: function() {
+                    //Download the document in docx format.
+                    this.$refs.documenteditor.save('sample', 'Docx');
+                }
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs2/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/app-composition.vue
new file mode 100644
index 000000000..15cc99b7a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/app-composition.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='saveAsTextDocument'>Save</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableTextExport='true'
+            :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport, TextExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [SfdtExport, TextExport, Selection, Editor]);
+
+const saveAsTextDocument = function () {
+    //Download the current document as txt file.
+    documenteditor.value.save('sample', 'Txt');
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/app.vue
new file mode 100644
index 000000000..87e12b4db
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/app.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='saveAsTextDocument'>Save</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableTextExport='true'
+            :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, SfdtExport, TextExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [SfdtExport, TextExport, Selection, Editor]
+    },
+    methods: {
+        saveAsTextDocument: function () {
+            //Download the current document as txt file.
+            this.$refs.documenteditor.save('sample', 'Txt');
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/index.css
new file mode 100644
index 000000000..9ff67d82b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/index.css
@@ -0,0 +1,2 @@
+
+        
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/index.js
new file mode 100644
index 000000000..53b80c6f2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/index.js
@@ -0,0 +1,34 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin, Selection, Editor, SfdtExport, TextExport } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                   <button v-on:click='saveAsTextDocument' >Save</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableTextExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                //Inject require modules.
+                DocumentEditor : [SfdtExport, TextExport, Selection, Editor]
+            }
+            methods: {
+                saveAsTextDocument: function() {
+                    //Download the current document as txt file.
+                    this.$refs.documenteditor.save('sample', 'Txt');
+                }
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs3/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/app-composition.vue
new file mode 100644
index 000000000..0cf560c2c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/app-composition.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block" :isReadOnly='false'
+            :enableSelection='true' :enableSfdtExport='true' :enableEditor='true'
+            v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+
+provide('DocumentEditor', [SfdtExport, Selection, Editor]);
+
+const onKeyDown = function (args) {
+    let keyCode = args.event.which || args.event.keyCode;
+    let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+    //67 is the character code for 'C'
+    if (isCtrlKey && keyCode === 67) {
+        //To prevent copy operation set isHandled to true
+        args.isHandled = true;
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/app.vue
new file mode 100644
index 000000000..6774377c7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/app.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block" :isReadOnly='false'
+            :enableSelection='true' :enableSfdtExport='true' :enableEditor='true'
+            v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [SfdtExport, Selection, Editor]
+    },
+    methods: {
+        onKeyDown: function (args) {
+            let keyCode = args.event.which || args.event.keyCode;
+            let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+            //67 is the character code for 'C'
+            if (isCtrlKey && keyCode === 67) {
+                //To prevent copy operation set isHandled to true
+                args.isHandled = true;
+            }
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/index.js
new file mode 100644
index 000000000..856ec9ff5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/index.js
@@ -0,0 +1,36 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div>
+              <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block" :isReadOnly='false' :enableSelection='true' :enableSfdtExport='true' :enableEditor='true' v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                //Inject require modules.
+                DocumentEditor : [SfdtExport, Selection, Editor]
+            }
+            methods: {
+                onKeyDown: function(args) {
+                    let keyCode: number = args.event.which || args.event.keyCode;
+                    let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+                    //67 is the character code for 'C'
+                    if (isCtrlKey && keyCode === 67) {
+                        //To prevent copy operation set isHandled to true
+                        args.isHandled = true;
+                    }
+                }
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs4/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/app-composition.vue
new file mode 100644
index 000000000..c9db0ecca
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/app-composition.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block" :isReadOnly='false'
+            :enableSelection='true' :enableSfdtExport='true' :enableWordExport=true :enableEditor='true'
+            v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor ', [SfdtExport, Selection, Editor, WordExport]);
+
+const onKeyDown = function (args) {
+    let keyCode = args.event.which || args.event.keyCode;
+
+    let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+    let isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+    // 83 is the character code for 'S'
+    if (isCtrlKey && !isAltKey && keyCode === 83) {
+        //To prevent default save operation, set the isHandled property to true
+        args.isHandled = true;
+        documenteditor.value.save('sample', 'Docx');
+        args.event.preventDefault();
+    } else if (isCtrlKey && isAltKey && keyCode === 83) {
+        documenteditor.value.save('sample', 'Sfdt');
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/app.vue
new file mode 100644
index 000000000..d735fe040
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/app.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block" :isReadOnly='false'
+            :enableSelection='true' :enableSfdtExport='true' :enableWordExport=true :enableEditor='true'
+            v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [SfdtExport, Selection, Editor, WordExport]
+    },
+    methods: {
+        onKeyDown: function (args) {
+            let keyCode = args.event.which || args.event.keyCode;
+
+            let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+            let isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+            // 83 is the character code for 'S'
+            if (isCtrlKey && !isAltKey && keyCode === 83) {
+                //To prevent default save operation, set the isHandled property to true
+                args.isHandled = true;
+                this.$refs.documenteditor.save('sample', 'Docx');
+                args.event.preventDefault();
+            } else if (isCtrlKey && isAltKey && keyCode === 83) {
+                this.$refs.documenteditor.save('sample', 'Sfdt');
+            }
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/index.js
new file mode 100644
index 000000000..ee982c578
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/index.js
@@ -0,0 +1,43 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+   <div>
+          <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block" :isReadOnly='false' :enableSelection='true' :enableSfdtExport='true' :enableWordExport=true :enableEditor='true' v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+   </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                DocumentEditor : [SfdtExport, Selection, Editor, WordExport]
+            }
+            methods: {
+                onKeyDown: function(args) {
+                    let keyCode: number = args.event.which || args.event.keyCode;
+
+                    let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+                    let isAltKey: boolean = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+                    // 83 is the character code for 'S'
+                    if (isCtrlKey && !isAltKey && keyCode === 83) {
+                        //To prevent default save operation, set the isHandled property to true
+                        args.isHandled = true;
+                        this.$refs.documenteditor.save('sample', 'Docx');
+                        args.event.preventDefault();
+                    } else if (isCtrlKey && isAltKey && keyCode === 83) {
+                        this.$refs.documenteditor.save('sample', 'Sfdt');
+                    }
+                }
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs5/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/app-composition.vue
new file mode 100644
index 000000000..120077cb1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/app-composition.vue
@@ -0,0 +1,29 @@
+<template>
+    <div style="height:330px">
+        <ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false'
+            :enableSelection='true' :enableSfdtExport='true' :enableEditor='true'
+            v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const height = '370px';
+
+provide('DocumentEditor ', [SfdtExport, Selection, Editor]);
+
+const onKeyDown = function (args) {
+    let keyCode = args.event.which || args.event.keyCode;
+    let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+    //67 is the character code for 'C'
+    if (isCtrlKey && keyCode === 67) {
+        //To prevent copy operation set isHandled to true
+        args.isHandled = true;
+    }
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/app.vue
new file mode 100644
index 000000000..0ceab960d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/app.vue
@@ -0,0 +1,39 @@
+<template>
+    <div style="height:330px">
+        <ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false'
+            :enableSelection='true' :enableSfdtExport='true' :enableEditor='true'
+            v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+            height: '370px'
+        };
+    },
+    provide: {
+        DocumentEditor: [SfdtExport, Selection, Editor]
+    },
+    methods: {
+        onKeyDown: function (args) {
+            let keyCode = args.event.which || args.event.keyCode;
+            let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+            //67 is the character code for 'C'
+            if (isCtrlKey && keyCode === 67) {
+                //To prevent copy operation set isHandled to true
+                args.isHandled = true;
+            }
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/index.js
new file mode 100644
index 000000000..7ffa2ffbf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/index.js
@@ -0,0 +1,36 @@
+
+      import Vue from 'vue'
+      import { DocumentEditorPlugin, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+     <div style="height:330px">
+          <ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false' :enableSelection='true' :enableSfdtExport='true' :enableEditor='true' v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+     </div>
+`,
+
+          data: function() {
+              return {
+                  height: '370px'
+              };
+          },
+          provide: {
+              DocumentEditor : [SfdtExport, Selection, Editor]
+          }
+          methods: {
+              onKeyDown: function(args) {
+                  let keyCode: number = args.event.which || args.event.keyCode;
+                  let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+                  //67 is the character code for 'C'
+                  if (isCtrlKey && keyCode === 67) {
+                      //To prevent copy operation set isHandled to true
+                      args.isHandled = true;
+                  }
+              }
+          }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs6/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/app-composition.vue
new file mode 100644
index 000000000..f6eb7a6bc
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/app-composition.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false'
+            :enableSelection='true' :enableSfdtExport='true' :enableWordExport=true :enableEditor='true'
+            v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+const height = '370px';
+
+provide('DocumentEditor ', [SfdtExport, Selection, Editor, WordExport]);
+
+const onKeyDown = function (args) {
+    let keyCode = args.event.which || args.event.keyCode;
+    let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+    let isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+    // 83 is the character code for 'S'
+    if (isCtrlKey && !isAltKey && keyCode === 83) {
+        //To prevent default save operation, set the isHandled property to true
+        args.isHandled = true;
+        documenteditor.value.save('sample', 'Docx');
+        args.event.preventDefault();
+    } else if (isCtrlKey && isAltKey && keyCode === 83) {
+        documenteditor.value.save('sample', 'Sfdt');
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/app.vue
new file mode 100644
index 000000000..4b86f100f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/app.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false'
+            :enableSelection='true' :enableSfdtExport='true' :enableWordExport=true :enableEditor='true'
+            v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+            height: '370px'
+        };
+    },
+    provide: {
+        DocumentEditor: [SfdtExport, Selection, Editor, WordExport]
+    },
+    methods: {
+        onKeyDown: function (args) {
+            let keyCode = args.event.which || args.event.keyCode;
+            let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+            let isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+            // 83 is the character code for 'S'
+            if (isCtrlKey && !isAltKey && keyCode === 83) {
+                //To prevent default save operation, set the isHandled property to true
+                args.isHandled = true;
+                this.$refs.documenteditor.save('sample', 'Docx');
+                args.event.preventDefault();
+            } else if (isCtrlKey && isAltKey && keyCode === 83) {
+                this.$refs.documenteditor.save('sample', 'Sfdt');
+            }
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/index.js
new file mode 100644
index 000000000..a348746d3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/index.js
@@ -0,0 +1,44 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+      <div>
+          <ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false' :enableSelection='true' :enableSfdtExport='true' :enableWordExport=true :enableEditor='true' v-bind:keyDown='onKeyDown'></ejs-documenteditor>
+      </div>
+`,
+
+          data: function() {
+              return {
+                  height: '370px'
+              };
+          },
+          provide: {
+              DocumentEditor : [SfdtExport, Selection, Editor, WordExport]
+          }
+          methods: {
+              onKeyDown: function(args) {
+                  let keyCode: number = args.event.which || args.event.keyCode;
+
+                  let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
+
+                  let isAltKey: boolean = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);
+
+                  // 83 is the character code for 'S'
+                  if (isCtrlKey && !isAltKey && keyCode === 83) {
+                      //To prevent default save operation, set the isHandled property to true
+                      args.isHandled = true;
+                      this.$refs.documenteditor.save('sample', 'Docx');
+                      args.event.preventDefault();
+                  } else if (isCtrlKey && isAltKey && keyCode === 83) {
+                      this.$refs.documenteditor.save('sample', 'Sfdt');
+                  }
+              }
+          }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs7/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/app-composition.vue
new file mode 100644
index 000000000..65be54e5b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/app-composition.vue
@@ -0,0 +1,32 @@
+<template>
+    <div style="width:100%;height:330px">
+        <div>
+            <button v-on:click='onInsertToc'>Insert TOC</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :isReadOnly='true' v-bind:created='onCreated' :enableSelection='true'
+            :enableEditor='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, TableOfContentsSettings } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor ', [Selection, Editor]);
+
+const onCreated = function (args) {
+    let sfdt = '{"sections":[{"blocks":[{"paragraphFormat":{"styleName":"Heading 1"},"inlines":[{"text":"Headin"},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1},{"text":"g1"}]},{"paragraphFormat":{"styleName":"Heading 2"},"inlines":[{"text":"Heading2"}]},{"paragraphFormat":{"styleName":"Heading 3"},"inlines":[{"text":"Heading3"}]},{"paragraphFormat":{"styleName":"Heading 4"},"inlines":[{"text":"Heading4"}]},{"paragraphFormat":{"styleName":"Heading 5"},"inlines":[{"text":"Heading5"}]},{"paragraphFormat":{"styleName":"Heading 6"},"inlines":[{"text":"Heading6"}]},{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"text":"Normal"}]}],"headersFooters":{},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Paragraph","name":"Heading 1","basedOn":"Normal","next":"Normal","link":"Heading 1 Char","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":12.0,"afterSpacing":0.0,"outlineLevel":"Level1"}},{"type":"Paragraph","name":"Heading 2","basedOn":"Normal","next":"Normal","link":"Heading 2 Char","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level2"}},{"type":"Paragraph","name":"Heading 3","basedOn":"Normal","next":"Normal","link":"Heading 3 Char","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level3"}},{"type":"Paragraph","name":"Heading 4","basedOn":"Normal","next":"Normal","link":"Heading 4 Char","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level4"}},{"type":"Paragraph","name":"Heading 5","basedOn":"Normal","next":"Normal","link":"Heading 5 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level5"}},{"type":"Paragraph","name":"Heading 6","basedOn":"Normal","next":"Normal","link":"Heading 6 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level6"}},{"type":"Character","name":"Default Paragraph Font"},{"type":"Character","name":"Heading 1 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 2 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 3 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}},{"type":"Character","name":"Heading 4 Char","basedOn":"Default Paragraph Font","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 5 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 6 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}}]}';
+    documenteditor.value.open(sfdt);
+}
+const onInsertToc = function () {
+    //Table of contents settings.
+    let tocSettings = {
+        startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true
+    };
+    //Insert table of contents.
+    documenteditor.value.ej2Instances.editor.insertTableOfContents(tocSettings);
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/app.vue
new file mode 100644
index 000000000..95fc5138d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/app.vue
@@ -0,0 +1,43 @@
+<template>
+    <div style="width:100%;height:330px">
+        <div>
+            <button v-on:click='onInsertToc'>Insert TOC</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :isReadOnly='true' v-bind:created='onCreated' :enableSelection='true'
+            :enableEditor='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, TableOfContentsSettings } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [Selection, Editor]
+    },
+    methods: {
+        onCreated: function (args) {
+            let sfdt = '{"sections":[{"blocks":[{"paragraphFormat":{"styleName":"Heading 1"},"inlines":[{"text":"Headin"},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1},{"text":"g1"}]},{"paragraphFormat":{"styleName":"Heading 2"},"inlines":[{"text":"Heading2"}]},{"paragraphFormat":{"styleName":"Heading 3"},"inlines":[{"text":"Heading3"}]},{"paragraphFormat":{"styleName":"Heading 4"},"inlines":[{"text":"Heading4"}]},{"paragraphFormat":{"styleName":"Heading 5"},"inlines":[{"text":"Heading5"}]},{"paragraphFormat":{"styleName":"Heading 6"},"inlines":[{"text":"Heading6"}]},{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"text":"Normal"}]}],"headersFooters":{},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Paragraph","name":"Heading 1","basedOn":"Normal","next":"Normal","link":"Heading 1 Char","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":12.0,"afterSpacing":0.0,"outlineLevel":"Level1"}},{"type":"Paragraph","name":"Heading 2","basedOn":"Normal","next":"Normal","link":"Heading 2 Char","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level2"}},{"type":"Paragraph","name":"Heading 3","basedOn":"Normal","next":"Normal","link":"Heading 3 Char","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level3"}},{"type":"Paragraph","name":"Heading 4","basedOn":"Normal","next":"Normal","link":"Heading 4 Char","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level4"}},{"type":"Paragraph","name":"Heading 5","basedOn":"Normal","next":"Normal","link":"Heading 5 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level5"}},{"type":"Paragraph","name":"Heading 6","basedOn":"Normal","next":"Normal","link":"Heading 6 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level6"}},{"type":"Character","name":"Default Paragraph Font"},{"type":"Character","name":"Heading 1 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 2 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 3 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}},{"type":"Character","name":"Heading 4 Char","basedOn":"Default Paragraph Font","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 5 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 6 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}}]}';
+            this.$refs.documenteditor.open(sfdt);
+        },
+        onInsertToc: function () {
+            //Table of contents settings
+            let tocSettings = {
+                startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true
+            };
+            //Insert table of contents.
+            this.$refs.documenteditor.ej2Instances.editor.insertTableOfContents(tocSettings);
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/index.css
new file mode 100644
index 000000000..d148bc8e8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/index.css
@@ -0,0 +1,2 @@
+
+ 
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/index.js
new file mode 100644
index 000000000..36ad62bf1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/index.js
@@ -0,0 +1,42 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Selection, Editor, TableOfContentsSettings } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+        <div style="width:100%;height:330px">
+            <div>
+                <button v-on:click='onInsertToc'>Insert TOC</button>
+            </div>
+        <ejs-documenteditor ref="documenteditor" :isReadOnly='true' v-bind:created='onCreated' :enableSelection='true' :enableEditor='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            DocumentEditor : [Selection, Editor]
+        }
+        methods: {
+            onCreated: function(args) {
+                let sfdt: string = '{"sections":[{"blocks":[{"paragraphFormat":{"styleName":"Heading 1"},"inlines":[{"text":"Headin"},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1},{"text":"g1"}]},{"paragraphFormat":{"styleName":"Heading 2"},"inlines":[{"text":"Heading2"}]},{"paragraphFormat":{"styleName":"Heading 3"},"inlines":[{"text":"Heading3"}]},{"paragraphFormat":{"styleName":"Heading 4"},"inlines":[{"text":"Heading4"}]},{"paragraphFormat":{"styleName":"Heading 5"},"inlines":[{"text":"Heading5"}]},{"paragraphFormat":{"styleName":"Heading 6"},"inlines":[{"text":"Heading6"}]},{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"text":"Normal"}]}],"headersFooters":{},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Paragraph","name":"Heading 1","basedOn":"Normal","next":"Normal","link":"Heading 1 Char","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":12.0,"afterSpacing":0.0,"outlineLevel":"Level1"}},{"type":"Paragraph","name":"Heading 2","basedOn":"Normal","next":"Normal","link":"Heading 2 Char","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level2"}},{"type":"Paragraph","name":"Heading 3","basedOn":"Normal","next":"Normal","link":"Heading 3 Char","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level3"}},{"type":"Paragraph","name":"Heading 4","basedOn":"Normal","next":"Normal","link":"Heading 4 Char","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level4"}},{"type":"Paragraph","name":"Heading 5","basedOn":"Normal","next":"Normal","link":"Heading 5 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level5"}},{"type":"Paragraph","name":"Heading 6","basedOn":"Normal","next":"Normal","link":"Heading 6 Char","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"},"paragraphFormat":{"beforeSpacing":2.0,"afterSpacing":0.0,"outlineLevel":"Level6"}},{"type":"Character","name":"Default Paragraph Font"},{"type":"Character","name":"Heading 1 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":16.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 2 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":13.0,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 3 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontSize":12.0,"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}},{"type":"Character","name":"Heading 4 Char","basedOn":"Default Paragraph Font","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 5 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF"}},{"type":"Character","name":"Heading 6 Char","basedOn":"Default Paragraph Font","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF"}}]}';
+                this.$refs.documenteditor.open(sfdt);
+            },
+            onInsertToc: function() {
+                //Table of contents settings.
+                let tocSettings: TableOfContentsSettings =
+                {
+                    startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true
+                };
+                //Insert table of contents.
+                this.$refs.documenteditor.ej2Instances.editor.insertTableOfContents(tocSettings);
+            }
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs8/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/app.vue
new file mode 100644
index 000000000..f58d626d8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/app.vue
@@ -0,0 +1,37 @@
+<template>
+        <div id="app">
+            <div>
+                  <button v-on:click='saveAsDotx' >Save</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+</template>
+<script>
+        import { DocumentEditorComponent, Selection, WordExport, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+        export default {
+            name: "App",
+            components: {
+                "ejs-documenteditor": DocumentEditorComponent
+            },
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                //Inject require modules.
+                DocumentEditor : [SfdtExport, WordExport, Selection, Editor]
+            },
+            methods: {
+                saveAsDotx: function() {
+                    //Download the document in docx format.
+                    this.$refs.documenteditor.save('sample', 'Dotx');
+                }
+            }
+        }
+</script>
+<style>
+      @import "../../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
+
+
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/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/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/index.js
new file mode 100644
index 000000000..8682726d0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/index.js
@@ -0,0 +1,34 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                  <button v-on:click='saveAsDotx' >Save</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                //Inject require modules.
+                DocumentEditor : [SfdtExport, WordExport, Selection, Editor]
+            }
+            methods: {
+                saveAsDotx: function() {
+                    //Download the document in docx format.
+                    this.$refs.documenteditor.save('sample', 'Dotx');
+                }
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/export-cs9/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/app-composition.vue
new file mode 100644
index 000000000..a32642c19
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/app-composition.vue
@@ -0,0 +1,26 @@
+<template>
+      <div id="app">
+            <ejs-documenteditorcontainer ref='doceditcontainer' height="370px" style="width: 100%;" id='container'
+                  :enableToolbar='true'></ejs-documenteditorcontainer>
+      </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+const doceditcontainer = ref(null);
+onMounted(function () {
+      let sfdt = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":
+            Send a quick reply
+            
+            {"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+      let editor = doceditcontainer.value.ej2Instances.documentEditor;
+      //Open the default document in Document Editor.
+      editor.open(sfdt);
+      doceditcontainer.value.ej2Instances.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+})
+provide('DocumentEditorContainer', [Toolbar]);
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/app.vue
new file mode 100644
index 000000000..62d1b94f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/app.vue
@@ -0,0 +1,33 @@
+<template>
+      <div id="app">
+            <ejs-documenteditorcontainer ref='doceditcontainer' height="370px" style="width: 100%;" id='container'
+                  :enableToolbar='true'></ejs-documenteditorcontainer>
+      </div>
+</template>
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+      name: "App",
+      components: {
+            "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+      },
+      data() {
+            return {
+            };
+      },
+      mounted: function () {
+            let sfdt = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+            let editor = this.$refs.doceditcontainer.ej2Instances.documentEditor;
+            //Open the default document in Document Editor.
+            editor.open(sfdt);
+            this.$refs.doceditcontainer.ej2Instances.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+      },
+      provide: {
+            DocumentEditorContainer: [Toolbar]
+      }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-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/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/index.js
new file mode 100644
index 000000000..8dd7bb265
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/index.js
@@ -0,0 +1,31 @@
+
+      import Vue from 'vue';
+      import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar} from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorContainerPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app">
+           <ejs-documenteditorcontainer ref='doceditcontainer' height="370px" style="width: 100%;" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+      </div>
+`,
+
+        data() {
+          return {
+          };
+        },
+        mounted: function() {
+              let sfdt: string = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+              var editor = this.$refs.doceditcontainer.ej2Instances.documentEditor;
+              //Open the default document in Document Editor.
+              editor.open(sfdt);
+              this.$refs.doceditcontainer.ej2Instances.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+          },
+        provide: {
+          DocumentEditorContainer: [Toolbar]
+        }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/app-composition.vue
new file mode 100644
index 000000000..4c0af8e46
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/app-composition.vue
@@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <ejs-documenteditor id="container6" height="370px" style="width: 100%" :serviceUrl='serviceUrl' :isReadOnly='false'
+      :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true'
+      :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true'
+      :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true'
+      :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
+      :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true'
+      :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true'
+      :enableTableOptionsDialog='true'></ejs-documenteditor>
+  </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+
+provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/app.vue
new file mode 100644
index 000000000..af744cf95
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/app.vue
@@ -0,0 +1,34 @@
+<template>
+  <div id="app">
+    <ejs-documenteditor id="container6" height="370px" style="width: 100%" :serviceUrl='serviceUrl' :isReadOnly='false'
+      :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true'
+      :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true'
+      :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true'
+      :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
+      :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true'
+      :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true'
+      :enableTableOptionsDialog='true'></ejs-documenteditor>
+  </div>
+</template>
+<script>
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditor": DocumentEditorComponent
+  },
+  data() {
+    return {
+      serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/'
+    };
+  },
+  provide: {
+    //Inject require modules.
+    DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
+  }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/index.css
new file mode 100644
index 000000000..d148bc8e8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/index.css
@@ -0,0 +1,2 @@
+
+ 
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-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/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/index.js
new file mode 100644
index 000000000..556f6e6c2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/index.js
@@ -0,0 +1,26 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+    <div id="app">
+      <ejs-documenteditor id="container6" height="370px"  style="width: 100%" :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true' :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'></ejs-documenteditor>
+    </div>
+`,
+
+      data() {
+        return {
+          serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/'
+        };
+      },
+      provide: {
+        //Inject require modules.
+        DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
+      }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs2/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/app-composition.vue
new file mode 100644
index 000000000..cb85f4dac
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/app-composition.vue
@@ -0,0 +1,18 @@
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' height="590px" id='container'
+      :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+
+provide('DocumentEditorContainer', [Toolbar]);
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/app.vue
new file mode 100644
index 000000000..376dfbf34
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/app.vue
@@ -0,0 +1,26 @@
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' height="590px" id='container'
+      :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+  },
+  data() {
+    return { serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/' };
+  },
+  provide: {
+    //Inject require modules.
+    DocumentEditorContainer: [Toolbar]
+  }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/index.css
new file mode 100644
index 000000000..d148bc8e8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/index.css
@@ -0,0 +1,2 @@
+
+ 
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/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/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/index.js
new file mode 100644
index 000000000..e7409d3ec
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/index.js
@@ -0,0 +1,24 @@
+
+  import Vue from 'vue';
+  import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar} from '@syncfusion/ej2-vue-documenteditor';
+
+  Vue.use(DocumentEditorContainerPlugin);
+
+  
+new Vue({
+	el: '#app',
+	template: `
+    <div id="app">
+      <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+    </div>
+`,
+
+    data() {
+      return { serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/' };
+    },
+    provide: {
+      //Inject require modules.
+      DocumentEditorContainer: [Toolbar]
+    }
+  
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs3/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/app-composition.vue
new file mode 100644
index 000000000..34ef60e7e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/app-composition.vue
@@ -0,0 +1,46 @@
+<template>
+  <div id="app">
+    <ejs-documenteditor id="container6" ref="documenteditor" :created="onCreated" :documentChange="onDocumentChange"
+      style="width: 100%;" :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true'
+      :enableSelection='true' :enableContextMenu='true' :enableSearch='true' :enableOptionsPane='true'
+      :enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true'
+      :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true'
+      :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true'
+      :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true'
+      :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'
+      height='400px'></ejs-documenteditor>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+
+provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
+
+const onCreated = function () {
+  let sfdt = `{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+  //Open default document in Document Editor.
+  documenteditor.value.open(sfdt);
+}
+const onDocumentChange = function () {
+  //Enable read only mode.
+  documenteditor.value.ej2Instances.isReadOnly = true;
+}
+
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/app.vue
new file mode 100644
index 000000000..b2fafc838
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/app.vue
@@ -0,0 +1,53 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor id="container6" ref="documenteditor" :created="onCreated" :documentChange="onDocumentChange"
+            style="width: 100%;" :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true'
+            :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true' :enableSearch='true'
+            :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true' :enableEditor='true'
+            :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true'
+            :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
+            :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true'
+            :enableParagraphDialog='true' :enableFontDialog='true' :enableTablePropertiesDialog='true'
+            :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true' height='400px'></ejs-documenteditor>
+    </div>
+</template>
+
+<script>
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data() {
+        return { serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/' }
+    },
+    provide: {
+        DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
+    },
+    methods: {
+        onCreated: function () {
+            let sfdt = `{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+            //Open default document in Document Editor.
+            this.$refs.documenteditor.open(sfdt);
+        },
+        onDocumentChange: function () {
+            //Enable read only mode.
+            this.$refs.documenteditor.ej2Instances.isReadOnly = true;
+        }
+    }
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/index.css
new file mode 100644
index 000000000..7490c0481
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/index.css
@@ -0,0 +1,10 @@
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/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/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/index.js
new file mode 100644
index 000000000..9899b1af9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/index.js
@@ -0,0 +1,34 @@
+
+    import Vue from 'vue';
+    import { DocumentEditorPlugin, DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+
+    Vue.use(DocumentEditorPlugin);
+    
+new Vue({
+	el: '#app',
+	template: `
+    <div id="app">
+        <ejs-documenteditor id="container6" ref="documenteditor" :created="onCreated" :documentChange="onDocumentChange" style="width: 100%;" :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true' :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true' height='400px'></ejs-documenteditor>
+    </div>
+`,
+
+      data(){
+          return {serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/'}
+      },
+      provide: {
+          DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
+      },
+      methods: {
+          onCreated : function() {
+            let sfdt =`{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+            //Open default document in Document Editor.
+            this.$refs.documenteditor.open(sfdt);
+          },
+          onDocumentChange : function() {
+            //Enable read only mode.
+            this.$refs.documenteditor.isReadOnly = true;
+          }
+      }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs4/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/app-composition.vue
new file mode 100644
index 000000000..dfe09ecf4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/app-composition.vue
@@ -0,0 +1,38 @@
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer :serviceUrl='serviceUrl' :enableToolbar='true' v-bind:documentChange="onDocumentChange"
+      v-bind:created="onCreated" ref="documentEditorContainer" height='590px'> </ejs-documenteditorcontainer>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+const documentEditorContainer = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+
+provide('DocumentEditorContainer', [Toolbar]);
+
+const onCreated = function () {
+  let sfdt = `{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+  //Open default document in Document Editor.
+  documentEditorContainer.value.ej2Instances.documentEditor.open(sfdt);
+}
+const onDocumentChange = function () {
+  //Enable read only mode.
+  documentEditorContainer.value.ej2Instances.restrictEditing = true;
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/app.vue
new file mode 100644
index 000000000..6dc84cdfb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/app.vue
@@ -0,0 +1,47 @@
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer :serviceUrl='serviceUrl' :enableToolbar='true' v-bind:documentChange="onDocumentChange"
+      v-bind:created="onCreated" ref="documentEditorContainer" height='590px'> </ejs-documenteditorcontainer>
+  </div>
+</template>
+
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+  },
+  data() {
+    return { serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/' }
+  },
+  provide: {
+    //Inject require modules.
+    DocumentEditorContainer: [Toolbar]
+  },
+  methods: {
+    onCreated: function () {
+      let sfdt = `{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+      //Open default document in Document Editor.
+      this.$refs.documentEditorContainer.ej2Instances.documentEditor.open(sfdt);
+    },
+    onDocumentChange: function () {
+      //Enable read only mode.
+      this.$refs.documentEditorContainer.ej2Instances.restrictEditing = true;
+    }
+  },
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/index.css
new file mode 100644
index 000000000..7490c0481
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/index.css
@@ -0,0 +1,10 @@
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/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/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/index.js
new file mode 100644
index 000000000..b952b1d5a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/index.js
@@ -0,0 +1,34 @@
+
+    import Vue from 'vue';
+    import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorContainerPlugin);
+    
+new Vue({
+	el: '#app',
+	template: `
+  <div id="app">
+      <ejs-documenteditorcontainer :serviceUrl='serviceUrl' :enableToolbar='true' v-bind:documentChange="onDocumentChange" v-bind:created="onCreated" ref="documentEditorContainer" height='590px'> </ejs-documenteditorcontainer>
+  </div>
+`,
+
+      data(){
+          return { serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/'}
+      },
+      provide: {
+          //Inject require modules.
+          DocumentEditorContainer: [Toolbar]
+      },
+      methods: {
+          onCreated : function() {
+            let sfdt =`{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+            //Open default document in Document Editor.
+            this.$refs.documentEditorContainer.ej2Instances.documentEditor.open(sfdt);
+          },
+          onDocumentChange : function() {
+            //Enable read only mode.
+            this.$refs.documentEditorContainer.restrictEditing = true;
+          }
+      },
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs5/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/app-composition.vue
new file mode 100644
index 000000000..834b15b94
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/app-composition.vue
@@ -0,0 +1,24 @@
+<template>
+      <div id="app">
+            <ejs-documenteditorcontainer ref='doceditcontainer' height="370px" style="width: 100%;" id='container'
+                  :enableToolbar='true'></ejs-documenteditorcontainer>
+      </div>
+</template>
+<script setup>
+import { provide, onMounted, ref } from "vue";
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+const doceditcontainer = ref(null);
+onMounted(function () {
+      let sfdt = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+      let editor = doceditcontainer.value.ej2Instances.documentEditor;
+      //Open the default document in Document Editor.
+      editor.open(sfdt);
+      doceditcontainer.value.ej2Instances.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+})
+provide('DocumentEditorContainer', [Toolbar]);
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/app.vue
new file mode 100644
index 000000000..62d1b94f4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/app.vue
@@ -0,0 +1,33 @@
+<template>
+      <div id="app">
+            <ejs-documenteditorcontainer ref='doceditcontainer' height="370px" style="width: 100%;" id='container'
+                  :enableToolbar='true'></ejs-documenteditorcontainer>
+      </div>
+</template>
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+      name: "App",
+      components: {
+            "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+      },
+      data() {
+            return {
+            };
+      },
+      mounted: function () {
+            let sfdt = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+            let editor = this.$refs.doceditcontainer.ej2Instances.documentEditor;
+            //Open the default document in Document Editor.
+            editor.open(sfdt);
+            this.$refs.doceditcontainer.ej2Instances.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+      },
+      provide: {
+            DocumentEditorContainer: [Toolbar]
+      }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/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/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/index.js
new file mode 100644
index 000000000..8dd7bb265
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/index.js
@@ -0,0 +1,31 @@
+
+      import Vue from 'vue';
+      import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar} from '@syncfusion/ej2-vue-documenteditor';
+
+      Vue.use(DocumentEditorContainerPlugin);
+
+      
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app">
+           <ejs-documenteditorcontainer ref='doceditcontainer' height="370px" style="width: 100%;" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+      </div>
+`,
+
+        data() {
+          return {
+          };
+        },
+        mounted: function() {
+              let sfdt: string = `{"sections":[{"blocks":[{"characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Name","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"text":":","characterFormat":{"fontSize":14.0,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter name"},{"editRangeId":"1348272392","editableRangeStart":{"editRangeId":"1348272392","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Designation:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter designation"},{"editRangeId":"808933422","editableRangeStart":{"editRangeId":"808933422","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Email Address:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}},{"name":"_GoBack","bookmarkType":0},{"name":"_GoBack","bookmarkType":1}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"},{"text":"Enter email address"},{"editRangeId":"810441411","editableRangeStart":{"editRangeId":"810441411","columnFirst":0,"columnLast":0,"user":"engineer@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Feedbacks:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the feedbacks"},{"editRangeId":"1016946268","editableRangeStart":{"editRangeId":"1016946268","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0},"paragraphFormat":{"lineSpacing":32.0,"lineSpacingType":"Exactly","styleName":"Normal"},"inlines":[{"text":"Review comments:","characterFormat":{"bold":true,"fontSize":14.0,"boldBidi":true,"fontSizeBidi":14.0}}]},{"rows":[{"rowFormat":{"allowBreakAcrossPages":true,"isHeader":false,"height":20.0,"heightType":"AtLeast","borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}},"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal"},"inlines":[{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"},{"text":"Enter the comments"},{"editRangeId":"1373703080","editableRangeStart":{"editRangeId":"1373703080","columnFirst":0,"columnLast":0,"user":"manager@mycompany.com"}}]}],"cellFormat":{"columnSpan":1,"rowSpan":1,"preferredWidth":467.5,"preferredWidthType":"Point","verticalAlignment":"Center","isSamePaddingAsTable":true,"borders":{"left":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}}}}]}],"title":null,"description":null,"tableFormat":{"allowAutoFit":true,"leftIndent":0.0,"tableAlignment":"Left","preferredWidthType":"Auto","borders":{"left":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"right":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"top":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"bottom":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"vertical":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"horizontal":{"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalDown":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false},"diagonalUp":{"lineStyle":"None","lineWidth":0.0,"shadow":false,"space":0.0,"hasNoneStyle":false}},"bidi":false}},{"paragraphFormat":{"styleName":"Normal"},"inlines":[]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"styleName":"Header"},"inlines":[{"text":"Employee’s Details "}]}]}},"sectionFormat":{"headerDistance":36.0,"footerDistance":36.0,"pageWidth":612.0,"pageHeight":792.0,"leftMargin":72.0,"rightMargin":72.0,"topMargin":72.0,"bottomMargin":72.0,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false}}],"characterFormat":{"fontSize":11.0,"fontFamily":"Calibri","fontSizeBidi":11.0,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"afterSpacing":8.0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple"},"background":{"color":"#FFFFFFFF"},"styles":[{"type":"Paragraph","name":"Normal","next":"Normal"},{"type":"Character","name":"Default Paragraph Font"},{"type":"Paragraph","name":"List Paragraph","basedOn":"Normal","paragraphFormat":{"leftIndent":36.0,"contextualSpacing":true}},{"type":"Paragraph","name":"Header","basedOn":"Normal","next":"Normal","link":"Header Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Header Char","basedOn":"Default Paragraph Font"},{"type":"Paragraph","name":"Footer","basedOn":"Normal","link":"Footer Char","paragraphFormat":{"afterSpacing":0.0,"lineSpacing":1.0,"lineSpacingType":"Multiple","tabs":[{"tabJustification":"Center","position":234.0,"tabLeader":"None","deletePosition":0.0},{"tabJustification":"Right","position":468.0,"tabLeader":"None","deletePosition":0.0}]}},{"type":"Character","name":"Footer Char","basedOn":"Default Paragraph Font"}],"defaultTabWidth":36.0,"formatting":false,"protectionType":"ReadOnly","enforcement":true,"hashValue":"TQGuJuLceQCe234Ygx4q6NFgHpRMfi1hjFTojyKzbQOkwk+ckEM9CjNIdkiUhSR/e/7sfMxO4sbPcg/DBzztMg==","saltValue":"FXbkr1RtDIIIZfwlM71dMg=="}`;
+              var editor = this.$refs.doceditcontainer.ej2Instances.documentEditor;
+              //Open the default document in Document Editor.
+              editor.open(sfdt);
+              this.$refs.doceditcontainer.ej2Instances.serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+          },
+        provide: {
+          DocumentEditorContainer: [Toolbar]
+        }
+      
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/getting-started-cs6/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/app-composition.vue
new file mode 100644
index 000000000..b903de1b6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/app-composition.vue
@@ -0,0 +1,40 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" id="container_1" height="370px"
+            style="width: 100%;display:block"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue'
+import { DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+onMounted(function () {
+    let sfdt = `{
+                    "sections": [
+                        {
+                            "blocks": [
+                                {
+                                    "inlines": [
+                                        {
+                                            "characterFormat": {
+                                                "bold": true,
+                                                "italic": true
+                                            },
+                                            "text": "Hello World"
+                                        }
+                                    ]
+                                }
+                            ],
+                            "headersFooters": {
+                            }
+                        }
+                    ]
+                }`;
+    //Open the default document in Document Editor.
+    documenteditor.value.open(sfdt);
+})
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/app.vue
new file mode 100644
index 000000000..a286c309a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/app.vue
@@ -0,0 +1,48 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" id="container_1" height="370px"
+            style="width: 100%;display:block"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    mounted: function () {
+        let sfdt = `{
+                    "sections": [
+                        {
+                            "blocks": [
+                                {
+                                    "inlines": [
+                                        {
+                                            "characterFormat": {
+                                                "bold": true,
+                                                "italic": true
+                                            },
+                                            "text": "Hello World"
+                                        }
+                                    ]
+                                }
+                            ],
+                            "headersFooters": {
+                            }
+                        }
+                    ]
+                }`;
+        //Open the default document in Document Editor.
+        this.$refs.documenteditor.open(sfdt);
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/index.css
new file mode 100644
index 000000000..139597f9c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/index.css
@@ -0,0 +1,2 @@
+
+
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-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/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/index.js
new file mode 100644
index 000000000..7fdc7ddad
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/index.js
@@ -0,0 +1,46 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+              <ejs-documenteditor ref="documenteditor" id="container_1" height="370px" style="width: 100%;display:block" ></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            mounted: function() {
+                let sfdt: string = `{
+                    "sections": [
+                        {
+                            "blocks": [
+                                {
+                                    "inlines": [
+                                        {
+                                            "characterFormat": {
+                                                "bold": true,
+                                                "italic": true
+                                            },
+                                            "text": "Hello World"
+                                        }
+                                    ]
+                                }
+                            ],
+                            "headersFooters": {
+                            }
+                        }
+                    ]
+                }`;
+                //Open the default document in Document Editor.
+                this.$refs.documenteditor.open(sfdt);
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/app-composition.vue
new file mode 100644
index 000000000..eb7f82180
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/app-composition.vue
@@ -0,0 +1,39 @@
+<template>
+    <div id="app">
+        <input type="file" ref="fileUpload" v-on:change="onFileUpload" accept=".sfdt"
+            style="position:fixed; left:-100em" />
+        <div>
+            <button v-on:click='openFileButtonClickHandler'>Import</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+const fileUpload = ref(null);
+const documenteditor = ref(null);
+
+const openFileButtonClickHandler = function () {
+    fileUpload.value.click();
+}
+const onFileUpload = function (e) {
+    if (e.target.files[0]) {
+        let file = e.target.files[0];
+        if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+            let fileReader = new FileReader();
+            fileReader.onload = (e) => {
+                let contents = e.target.result;
+                //Open the default document in Document Editor.
+                documenteditor.value.open(contents);
+            };
+            fileReader.readAsText(file);
+        }
+    }
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/app.vue
new file mode 100644
index 000000000..b0519c74c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/app.vue
@@ -0,0 +1,47 @@
+<template>
+    <div id="app">
+        <input type="file" ref="fileUpload" v-on:change="onFileUpload" accept=".sfdt"
+            style="position:fixed; left:-100em" />
+        <div>
+            <button v-on:click='openFileButtonClickHandler'>Import</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import Vue from 'vue'
+import { DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    methods: {
+        openFileButtonClickHandler: function () {
+            this.$refs.fileUpload.click();
+        },
+        onFileUpload: function (e) {
+            if (e.target.files[0]) {
+                let file = e.target.files[0];
+                if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+                    let fileReader = new FileReader();
+                    fileReader.onload = (e) => {
+                        let contents = e.target.result;
+                        //Open the default document in Document Editor.
+                        this.$refs.documenteditor.open(contents);
+                    };
+                    fileReader.readAsText(file);
+                }
+            }
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-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/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/index.js
new file mode 100644
index 000000000..f477cd05c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/index.js
@@ -0,0 +1,44 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <input type="file" ref="fileUpload" v-on:change="onFileUpload" accept=".sfdt" style="position:fixed; left:-100em" />
+            <div>
+                  <button v-on:click='openFileButtonClickHandler' >Import</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;display:block" ></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            methods: {
+                openFileButtonClickHandler: function() {
+                    this.$refs.fileUpload.click();
+                },
+                onFileUpload: function(e) {
+                    if (e.target.files[0]) {
+                        let file = e.target.files[0];
+                        if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
+                            let fileReader: FileReader = new FileReader();
+                            fileReader.onload = (e: any) => {
+                                let contents: string = e.target.result;
+                                //Open the default document in Document Editor.
+                                this.$refs.documenteditor.open(contents);
+                            };
+                            fileReader.readAsText(file);
+                        }
+                    }
+                }
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/import-sfdt-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/app-composition.vue
new file mode 100644
index 000000000..870540728
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/app-composition.vue
@@ -0,0 +1,27 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            v-bind:requestNavigate="onRequestNavigate" height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
+
+provide('DocumentEditor ', [Selection, Editor]);
+
+const onRequestNavigate = function (args) {
+    if (args.linkType !== 'Bookmark') {
+        let link = args.navigationLink;
+        if (args.localReference.length > 0) {
+            link += '#' + args.localReference;
+        }
+        window.open(link);
+        args.isHandled = true;
+    }
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/app.vue
new file mode 100644
index 000000000..e458b8a77
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/app.vue
@@ -0,0 +1,38 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            v-bind:requestNavigate="onRequestNavigate" height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [Selection, Editor]
+    },
+    methods: {
+        onRequestNavigate: function (args) {
+            if (args.linkType !== 'Bookmark') {
+                let link = args.navigationLink;
+                if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                }
+                window.open(link);
+                args.isHandled = true;
+            }
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-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/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/index.js
new file mode 100644
index 000000000..85df55cbd
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/index.js
@@ -0,0 +1,36 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Selection, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' v-bind:requestNavigate="onRequestNavigate" height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            DocumentEditor : [Selection]
+        }
+        methods: {
+            onRequestNavigate: function(args: RequestNavigateEventArgs) {
+            if (args.linkType !== 'Bookmark') {
+                    let link: string = args.navigationLink;
+                    if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                    }
+                    window.open(link);
+                    args.isHandled = true;
+                }
+            }
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/app-composition.vue
new file mode 100644
index 000000000..2820324c7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/app-composition.vue
@@ -0,0 +1,26 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            v-bind:requestNavigate="onRequestNavigate" height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
+
+provide('DocumentEditor ', [Selection, Editor]);
+
+const onRequestNavigate = function (args) {
+    if (args.linkType !== 'Bookmark') {
+        let link = args.navigationLink;
+        if (args.localReference.length > 0) {
+            link += '#' + args.localReference;
+        }
+        window.open(link);
+        args.isHandled = true;
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/app.vue
new file mode 100644
index 000000000..a31b08a6d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/app.vue
@@ -0,0 +1,38 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            v-bind:requestNavigate="onRequestNavigate" height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [Selection, Editor]
+    },
+    methods: {
+        onRequestNavigate: function (args) {
+            if (args.linkType !== 'Bookmark') {
+                let link = args.navigationLink;
+                if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                }
+                window.open(link);
+                args.isHandled = true;
+            }
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-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/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/index.js
new file mode 100644
index 000000000..da0ddb7ce
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/index.js
@@ -0,0 +1,36 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Selection, Editor, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' v-bind:requestNavigate="onRequestNavigate" height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            DocumentEditor : [Selection, Editor]
+        }
+        methods: {
+            onRequestNavigate: function(args: RequestNavigateEventArgs) {
+            if (args.linkType !== 'Bookmark') {
+                    let link: string = args.navigationLink;
+                    if (args.localReference.length > 0) {
+                    link += '#' + args.localReference;
+                    }
+                    window.open(link);
+                    args.isHandled = true;
+                }
+            }
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs2/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/app-composition.vue
new file mode 100644
index 000000000..d2dd8e0e3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/app-composition.vue
@@ -0,0 +1,35 @@
+<template>
+    <div id="app" style="height:330px">
+        <div>
+            <button v-on:click='showHyperlinkDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" v-bind:requestNavigate="onRequestNavigate"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor ', [Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport]);
+
+const showHyperlinkDialog = function () {
+    documenteditor.value.showDialog('Hyperlink');
+}
+const onRequestNavigate = function (args) {
+    if (args.linkType !== 'Bookmark') {
+        let link = args.navigationLink;
+        if (args.localReference.length > 0) {
+            link += '#' + args.localReference;
+        }
+        window.open(link);
+        args.isHandled = true;
+    }
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/app.vue
new file mode 100644
index 000000000..14d319ca2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/app.vue
@@ -0,0 +1,55 @@
+<template>
+    <div id="app" style="height:330px">
+        <div>
+            <button v-on:click='showHyperlinkDialog'>Open dialog</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+            :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" v-bind:requestNavigate="onRequestNavigate"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+  </template>
+  <script>
+  import { DocumentEditorComponent, Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+  
+  export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport]
+    },
+    methods: {
+        showHyperlinkDialog: function () {
+          this.$refs.documenteditor.showDialog('Hyperlink');
+        },
+        onRequestNavigate: function (args) {
+                if (args.linkType !== 'Bookmark') {
+                    let link = args.navigationLink;
+                    if (args.localReference.length > 0) {
+                        link += '#' + args.localReference;
+                    }
+                    window.open(link);
+                    args.isHandled = true;
+                }
+            }
+    }
+  }
+  </script>
+  <style>
+  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+      @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+      @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+      @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+      @import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+      @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/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/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/index.js
new file mode 100644
index 000000000..d5b1cbdf2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/index.js
@@ -0,0 +1,32 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app" style="height:330px">
+            <div>
+                  <button v-on:click='showHyperlinkDialog' >Open dialog</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            DocumentEditor : [Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport]
+        }
+        methods: {
+            showHyperlinkDialog: function() {
+                this.$refs.documenteditor.showDialog('Hyperlink');
+            }
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/link-cs3/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/app-composition.vue
new file mode 100644
index 000000000..5c0b97a4b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/app-composition.vue
@@ -0,0 +1,31 @@
+<template>
+  <ejs-documenteditor ref="documenteditor" :height="height" :serviceUrl='serviceUrl'></ejs-documenteditor>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+const height = '370px';
+
+onMounted(function () {
+  // load your default document here
+  let sfdt = `{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+  // open the default document.
+  documenteditor.value.open(sfdt);
+})
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/app.vue
new file mode 100644
index 000000000..04c659780
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/app.vue
@@ -0,0 +1,41 @@
+<template>
+  <ejs-documenteditor ref="documenteditor" :height="height" :serviceUrl='serviceUrl'></ejs-documenteditor>
+</template>
+
+<script>
+import { DocumentEditorComponent, DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditor": DocumentEditorComponent
+  },
+  data() {
+    return {
+      serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+      height: '370px'
+    }
+  },
+  provide: {
+    DocumentEditor: []
+  },
+  mounted: function () {
+    // load your default document here
+    let sfdt = `{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+    // open the default document.
+    this.$refs.documenteditor.open(sfdt);
+  }
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/index.css
new file mode 100644
index 000000000..7490c0481
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/index.css
@@ -0,0 +1,10 @@
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-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/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/index.js
new file mode 100644
index 000000000..a35d4dad9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/index.js
@@ -0,0 +1,29 @@
+
+    import Vue from 'vue';
+    import { DocumentEditorPlugin, DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+    
+new Vue({
+	el: '#app',
+	template: `
+    <ejs-documenteditor ref="documenteditor" :height="height" :serviceUrl='serviceUrl'></ejs-documenteditor>
+`,
+
+      data(){
+        return {
+            serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+            height: '370px'
+        }
+      },
+      provide: {
+        DocumentEditor: []
+      },
+      mounted: function() {
+        // load your default document here
+        let sfdt =`{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+        // open the default document.
+        this.$refs.documenteditor.open(sfdt);
+      }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/systemjs.config.js
new file mode 100644
index 000000000..ccafe7795
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs1/systemjs.config.js
@@ -0,0 +1,44 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/app-composition.vue
new file mode 100644
index 000000000..fcbc5023c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/app-composition.vue
@@ -0,0 +1,35 @@
+<template>
+  <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true'
+    :created="onCreate()"> </ejs-documenteditorcontainer>
+</template>
+
+<script setup>
+import { provide, ref } from "vue";
+
+import { DocumentEditorContainerComponent, DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+const container = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+const height = '590px';
+
+provide('DocumentEditorContainer', [Toolbar]);
+
+mounted(function () {
+  // load your default document here
+  let sfdt = `{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+  // open the default document.
+  container.value.ej2Instances.documentEditor.open(sfdt);
+})
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/app.vue
new file mode 100644
index 000000000..a84fe14d8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/app.vue
@@ -0,0 +1,47 @@
+<template>
+  <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true'
+    :created="onCreate"> </ejs-documenteditorcontainer>
+</template>
+
+<script>
+
+import { DocumentEditorContainerComponent, DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+  },
+  data() {
+    return {
+      serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+      height: '590px'
+    }
+  },
+  provide: {
+    DocumentEditorContainer: [Toolbar]
+  },
+  methods: {
+    onCreate: function () {
+    }
+  },
+  mounted: function () {
+    // load your default document here
+    let sfdt = `{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+    // open the default document.
+    this.$refs.container.ej2Instances.documentEditor.open(sfdt);
+  }
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/index.css
new file mode 100644
index 000000000..7490c0481
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/index.css
@@ -0,0 +1,10 @@
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-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/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/index.js
new file mode 100644
index 000000000..a529f0ed4
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/index.js
@@ -0,0 +1,33 @@
+
+    import Vue from 'vue';
+    import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorContainerPlugin);
+    
+new Vue({
+	el: '#app',
+	template: `
+    <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true' :created= "onCreate()"> </ejs-documenteditorcontainer>
+`,
+
+      data(){
+        return {
+            serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+            height: '590px'
+        }
+      },
+      provide: {
+        DocumentEditorContainer: [Toolbar]
+      },
+      methods: {
+            onCreate: function() {
+            }
+      },
+      mounted: function() {
+        // load your default document here
+        let sfdt =`{ "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36, "bidi": false }, "blocks": [{ "paragraphFormat": { "afterSpacing": 30, "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Adventure Works Cycles" }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "bold": false, "italic": false, "fontSize": 11, "fontFamily": "Calibri", "underline": "None", "strikethrough": "None", "baselineAlignment": "Normal", "highlightColor": "NoColor", "fontColor": "empty", "fontSizeBidi": 11, "fontFamilyBidi": "Calibri", "allCaps": false }, "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 0, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "listFormat": {}, "bidi": false }, "defaultTabWidth": 36, "trackChanges": false, "enforcement": false, "hashValue": "", "saltValue": "", "formatting": false, "protectionType": "NoProtection", "dontUseHTMLParagraphAutoSpacing": false, "formFieldShading": true, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri" }, "next": "Normal" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 2, "afterSpacing": 6, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "fontSize": 13, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "fontSize": 12, "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 4", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level4", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 4 Char", "next": "Normal" }, { "name": "Heading 4 Char", "type": "Character", "characterFormat": { "italic": true, "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 5", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level5", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Normal", "link": "Heading 5 Char", "next": "Normal" }, { "name": "Heading 5 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#2F5496" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 6", "type": "Paragraph", "paragraphFormat": { "leftIndent": 0, "rightIndent": 0, "firstLineIndent": 0, "textAlignment": "Left", "beforeSpacing": 2, "afterSpacing": 0, "lineSpacing": 1.0791666507720947, "lineSpacingType": "Multiple", "outlineLevel": "Level6", "listFormat": {} }, "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Normal", "link": "Heading 6 Char", "next": "Normal" }, { "name": "Heading 6 Char", "type": "Character", "characterFormat": { "fontFamily": "Calibri Light", "fontColor": "#1F3763" }, "basedOn": "Default Paragraph Font" }], "lists": [], "abstractLists": [], "comments": [], "revisions": [], "customXml": [] }`;
+        // open the default document.
+        this.$refs.container.ej2Instances.documentEditor.open(sfdt);
+      }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/systemjs.config.js
new file mode 100644
index 000000000..4c3283a94
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/open-default-document-cs2/systemjs.config.js
@@ -0,0 +1,44 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+"@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/app-composition.vue
new file mode 100644
index 000000000..dabf92879
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/app-composition.vue
@@ -0,0 +1,51 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='print'>Print</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enablePrint='true' height="370px" style="width: 100%;">
+        </ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, onMounted, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Print } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor ', [Print]);
+
+const print = function () {
+    //Print the content of the Document Editor.
+    documenteditor.value.print();
+}
+
+onMounted(function () {
+    let sfdt = `{
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Hello World"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {
+                        }
+                    }
+                ]
+            }`;
+    //Open default document in Document Editor.
+    documenteditor.value.open(sfdt);
+})
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/app.vue
new file mode 100644
index 000000000..54b284cc5
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/app.vue
@@ -0,0 +1,60 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='print'>Print</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enablePrint='true' height="370px" style="width: 100%;">
+        </ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Print } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [Print]
+    },
+    methods: {
+        print: function () {
+            //Print the content of the Document Editor.
+            this.$refs.documenteditor.print();
+        }
+    },
+    mounted: function () {
+        let sfdt = `{
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Hello World"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {
+                        }
+                    }
+                ]
+            }`;
+        //Open default document in Document Editor.
+        this.$refs.documenteditor.open(sfdt);
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-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/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/index.js
new file mode 100644
index 000000000..ba485c7f2
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/index.js
@@ -0,0 +1,58 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Print } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                  <button v-on:click='print' >Print</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enablePrint='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            DocumentEditor : [Print]
+        }
+        methods: {
+            print: function() {
+                //Print the content of the Document Editor.
+                this.$refs.documenteditor.print();
+            }
+        },
+        mounted: function() {
+            let sfdt: string =`{
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "inlines": [
+                                    {
+                                        "characterFormat": {
+                                            "bold": true,
+                                            "italic": true
+                                        },
+                                        "text": "Hello World"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {
+                        }
+                    }
+                ]
+            }`;
+            //Open default document in Document Editor.
+            this.$refs.documenteditor.open(sfdt);
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/app-composition.vue
new file mode 100644
index 000000000..e3985740b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/app-composition.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='print'>Print</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
+            :enableSelection='true' :enableEditorHistory='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Print, Editor, Selection, EditorHistory } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Print, Editor, Selection, EditorHistory]);
+
+const print = function () {
+    //Print the content of the Document Editor.
+    documenteditor.value.print();
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/app.vue
new file mode 100644
index 000000000..ed08172f7
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/app.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='print'>Print</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
+            :enableSelection='true' :enableEditorHistory='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Print, Editor, Selection, EditorHistory } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [Print, Editor, Selection, EditorHistory]
+    },
+    methods: {
+        print: function () {
+            //Print the content of the Document Editor.
+            this.$refs.documenteditor.print();
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-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/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/index.js
new file mode 100644
index 000000000..61cc58353
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/index.js
@@ -0,0 +1,34 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Print, Editor, Selection, EditorHistory } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                  <button v-on:click='print' >Print</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true'  :enableEditor='true' :enableSelection='true' :enableEditorHistory='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            //Inject require modules.
+            DocumentEditor : [Print, Editor, Selection, EditorHistory]
+        }
+        methods: {
+            print: function() {
+                //Print the content of the Document Editor.
+                this.$refs.documenteditor.print();
+            }
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs2/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/app-composition.vue
new file mode 100644
index 000000000..907a7f31c
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/app-composition.vue
@@ -0,0 +1,35 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='print'>Print</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
+            :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+
+            <ejs-documenteditor ref="pagesetup_documenteditor" :isReadOnly='false' :enablePrint='true'
+            :enableEditor='true' :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true'
+            height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Print, Editor, Selection, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+const pagesetup_documenteditor = ref(null);
+provide('DocumentEditor ', [Print, Editor, Selection, EditorHistory, SfdtExport]);
+
+const print = function () {
+    let sfdtData = documenteditor.value.serialize();
+    pagesetup_documenteditor.value.open(sfdtData);
+    //Set A5 paper size
+    pagesetup_documenteditor.value.ej2Instances.selection.sectionFormat.pageWidth = 419.55;
+    pagesetup_documenteditor.value.ej2Instances.selection.sectionFormat.pageHeight = 595.30;
+    pagesetup_documenteditor.value.print();
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/app.vue
new file mode 100644
index 000000000..b3fe3ed0a
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/app.vue
@@ -0,0 +1,44 @@
+<template>
+    <div id="app">
+        <div>
+            <button v-on:click='print'>Print</button>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
+            :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true' height="370px"
+            style="width: 100%;"></ejs-documenteditor>
+
+            <ejs-documenteditor ref="pagesetup_documenteditor" :isReadOnly='false' :enablePrint='true'
+            :enableEditor='true' :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true'
+            height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Print, Editor, Selection, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [Print, Editor, Selection, EditorHistory, SfdtExport]
+    },
+    methods: {
+        print: function () {
+            let sfdtData = this.$refs.documenteditor.serialize();
+            this.$refs.pagesetup_documenteditor.open(sfdtData);
+            //Set A5 paper size
+            this.$refs.pagesetup_documenteditor.ej2Instances.selection.sectionFormat.pageWidth = 419.55;
+            this.$refs.pagesetup_documenteditor.ej2Instances.selection.sectionFormat.pageHeight = 595.30;
+            this.$refs.pagesetup_documenteditor.print();
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/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/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/index.js
new file mode 100644
index 000000000..0a922a5e1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/index.js
@@ -0,0 +1,39 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Print, Editor, Selection, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <div>
+                  <button v-on:click='print' >Print</button>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true'  :enableEditor='true' :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true' height="370px" style="width: 100%;""></ejs-documenteditor>
+
+            <ejs-documenteditor ref="pagesetup_documenteditor" :isReadOnly='false' :enablePrint='true'  :enableEditor='true' :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            DocumentEditor : [Print, Editor, Selection, EditorHistory, SfdtExport]
+        }
+        methods: {
+            print: function() {
+                let sfdtData =  this.$refs.documenteditor.serialize();
+                this.$refs.pagesetup_documenteditor.open(sfdtData);
+                //Set A5 paper size
+                this.$refs.pagesetup_documenteditor.ej2Instances.selection.sectionFormat.pageWidth = 419.55;
+                this.$refs.pagesetup_documenteditor.ej2Instances.selection.sectionFormat.pageHeight = 595.30;
+                this.$refs.pagesetup_documenteditor.print();
+            }
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/print-cs3/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/app-composition.vue
new file mode 100644
index 000000000..d78c77a71
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/app-composition.vue
@@ -0,0 +1,78 @@
+<template>
+    <div id="app" height="350px">
+        <div>
+            <table>
+                <tr>
+                    <td>
+                        <label>Text to find:</label>
+                    </td>
+                    <td>
+                        <input type="text" id="find_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label>Text to replace:</label>
+                    </td>
+                    <td>
+                        <input type="text" id="replace_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <button id="replace_all" v-on:click='onReplaceButtonClick' style="float:right;margin-top: 10px;"
+                            class="e-control e-btn">Replace All</button>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'
+            :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, onMounted, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, Search, OptionsPane } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, Search, OptionsPane]);
+
+const onReplaceButtonClick = function () {
+    let textToFind = (document.getElementById('find_text')).value;
+    let textToReplace = (document.getElementById('replace_text')).value;
+    if (textToFind !== '') {
+        // Find all the occurences of given text
+        documenteditor.value.ej2Instances.search.findAll(textToFind);
+        if (documenteditor.value.ej2Instances.searchModule.searchResults.length > 0) {
+            // Replace all the occurences of given text
+            documenteditor.value.ej2Instances.search.searchResults.replaceAll(textToReplace);
+        }
+    }
+}
+onMounted(() => {
+    let sfdt = `{
+                    "sections": [
+                        {
+                            "blocks": [
+                                {
+                                    "inlines": [
+                                        {
+                                            "characterFormat": {
+                                                "bold": true,
+                                                "italic": true
+                                            },
+                                            "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }`;
+    //Open the default document in Document Editor
+    documenteditor.value.open(sfdt);
+})
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/app.vue
new file mode 100644
index 000000000..e01bcdc02
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/app.vue
@@ -0,0 +1,90 @@
+<template>
+    <div id="app" height="350px">
+        <div>
+            <table>
+                <tr>
+                    <td>
+                        <label>Text to find:</label>
+                    </td>
+                    <td>
+                        <input type="text" id="find_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label>Text to replace:</label>
+                    </td>
+                    <td>
+                        <input type="text" id="replace_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <button id="replace_all" v-on:click='onReplaceButtonClick' style="float:right;margin-top: 10px;"
+                            class="e-control e-btn">Replace All</button>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'
+            :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, Search, OptionsPane } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [Selection, Editor, Search, OptionsPane]
+    },
+    methods: {
+        onReplaceButtonClick: function () {
+            let textToFind = (document.getElementById('find_text')).value;
+            let textToReplace = (document.getElementById('replace_text')).value;
+            if (textToFind !== '') {
+                // Find all the occurences of given text
+                this.$refs.documenteditor.ej2Instances.search.findAll(textToFind);
+                if (this.$refs.documenteditor.ej2Instances.searchModule.searchResults.length > 0) {
+                    // Replace all the occurences of given text
+                    this.$refs.documenteditor.ej2Instances.search.searchResults.replaceAll(textToReplace);
+                }
+            }
+        }
+    },
+    mounted() {
+        let sfdt = `{
+                    "sections": [
+                        {
+                            "blocks": [
+                                {
+                                    "inlines": [
+                                        {
+                                            "characterFormat": {
+                                                "bold": true,
+                                                "italic": true
+                                            },
+                                            "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }`;
+        //Open the default document in Document Editor
+        this.$refs.documenteditor.open(sfdt);
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-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/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/index.js
new file mode 100644
index 000000000..112695832
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/index.js
@@ -0,0 +1,87 @@
+
+        import Vue from 'vue'
+        import { DocumentEditorPlugin,  Selection, Editor, Search, OptionsPane } from '@syncfusion/ej2-vue-documenteditor';
+
+        Vue.use(DocumentEditorPlugin);
+
+        
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app" height="350px">
+            <div>
+                <table>
+                    <tr>
+                        <td>
+                            <label>Text to find:</label>
+                        </td>
+                        <td>
+                            <input type="text" id="find_text" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label>Text to replace:</label>
+                        </td>
+                        <td>
+                            <input type="text" id="replace_text" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <button id="replace_all" v-on:click='onReplaceButtonClick' style="float:right;margin-top: 10px;" class="e-control e-btn">Replace All</button>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+        </div>
+`,
+
+            data: function() {
+                return {
+                };
+            },
+            provide: {
+                //Inject require modules.
+                DocumentEditor : [ Selection, Editor, Search, OptionsPane]
+            }
+            methods: {
+                onReplaceButtonClick: function() {
+                    let textToFind: string = (document.getElementById('find_text') as HTMLInputElement).value;
+                    let textToReplace: string = (document.getElementById('replace_text') as HTMLInputElement).value;
+                    if (textToFind !== '') {
+                        // Find all the occurences of given text
+                        this.$refs.documenteditor.ej2Instances.search.findAll(textToFind);
+                        if (this.$refs.documenteditor.ej2Instances.searchModule.searchResults.length > 0) {
+                            // Replace all the occurences of given text
+                            this.$refs.documenteditor.ej2Instances.search.searchResults.replaceAll(textToReplace);
+                        }
+                    }
+                }
+            },
+            mounted() {
+                let sfdt: string = `{
+                    "sections": [
+                        {
+                            "blocks": [
+                                {
+                                    "inlines": [
+                                        {
+                                            "characterFormat": {
+                                                "bold": true,
+                                                "italic": true
+                                            },
+                                            "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }`;
+                //Open the default document in Document Editor
+                this.$refs.documenteditor.open(sfdt);
+            }
+        
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/replace-all-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/app-composition.vue
new file mode 100644
index 000000000..d2c8f3c7b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/app-composition.vue
@@ -0,0 +1,372 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref='documenteditor' id='container' pageOutline='#E0E0E0' height="370px"
+            style="width: 100%;" :enablePrint='true' :enableSfdtExport='true' :enableSelection='true'
+            :enableContextMenu='true' :enableSearch='true' enableOptionsPane='true' :enableWordExport='true'
+            :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true'
+            enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true'
+            :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true'
+            :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true'
+            :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'
+            :enableRtl='true' locale='ar-AE'></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, onMounted, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+import { L10n, setCulture } from '@syncfusion/ej2-base';
+
+L10n.load({
+    'ar-AE': {
+        'documenteditor': {
+            'Table': 'لجدول',
+            'Row': 'لصف',
+            'Cell': 'الخليه',
+            'Ok': 'موافق',
+            'Cancel': 'إلغاء الأمر',
+            'Size': 'حجم',
+            'Preferred Width': 'العرض المفضل',
+            'Points': 'نقاط',
+            'Percent': 'المائه',
+            'Measure in': 'القياس في',
+            'Alignment': 'محاذاه',
+            'Left': 'ليسار',
+            'Center': 'مركز',
+            'Right': 'الحق',
+            'Justify': 'تبرير',
+            'Indent from left': 'مسافة بادئه من اليسار',
+            'Borders and Shading': 'الحدود والتظليل',
+            'Options': 'خيارات',
+            'Specify height': 'تحديد الارتفاع',
+            'At least': 'الاقل',
+            'Exactly': 'تماما',
+            'Row height is': 'ارتفاع الصف هو',
+            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
+            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
+            'Vertical alignment': 'محاذاة عمودي',
+            'Top': 'أعلى',
+            'Bottom': 'اسفل',
+            'Default cell margins': 'هوامش الخلية الافتراضية',
+            'Default cell spacing': 'تباعد الخلايا الافتراضي',
+            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
+            'Cell margins': 'هوامش الخلية',
+            'Same as the whole table': 'نفس الجدول بأكمله',
+            'Borders': 'الحدود',
+            'None': 'اي',
+            'Single': 'واحد',
+            'Dot': 'نقطه',
+            'DashSmallGap': 'داشسمجاب',
+            'DashLargeGap': 'الاتحاد الخاص',
+            'DashDot': 'داشدوت',
+            'DashDotDot': 'ددهدودوت',
+            'Double': 'انقر نقرا مزدوجا',
+            'Triple': 'الثلاثي',
+            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
+            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
+            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
+            'ThinThickMediumGap': 'فجوه متوسطه سميك',
+            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
+            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
+            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
+            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
+            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
+            'SingleWavy': 'واحد مائج',
+            'DoubleWavy': 'مزدوج مائج',
+            'DashDotStroked': 'اندفاعه نقطه القوية',
+            'Emboss3D': 'D3مزخرف',
+            'Engrave3D': 'D3نقش',
+            'Outset': 'البدايه',
+            'Inset': 'الداخلي',
+            'Thick': 'سميكه',
+            'Style': 'نمط',
+            'Width': 'عرض',
+            'Height': 'ارتفاع',
+            'Letter': 'رساله',
+            'Tabloid': 'التابلويد',
+            'Legal': 'القانونيه',
+            'Statement': 'بيان',
+            'Executive': 'التنفيذي',
+            'A3': 'A3',
+            'A4': 'A4',
+            'A5': 'A5',
+            'B4': 'B4',
+            'B5': 'B5',
+            'Custom Size': 'حجم مخصص',
+            'Different odd and even': 'مختلفه غريبه وحتى',
+            'Different first page': 'الصفحة الاولي مختلفه',
+            'From edge': 'من الحافة',
+            'Header': 'راس',
+            'Footer': 'تذييل الصفحه',
+            'Margin': 'الهوامش',
+            'Paper': 'الورق',
+            'Layout': 'تخطيط',
+            'Orientation': 'التوجه',
+            'Landscape': 'المناظر الطبيعيه',
+            'Portrait': 'صوره',
+            'Table Of Contents': 'جدول المحتويات',
+            'Show page numbers': 'إظهار أرقام الصفحات',
+            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
+            'Nothing': 'شيء',
+            'Tab leader': 'قائد علامة التبويب',
+            'Show levels': 'إظهار المستويات',
+            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
+            'Build table of contents from': 'بناء جدول محتويات من',
+            'Styles': 'انماط',
+            'Available styles': 'الأنماط المتوفرة',
+            'TOC level': 'مستوي جدول المحتويات',
+            'Heading': 'عنوان',
+            'Heading 1': 'عنوان 1',
+            'Heading 2': 'عنوان 2',
+            'Heading 3': 'عنوان 3',
+            'Heading 4': 'عنوان 4',
+            'Heading 5': 'عنوان 5',
+            'Heading 6': 'عنوان 6',
+            'List Paragraph': 'فقره القائمة',
+            'Normal': 'العاديه',
+            'Outline levels': 'مستويات المخطط التفصيلي',
+            'Table entry fields': 'حقول إدخال الجدول',
+            'Modify': 'تعديل',
+            'Color': 'لون',
+            'Setting': 'اعداد',
+            'Box': 'مربع',
+            'All': 'جميع',
+            'Custom': 'المخصصه',
+            'Preview': 'معاينه',
+            'Shading': 'التظليل',
+            'Fill': 'ملء',
+            'Apply To': 'تنطبق علي',
+            'Table Properties': 'خصائص الجدول',
+            'Cell Options': 'خيارات الخلية',
+            'Table Options': 'خيارات الجدول',
+            'Insert Table': 'ادراج جدول',
+            'Number of columns': 'عدد الاعمده',
+            'Number of rows': 'عدد الصفوف',
+            'Text to display': 'النص الذي سيتم عرضه',
+            'Address': 'عنوان',
+            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
+            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
+            'Insert': 'ادراج',
+            'General': 'العامه',
+            'Indentation': 'المسافه البادئه',
+            'Before text': 'قبل النص',
+            'Special': 'الخاصه',
+            'First line': 'السطر الأول',
+            'Hanging': 'معلقه',
+            'After text': 'بعد النص',
+            'By': 'من',
+            'Before': 'قبل',
+            'Line Spacing': 'تباعد الأسطر',
+            'After': 'بعد',
+            'At': 'في',
+            'Multiple': 'متعدده',
+            'Spacing': 'تباعد',
+            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
+            'List level': 'مستوي القائمة',
+            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
+            'Level': 'مستوي',
+            'Number format': 'تنسيق الأرقام',
+            'Number style for this level': 'نمط الرقم لهذا المستوي',
+            'Enter formatting for number': 'إدخال تنسيق لرقم',
+            'Start at': 'بداية من',
+            'Restart list after': 'أعاده تشغيل قائمه بعد',
+            'Position': 'موقف',
+            'Text indent at': 'المسافة البادئة للنص في',
+            'Aligned at': 'محاذاة في',
+            'Follow number with': 'اتبع الرقم مع',
+            'Tab character': 'حرف علامة التبويب',
+            'Space': 'الفضاء',
+            'Arabic': 'العربية',
+            'UpRoman': 'حتى الروماني',
+            'LowRoman': 'الرومانية منخفضه',
+            'UpLetter': '',
+            'LowLetter': '',
+            'Number': 'عدد',
+            'Leading zero': 'يؤدي صفر',
+            'Bullet': 'رصاصه',
+            'Ordinal': 'الترتيبيه',
+            'Ordinal Text': 'النص الترتيبي',
+            'For East': 'للشرق',
+            'No Restart': 'لا أعاده تشغيل',
+            'Font': 'الخط',
+            'Font style': 'نمط الخط',
+            'Underline style': 'نمط التسطير',
+            'Font color': 'لون الخط',
+            'Effects': 'الاثار',
+            'Strikethrough': 'يتوسطه',
+            'Superscript': 'مرتفع',
+            'Subscript': 'منخفض',
+            'Double strikethrough': 'خط مزدوج يتوسطه خط',
+            'Regular': 'العاديه',
+            'Bold': 'جريئه',
+            'Italic': 'مائل',
+            'Cut': 'قطع',
+            'Copy': 'نسخ',
+            'Paste': 'لصق',
+            'Hyperlink': 'الارتباط التشعبي',
+            'Open Hyperlink': 'فتح ارتباط تشعبي',
+            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
+            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
+            'Paragraph': 'الفقره',
+            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
+            'Character': 'حرف',
+            'Merge Cells': 'دمج الخلايا',
+            'Insert Above': 'ادراج أعلاه',
+            'Insert Below': 'ادراج أدناه',
+            'Insert Left': 'ادراج إلى اليسار',
+            'Insert Right': 'ادراج اليمين',
+            'Delete': 'حذف',
+            'Delete Table': 'حذف جدول',
+            'Delete Row': 'حذف صف',
+            'Delete Column': 'حذف عمود',
+            'File Name': 'اسم الملف',
+            'Format Type': 'نوع التنسيق',
+            'Save': 'حفظ',
+            'Navigation': 'التنقل',
+            'Results': 'نتائج',
+            'Replace': 'استبدال',
+            'Replace All': 'استبدال الكل',
+            'We replaced all': 'استبدلنا جميع',
+            'Find': 'العثور',
+            'No matches': 'لا توجد تطابقات',
+            'All Done': 'كل القيام به',
+            'Result': 'نتيجه',
+            'of': 'من',
+            'instances': 'الحالات',
+            'with': 'مع',
+            'Click to follow link': 'انقر لمتابعه الارتباط',
+            'Continue Numbering': 'متابعه الترقيم',
+            'Bookmark name': 'اسم الإشارة المرجعية',
+            'Close': 'اغلاق',
+            'Restart At': 'أعاده التشغيل عند',
+            'Properties': 'خصائص',
+            'Name': 'اسم',
+            'Style type': 'نوع النمط',
+            'Style based on': 'نمط استنادا إلى',
+            'Style for following paragraph': 'نمط للفقرة التالية',
+            'Formatting': 'التنسيق',
+            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
+            'Numbering': 'ترقيم',
+            'Update Field': 'تحديث الحقل',
+            'Edit Field': 'تحرير الحقل',
+            'Bookmark': 'الإشارة المرجعية',
+            'Page Setup': 'اعداد الصفحة',
+            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
+            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
+                + '</br>' + 'الفصل نون-البند' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
+                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
+            'Format': 'تنسيق',
+            'Create New Style': 'إنشاء نمط جديد',
+            'Modify Style': 'تعديل النمط',
+            'New': 'الجديد',
+            'Bullets': 'الرصاص',
+            'Use bookmarks': 'استخدام الإشارات المرجعية',
+            'Table of Contents': 'جدول المحتويات',
+            'AutoFit': 'الاحتواء',
+            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
+            'AutoFit to Window': 'احتواء تلقائي للإطار',
+            'Fixed Column Width': 'عرض العمود الثابت',
+            'Reset': 'اعاده تعيين',
+            'Match case': 'حاله المباراة',
+            'Whole words': 'كلمات كامل',
+            'Add': 'اضافه',
+            'Go To': 'الانتقال إلى',
+            'Search for': 'البحث عن',
+            'Replace with': 'استبدال',
+            'TOC 1': 'جدول المحتويات 1',
+            'TOC 2': 'جدول المحتويات 2',
+            'TOC 3': 'جدول المحتويات 3',
+            'TOC 4': 'جدول المحتويات 4',
+            'TOC 5': 'جدول المحتويات 5',
+            'TOC 6': 'جدول المحتويات 6',
+            'TOC 7': 'جدول المحتويات 7',
+            'TOC 8': 'جدول المحتويات 8',
+            'TOC 9': 'جدول المحتويات 9',
+            'Right-to-left': 'من اليمين إلى اليسار',
+            'Left-to-right': 'من اليسار إلى اليمين',
+            'Direction': 'الاتجاه',
+            'Table direction': 'اتجاه الجدول',
+            'Indent from right': 'مسافة بادئه من اليمين',
+            'Page': 'صفحه',
+            'Fit one page': 'احتواء صفحه واحد',
+            'Fit page width': 'احتواء عرض الصفحة',
+            // tslint:disable-next-line:max-line-length
+            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
+        },
+        'colorpicker': {
+            'Apply': 'تطبيق',
+            'Cancel': 'إلغاء الأمر',
+            'ModeSwitcher': 'مفتاح كهربائي الوضع'
+        }
+    }
+});
+
+const documenteditor = ref(null);
+
+provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
+onMounted(function () {
+    documenteditor.value.ej2Instances.locale = 'ar-AE';
+    documenteditor.value.ej2Instances.isReadOnly = false;
+    let sfdt = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "characterFormat": {
+                                "fontSize": 18.0,
+                                "fontFamily": "Calibri",
+                                "fontFamilyBidi": "Calibri"
+                            },
+                            "paragraphFormat": {
+                                "beforeSpacing": 18.0,
+                                "afterSpacing": 30.0,
+                                "styleName": "Heading 1",
+                                "bidi": true
+                            },
+                            "inlines": [
+                                {
+                                    "name": "_GoBack",
+                                    "bookmarkType": 0
+                                },
+                                {
+                                    "name": "_GoBack",
+                                    "bookmarkType": 1
+                                },
+                                {
+                                    "text": "اعمال المغامرة دورات",
+                                    "characterFormat": {
+                                        "fontSize": 18.0,
+                                        "bidi": true,
+                                        "fontSizeBidi": 18.0
+                                    }
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                    "sectionFormat": {
+                        "headerDistance": 36.0,
+                        "footerDistance": 36.0,
+                        "pageWidth": 612.0,
+                        "pageHeight": 792.0,
+                        "leftMargin": 72.0,
+                        "rightMargin": 72.0,
+                        "topMargin": 72.0,
+                        "bottomMargin": 72.0,
+                        "differentFirstPage": false,
+                        "differentOddAndEvenPages": false,
+                        "bidi": false
+                    }
+                }
+            ],
+            "styles": []
+            }`;
+    documenteditor.value.open(sfdt);
+});
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/app.vue
new file mode 100644
index 000000000..ae38bbdd6
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/app.vue
@@ -0,0 +1,382 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref='documenteditor' id='container' pageOutline='#E0E0E0' height="370px"
+            style="width: 100%;" :enablePrint='true' :enableSfdtExport='true' :enableSelection='true'
+            :enableContextMenu='true' :enableSearch='true' enableOptionsPane='true' :enableWordExport='true'
+            :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true'
+            enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true'
+            :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true'
+            :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true'
+            :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'
+            :enableRtl='true' locale='ar-AE'>
+        </ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+import { L10n } from '@syncfusion/ej2-base';
+
+L10n.load({
+    'ar-AE': {
+        'documenteditor': {
+            'Table': 'لجدول',
+            'Row': 'لصف',
+            'Cell': 'الخليه',
+            'Ok': 'موافق',
+            'Cancel': 'إلغاء الأمر',
+            'Size': 'حجم',
+            'Preferred Width': 'العرض المفضل',
+            'Points': 'نقاط',
+            'Percent': 'المائه',
+            'Measure in': 'القياس في',
+            'Alignment': 'محاذاه',
+            'Left': 'ليسار',
+            'Center': 'مركز',
+            'Right': 'الحق',
+            'Justify': 'تبرير',
+            'Indent from left': 'مسافة بادئه من اليسار',
+            'Borders and Shading': 'الحدود والتظليل',
+            'Options': 'خيارات',
+            'Specify height': 'تحديد الارتفاع',
+            'At least': 'الاقل',
+            'Exactly': 'تماما',
+            'Row height is': 'ارتفاع الصف هو',
+            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
+            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
+            'Vertical alignment': 'محاذاة عمودي',
+            'Top': 'أعلى',
+            'Bottom': 'اسفل',
+            'Default cell margins': 'هوامش الخلية الافتراضية',
+            'Default cell spacing': 'تباعد الخلايا الافتراضي',
+            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
+            'Cell margins': 'هوامش الخلية',
+            'Same as the whole table': 'نفس الجدول بأكمله',
+            'Borders': 'الحدود',
+            'None': 'اي',
+            'Single': 'واحد',
+            'Dot': 'نقطه',
+            'DashSmallGap': 'داشسمجاب',
+            'DashLargeGap': 'الاتحاد الخاص',
+            'DashDot': 'داشدوت',
+            'DashDotDot': 'ددهدودوت',
+            'Double': 'انقر نقرا مزدوجا',
+            'Triple': 'الثلاثي',
+            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
+            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
+            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
+            'ThinThickMediumGap': 'فجوه متوسطه سميك',
+            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
+            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
+            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
+            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
+            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
+            'SingleWavy': 'واحد مائج',
+            'DoubleWavy': 'مزدوج مائج',
+            'DashDotStroked': 'اندفاعه نقطه القوية',
+            'Emboss3D': 'D3مزخرف',
+            'Engrave3D': 'D3نقش',
+            'Outset': 'البدايه',
+            'Inset': 'الداخلي',
+            'Thick': 'سميكه',
+            'Style': 'نمط',
+            'Width': 'عرض',
+            'Height': 'ارتفاع',
+            'Letter': 'رساله',
+            'Tabloid': 'التابلويد',
+            'Legal': 'القانونيه',
+            'Statement': 'بيان',
+            'Executive': 'التنفيذي',
+            'A3': 'A3',
+            'A4': 'A4',
+            'A5': 'A5',
+            'B4': 'B4',
+            'B5': 'B5',
+            'Custom Size': 'حجم مخصص',
+            'Different odd and even': 'مختلفه غريبه وحتى',
+            'Different first page': 'الصفحة الاولي مختلفه',
+            'From edge': 'من الحافة',
+            'Header': 'راس',
+            'Footer': 'تذييل الصفحه',
+            'Margin': 'الهوامش',
+            'Paper': 'الورق',
+            'Layout': 'تخطيط',
+            'Orientation': 'التوجه',
+            'Landscape': 'المناظر الطبيعيه',
+            'Portrait': 'صوره',
+            'Table Of Contents': 'جدول المحتويات',
+            'Show page numbers': 'إظهار أرقام الصفحات',
+            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
+            'Nothing': 'شيء',
+            'Tab leader': 'قائد علامة التبويب',
+            'Show levels': 'إظهار المستويات',
+            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
+            'Build table of contents from': 'بناء جدول محتويات من',
+            'Styles': 'انماط',
+            'Available styles': 'الأنماط المتوفرة',
+            'TOC level': 'مستوي جدول المحتويات',
+            'Heading': 'عنوان',
+            'Heading 1': 'عنوان 1',
+            'Heading 2': 'عنوان 2',
+            'Heading 3': 'عنوان 3',
+            'Heading 4': 'عنوان 4',
+            'Heading 5': 'عنوان 5',
+            'Heading 6': 'عنوان 6',
+            'List Paragraph': 'فقره القائمة',
+            'Normal': 'العاديه',
+            'Outline levels': 'مستويات المخطط التفصيلي',
+            'Table entry fields': 'حقول إدخال الجدول',
+            'Modify': 'تعديل',
+            'Color': 'لون',
+            'Setting': 'اعداد',
+            'Box': 'مربع',
+            'All': 'جميع',
+            'Custom': 'المخصصه',
+            'Preview': 'معاينه',
+            'Shading': 'التظليل',
+            'Fill': 'ملء',
+            'Apply To': 'تنطبق علي',
+            'Table Properties': 'خصائص الجدول',
+            'Cell Options': 'خيارات الخلية',
+            'Table Options': 'خيارات الجدول',
+            'Insert Table': 'ادراج جدول',
+            'Number of columns': 'عدد الاعمده',
+            'Number of rows': 'عدد الصفوف',
+            'Text to display': 'النص الذي سيتم عرضه',
+            'Address': 'عنوان',
+            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
+            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
+            'Insert': 'ادراج',
+            'General': 'العامه',
+            'Indentation': 'المسافه البادئه',
+            'Before text': 'قبل النص',
+            'Special': 'الخاصه',
+            'First line': 'السطر الأول',
+            'Hanging': 'معلقه',
+            'After text': 'بعد النص',
+            'By': 'من',
+            'Before': 'قبل',
+            'Line Spacing': 'تباعد الأسطر',
+            'After': 'بعد',
+            'At': 'في',
+            'Multiple': 'متعدده',
+            'Spacing': 'تباعد',
+            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
+            'List level': 'مستوي القائمة',
+            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
+            'Level': 'مستوي',
+            'Number format': 'تنسيق الأرقام',
+            'Number style for this level': 'نمط الرقم لهذا المستوي',
+            'Enter formatting for number': 'إدخال تنسيق لرقم',
+            'Start at': 'بداية من',
+            'Restart list after': 'أعاده تشغيل قائمه بعد',
+            'Position': 'موقف',
+            'Text indent at': 'المسافة البادئة للنص في',
+            'Aligned at': 'محاذاة في',
+            'Follow number with': 'اتبع الرقم مع',
+            'Tab character': 'حرف علامة التبويب',
+            'Space': 'الفضاء',
+            'Arabic': 'العربية',
+            'UpRoman': 'حتى الروماني',
+            'LowRoman': 'الرومانية منخفضه',
+            'UpLetter': '',
+            'LowLetter': '',
+            'Number': 'عدد',
+            'Leading zero': 'يؤدي صفر',
+            'Bullet': 'رصاصه',
+            'Ordinal': 'الترتيبيه',
+            'Ordinal Text': 'النص الترتيبي',
+            'For East': 'للشرق',
+            'No Restart': 'لا أعاده تشغيل',
+            'Font': 'الخط',
+            'Font style': 'نمط الخط',
+            'Underline style': 'نمط التسطير',
+            'Font color': 'لون الخط',
+            'Effects': 'الاثار',
+            'Strikethrough': 'يتوسطه',
+            'Superscript': 'مرتفع',
+            'Subscript': 'منخفض',
+            'Double strikethrough': 'خط مزدوج يتوسطه خط',
+            'Regular': 'العاديه',
+            'Bold': 'جريئه',
+            'Italic': 'مائل',
+            'Cut': 'قطع',
+            'Copy': 'نسخ',
+            'Paste': 'لصق',
+            'Hyperlink': 'الارتباط التشعبي',
+            'Open Hyperlink': 'فتح ارتباط تشعبي',
+            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
+            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
+            'Paragraph': 'الفقره',
+            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
+            'Character': 'حرف',
+            'Merge Cells': 'دمج الخلايا',
+            'Insert Above': 'ادراج أعلاه',
+            'Insert Below': 'ادراج أدناه',
+            'Insert Left': 'ادراج إلى اليسار',
+            'Insert Right': 'ادراج اليمين',
+            'Delete': 'حذف',
+            'Delete Table': 'حذف جدول',
+            'Delete Row': 'حذف صف',
+            'Delete Column': 'حذف عمود',
+            'File Name': 'اسم الملف',
+            'Format Type': 'نوع التنسيق',
+            'Save': 'حفظ',
+            'Navigation': 'التنقل',
+            'Results': 'نتائج',
+            'Replace': 'استبدال',
+            'Replace All': 'استبدال الكل',
+            'We replaced all': 'استبدلنا جميع',
+            'Find': 'العثور',
+            'No matches': 'لا توجد تطابقات',
+            'All Done': 'كل القيام به',
+            'Result': 'نتيجه',
+            'of': 'من',
+            'instances': 'الحالات',
+            'with': 'مع',
+            'Click to follow link': 'انقر لمتابعه الارتباط',
+            'Continue Numbering': 'متابعه الترقيم',
+            'Bookmark name': 'اسم الإشارة المرجعية',
+            'Close': 'اغلاق',
+            'Restart At': 'أعاده التشغيل عند',
+            'Properties': 'خصائص',
+            'Name': 'اسم',
+            'Style type': 'نوع النمط',
+            'Style based on': 'نمط استنادا إلى',
+            'Style for following paragraph': 'نمط للفقرة التالية',
+            'Formatting': 'التنسيق',
+            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
+            'Numbering': 'ترقيم',
+            'Update Field': 'تحديث الحقل',
+            'Edit Field': 'تحرير الحقل',
+            'Bookmark': 'الإشارة المرجعية',
+            'Page Setup': 'اعداد الصفحة',
+            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
+            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
+                + '</br>' + 'الفصل نون-البند' + '</br>'
+                // tslint:disable-next-line:max-line-length
+                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
+                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
+            'Format': 'تنسيق',
+            'Create New Style': 'إنشاء نمط جديد',
+            'Modify Style': 'تعديل النمط',
+            'New': 'الجديد',
+            'Bullets': 'الرصاص',
+            'Use bookmarks': 'استخدام الإشارات المرجعية',
+            'Table of Contents': 'جدول المحتويات',
+            'AutoFit': 'الاحتواء',
+            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
+            'AutoFit to Window': 'احتواء تلقائي للإطار',
+            'Fixed Column Width': 'عرض العمود الثابت',
+            'Reset': 'اعاده تعيين',
+            'Match case': 'حاله المباراة',
+            'Whole words': 'كلمات كامل',
+            'Add': 'اضافه',
+            'Go To': 'الانتقال إلى',
+            'Search for': 'البحث عن',
+            'Replace with': 'استبدال',
+            'TOC 1': 'جدول المحتويات 1',
+            'TOC 2': 'جدول المحتويات 2',
+            'TOC 3': 'جدول المحتويات 3',
+            'TOC 4': 'جدول المحتويات 4',
+            'TOC 5': 'جدول المحتويات 5',
+            'TOC 6': 'جدول المحتويات 6',
+            'TOC 7': 'جدول المحتويات 7',
+            'TOC 8': 'جدول المحتويات 8',
+            'TOC 9': 'جدول المحتويات 9',
+            'Right-to-left': 'من اليمين إلى اليسار',
+            'Left-to-right': 'من اليسار إلى اليمين',
+            'Direction': 'الاتجاه',
+            'Table direction': 'اتجاه الجدول',
+            'Indent from right': 'مسافة بادئه من اليمين',
+            'Page': 'صفحه',
+            'Fit one page': 'احتواء صفحه واحد',
+            'Fit page width': 'احتواء عرض الصفحة',
+            // tslint:disable-next-line:max-line-length
+            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
+        },
+        'colorpicker': {
+            'Apply': 'تطبيق',
+            'Cancel': 'إلغاء الأمر',
+            'ModeSwitcher': 'مفتاح كهربائي الوضع'
+        }
+    }
+});
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
+    },
+    mounted() {
+        this.$refs.documenteditor.ej2Instances.locale = 'ar-AE';
+        this.$refs.documenteditor.ej2Instances.isReadOnly = false;
+        let sfdt = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "characterFormat": {
+                                "fontSize": 18.0,
+                                "fontFamily": "Calibri",
+                                "fontFamilyBidi": "Calibri"
+                            },
+                            "paragraphFormat": {
+                                "beforeSpacing": 18.0,
+                                "afterSpacing": 30.0,
+                                "styleName": "Heading 1",
+                                "bidi": true
+                            },
+                            "inlines": [
+                                {
+                                    "name": "_GoBack",
+                                    "bookmarkType": 0
+                                },
+                                {
+                                    "name": "_GoBack",
+                                    "bookmarkType": 1
+                                },
+                                {
+                                    "text": "اعمال المغامرة دورات",
+                                    "characterFormat": {
+                                        "fontSize": 18.0,
+                                        "bidi": true,
+                                        "fontSizeBidi": 18.0
+                                    }
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                    "sectionFormat": {
+                        "headerDistance": 36.0,
+                        "footerDistance": 36.0,
+                        "pageWidth": 612.0,
+                        "pageHeight": 792.0,
+                        "leftMargin": 72.0,
+                        "rightMargin": 72.0,
+                        "topMargin": 72.0,
+                        "bottomMargin": 72.0,
+                        "differentFirstPage": false,
+                        "differentOddAndEvenPages": false,
+                        "bidi": false
+                    }
+                }
+            ],
+            "styles": []
+            }`;
+        this.$refs.documenteditor.open(sfdt);
+    }
+};
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-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/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/index.js
new file mode 100644
index 000000000..c5964f5fb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/index.js
@@ -0,0 +1,371 @@
+
+    import Vue from 'vue';
+    import { DocumentEditorPlugin, DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+    import { L10n, setCulture } from '@syncfusion/ej2-base';
+
+    Vue.use(DocumentEditorPlugin);
+    L10n.load({
+    'ar-AE': {
+        'documenteditor': {
+        'Table': 'لجدول',
+        'Row': 'لصف',
+        'Cell': 'الخليه',
+        'Ok': 'موافق',
+        'Cancel': 'إلغاء الأمر',
+        'Size': 'حجم',
+        'Preferred Width': 'العرض المفضل',
+        'Points': 'نقاط',
+        'Percent': 'المائه',
+        'Measure in': 'القياس في',
+        'Alignment': 'محاذاه',
+        'Left': 'ليسار',
+        'Center': 'مركز',
+        'Right': 'الحق',
+        'Justify': 'تبرير',
+        'Indent from left': 'مسافة بادئه من اليسار',
+        'Borders and Shading': 'الحدود والتظليل',
+        'Options': 'خيارات',
+        'Specify height': 'تحديد الارتفاع',
+        'At least': 'الاقل',
+        'Exactly': 'تماما',
+        'Row height is': 'ارتفاع الصف هو',
+        'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
+        'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
+        'Vertical alignment': 'محاذاة عمودي',
+        'Top': 'أعلى',
+        'Bottom': 'اسفل',
+        'Default cell margins': 'هوامش الخلية الافتراضية',
+        'Default cell spacing': 'تباعد الخلايا الافتراضي',
+        'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
+        'Cell margins': 'هوامش الخلية',
+        'Same as the whole table': 'نفس الجدول بأكمله',
+        'Borders': 'الحدود',
+        'None': 'اي',
+        'Single': 'واحد',
+        'Dot': 'نقطه',
+        'DashSmallGap': 'داشسمجاب',
+        'DashLargeGap': 'الاتحاد الخاص',
+        'DashDot': 'داشدوت',
+        'DashDotDot': 'ددهدودوت',
+        'Double': 'انقر نقرا مزدوجا',
+        'Triple': 'الثلاثي',
+        'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
+        'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
+        'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
+        'ThinThickMediumGap': 'فجوه متوسطه سميك',
+        'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
+        'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
+        'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
+        'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
+        'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
+        'SingleWavy': 'واحد مائج',
+        'DoubleWavy': 'مزدوج مائج',
+        'DashDotStroked': 'اندفاعه نقطه القوية',
+        'Emboss3D': 'D3مزخرف',
+        'Engrave3D': 'D3نقش',
+        'Outset': 'البدايه',
+        'Inset': 'الداخلي',
+        'Thick': 'سميكه',
+        'Style': 'نمط',
+        'Width': 'عرض',
+        'Height': 'ارتفاع',
+        'Letter': 'رساله',
+        'Tabloid': 'التابلويد',
+        'Legal': 'القانونيه',
+        'Statement': 'بيان',
+        'Executive': 'التنفيذي',
+        'A3': 'A3',
+        'A4': 'A4',
+        'A5': 'A5',
+        'B4': 'B4',
+        'B5': 'B5',
+        'Custom Size': 'حجم مخصص',
+        'Different odd and even': 'مختلفه غريبه وحتى',
+        'Different first page': 'الصفحة الاولي مختلفه',
+        'From edge': 'من الحافة',
+        'Header': 'راس',
+        'Footer': 'تذييل الصفحه',
+        'Margin': 'الهوامش',
+        'Paper': 'الورق',
+        'Layout': 'تخطيط',
+        'Orientation': 'التوجه',
+        'Landscape': 'المناظر الطبيعيه',
+        'Portrait': 'صوره',
+        'Table Of Contents': 'جدول المحتويات',
+        'Show page numbers': 'إظهار أرقام الصفحات',
+        'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
+        'Nothing': 'شيء',
+        'Tab leader': 'قائد علامة التبويب',
+        'Show levels': 'إظهار المستويات',
+        'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
+        'Build table of contents from': 'بناء جدول محتويات من',
+        'Styles': 'انماط',
+        'Available styles': 'الأنماط المتوفرة',
+        'TOC level': 'مستوي جدول المحتويات',
+        'Heading': 'عنوان',
+        'Heading 1': 'عنوان 1',
+        'Heading 2': 'عنوان 2',
+        'Heading 3': 'عنوان 3',
+        'Heading 4': 'عنوان 4',
+        'Heading 5': 'عنوان 5',
+        'Heading 6': 'عنوان 6',
+        'List Paragraph': 'فقره القائمة',
+        'Normal': 'العاديه',
+        'Outline levels': 'مستويات المخطط التفصيلي',
+        'Table entry fields': 'حقول إدخال الجدول',
+        'Modify': 'تعديل',
+        'Color': 'لون',
+        'Setting': 'اعداد',
+        'Box': 'مربع',
+        'All': 'جميع',
+        'Custom': 'المخصصه',
+        'Preview': 'معاينه',
+        'Shading': 'التظليل',
+        'Fill': 'ملء',
+        'Apply To': 'تنطبق علي',
+        'Table Properties': 'خصائص الجدول',
+        'Cell Options': 'خيارات الخلية',
+        'Table Options': 'خيارات الجدول',
+        'Insert Table': 'ادراج جدول',
+        'Number of columns': 'عدد الاعمده',
+        'Number of rows': 'عدد الصفوف',
+        'Text to display': 'النص الذي سيتم عرضه',
+        'Address': 'عنوان',
+        'Insert Hyperlink': 'ادراج ارتباط تشعبي',
+        'Edit Hyperlink': 'تحرير ارتباط تشعبي',
+        'Insert': 'ادراج',
+        'General': 'العامه',
+        'Indentation': 'المسافه البادئه',
+        'Before text': 'قبل النص',
+        'Special': 'الخاصه',
+        'First line': 'السطر الأول',
+        'Hanging': 'معلقه',
+        'After text': 'بعد النص',
+        'By': 'من',
+        'Before': 'قبل',
+        'Line Spacing': 'تباعد الأسطر',
+        'After': 'بعد',
+        'At': 'في',
+        'Multiple': 'متعدده',
+        'Spacing': 'تباعد',
+        'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
+        'List level': 'مستوي القائمة',
+        'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
+        'Level': 'مستوي',
+        'Number format': 'تنسيق الأرقام',
+        'Number style for this level': 'نمط الرقم لهذا المستوي',
+        'Enter formatting for number': 'إدخال تنسيق لرقم',
+        'Start at': 'بداية من',
+        'Restart list after': 'أعاده تشغيل قائمه بعد',
+        'Position': 'موقف',
+        'Text indent at': 'المسافة البادئة للنص في',
+        'Aligned at': 'محاذاة في',
+        'Follow number with': 'اتبع الرقم مع',
+        'Tab character': 'حرف علامة التبويب',
+        'Space': 'الفضاء',
+        'Arabic': 'العربية',
+        'UpRoman': 'حتى الروماني',
+        'LowRoman': 'الرومانية منخفضه',
+        'UpLetter': '',
+        'LowLetter': '',
+        'Number': 'عدد',
+        'Leading zero': 'يؤدي صفر',
+        'Bullet': 'رصاصه',
+        'Ordinal': 'الترتيبيه',
+        'Ordinal Text': 'النص الترتيبي',
+        'For East': 'للشرق',
+        'No Restart': 'لا أعاده تشغيل',
+        'Font': 'الخط',
+        'Font style': 'نمط الخط',
+        'Underline style': 'نمط التسطير',
+        'Font color': 'لون الخط',
+        'Effects': 'الاثار',
+        'Strikethrough': 'يتوسطه',
+        'Superscript': 'مرتفع',
+        'Subscript': 'منخفض',
+        'Double strikethrough': 'خط مزدوج يتوسطه خط',
+        'Regular': 'العاديه',
+        'Bold': 'جريئه',
+        'Italic': 'مائل',
+        'Cut': 'قطع',
+        'Copy': 'نسخ',
+        'Paste': 'لصق',
+        'Hyperlink': 'الارتباط التشعبي',
+        'Open Hyperlink': 'فتح ارتباط تشعبي',
+        'Copy Hyperlink': 'نسخ ارتباط تشعبي',
+        'Remove Hyperlink': 'أزاله ارتباط تشعبي',
+        'Paragraph': 'الفقره',
+        'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
+        'Character': 'حرف',
+        'Merge Cells': 'دمج الخلايا',
+        'Insert Above': 'ادراج أعلاه',
+        'Insert Below': 'ادراج أدناه',
+        'Insert Left': 'ادراج إلى اليسار',
+        'Insert Right': 'ادراج اليمين',
+        'Delete': 'حذف',
+        'Delete Table': 'حذف جدول',
+        'Delete Row': 'حذف صف',
+        'Delete Column': 'حذف عمود',
+        'File Name': 'اسم الملف',
+        'Format Type': 'نوع التنسيق',
+        'Save': 'حفظ',
+        'Navigation': 'التنقل',
+        'Results': 'نتائج',
+        'Replace': 'استبدال',
+        'Replace All': 'استبدال الكل',
+        'We replaced all': 'استبدلنا جميع',
+        'Find': 'العثور',
+        'No matches': 'لا توجد تطابقات',
+        'All Done': 'كل القيام به',
+        'Result': 'نتيجه',
+        'of': 'من',
+        'instances': 'الحالات',
+        'with': 'مع',
+        'Click to follow link': 'انقر لمتابعه الارتباط',
+        'Continue Numbering': 'متابعه الترقيم',
+        'Bookmark name': 'اسم الإشارة المرجعية',
+        'Close': 'اغلاق',
+        'Restart At': 'أعاده التشغيل عند',
+        'Properties': 'خصائص',
+        'Name': 'اسم',
+        'Style type': 'نوع النمط',
+        'Style based on': 'نمط استنادا إلى',
+        'Style for following paragraph': 'نمط للفقرة التالية',
+        'Formatting': 'التنسيق',
+        'Numbering and Bullets': 'الترقيم والتعداد النقطي',
+        'Numbering': 'ترقيم',
+        'Update Field': 'تحديث الحقل',
+        'Edit Field': 'تحرير الحقل',
+        'Bookmark': 'الإشارة المرجعية',
+        'Page Setup': 'اعداد الصفحة',
+        'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
+        'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
+            // tslint:disable-next-line:max-line-length
+            + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
+            + '</br>' + 'الفصل نون-البند' + '</br>'
+            // tslint:disable-next-line:max-line-length
+            + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
+            + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
+        'Format': 'تنسيق',
+        'Create New Style': 'إنشاء نمط جديد',
+        'Modify Style': 'تعديل النمط',
+        'New': 'الجديد',
+        'Bullets': 'الرصاص',
+        'Use bookmarks': 'استخدام الإشارات المرجعية',
+        'Table of Contents': 'جدول المحتويات',
+        'AutoFit': 'الاحتواء',
+        'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
+        'AutoFit to Window': 'احتواء تلقائي للإطار',
+        'Fixed Column Width': 'عرض العمود الثابت',
+        'Reset': 'اعاده تعيين',
+        'Match case': 'حاله المباراة',
+        'Whole words': 'كلمات كامل',
+        'Add': 'اضافه',
+        'Go To': 'الانتقال إلى',
+        'Search for': 'البحث عن',
+        'Replace with': 'استبدال',
+        'TOC 1': 'جدول المحتويات 1',
+        'TOC 2': 'جدول المحتويات 2',
+        'TOC 3': 'جدول المحتويات 3',
+        'TOC 4': 'جدول المحتويات 4',
+        'TOC 5': 'جدول المحتويات 5',
+        'TOC 6': 'جدول المحتويات 6',
+        'TOC 7': 'جدول المحتويات 7',
+        'TOC 8': 'جدول المحتويات 8',
+        'TOC 9': 'جدول المحتويات 9',
+        'Right-to-left': 'من اليمين إلى اليسار',
+        'Left-to-right': 'من اليسار إلى اليمين',
+        'Direction': 'الاتجاه',
+        'Table direction': 'اتجاه الجدول',
+        'Indent from right': 'مسافة بادئه من اليمين',
+        'Page': 'صفحه',
+        'Fit one page': 'احتواء صفحه واحد',
+        'Fit page width': 'احتواء عرض الصفحة',
+        // tslint:disable-next-line:max-line-length
+        'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
+        },
+        'colorpicker': {
+        'Apply': 'تطبيق',
+        'Cancel': 'إلغاء الأمر',
+        'ModeSwitcher': 'مفتاح كهربائي الوضع'
+        }
+    }
+    });
+
+    );
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app">
+          <ejs-documenteditor ref='documenteditor' id='container' pageOutline='#E0E0E0' height="370px" style="width: 100%;" :enablePrint='true' :enableSfdtExport='true'  :enableSelection='true' :enableContextMenu='true' :enableSearch='true' enableOptionsPane='true':enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true':enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true' :enableRtl='true'  locale='ar-AE'></ejs-documenteditor>
+      </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
+        },
+        mounted() {
+            this.$refs.documenteditor.ej2Instances.locale = 'ar-AE';
+            this.$refs.documenteditor.ej2Instances.isReadOnly = false;
+            let sfdt: string = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "characterFormat": {
+                                "fontSize": 18.0,
+                                "fontFamily": "Calibri",
+                                "fontFamilyBidi": "Calibri"
+                            },
+                            "paragraphFormat": {
+                                "beforeSpacing": 18.0,
+                                "afterSpacing": 30.0,
+                                "styleName": "Heading 1",
+                                "bidi": true
+                            },
+                            "inlines": [
+                                {
+                                    "name": "_GoBack",
+                                    "bookmarkType": 0
+                                },
+                                {
+                                    "name": "_GoBack",
+                                    "bookmarkType": 1
+                                },
+                                {
+                                    "text": "اعمال المغامرة دورات",
+                                    "characterFormat": {
+                                        "fontSize": 18.0,
+                                        "bidi": true,
+                                        "fontSizeBidi": 18.0
+                                    }
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                    "sectionFormat": {
+                        "headerDistance": 36.0,
+                        "footerDistance": 36.0,
+                        "pageWidth": 612.0,
+                        "pageHeight": 792.0,
+                        "leftMargin": 72.0,
+                        "rightMargin": 72.0,
+                        "topMargin": 72.0,
+                        "bottomMargin": 72.0,
+                        "differentFirstPage": false,
+                        "differentOddAndEvenPages": false,
+                        "bidi": false
+                    }
+                }
+            ],
+            "styles": []
+            }`;
+            this.$refs.documenteditor.open(sfdt);
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/right-to-left-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/app-composition.vue
new file mode 100644
index 000000000..4eb6f58aa
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/app-composition.vue
@@ -0,0 +1,44 @@
+<template>
+  <div id="app">
+    <button id='container_ruler_button' v-on:click="onClick">Show/Hide Ruler</button>
+    <ejs-documenteditor id="container" height="370px" style="width: 100%" ref="container" :serviceUrl='serviceUrl'
+      :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true'
+      :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true'
+      :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true'
+      :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
+      :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true'
+      :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true'
+      :enableTableOptionsDialog='true' :documentEditorSettings='documentEditorSettings'></ejs-documenteditor>
+  </div>
+</template>
+
+<script setup>
+import { provide, onMounted, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+const container = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+const documentEditorSettings = { showRuler: true };
+
+provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
+
+const onClick = function () {
+  container.value.ej2Instances.documentEditorSettings.showRuler = !container.value.ej2Instances.documentEditorSettings.showRuler
+}
+
+onMounted(function () {
+  container.value.ej2Instances.documentEditorSettings.showRuler = true;
+})
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/app.vue
new file mode 100644
index 000000000..c3c7216e9
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/app.vue
@@ -0,0 +1,56 @@
+<template>
+  <div id="app">
+    <button id='container_ruler_button' v-on:click="onClick">Show/Hide Ruler</button>
+    <ejs-documenteditor id="container" height="370px" style="width: 100%" ref="container" :serviceUrl='serviceUrl'
+      :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true'
+      :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true'
+      :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true'
+      :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
+      :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true'
+      :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true'
+      :enableTableOptionsDialog='true' :documentEditorSettings='documentEditorSettings'></ejs-documenteditor>
+  </div>
+</template>
+
+<script>
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditor": DocumentEditorComponent
+  },
+  data() {
+    return {
+      serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+      height: '370px',
+      isReadOnly: false,
+      documentEditorSettings: { showRuler: true }
+    }
+  },
+  provide: {
+    //Inject require modules.
+    DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
+  },
+  methods: {
+    onClick: function () {
+      this.$refs.container.ej2Instances.documentEditorSettings.showRuler = !this.$refs.container.ej2Instances.documentEditorSettings.showRuler
+    }
+  },
+  mounted: function () {
+    this.$refs.container.ej2Instances.documentEditorSettings.showRuler = true;
+  }
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/index.css
new file mode 100644
index 000000000..7490c0481
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/index.css
@@ -0,0 +1,10 @@
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-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/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/index.js
new file mode 100644
index 000000000..cbfc6b43e
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/index.js
@@ -0,0 +1,35 @@
+
+import Vue from 'vue';
+import { DocumentEditorPlugin, DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+Vue.use(DocumentEditorPlugin);
+
+new Vue({
+el: '#app',
+template: `
+    <div id="app">
+      <button id='container_ruler_button' v-on:click="onClick">Show/Hide Ruler</button>
+      <ejs-documenteditor ref="documenteditor" :height="height" :serviceUrl='serviceUrl'></ejs-documenteditor>
+    </div>
+`,
+  data(){
+    return {
+        serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+        height: '370px',
+        isReadOnly: false,
+        documentEditorSettings: {showRuler: true}
+    }
+  },
+  provide: {
+    DocumentEditor: []
+  },
+  methods: {
+    onClick:function() {
+      this.$refs.container.ej2Instances.documentEditorSettings.showRuler = !this.$refs.container.ej2Instances.documentEditorSettings.showRuler
+    }
+  },
+  mounted: function() {
+    this.$refs.container.ej2Instances.enableAllModules();
+  }
+
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/systemjs.config.js
new file mode 100644
index 000000000..ccafe7795
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs1/systemjs.config.js
@@ -0,0 +1,44 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/app-composition.vue
new file mode 100644
index 000000000..29a738fa1
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/app-composition.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id="app">
+    <button id='container_ruler_button' v-on:click="onClick">Show/Hide Ruler</button>
+    <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true' :document-editor-settings="documentEditorSettings">
+    </ejs-documenteditorcontainer>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from "vue";
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+const container = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+const height = '590px';
+const documentEditorSettings = { showRuler: true };
+
+provide('DocumentEditorContainer', [Toolbar]);
+
+const onClick = function () {
+  container.value.ej2Instances.documentEditorSettings.showRuler = !container.value.ej2Instances.documentEditorSettings.showRuler;
+}
+
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/app.vue
new file mode 100644
index 000000000..924d8d71b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/app.vue
@@ -0,0 +1,45 @@
+<template>
+  <div id="app">
+    <button id='container_ruler_button' v-on:click="onClick">Show/Hide Ruler</button>
+    <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true' :document-editor-settings="documentEditorSettings">
+    </ejs-documenteditorcontainer>
+  </div>
+</template>
+
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+  },
+  data() {
+    return {
+      serviceUrl: 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+      height: '590px',
+      documentEditorSettings: { showRuler: true }
+    }
+  },
+  provide: {
+    DocumentEditorContainer: [Toolbar]
+  },
+  methods: {
+    onClick: function () {
+      this.$refs.container.ej2Instances.documentEditorSettings.showRuler = !this.$refs.container.ej2Instances.documentEditorSettings.showRuler
+    }
+  },
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/index.css
new file mode 100644
index 000000000..7490c0481
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/index.css
@@ -0,0 +1,10 @@
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-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/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/index.js
new file mode 100644
index 000000000..d9e5ed134
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/index.js
@@ -0,0 +1,31 @@
+
+    import Vue from 'vue';
+    import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorContainerPlugin);
+    
+new Vue({
+	el: '#app',
+	template: `
+    <div id="app">
+      <button id='container_ruler_button' v-on:click="onClick">Show/Hide Ruler</button>
+      <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true'"> </ejs-documenteditorcontainer>
+    </div>
+`,
+
+  data(){
+    return {
+        serviceUrl:'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+        height: '590px',
+        documentEditorSettings: {showRuler: true}
+    }
+  },
+  provide: {
+    DocumentEditorContainer: [Toolbar]
+  },
+  methods: {
+    onClick:function() {
+      this.$refs.container.ej2Instances.documentEditorSettings.showRuler = !this.$refs.container.ej2Instances.documentEditorSettings.showRuler
+    }
+  },
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/systemjs.config.js
new file mode 100644
index 000000000..4c3283a94
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/ruler-cs2/systemjs.config.js
@@ -0,0 +1,44 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+"@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/app-composition.vue
new file mode 100644
index 000000000..11fd4772b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/app-composition.vue
@@ -0,0 +1,69 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+import { DocumentEditorComponent as EjsDocumenteditor } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+onMounted(function () {
+    let defaultDocument = {
+        "sections": [
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "First page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            },
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "Second page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            }
+        ],
+        "characterFormat": {},
+        "paragraphFormat": {},
+        "background": {
+            "color": "#FFFFFFFF"
+        },
+        "styles": [
+            {
+                "type": "Paragraph",
+                "name": "Normal",
+                "next": "Normal"
+            },
+            {
+                "type": "Character",
+                "name": "Default Paragraph Font"
+            }
+        ]
+    }
+    documenteditor.value.open(JSON.stringify(defaultDocument));
+    //Scroll to specified page.
+    documenteditor.value.scrollToPage(2);
+})
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/app.vue
new file mode 100644
index 000000000..2c63f673d
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/app.vue
@@ -0,0 +1,77 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    mounted: function () {
+        let defaultDocument = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "First page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Second page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                }
+            ],
+            "characterFormat": {},
+            "paragraphFormat": {},
+            "background": {
+                "color": "#FFFFFFFF"
+            },
+            "styles": [
+                {
+                    "type": "Paragraph",
+                    "name": "Normal",
+                    "next": "Normal"
+                },
+                {
+                    "type": "Character",
+                    "name": "Default Paragraph Font"
+                }
+            ]
+        }
+        this.$refs.documenteditor.open(JSON.stringify(defaultDocument));
+        //Scroll to specified page.
+        this.$refs.documenteditor.scrollToPage(2);
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/index.css
new file mode 100644
index 000000000..fb4b39003
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/index.css
@@ -0,0 +1,2 @@
+
+      
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-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/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/index.js
new file mode 100644
index 000000000..714ef29ae
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/index.js
@@ -0,0 +1,76 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app">
+          <ejs-documenteditor ref="documenteditor" height="370px" style="width: 100%;"></ejs-documenteditor>
+      </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        mounted: function() {
+                let defaultDocument: object = {
+                    "sections": [
+                        {
+                            "blocks": [
+                                {
+                                    "paragraphFormat": {
+                                        "styleName": "Normal"
+                                    },
+                                    "inlines": [
+                                        {
+                                            "text": "First page"
+                                        }
+                                    ]
+                                }
+                            ],
+                            "headersFooters": {},
+                        },
+                        {
+                            "blocks": [
+                                {
+                                    "paragraphFormat": {
+                                        "styleName": "Normal"
+                                    },
+                                    "inlines": [
+                                        {
+                                            "text": "Second page"
+                                        }
+                                    ]
+                                }
+                            ],
+                            "headersFooters": {},
+                        }
+                    ],
+                    "characterFormat": {},
+                    "paragraphFormat": {},
+                    "background": {
+                        "color": "#FFFFFFFF"
+                    },
+                    "styles": [
+                        {
+                            "type": "Paragraph",
+                            "name": "Normal",
+                            "next": "Normal"
+                        },
+                        {
+                            "type": "Character",
+                            "name": "Default Paragraph Font"
+                        }
+                    ]
+            }
+            this.$refs.documenteditor.open(JSON.stringify(defaultDocument));
+            //Scroll to specified page.
+            this.$refs.documenteditor.scrollToPage(2);
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/app-composition.vue
new file mode 100644
index 000000000..5d911c168
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/app-composition.vue
@@ -0,0 +1,89 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly=false height="370px" :enableEditor='true'
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script setup>
+import { provide, onMounted, ref } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
+
+const documenteditor = ref(null);
+
+provide('DocumentEditor ', [Selection, Editor]);
+
+onMounted(function () {
+    let defaultDocument = {
+        "sections": [
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "First page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            },
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "Second page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            },
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "Third page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            }
+        ],
+        "characterFormat": {},
+        "paragraphFormat": {},
+        "background": {
+            "color": "#FFFFFFFF"
+        },
+        "styles": [
+            {
+                "type": "Paragraph",
+                "name": "Normal",
+                "next": "Normal"
+            },
+            {
+                "type": "Character",
+                "name": "Default Paragraph Font"
+            }
+        ]
+    }
+    documenteditor.value.open(JSON.stringify(defaultDocument));
+    //Navigate to specified page.
+    documenteditor.value.ej2Instances.selection.goToPage(3);
+})
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/app.vue
new file mode 100644
index 000000000..c8fc8fe7b
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/app.vue
@@ -0,0 +1,96 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly=false height="370px" :enableEditor='true'
+            style="width: 100%;"></ejs-documenteditor>
+    </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent
+    },
+    data: function () {
+        return {
+        };
+    },
+    provide: {
+        DocumentEditor: [Selection, Editor]
+    },
+    mounted: function () {
+        let defaultDocument = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "First page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Second page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Third page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                }
+            ],
+            "characterFormat": {},
+            "paragraphFormat": {},
+            "background": {
+                "color": "#FFFFFFFF"
+            },
+            "styles": [
+                {
+                    "type": "Paragraph",
+                    "name": "Normal",
+                    "next": "Normal"
+                },
+                {
+                    "type": "Character",
+                    "name": "Default Paragraph Font"
+                }
+            ]
+        }
+        this.$refs.documenteditor.open(JSON.stringify(defaultDocument));
+        //Navigate to specified page.
+        this.$refs.documenteditor.ej2Instances.selection.goToPage(3);
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/index.css
new file mode 100644
index 000000000..d148bc8e8
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/index.css
@@ -0,0 +1,2 @@
+
+ 
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-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/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/index.js
new file mode 100644
index 000000000..4376637b3
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/index.js
@@ -0,0 +1,94 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Selection } from '@syncfusion/ej2-vue-documenteditor';
+
+    Vue.use(DocumentEditorPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+      <div id="app">
+          <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly=false height="370px" style="width: 100%;"></ejs-documenteditor>
+      </div>
+`,
+
+        data: function() {
+            return {
+            };
+        },
+        provide: {
+            DocumentEditor : [Selection]
+        },
+        mounted: function() {
+            let defaultDocument: object = {
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "First page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    },
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "Second page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    },
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "Third page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    }
+                ],
+                "characterFormat": {},
+                "paragraphFormat": {},
+                "background": {
+                    "color": "#FFFFFFFF"
+                },
+                "styles": [
+                    {
+                        "type": "Paragraph",
+                        "name": "Normal",
+                        "next": "Normal"
+                    },
+                    {
+                        "type": "Character",
+                        "name": "Default Paragraph Font"
+                    }
+                ]
+            }
+            this.$refs.documenteditor.open(JSON.stringify(defaultDocument));
+            //Navigate to specified page.
+            this.$refs.documenteditor.ej2Instances.selection.goToPage(3);
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/systemjs.config.js
new file mode 100644
index 000000000..414d11ec0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs2/systemjs.config.js
@@ -0,0 +1,44 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/app-composition.vue
new file mode 100644
index 000000000..820c674a0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/app-composition.vue
@@ -0,0 +1,220 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" v-bind:selectionChange='onSelectionChange'
+            v-bind:viewChange='onViewChange' v-bind:documentChange='onDocumentChange' :enableSelection='true' :enableEditor='true'
+            :isReadOnly=false height="370px" style="width: 100%;"></ejs-documenteditor>
+        <div id="documenteditor_statusbar">
+            <label style="margin-top: 6px;margin-right: 2px">Page </label>
+            <div class="single-line e-de-pagenumber-text" v-on:keydown='pageKeydownEvent' v-on:click='pagerClickEvent'
+                id="editablePageNumber"
+                style="font-size:12px;font-weight: 700;display: inline-flex;height: 17px;padding: 0px 4px;"
+                contenteditable="false">
+                <label id="documenteditor_page_no"
+                    style="text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text;height:17px;max-width:150px">{{
+                        currentPage }}</label>
+            </div>
+            <label id="documenteditor_pagecount_separator" style="margin-left:2px;letter-spacing: 1.05px">of</label>
+            <label id="documenteditor_pagecount" style="margin-left:6px;letter-spacing: 1.05px">{{ pageCount }}</label>
+            <ejs-dropdownbutton ref="de_zoom" :items="zoomItems" class="e-de-statusbar-zoom" :content="zoomContent"
+                v-bind:select="onZoom" title="Zoom level. Click or tap to open the Zoom options."></ejs-dropdownbutton>
+        </div>
+    </div>
+</template>
+<script setup>
+import { onMounted, ref, provide } from "vue";
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
+import { DropDownButtonComponent as EjsDropdownbutton } from '@syncfusion/ej2-vue-splitbuttons';
+
+const documenteditor = ref(null);
+const zoomItems = [
+    {
+        text: '150%',
+    },
+    {
+        text: '125%',
+    },
+    {
+        text: '100%',
+    },
+    {
+        text: '75%',
+    },
+    {
+        text: '50%',
+    },
+    {
+        separator: true
+    },
+    {
+        text: 'Fit one page'
+    },
+    {
+        text: 'Fit page width',
+    }];
+const pageCount = ref(1);
+const zoomContent = ref("100%");
+const currentPage = ref(1);
+const onViewChange = function (args) {
+    //Update page number on view change.
+    currentPage.value = args.startPage;
+}
+const onSelectionChange = function () {
+    //Get current page number.
+    currentPage.value = documenteditor.value.ej2Instances.selection.startPage;
+}
+const onDocumentChange = function () {
+    //Update page count.
+    pageCount.value = documenteditor.value.ej2Instances.pageCount;
+    //Update zoom factor.
+    zoomContent.value = Math.round(documenteditor.value.ej2Instances.zoomFactor * 100) + '%';
+}
+const onZoom = function (args) {
+    let zoomValue = args.item.text;
+    if (zoomValue.match('Fit one page')) {
+        documenteditor.value.ej2Instances.fitPage('FitOnePage');
+    } else if (zoomValue.match('Fit page width')) {
+        documenteditor.value.ej2Instances.fitPage('FitPageWidth');
+    } else {
+        documenteditor.value.ej2Instances.zoomFactor = parseInt(zoomValue, 0) / 100;
+    }
+    zoomContent.value = Math.round(documenteditor.value.ej2Instances.zoomFactor * 100) + '%';
+}
+const pageKeydownEvent = function (e) {
+    if (e.which === 13) {
+        e.preventDefault();
+        let pageNumber = parseInt(document.getElementById("editablePageNumber").textContent, 0);
+        if (pageNumber > documenteditor.value.ej2Instances.pageCount) {
+            updatePageNumber.value();
+        } else {
+            documenteditor.value.ej2Instances.selection.goToPage(parseInt(document.getElementById("editablePageNumber").textContent, 0));
+        }
+        document.getElementById("editablePageNumber").contentEditable = 'false';
+        if (document.getElementById("editablePageNumber").textContent === '') {
+            updatePageNumber.value();
+        }
+    }
+    if (e.which > 64) {
+        e.preventDefault();
+    }
+}
+const pageBlurEvent = function () {
+    if (document.getElementById("editablePageNumber").textContent === '' || parseInt(document.getElementById("editablePageNumber").textContent, 0) > documenteditor.value.ej2Instances.pageCountt) {
+        updatePageNumber.value();
+    }
+    document.getElementById("editablePageNumber").contentEditable = 'false';
+}
+const pagerClickEvent = function () {
+    document.getElementById("editablePageNumber").contentEditable = 'true';
+    document.getElementById("editablePageNumber").focus();
+    window.getSelection().selectAllChildren(document.getElementById("editablePageNumber"));
+}
+const updatePageNumber = function () {
+    currentPage.value = documenteditor.value.ej2Instances.selection.startPage.toString();
+}
+
+onMounted(function () {
+    let defaultDocument = {
+        "sections": [
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "First page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            },
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "Second page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            },
+            {
+                "blocks": [
+                    {
+                        "paragraphFormat": {
+                            "styleName": "Normal"
+                        },
+                        "inlines": [
+                            {
+                                "text": "Third page"
+                            }
+                        ]
+                    }
+                ],
+                "headersFooters": {},
+            }
+        ],
+        "characterFormat": {},
+        "paragraphFormat": {},
+        "background": {
+            "color": "#FFFFFFFF"
+        },
+        "styles": [
+            {
+                "type": "Paragraph",
+                "name": "Normal",
+                "next": "Normal"
+            },
+            {
+                "type": "Character",
+                "name": "Default Paragraph Font"
+            }
+        ]
+    }
+    //Open default document in Document Editor.
+    documenteditor.value.open(JSON.stringify(defaultDocument));
+    document.getElementById('editablePageNumber').addEventListener('blur', pageBlurEvent);
+});
+
+provide('DocumentEditor', [Selection, Editor]);
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+
+.single-line {
+    cursor: text !important;
+    outline: none;
+}
+
+.single-line:hover {
+    border-color: #e4e4e4 !important;
+}
+
+[contenteditable="true"].single-line {
+    white-space: nowrap;
+    border-color: #e4e4e4 !important;
+}
+
+.e-de-pagenumber-text:hover {
+    background-color: #f4f4f4 !important;
+}
+
+[contenteditable="true"].single-line * {
+    white-space: nowrap;
+}
+
+.e-de-statusbar-zoom {
+    float: right;
+    text-align: center;
+    padding: 2px;
+    line-height: 19px;
+    margin-top: 1px;
+}
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/app.vue
new file mode 100644
index 000000000..d9dc1ec3f
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/app.vue
@@ -0,0 +1,241 @@
+<template>
+    <div id="app">
+        <ejs-documenteditor ref="documenteditor" v-bind:selectionChange='onSelectionChange'
+            v-bind:viewChange='onViewChange' v-bind:documentChange='onDocumentChange' :enableSelection='true'
+            :isReadOnly=false :enableEditor='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+        <div id=" documenteditor_statusbar">
+            <label style="margin-top: 6px;margin-right: 2px">Page </label>
+            <div class="single-line e-de-pagenumber-text" v-on:keydown='pageKeydownEvent' v-on:click='pagerClickEvent'
+                id="editablePageNumber"
+                style="font-size:12px;font-weight: 700;display: inline-flex;height: 17px;padding: 0px 4px;"
+                contenteditable="false">
+                <label id="documenteditor_page_no"
+                    style="text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text;height:17px;max-width:150px">{{
+                    currentPage }}</label>
+            </div>
+            <label id="documenteditor_pagecount_separator" style="margin-left:2px;letter-spacing: 1.05px">of</label>
+            <label id="documenteditor_pagecount" style="margin-left:6px;letter-spacing: 1.05px">{{ pageCount }}</label>
+            <ejs-dropdownbutton ref="de_zoom" :items="zoomItems" class="e-de-statusbar-zoom" :content="zoomContent"
+                v-bind:select="onZoom" title="Zoom level. Click or tap to open the Zoom options."></ejs-dropdownbutton>
+        </div>
+    </div>
+  </template>
+  <script>
+  import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
+  import { DropDownButtonComponent } from '@syncfusion/ej2-vue-splitbuttons';
+  
+  export default {
+    name: "App",
+    components: {
+        "ejs-documenteditor": DocumentEditorComponent,
+        "ejs-dropdownbutton": DropDownButtonComponent
+    },
+    data: function () {
+        return {
+            zoomContent: "100%",
+            zoomItems: [
+                {
+                    text: '150%',
+                },
+                {
+                    text: '125%',
+                },
+                {
+                    text: '100%',
+                },
+                {
+                    text: '75%',
+                },
+                {
+                    text: '50%',
+                },
+                {
+                    separator: true
+                },
+                {
+                    text: 'Fit one page'
+                },
+                {
+                    text: 'Fit page width',
+                }],
+            pageCount: 1,
+            currentPage: 1
+        };
+    },
+    provide: {
+        //Inject require modules.
+        DocumentEditor: [Selection, Editor]
+    },
+    methods: {
+        onViewChange: function (args) {
+            //Update page number on view change.
+            this.currentPage = args.startPage;
+        },
+        onSelectionChange: function () {
+            //Get current page number.
+            this.currentPage = this.$refs.documenteditor.ej2Instances.selection.startPage;
+        },
+        onDocumentChange: function () {
+            //Update page count.
+            this.pageCount = this.$refs.documenteditor.ej2Instances.pageCount;
+            //Update zoom factor.
+            this.zoomContent = Math.round(this.$refs.documenteditor.ej2Instances.zoomFactor * 100) + '%';
+        },
+        onZoom: function (args) {
+            let zoomValue = args.item.text;
+            if (zoomValue.match('Fit one page')) {
+                this.$refs.documenteditor.ej2Instances.fitPage('FitOnePage');
+            } else if (zoomValue.match('Fit page width')) {
+                this.$refs.documenteditor.ej2Instances.fitPage('FitPageWidth');
+            } else {
+                this.$refs.documenteditor.ej2Instances.zoomFactor = parseInt(zoomValue, 0) / 100;
+            }
+            this.zoomContent = Math.round(this.$refs.documenteditor.ej2Instances.zoomFactor * 100) + '%';
+        },
+        pageKeydownEvent: function (e) {
+            if (e.which === 13) {
+                e.preventDefault();
+                let pageNumber = parseInt(document.getElementById("editablePageNumber").textContent, 0);
+                if (pageNumber > this.$refs.documenteditor.ej2Instances.pageCount) {
+                    this.updatePageNumber();
+                } else {
+                    this.$refs.documenteditor.ej2Instances.selection.goToPage(parseInt(document.getElementById("editablePageNumber").textContent, 0));
+                }
+                document.getElementById("editablePageNumber").contentEditable = 'false';
+                if (document.getElementById("editablePageNumber").textContent === '') {
+                    this.updatePageNumber();
+                }
+            }
+            if (e.which > 64) {
+                e.preventDefault();
+            }
+        },
+        pageBlurEvent: function () {
+            if (document.getElementById("editablePageNumber").textContent === '' || parseInt(document.getElementById("editablePageNumber").textContent, 0) > this.$refs.documenteditor.ej2Instances.pageCountt) {
+                this.updatePageNumber();
+            }
+            document.getElementById("editablePageNumber").contentEditable = 'false';
+        },
+        pagerClickEvent: function () {
+            document.getElementById("editablePageNumber").contentEditable = 'true';
+            document.getElementById("editablePageNumber").focus();
+            window.getSelection().selectAllChildren(document.getElementById("editablePageNumber"));
+        },
+        updatePageNumber: function () {
+            this.currentPage = this.$refs.documenteditor.ej2Instances.selection.startPage.toString();
+        }
+    },
+    mounted: function () {
+        let defaultDocument = {
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "First page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Second page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                },
+                {
+                    "blocks": [
+                        {
+                            "paragraphFormat": {
+                                "styleName": "Normal"
+                            },
+                            "inlines": [
+                                {
+                                    "text": "Third page"
+                                }
+                            ]
+                        }
+                    ],
+                    "headersFooters": {},
+                }
+            ],
+            "characterFormat": {},
+            "paragraphFormat": {},
+            "background": {
+                "color": "#FFFFFFFF"
+            },
+            "styles": [
+                {
+                    "type": "Paragraph",
+                    "name": "Normal",
+                    "next": "Normal"
+                },
+                {
+                    "type": "Character",
+                    "name": "Default Paragraph Font"
+                }
+            ]
+        }
+        //Open default document in Document Editor.
+        this.$refs.documenteditor.open(JSON.stringify(defaultDocument));
+        document.getElementById('editablePageNumber').addEventListener('blur', this.pageBlurEvent);
+    }
+  }
+  </script>
+  <style>
+   @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+      @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+      @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+      @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+      @import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+      @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  
+  .single-line {
+    cursor: text !important;
+    outline: none;
+  }
+  
+  .single-line:hover {
+    border-color: #e4e4e4 !important;
+  }
+  
+  [contenteditable="true"].single-line {
+    white-space: nowrap;
+    border-color: #e4e4e4 !important;
+  }
+  
+  .e-de-pagenumber-text:hover {
+    background-color: #f4f4f4 !important;
+  }
+  
+  [contenteditable="true"].single-line * {
+    white-space: nowrap;
+  }
+  
+  .e-de-statusbar-zoom {
+    float: right;
+    text-align: center;
+    padding: 2px;
+    line-height: 19px;
+    margin-top: 1px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/index.css
new file mode 100644
index 000000000..fdb98ce81
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/index.css
@@ -0,0 +1,32 @@
+
+    
+
+    .single-line {
+        cursor: text !important;
+        outline: none;
+    }
+
+    .single-line:hover {
+        border-color: #e4e4e4 !important;
+    }
+
+    [contenteditable="true"].single-line {
+        white-space: nowrap;
+        border-color: #e4e4e4 !important;
+    }
+
+    .e-de-pagenumber-text:hover {
+        background-color: #f4f4f4 !important;
+    }
+
+    [contenteditable="true"].single-line * {
+        white-space: nowrap;
+    }
+
+    .e-de-statusbar-zoom {
+        float: right;
+        text-align: center;
+        padding: 2px;
+        line-height: 19px;
+        margin-top: 1px;
+    }
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/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/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/index.js
new file mode 100644
index 000000000..afcf0dd66
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/index.js
@@ -0,0 +1,194 @@
+
+    import Vue from 'vue'
+    import { DocumentEditorPlugin, Selection } from '@syncfusion/ej2-vue-documenteditor';
+    import { DropDownButtonPlugin } from '@syncfusion/ej2-vue-splitbuttons';
+
+    Vue.use(DocumentEditorPlugin);
+    Vue.use(DropDownButtonPlugin);
+
+    
+new Vue({
+	el: '#app',
+	template: `
+        <div id="app">
+            <ejs-documenteditor ref="documenteditor" v-bind:selectionChange='onSelectionChange' v-bind:viewChange='onViewChange' v-bind:documentChange='onDocumentChange' :enableSelection='true' :isReadOnly=false height="370px" style="width: 100%;></ejs-documenteditor>
+            <div id="documenteditor_statusbar">
+                <label style="margin-top: 6px;margin-right: 2px">Page </label>
+                <div class="single-line e-de-pagenumber-text" v-on:keydown='pageKeydownEvent' v-on:click='pagerClickEvent' id="editablePageNumber" style="font-size:12px;font-weight: 700;display: inline-flex;height: 17px;padding: 0px 4px;" contenteditable="false">
+                    <label id="documenteditor_page_no" style="text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text;height:17px;max-width:150px">{{currentPage}}</label>
+                </div>
+                <label id="documenteditor_pagecount_separator" style="margin-left:2px;letter-spacing: 1.05px">of</label>
+                <label id="documenteditor_pagecount" style="margin-left:6px;letter-spacing: 1.05px">{{pageCount}}</label>
+                <ejs-dropdownbutton ref="de_zoom" :items="zoomItems" class="e-de-statusbar-zoom" :content="zoomContent" v-bind:select="onZoom" title="Zoom level. Click or tap to open the Zoom options."></ejs-dropdownbutton>
+            </div>
+        </div>
+`,
+
+        props: ['pageCount', 'currentPage', 'zoomContent'],
+        data: function() {
+            return {
+                zoomContent: "100%",
+                zoomItems: [
+                {
+                    text: '150%',
+                },
+                {
+                    text: '125%',
+                },
+                {
+                    text: '100%',
+                },
+                {
+                    text: '75%',
+                },
+                {
+                    text: '50%',
+                },
+                {
+                    separator: true
+                },
+                {
+                    text: 'Fit one page'
+                },
+                {
+                    text: 'Fit page width',
+                }],
+                pageCount: 1,
+                currentPage: 1
+            };
+        },
+        provide: {
+            //Inject require modules.
+            DocumentEditor : [Selection]
+        },
+        methods :{
+            onViewChange: function(args) {
+                //Update page number on view change.
+                this.currentPage =  args.startPage;
+            },
+            onSelectionChange : function(args) {
+                //Get current page number.
+                this.currentPage =  this.$refs.documenteditor.ej2Instances.selection.startPage;
+            },
+            onDocumentChange: function() {
+                //Update page count.
+                this.pageCount =  this.$refs.documenteditor.ej2Instances.pageCount;
+                //Update zoom factor.
+                this.zoomContent = Math.round(this.$refs.documenteditor.ej2Instances.zoomFactor * 100) + '%';
+            },
+            onZoom: function (args) {
+                let zoomValue = args.item.text;
+                if (zoomValue.match('Fit one page')) {
+                    this.$refs.documenteditor.ej2Instances.fitPage('FitOnePage');
+                } else if (zoomValue.match('Fit page width')) {
+                    this.$refs.documenteditor.ej2Instances.fitPage('FitPageWidth');
+                } else {
+                    this.$refs.documenteditor.ej2Instances.zoomFactor = parseInt(zoomValue, 0) / 100;
+                }
+                this.zoomContent = Math.round(this.$refs.documenteditor.ej2Instances.zoomFactor * 100) + '%';
+            },
+            pageKeydownEvent: function (e) {
+                if (e.which === 13) {
+                    e.preventDefault();
+                    let pageNumber = parseInt(document.getElementById("editablePageNumber").textContent, 0);
+                    if (pageNumber > this.$refs.documenteditor.ej2Instances.pageCount) {
+                        this.updatePageNumber();
+                    } else {
+                        this.$refs.documenteditor.ej2Instances.selection.goToPage(parseInt(document.getElementById("editablePageNumber").textContent, 0));
+                    }
+                    document.getElementById("editablePageNumber").contentEditable = 'false';
+                    if (document.getElementById("editablePageNumber").textContent === '') {
+                        this.updatePageNumber();
+                    }
+                }
+                if (e.which > 64) {
+                    e.preventDefault();
+                }
+            },
+            pageBlurEvent: function () {
+                if (document.getElementById("editablePageNumber").textContent === '' || parseInt(document.getElementById("editablePageNumber").textContent, 0) > this.$refs.documenteditor.ej2Instances.pageCountt) {
+                    this.updatePageNumber();
+                }
+                document.getElementById("editablePageNumber").contentEditable = 'false';
+            },
+            pagerClickEvent: function () {
+                document.getElementById("editablePageNumber").contentEditable = 'true';
+                document.getElementById("editablePageNumber").focus();
+                window.getSelection().selectAllChildren(document.getElementById("editablePageNumber"));
+            },
+            updatePageNumber: function () {
+                this.currentPage = this.$refs.documenteditor.ej2Instances.selection.startPage.toString();
+            }
+        },
+        mounted: function() {
+            let defaultDocument: object = {
+                "sections": [
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "First page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    },
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "Second page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    },
+                    {
+                        "blocks": [
+                            {
+                                "paragraphFormat": {
+                                    "styleName": "Normal"
+                                },
+                                "inlines": [
+                                    {
+                                        "text": "Third page"
+                                    }
+                                ]
+                            }
+                        ],
+                        "headersFooters": {},
+                    }
+                ],
+                "characterFormat": {},
+                "paragraphFormat": {},
+                "background": {
+                    "color": "#FFFFFFFF"
+                },
+                "styles": [
+                    {
+                        "type": "Paragraph",
+                        "name": "Normal",
+                        "next": "Normal"
+                    },
+                    {
+                        "type": "Character",
+                        "name": "Default Paragraph Font"
+                    }
+                ]
+            }
+            //Open default document in Document Editor.
+            this.$refs.documenteditor.open(JSON.stringify(defaultDocument));
+            document.getElementById('editablePageNumber').addEventListener('blur',this.pageBlurEvent);
+        }
+    
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/systemjs.config.js
new file mode 100644
index 000000000..414d11ec0
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/scrolling-zooming-cs3/systemjs.config.js
@@ -0,0 +1,44 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js",
+        "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/app-composition.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/app-composition.vue
new file mode 100644
index 000000000..380798e32
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/app-composition.vue
@@ -0,0 +1,53 @@
+<template>
+  <div id="app">
+    <button id='import' v-on:click="onClick">Load Document</button>
+    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
+      id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script setup>
+import { provide, ref } from "vue";
+import {
+  DocumentEditorContainerComponent as EjsDocumenteditorcontainer,
+  Toolbar,
+} from '@syncfusion/ej2-vue-documenteditor';
+import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+
+const container = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/';
+
+provide('DocumentEditorContainer', [Toolbar],);
+
+const onClick = function () {
+  // load your default document here
+  let data = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+  // showSpinner() will make the spinner visible
+  showSpinner(document.getElementById('container'));
+  // Open the default document
+  container.value.ej2Instances.documentEditor.open(data);
+  setInterval(function () {
+
+    // hideSpinner() method used hide spinner
+    hideSpinner(document.getElementById('container'));
+
+  }, 5000);
+}
+const onCreated = function () {
+  createSpinner({
+    // Specify the target for the spinner to show
+    target: document.getElementById('container')
+  });
+}
+</script>
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/app.vue b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/app.vue
new file mode 100644
index 000000000..1b395ed67
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/app.vue
@@ -0,0 +1,66 @@
+<template>
+  <div id="app">
+    <button id='import' v-on:click="onClick">Load Document</button>
+    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
+      id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script>
+
+import {
+  DocumentEditorContainerComponent,
+  Toolbar,
+} from '@syncfusion/ej2-vue-documenteditor';
+import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+
+export default {
+  name: "App",
+  components: {
+    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+  },
+  data() {
+    return {
+      serviceUrl:
+        'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+    };
+  },
+  provide: {
+    //Inject require modules.
+    DocumentEditorContainer: [Toolbar],
+  },
+  methods: {
+    onClick: function () {
+      // load your default document here
+      let data = '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+      // showSpinner() will make the spinner visible
+      showSpinner(document.getElementById('container'));
+      // Open the default document
+      this.$refs.container.ej2Instances.documentEditor.open(data);
+      setInterval(function () {
+
+        // hideSpinner() method used hide spinner
+        hideSpinner(document.getElementById('container'));
+
+      }, 5000);
+    },
+    onCreated: function () {
+      createSpinner({
+        // Specify the target for the spinner to show
+        target: document.getElementById('container')
+      });
+    }
+  },
+};
+</script>
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/index.css b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/index.css
new file mode 100644
index 000000000..03cf8be17
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/index.css
@@ -0,0 +1,10 @@
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/index.html b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-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/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/index.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/index.js
new file mode 100644
index 000000000..8e46703eb
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/index.js
@@ -0,0 +1,56 @@
+
+  import Vue from 'vue';
+  import {
+    DocumentEditorContainerPlugin,
+    DocumentEditorContainerComponent,
+    Toolbar,
+  } from '@syncfusion/ej2-vue-documenteditor';
+  import { showSpinner, hideSpinner, createSpinner } from '@syncfusion/ej2-popups';
+
+  Vue.use(DocumentEditorContainerPlugin);
+
+  ;
+new Vue({
+	el: '#app',
+	template: `
+    <div id="app">
+      <button id='import' v-on:click="onClick">Load Document</button>
+      <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
+    </div>
+`,
+
+    data() {
+      return {
+        serviceUrl:
+          'https://document.syncfusion.com/web-services/word-editor/api/documenteditor/',
+      };
+    },
+    provide: {
+      //Inject require modules.
+      DocumentEditorContainer: [Toolbar],
+    },
+    methods: {
+        onClick:function() {
+       // load your default document here
+       let data= '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
+
+       // showSpinner() will make the spinner visible
+       showSpinner(document.getElementById('container'));
+       // Open the default document
+       this.$refs.container.ej2Instances.documentEditor.open(data);
+       setInterval(function(){
+
+       // hideSpinner() method used hide spinner
+       hideSpinner(document.getElementById('container'));
+
+       }, 5000);
+       },
+      onCreated: function () {
+       createSpinner({
+    // Specify the target for the spinner to show
+      target: document.getElementById('container')
+  });
+      }
+    },
+  
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/systemjs.config.js b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/systemjs.config.js
new file mode 100644
index 000000000..b3b26be23
--- /dev/null
+++ b/Document-Processing/code-snippet/document-editor/vue/document-editor/spinner-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.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-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-documenteditor": "syncfusion:ej2-vue-documenteditor/dist/ej2-vue-documenteditor.umd.min.js",
+        "@syncfusion/ej2-ribbon": "syncfusion:ej2-ribbon/dist/ej2-ribbon.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file