From 29bc9f1e6d42a1beb81e793f349f4cfad9e62886 Mon Sep 17 00:00:00 2001 From: Krishna Kaviarasu Sethuramasamy Date: Fri, 7 Aug 2026 18:04:06 +0530 Subject: [PATCH] 1044838: addressed code alignment and Document Editor changes --- .../angular/saving-documents/one-drive.md | 41 +++++++++---------- .../saving-documents/server-side-export.md | 18 ++++---- .../angular/scrolling-zooming.md | 22 +++++----- .../Word-Processor/angular/section-format.md | 31 +++++++------- .../angular/security-advisories.md | 12 +++--- 5 files changed, 62 insertions(+), 62 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/one-drive.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/one-drive.md index 4ffe633fbb..16c2cdb566 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/one-drive.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/one-drive.md @@ -1,24 +1,24 @@ --- layout: post -title: Save document to One Drive in Angular Document editor control | Syncfusion -description: Learn about how to Save document to One Drive in Angular Document editor control of Syncfusion Essential JS 2 and more details. +title: Save document to OneDrive in Angular DOCX Editor | Syncfusion +description: Learn how to save a document to OneDrive in the Syncfusion Angular Document Editor of Syncfusion Essential JS 2 and more details. platform: document-processing -control: Save document to One Drive +control: Save document to OneDrive documentation: ug domainurl: ##DomainURL## --- -# Save document to One Drive +# Save document to OneDrive in Angular Document Editor -To save a document to One Drive, you can follow the steps below +To save a document to OneDrive, you can follow the steps below. -**Step 1:** Create the Microsoft graph API. +**Step 1:** Create the Microsoft Graph API. -Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs. +You must create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs. -**Step 2:** Create a Simple [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) sample in angular +**Step 2:** Create a Simple Angular Document Editor sample in Angular -Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in angular. This will give you a basic setup of the Document Editor component. +Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Angular. This will give you a basic setup of the Document Editor component. **Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project @@ -35,7 +35,7 @@ using Microsoft.Identity.Client; using Helpers; ``` -* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields +* Add the following private fields and constructor parameters to the `DocumentEditorController` class. In the constructor, assign the values from the configuration to the corresponding fields. ```csharp private IConfiguration _configuration; @@ -54,14 +54,14 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC } ``` -* Create the `SaveToOneDrive()` method to save the downloaded document to One Drive bucket +* Create the `SaveToOneDrive()` method to save the downloaded document to OneDrive. ```csharp [AcceptVerbs("Post")] [HttpPost] [EnableCors("AllowAllOrigins")] [Route("SaveToOneDrive")] -//Post action for downloading the document +//Post action for uploading the document to OneDrive public void SaveToOneDrive(IFormCollection data) { @@ -115,7 +115,7 @@ private string GetValue(IFormCollection data, string key) } ``` -* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration +* Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -130,14 +130,13 @@ private string GetValue(IFormCollection data, string key) "applApplicationIdicationId": "Your_Application_ID", "FolderName": "Your_Folder_Name_To_Access_The_Files_In_Onedrive" } - ``` -> Replace **Your_Tenant_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_Onedrive** with your actual tenant ID, application ID, and folder name. +N> Replace **Your_Tenant_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_OneDrive** with your actual tenant ID, application ID, and folder name. **Step 4:** Modify the index File in the Document Editor sample -In the client-side, to export the document into blob the document using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#saveasblob) and sent to server-side for saving in One Drive. +On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) and send it to the server side for saving in OneDrive. ```typescript @@ -149,7 +148,7 @@ import { @Component({ selector: 'app-root', // specifies the template string for the DocumentEditorContainer component - template: ` `, + template: ` `, providers: [ToolbarService], }) export class AppComponent implements OnInit { @@ -160,13 +159,13 @@ export class AppComponent implements OnInit { public save(): void { //Export the document as Blob object. this.container.documentEditor.saveAsBlob('Docx').then((exportedDocument: Blob) => { - //Now, save the document where ever you want. + //Now, save the document wherever you want. let formData: FormData = new FormData(); formData.append('documentName', this.container.documentEditor.documentName); formData.append('file', exportedDocument); /* tslint:disable */ let req = new XMLHttpRequest(); - // Replace your running Url here + // Replace your running URL here req.open( 'POST', 'http://localhost:62870/api/documenteditor/SaveToOneDrive', @@ -175,7 +174,7 @@ export class AppComponent implements OnInit { req.onreadystatechange = () => { if (req.readyState === 4) { if (req.status === 200 || req.status === 304) { - console.log('Saved sucessfully'); + console.log('Saved successfully'); } } }; @@ -185,7 +184,7 @@ export class AppComponent implements OnInit { } ``` -> The following NuGet packages are required to use the previous code example +N> The following NuGet packages are required to use the previous code example: * **Microsoft.Identity.Client** * **Microsoft.Graph** * **Microsoft.Extensions.Configuration** diff --git a/Document-Processing/Word/Word-Processor/angular/saving-documents/server-side-export.md b/Document-Processing/Word/Word-Processor/angular/saving-documents/server-side-export.md index 42323de629..4996039abb 100644 --- a/Document-Processing/Word/Word-Processor/angular/saving-documents/server-side-export.md +++ b/Document-Processing/Word/Word-Processor/angular/saving-documents/server-side-export.md @@ -1,24 +1,24 @@ --- layout: post -title: Server side export in Angular Document editor component | Syncfusion -description: Learn here all about Server side export in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Server-side export in Angular DOCX Editor | Syncfusion +description: Learn here all about Server-side export in the Syncfusion Angular Document Editor of Syncfusion Essential JS 2 and more. platform: document-processing -control: Server side export +control: Server-side export documentation: ug domainurl: ##DomainURL## --- -# Server side export in Angular Document editor component +# Server-side export in Angular Document Editor ## SFDT to DOCX export -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports server-side export of **Syncfusion Document Text (.SFDT)** to Doc, DOCX, RTF, Txt, WordML, Html formats using server-side helper **Syncfusion.EJ2.DocumentEditor** available in ASP.NET Core & ASP.NET MVC platform in the below NuGet's. +Angular Document Editor supports server-side export of **Syncfusion Document Text (.sfdt)** to Doc, DOCX, RTF, Txt, WordML, HTML formats using server-side helper **Syncfusion.EJ2.DocumentEditor** available in ASP.NET Core & ASP.NET MVC platform in the NuGet packages below. * [Syncfusion.EJ2.WordEditor.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core) * [Syncfusion.EJ2.WordEditor.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc5) * [Syncfusion.EJ2.WordEditor.AspNet.Mvc4](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc4) -Please refer the following code example. +Please refer to the following code example. ```csharp //API controller for the conversion. @@ -39,7 +39,7 @@ Please refer the following code example. } ``` -Please refer the client side example to serialize the sfdt and send to the server. +Please refer to the client-side example to serialize the SFDT and send it to the server. ```typescript import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; @@ -64,11 +64,11 @@ export class AppComponent { http.open('POST', 'http://localhost:5000/api/documenteditor/ExportSFDT'); http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); http.responseType = 'json'; - //Serialize the document content as sfdt. + //Serialize the document content as SFDT. let sfdt: any = { content: this.documentEditor.serialize() }; http.send(JSON.stringify(sfdt)); }; } ``` -> `DocumentEditor` object is available in `DocumentEditorContainer` component(DocumentEditor packaged with toolbar, statusbar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#documenteditor) +N> The `DocumentEditor` object is available in the `DocumentEditorContainer` component (DocumentEditor packaged with toolbar, status bar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#documenteditor). diff --git a/Document-Processing/Word/Word-Processor/angular/scrolling-zooming.md b/Document-Processing/Word/Word-Processor/angular/scrolling-zooming.md index 8140d47071..d0ed682240 100644 --- a/Document-Processing/Word/Word-Processor/angular/scrolling-zooming.md +++ b/Document-Processing/Word/Word-Processor/angular/scrolling-zooming.md @@ -1,16 +1,16 @@ --- layout: post -title: Scrolling zooming in Angular Document editor component | Syncfusion -description: Learn here all about Scrolling zooming in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Scrolling and zooming in Angular DOCX Editor | Syncfusion +description: Learn here all about Scrolling and zooming in the Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Scrolling zooming +control: Scrolling zooming documentation: ug domainurl: ##DomainURL## --- -# Scrolling zooming in Angular Document editor component +# Scrolling and zooming in Angular Document Editor -The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) renders the document as page by page. You can scroll through the pages by mouse wheel or touch interactions. You can also scroll through the page by using ‘scrollToPage()’ method of document editor instance. Refer to the following code example. +The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) renders the document page by page. You can scroll through the pages by mouse wheel or touch interactions. You can also scroll through the pages by using the `scrollToPage()` method of the document editor instance. Refer to the following code example. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -24,9 +24,9 @@ The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-doc {% previewsample "/document-processing/samples/document-editor/angular/find-replace-cs3" %} -> Calling this method brings the specified page into view but doesn’t move selection. Hence this method will work by default. That is, it works even if selection is not enabled. +N> Calling this method brings the specified page into view but doesn't move selection. Hence this method will work by default. That is, it works even if selection is not enabled. -In case, if you wish to move the selection to any page in document editor and bring it into view, you can use ‘goToPage()’ method of selection instance. Refer to the following code example. +If you wish to move the selection to any page in the document editor and bring it into view, you can use the `goToPage()` method of the selection instance. Refer to the following code example. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -42,7 +42,7 @@ In case, if you wish to move the selection to any page in document editor and br ## Zooming -You can scale the contents in document editor ranging from 10% to 500% of the actual size. You can achieve this using mouse or touch interactions. You can also use `zoomFactor` property of document editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example. +You can scale the contents in the document editor ranging from 10% to 500% of the actual size. You can achieve this using mouse or touch interactions. You can also use the `zoomFactor` property of the document editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example. ```typescript this.documentEditor.zoomFactor = 3; @@ -50,15 +50,15 @@ this.documentEditor.zoomFactor = 3; ## Page Fit Type -Apart from specifying the zoom factor as value, the Document Editor provides option to specify page fit options such as fit to full page or fit to page width. You can set this option using ‘fitPage’ method of document editor instance. Refer to the following code example. +Apart from specifying the zoom factor as a value, the Document Editor provides an option to specify page fit options such as fit to full page or fit to page width. You can set this option using the `fitPage` method of the document editor instance. Refer to the following code example. ```typescript -this.documentEditor.fitPage('Fit page width'); +this.documentEditor.fitPage('FitPageWidth'); ``` ## Zoom option using UI -The following code example shows how to provide zoom options in document editor. +The following code example shows how to provide zoom options in the document editor. ```typescript import { NgModule } from '@angular/core'; diff --git a/Document-Processing/Word/Word-Processor/angular/section-format.md b/Document-Processing/Word/Word-Processor/angular/section-format.md index 1df2b7e6b6..c627c97a70 100644 --- a/Document-Processing/Word/Word-Processor/angular/section-format.md +++ b/Document-Processing/Word/Word-Processor/angular/section-format.md @@ -1,20 +1,20 @@ --- layout: post -title: Section format in Angular Document editor component | Syncfusion -description: Learn here all about Section format in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Section format in Angular DOCX Editor | Syncfusion +description: Learn here all about Section format in the Syncfusion Angular Document Editor of Syncfusion Essential JS 2 and more. platform: document-processing -control: Section format +control: Section format documentation: ug domainurl: ##DomainURL## --- -# Section format in Angular Document editor component +# Section format in Angular Document Editor [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports various section formatting such as page size, page margins, and more. ## Page size -You can get or set the size of a section at cursor position by using the following sample code. +You can get or set the size of a section at the cursor position by using the following sample code. ```typescript this.documentEditor.selection.sectionFormat.pageWidth = 500; @@ -25,7 +25,8 @@ You can change the orientation of the page by swapping the values of page width ## Page margins -Left and right page margin defines the gap between the document content from left and right side of the page respectively. Top and bottom page margins defines the gap between the document content from header and footer of the page respectively. +Left and right page margins define the gap between the document content from the left and right sides of the page respectively. Top and bottom page margins define the gap between the document content from the header and footer of the page respectively. + Refer to the following sample code. ```typescript @@ -35,7 +36,7 @@ this.documentEditor.selection.sectionFormat.bottomMargin = 10; this.documentEditor.selection.sectionFormat.topMargin = 10; ``` ->Note: The maximum value of Margin is 1584, as per Microsoft Word application and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then Syncfusion Document editor will automatically reset as 1584. +N> The maximum value of margin is 1584, as per Microsoft Word application, and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then the Syncfusion Document Editor will automatically reset it to 1584. ## Header distance @@ -57,7 +58,7 @@ this.documentEditor.selection.sectionFormat.footerDistance = 72; You can define the number of columns, column width, and space between columns for the pages in a section. -The following code example illustrates how to define the two columns layout for the pages in a section. +The following code example illustrates how to define the two column layout for the pages in a section. ```typescript let column: SelectionColumnFormat = new SelectionColumnFormat(this.container.documentEditor.selection); @@ -73,25 +74,25 @@ Explore how to format Word documents with multiple columns using the Angular Doc ## Breaks -You can insert Column break +You can insert a column break. -The following code indicate that the text following the column break will begin in the next column +The following code indicates that the text following the column break will begin in the next column. ```typescript this.container.documentEditor.editor.insertColumnBreak(); ``` -You can insert next page section break to start the new section on the next page +You can insert a next-page section break to start the new section on the next page. -The following code example illustrates how to insert a next page section break +The following code example illustrates how to insert a next-page section break. ```typescript this.container.documentEditor.editor.insertSectionBreak(SectionBreakType.NewPage); ``` -You can insert continuous section break to start the new section on the same page +You can insert a continuous section break to start the new section on the same page. -The following code example illustrates how to insert a continuous section break +The following code example illustrates how to insert a continuous section break. ```typescript this.container.documentEditor.editor.insertSectionBreak(SectionBreakType.Continuous); @@ -103,4 +104,4 @@ Explore how to apply section formatting in Word documents using the Angular Docu ## See Also -*[Page setup dialog](./dialog#page-setup-dialog) +* [Page setup dialog](./dialog#page-setup-dialog) diff --git a/Document-Processing/Word/Word-Processor/angular/security-advisories.md b/Document-Processing/Word/Word-Processor/angular/security-advisories.md index 57b3708da2..53c4630d5d 100644 --- a/Document-Processing/Word/Word-Processor/angular/security-advisories.md +++ b/Document-Processing/Word/Word-Processor/angular/security-advisories.md @@ -1,22 +1,22 @@ --- layout: post -title: Security Advisories in Angular Document Editor component | Syncfusion -description: Learn here all about Security Advisories in Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Security Advisories in Angular DOCX Editor | Syncfusion +description: Learn here all about Security Advisories in the Syncfusion Angular Document Editor of Syncfusion Essential JS 2 and more. platform: document-processing -control: Security advisories +control: Security advisories documentation: ug domainurl: ##DomainURL## --- -# Security Advisories in Syncfusion® EJ2 Controls +# Security Advisories in Angular Document Editor -Syncfusion® places the utmost priority on the security of our controls. Users can rest assured about the security of our controls, as we have implemented all necessary measures to mitigate security vulnerabilities such as cross-site scripting and insecure dependencies. To meet security standards, Syncfusion® utilizes the [ESLint](https://eslint.org/) and [ESLint plugin security](https://github.com/eslint-community/eslint-plugin-security#rules) tools for static code analysis. Additionally, Syncfusion® packages undergo software composition analysis using the [SOOS](https://soos.io/) security tool. +Syncfusion® places the utmost priority on the security of our controls. Users can rest assured about the security of our controls, as we have implemented all necessary measures to mitigate security vulnerabilities such as cross-site scripting and insecure dependencies. To meet security standards, Syncfusion® utilizes the [ESLint](https://eslint.org/) and [ESLint plugin security](https://github.com/eslint-community/eslint-plugin-security#rules) tools for static code analysis. Additionally, Syncfusion® packages undergo software composition analysis using the SOOS security tool. This document provides a description of the security updates available for Syncfusion® Essential® JS2 controls for volume release. ## Security Updates -The following security updates are available for [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) control and are listed based on the release version. +The following security updates are available for Angular Document Editor control and are listed based on the release version. ### 2024 Volume 2 (v26.2.4) - July 25, 2024