Merge pull request #2222 from syncfusion-content/809971-JS5-revamp

(documentation)1008846: ES5 code revamp

Author: MohanaselvamJothi

Document-Processing/Word/Word-Processor/javascript-es5/comments.md

@@ -16,7 +16,7 @@ Document Editor allows you to add comments to documents. You can add, navigate a
 
 Comments can be inserted to the selected text.
 
-```ts
+```js
 //Add new commnt in the document.
 documentEditor.editor.insertComment('Test comment');
 ```
@@ -47,7 +47,7 @@ documentEditor.editor.insertComment('Hello world', commentProperties);
 
 ## Add a Reply Comment with Date, Author, and Status
 
-Reply comments can be inserted into the parent comment with a specified date, author using [`insertReplyComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertreplycomment/).
+Reply comments can be inserted into the parent comment with a specified date, author using [`insertReplyComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertreplycomment).
 
 {% highlight js %}
 // In this example, a comment with the text "Hello world"
@@ -73,7 +73,7 @@ documentEditor.editor.insertReplyComment(comment.id, 'Hello world', commentPrope
 
 ## Get Comments
 
-Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#getComments/).
+Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#getComments).
 
 {% highlight js %}
 //Get Comments in the document along with the properties author, date, status.
@@ -85,7 +85,7 @@ var commentInfo = container.documentEditor.getComments();
 
 Next and previous comments can be navigated using the below code snippet.
 
-```ts
+```js
 //Navigate to next comment
 documentEditor.selection.navigateNextComment();
 
@@ -96,7 +96,7 @@ documentEditor.selection.navigatePreviousComment();
 
 ## Delete comment
 
-Current comment can be be deleted using [`deleteComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletecomment/).
+Current comment can be be deleted using [`deleteComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletecomment).
 
 
 {% highlight js %}
@@ -117,7 +117,7 @@ container.documentEditor.editor.deleteComment(commentinfo[0].replies[0].id);
 
 All the comments in the document can be deleted using the below code snippet.
 
-```ts
+```js
 //Delete all the comments present in the current document.
 documentEditor.editor.deleteAllComments();
 ```
@@ -126,25 +126,26 @@ documentEditor.editor.deleteAllComments();
 
 Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user allowed to add or edit comments alone in the document.
 
-Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection/) and [`stopProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#stopprotection/) API.
+Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#stopprotection) API.
 
 The following example code illustrates how to enforce and stop protection in Document editor container.
 
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
+```js
+
+var container = new ej.documenteditor.DocumentEditorContainer({
   enableToolbar: true,
-  height: '590px',
+  height: '590px'
 });
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl =
-  'http://localhost:5000/api/documenteditor/';
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+container.serviceUrl = 'http://localhost:5000/api/documenteditor/';
 container.appendTo('#container');
 
 //enforce protection
 container.documentEditor.editor.enforceProtection('123', 'CommentsOnly');
 
 //stop the document protection
 container.documentEditor.editor.stopProtection('123');
+
 ```
 
 Comment only protection can be enabled in UI by using [Restrict Editing pane](./document-management#restrict-editing-pane)
@@ -159,28 +160,33 @@ Mention support displays a list of items that users can select or tag from the s
 
 The following example illustrates how to enable mention support in Document Editor
 
-```ts
-let mentionData: any = [
+```js
+var mentionData = [
     { "Name": "Mary Kate", "EmailId": "marry@company.com" },
     { "Name": "Andrew James", "EmailId": "james@company.com" },
-    { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
+    { "Name": "Andrew Fuller", "EmailId": "andrew@company.com" }
 ];
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
-// Enable mention support in document editor
-  documentEditorSettings: {
-    mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }},
-  }
+
+var container = new ej.documenteditor.DocumentEditorContainer({
+    enableToolbar: true,
+    height: '590px',
+    // Enable mention support in document editor
+    documentEditorSettings: {
+        mentionSettings: { dataSource: mentionData, fields: { text: 'Name' } }
+    }
 });
-DocumentEditorContainer.Inject(Toolbar);
+
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
 container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
 container.appendTo('#container');
+
 ```
 
 > 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.
 
 ## Events
 
-DocumentEditor provides [beforeCommentAction](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforecommentaction/) event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the [CommentActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/commentActionEventArgs/) object as an argument, which allows access to information about the comment.
+DocumentEditor provides [beforeCommentAction](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforecommentaction) event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the [CommentActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/commentActionEventArgs) object as an argument, which allows access to information about the comment.
 
 To demonstrate a specific use case, let’s consider an example where we want to restrict the delete functionality based on the author’s name. The following code snippet illustrates how to allow only the author of a comment to delete:
 

Document-Processing/Word/Word-Processor/javascript-es5/export.md

@@ -131,25 +131,20 @@ The following example shows how to export document as text document (.txt).
 
 Document Editor also supports API to store the document into a blob. Refer to the following sample to export document into blob in client-side.
 
-```ts
-import { DocumentEditor, FormatType, WordExport, SfdtExport } from '@syncfusion/ej2-documenteditor';
+```js
 
-//Inject require modules for Export.
-DocumentEditor.Inject(WordExport, SfdtExport);
-
-let documenteditor: DocumentEditor = new DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true });
+var documenteditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true });
 
 documenteditor.appendTo('#DocumentEditor');
 
 documenteditor.open(sfdt);
 
