1009393: Modified the code snippets

Author: Akshaya0404

Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md

@@ -14,8 +14,8 @@ domainurl: ##DomainURL##
 
 DocumentEditor allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) property with the supported [`LayoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/).
 
-```ts
-let docEdit: DocumentEditor = new DocumentEditor({ layoutType: 'Continuous'});
+```js
+var docEdit = new ej.documenteditor.DocumentEditor({ layoutType: 'Continuous'});
 ```
 
 >Note: Default value of [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) in DocumentEditor component is [`Pages`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/).
@@ -24,8 +24,8 @@ let docEdit: DocumentEditor = new DocumentEditor({ layoutType: 'Continuous'});
 
 DocumentEditorContainer component allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) property with the supported [`LayoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/).
 
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ layoutType: "Continuous" });
+```js
+var container = new ej.documenteditor.DocumentEditorContainer({ layoutType: "Continuous" });
 ```
 
 >Note: Default value of [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) in DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/).

Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md

@@ -18,28 +18,30 @@ Document Editor allows you to add custom option in context menu. It can be achie
 
 The following code shows how to add custom option in context menu.
 
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({
-    isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
+```js
+var documentEditor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false,
+    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
 });
 documentEditor.enableAllModules();
 documentEditor.appendTo('#DocumentEditor');
 //Creating custom menu items
-let menuItems: MenuItemModel[] = [
+var menuItems = [
     {
         text: 'Search In Google',
         id: 'search_in_google',
         iconCss: 'e-icons e-de-ctnr-find'
-    }];
+    }
+];
 //Adding custom options
 documentEditor.contextMenu.addCustomMenu(menuItems, false);
 //To handle contextmenu select event
-documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
-    let item: string = args.id;
-    let id: string = documentEditor.element.id;
+documentEditor.customContextMenuSelect = function (args) {
+    var item = args.id;
+    var id = documentEditor.element.id;
     switch (item) {
         case id + 'search_in_google':
-            let searchContent: string = documentEditor.selection.text;
+            var searchContent = documentEditor.selection.text;
             if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
                 window.open('http://google.com/search?q=' + searchContent);
             }
@@ -56,19 +58,21 @@ Document Editor allows you to customize the added custom option and also to hide
 
 The following code shows how to hide default context menu and add custom option in context menu.
 
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({
-    isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
+```js
+var documentEditor = new ej.documenteditor.DocumentEditor({
+    isReadOnly: false,
+    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
 });
 documentEditor.enableAllModules();
 documentEditor.appendTo('#DocumentEditor');
 //Creating custom menu items
-let menuItems: MenuItemModel[] = [
+var menuItems = [
     {
         text: 'Search In Google',
         id: 'search_in_google',
         iconCss: 'e-icons e-de-ctnr-find'
-    }];
+    }
+];
 //Adding custom options
 documentEditor.contextMenu.addCustomMenu(menuItems, true);
 ```
@@ -77,37 +81,38 @@ documentEditor.contextMenu.addCustomMenu(menuItems, true);
 
 The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs/).
 
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({
+```js
+var documentEditor = new ej.documenteditor.DocumentEditor({
     isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
 });
 documentEditor.enableAllModules();
 documentEditor.appendTo('#DocumentEditor');
 //Creating custom menu items
-let menuItems: MenuItemModel[] = [
+var menuItems = [
     {
         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]);
+documentEditor.customContextMenuBeforeOpen = function (args) {
+    var search = document.getElementById(args.ids[0]);
     search.style.display = 'none';
-    let searchContent: string = documentEditor.selection.text;
+    var searchContent = 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;
+documentEditor.customContextMenuSelect = function (args) {
+    var item = args.id;
+    var id = documentEditor.element.id;
     switch (item) {
         case id + 'search_in_google':
-            let searchContent: string = documentEditor.selection.text;
+            var searchContent = documentEditor.selection.text;
             if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
                 window.open('http://google.com/search?q=' + searchContent);
             }
@@ -135,18 +140,10 @@ Document Editor allows you to customize the Context Menu with sub-menu items. It
 
 The following code shows how to add a sub items in the custom option in context menu in Document Editor Container.
 
-```ts
-import {
-  DocumentEditorContainer,
-  Toolbar,
-} from '@syncfusion/ej2-documenteditor';
-import { MenuItemModel } from '@syncfusion/ej2-navigations';
-
-//Inject require modules.
-DocumentEditorContainer.Inject(Toolbar);
+```js
 
 // creating Custom Options
-let menuItems: MenuItemModel[] = [
+var menuItems = [
   {
     text: 'Form field',
     id: 'form field',
@@ -155,34 +152,34 @@ let menuItems: MenuItemModel[] = [
       {
         text: 'Text form',
         id: 'Text form',
-        iconCss: 'e-icons e-de-textform',
+        iconCss: 'e-icons e-de-textform'
       },
       {
         text: 'Check box',
         id: 'Check box',
-        iconCss: 'e-icons e-de-checkbox-form',
+        iconCss: 'e-icons e-de-checkbox-form'
       },
       {
         text: 'Drop down',
         id: 'Drop down',
-        iconCss: 'e-icons e-de-dropdownform',
-      },
-    ],
-  },
+        iconCss: 'e-icons e-de-dropdownform'
+      }
+    ]
+  }
 ];
+
 //Initialize Document Editor component.
-let container: DocumentEditorContainer = new DocumentEditorContainer({
+var container = new ej.documenteditor.DocumentEditorContainer({
   enableToolbar: true,
-  height: '590px',
+  height: '590px'
 });
 
 //Open the default document in `created` event.
 container.created = function () {
   // adding Custom Options
   container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
 };
+
 //Render Document Editor Container component.
 container.appendTo('#DocumentEditor');
-
-
 ```

Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md

@@ -20,39 +20,35 @@ DocumentEditorContainer allows you to customize(add, show, hide, enable, and dis
 
 * Enable, Disable -  Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/toolbar/#enableItems)
 
-```ts
-let toolItem: CustomToolbarItemModel = {
+```js
+var toolItem = {
     prefixIcon: "e-de-ctnr-lock",
     tooltipText: "Disable Image",
     text: onWrapText("Disable Image"),
     id: "Custom"
 };
-
 //Initialize Document Editor Container component with custom toolbar item.
-let container: DocumentEditorContainer = new DocumentEditorContainer({
+var container = new ej.documenteditor.DocumentEditorContainer({
     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.appendTo('#container');
 //To handle custom toolbar click event.
-container.toolbarClick = (args: ClickEventArgs): void => {
+container.toolbarClick = function (args) {
     switch (args.item.id) {
         case 'Custom':
             //Disable image toolbar item.
             container.toolbar.enableItems(4, false);
             break;
     }
 };
-
-function onWrapText(text: string): string {
-  let content: string = '';
-    const index: number = text.lastIndexOf(' ');
-
+function onWrapText(text) {
+    var content = '';
+    var 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;
 }
 ```

Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md

@@ -18,31 +18,29 @@ Hence, it is recommended to switch the Document editor component as read-only in
 
 The following example code illustrates how to deploy Document Editor component for Mobile.
 
-```ts
+```js
 //Initialize Document Editor Container component.
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
 
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
+var container = new ej.documenteditor.DocumentEditorContainer({
     enableToolbar: true, height: '590px'
 });
 container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
 container.appendTo('#DocumentEditor');
 
 //To detect the device
-let isMobileDevice: bool = /Android|Windows Phone|webOS/i.test(navigator.userAgent);
+var isMobileDevice = /Android|Windows Phone|webOS/i.test(navigator.userAgent);
 
-container.documentChange = () => {
+container.documentChange = function () {
     if (isMobileDevice) {
         container.restrictEditing = true;
-        setTimeout(() => {
+        setTimeout(function () {
             container.documentEditor.fitPage("FitPageWidth");
         }, 50);
     }
     else {
         container.restrictEditing = false;
     }
-}
+};
 ```
 
 > The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md

@@ -18,12 +18,12 @@ If you want the Document editor component to retain the document pagination (dis
 
 The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditorContainer` instance.
 
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+```js
 
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
+var container = new ej.documenteditor.DocumentEditorContainer({
+    enableToolbar: true,
+    height: '590px'
+});
 
 // Disable optimized text measuring improvement
 container.documentEditorSettings = { enableOptimizedTextMeasuring: false };
@@ -37,10 +37,9 @@ container.appendTo('#container');
 
 The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditor` instance.
 
-```ts
-import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+```js
 
-let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, height: '370px', serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' });
+var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, height: '370px', serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' });
 
 documenteditor.enableAllModules();
 

Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md

@@ -16,20 +16,18 @@ In this article, we are going to see how to open a document from URL in Document
 
 please refer below example for client-side code
 
-```ts
+```js
 //Initialize Document Editor Container component.
-let container: DocumentEditorContainer = new DocumentEditorContainer();
-
+var container = new ej.documenteditor.DocumentEditorContainer();
 container.appendTo('#DocumentEditorContainer');
-
-document.getElementById('import').addEventListener('click', () => {
-    let http: XMLHttpRequest = new XMLHttpRequest();
+document.getElementById('import').addEventListener('click', function () {
+    var http = new XMLHttpRequest();
     //add your url in which you want to open document inside the ""
-    let content = { fileUrl: "" };
-    let baseurl: string = "/api/documenteditor/ImportFileURL";
+    var content = { fileUrl: "" };
+    var baseurl = "/api/documenteditor/ImportFileURL";
     http.open("POST", baseurl, true);
     http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
-    http.onreadystatechange = () => {
+    http.onreadystatechange = function () {
         if (http.readyState === 4) {
             if (http.status === 200 || http.status === 304) {
                 //open the SFDT text in Document Editor