-document.getElementById('export').addEventListener('click', () => {
-    //Export the current document as `Blob` object.
-    documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
-      // The blob can be processed further
-    });
+document.getElementById('export').addEventListener('click', function () {
+  // Export the current document as `Blob` object.
+  documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
+    // The blob can be processed further
+  });
 });
-
 ```
 
 For instance, to export the document as Rich Text Format file, implement an ASP.NET MVC web API controller using DocIO library by passing the DOCX blob. Refer to the following code example.
@@ -173,57 +168,57 @@ For instance, to export the document as Rich Text Format file, implement an ASP.
 
 In client-side, you can consume this web service and save the document as Rich Text Format (.rtf) file. Refer to the following example.
 
-```ts
-document.getElementById('export').addEventListener('click', () => {
-    //Expor the document as `Blob` object.
-    documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
+```js
+document.getElementById('export').addEventListener('click', function () {
+    // Expor the document as `Blob` object.
+    documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
         // The blob can be processed further
-        let formData: FormData = new FormData();
+        var formData = new FormData();
         formData.append('fileName', 'sample.docx');
         formData.append('data', exportedDocument);
         saveAsRtf(formData);
     });
 });
 
-function saveAsRtf(formData: FormData): void {
-    //Send the blob object to server to process further.
-    let httpRequest: XMLHttpRequest = new XMLHttpRequest();
+function saveAsRtf(formData) {
+    // Send the blob object to server to process further.
+    var httpRequest = new XMLHttpRequest();
     httpRequest.open('POST', '/api/DocumentEditor/ExportAsRtf', true);
-    httpRequest.onreadystatechange = () => {
+    httpRequest.onreadystatechange = function () {
         if (httpRequest.readyState === 4) {
             if (httpRequest.status === 200 || httpRequest.status === 304) {
                 if (!(!navigator.msSaveBlob)) {
                     navigator.msSaveBlob(httpRequest.response, 'sample.rtf');
                 } else {
-                    let downloadLink: HTMLAnchorElement = document.createElementNS('http://www.w3.org/1999/xhtml', 'a') as HTMLAnchorElement;
+                    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);
 }
 
-//Download the document in client side.
-function download(fileName: string, extension: string, buffer: Blob, downloadLink: HTMLAnchorElement, hasDownloadAttribute: Boolean): void {
+// Download the document in client side.
+function download(fileName, extension, buffer, downloadLink, hasDownloadAttribute) {
     if (hasDownloadAttribute) {
         downloadLink.download = fileName;
-        let dataUrl: string = window.URL.createObjectURL(buffer);
+        var dataUrl = window.URL.createObjectURL(buffer);
         downloadLink.href = dataUrl;
-        let event: MouseEvent = document.createEvent('MouseEvent');
+        var event = document.createEvent('MouseEvent');
         event.initEvent('click', true, true);
         downloadLink.dispatchEvent(event);
-        setTimeout((): void => {
+        setTimeout(function () {
             window.URL.revokeObjectURL(dataUrl);
             dataUrl = undefined;
         });
     } else {
         if (extension !== 'docx' && extension !== 'xlsx') {
-            let url: string = window.URL.createObjectURL(buffer);
-            let isPopupBlocked: Window = window.open(url, '_blank');
+            var url = window.URL.createObjectURL(buffer);
+            var isPopupBlocked = window.open(url, '_blank');
             if (!isPopupBlocked) {
                 window.location.href = url;
             }

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

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Change document view in JavaScript (ES5) Document editor control | Syncfusion
+title: Change document view in JavaScript (ES5) Document editor | Syncfusion
 description: Learn here all about Change document view in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more.
 platform: document-processing
 control: Change document view 
@@ -12,20 +12,20 @@ domainurl: ##DomainURL##
 
 ## How to change the document view in DocumentEditor component
 
-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/).
+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/).
+>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).
 
 ## How to change the document view in DocumentEditorContainer component
 
-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/).
+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/).
+>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-color-picker.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Customize color picker in JavaScript (ES5) Document editor control | Syncfusion
+title: Customize color picker in JavaScript(ES5) Document Editor | Syncfusion
 description: Learn here all about Customize color picker in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more.
 platform: document-processing
 control: Customize Color Picker 
@@ -10,14 +10,14 @@ domainurl: ##DomainURL##
 
 # Customize color picker in JavaScript (ES5) Document editor control
 
-Document editor provides an options to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings/) in Document editor settings. The color picker offers customization options for default appearance, by allowing selection between Picker or Palette mode, for font and border colors."
+Document editor provides an options to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings) in Document editor settings. The color picker offers customization options for default appearance, by allowing selection between Picker or Palette mode, for font and border colors."
 
-Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditorsettings/) property for DocumentEditor also.
+Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also.
 
 The following example code illustrates how to Customize the color picker in Document editor container.
 
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
+```js
+var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,height: '590px',
   //Customizing options for color picker.
   documentEditorSettings: {
     colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true },