From 36ac5f12469897fd2811e9485eddbc23ee4fb653 Mon Sep 17 00:00:00 2001 From: Krishna Kaviarasu Sethuramasamy Date: Mon, 10 Aug 2026 17:54:22 +0530 Subject: [PATCH 1/2] 1045871: update JavaScript UG using AI --- .../Word-Processor/javascript-es5/overview.md | 60 +++++++++---------- .../javascript-es5/paragraph-format.md | 60 +++++++++---------- .../Word-Processor/javascript-es5/print.md | 31 +++++----- .../saving-documents/google-drive.md | 35 +++++------ .../saving-documents/one-drive.md | 33 +++++----- 5 files changed, 109 insertions(+), 110 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/overview.md b/Document-Processing/Word/Word-Processor/javascript-es5/overview.md index 28c7e8835e..a6a8756188 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/overview.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/overview.md @@ -1,61 +1,57 @@ --- layout: post -title: Overview of JavaScript (ES5) Document editor control | Syncfusion -description: Learn about the JavaScript (ES5) DOCX Editor control, which enables you to create, edit, view, and print Word documents +title: Overview of JavaScript (ES5) DOCX Editor | Syncfusion +description: Learn about the JavaScript (ES5) Document Editor control, which enables you to create, edit, view, and print Word documents. platform: document-processing control: Index documentation: ug domainurl: ##DomainURL## --- -# Overview of the JavaScript (ES5) DOCX Editor +# Overview of the JavaScript (ES5) Document Editor -The [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. +The [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. -![Output of JavaScript DOCX Editor](./images/docx-editor.png) +![Output of JavaScript Document Editor](./images/docx-editor.png) ## Key Features -* [Opens](./import) the native `Syncfusion Document Text (*.sfdt)` format documents in the client-side. -* [Saves the documents](./export) in the client-side as `Syncfusion Document Text (*.sfdt)` and `Word document (*.docx)`. +* [Opens](./import) native `Syncfusion Document Text (*.sfdt)` format documents on the client side. +* [Saves the documents](./export) on the client side as `Syncfusion Document Text (*.sfdt)` and `Word document (*.docx)`. * Supports document elements like text, [image](./image), [table](./table), fields, [bookmark](./bookmark), [shapes](./shapes), [section](./section-format), [header and footer](./header-footer). * Supports the commonly used fields like [hyperlink](./link), page number, page count, and table of contents. -* Supports formats like [text](./text-format), [paragraph](./paragraph-format), [bullets and numbering](./list-format), [table](./table-format) and [page settings](./section-format). -* Provides support to create, edit, and apply [paragraph and character styles](./styles). -* Provides support to [find and replace](./find-and-replace) text within the document. +* Supports formats like [text](./text-format), [paragraph](./paragraph-format), [bullets and numbering](./list-format), [table](./table-format), and [page settings](./section-format). +* Supports creating, editing, and applying [paragraph and character styles](./styles). +* Supports [find and replace](./find-and-replace) text within the document. * Supports all the common editing and formatting operations along with [undo and redo](./history). -* Provides support to [cut](./clipboard#cut), [copy](./clipboard#copy), and [paste](./clipboard#paste) rich text contents within the component. Also allows pasting simple text to and from other applications. -* Provides support to insert, and edit [form fields](./form-fields). -* Provides support to insert, and edit [comments](./comments). -* Provides support to track the [inserted and deleted content](./track-changes). -* Provides support to perform [spell checking](./spell-check) for any input text -* Allows user interactions like [zoom](./scrolling-zooming#zooming), [scroll](./scrolling-zooming), select contents through touch, mouse, and keyboard. +* Supports [cut](./clipboard#cut), [copy](./clipboard#copy), and [paste](./clipboard#paste) of rich text content within the component. Also supports pasting plain text to and from other applications. +* Supports inserting and editing [form fields](./form-fields). +* Supports inserting and editing [comments](./comments). +* Supports tracking [inserted and deleted content](./track-changes). +* Supports [spell checking](./spell-check) for any input text. +* Allows user interactions like [zoom](./scrolling-zooming#zooming), [scroll](./scrolling-zooming), and selecting contents through touch, mouse, and keyboard. * Provides intuitive UI options like context menu, [dialogs](./dialog), and [navigation pane](./find-and-replace#options-pane). -* Provides a [ribbon interface](./ribbon) similar to Microsoft Word, with tab-based commands for quick and intuitive access to features. +* Provides a [ribbon interface](./ribbon) similar to Microsoft Word, with tab-based commands for quick and intuitive access to features. * [Localizes](./global-local) all the static text to any desired language. -* Allows to create a lightweight Word viewer using module injection to view and [prints](./print) Word documents. -* Provides a [server-side helper library](./web-services-overview) to open the Word documents like DOCX, DOC, WordML, RTF, and Text, by converting it to SFDT file format. +* Allows creating a lightweight Word viewer using module injection to view and [print](./print) Word documents. +* Provides a [server-side helper library](./web-services) to open Word documents like DOCX, DOC, WordML, RTF, and Text by converting them to SFDT file format. ## Supported platforms for server-side dependencies -The Document Editor component requires server-side interactions for the following operations: -* Open file formats other than SFDT +The Document Editor component requires server-side interactions for the following operations: -* Paste with formatting +* Open file formats other than SFDT +* Paste with formatting +* Restrict editing +* Spell check +* Save as file formats other than SFDT and DOCX -* Restrict editing - -* Spell check - -* Save as file formats other than SFDT and DOCX - - -You can deploy web APIs for server-side dependencies of Document Editor component in the following platforms. +You can deploy web APIs for the server-side dependencies of the Document Editor component on the following platforms. * [ASP.NET Core](./web-services/core) * [ASP.NET MVC](./web-services/mvc) * [Java](./web-services/java) -To know more about server-side dependencies, refer this [page](./web-services-overview). +To know more about server-side dependencies, refer to this [page](./web-services-overview). -N> If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions. +N> If you don't require the above functionalities, then you can deploy it as a pure client-side component without any server-side interactions. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md index 87ac564ab3..358e54abd2 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md @@ -1,14 +1,14 @@ --- layout: post -title: Paragraph format in JavaScript (ES5) Document editor | Syncfusion -description: Learn here all about Paragraph format in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. +title: Paragraph format in JavaScript (ES5) DOCX Editor component | Syncfusion +description: Learn about paragraph formatting in the Syncfusion JavaScript (ES5) Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Paragraph format documentation: ug domainurl: ##DomainURL## --- -# Paragraph format in JavaScript (ES5) Document editor control +# Paragraph format in JavaScript (ES5) Document Editor component [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more. @@ -23,7 +23,7 @@ documenteditor.selection.paragraphFormat.rightIndent = 24; ## Special indentation -You can define special indent for first line of the paragraph using the following sample code. +You can define a special indent for the first line of the paragraph using the following sample code. ```ts documenteditor.selection.paragraphFormat.firstLineIndent = 24; @@ -31,7 +31,7 @@ documenteditor.selection.paragraphFormat.firstLineIndent = 24; ## Increase indent -You can increase the left indent of selected paragraphs by a factor of 36 points using the following sample code. +You can increase the left indent of selected paragraphs by 36 points using the following sample code. ```ts documenteditor.editor.increaseIndent() @@ -39,7 +39,7 @@ documenteditor.editor.increaseIndent() ## Decrease indent -You can decrease the left indent of selected paragraphs by a factor of 36 points using the following sample code. +You can decrease the left indent of selected paragraphs by 36 points using the following sample code. ```ts documenteditor.editor.decreaseIndent() @@ -53,13 +53,13 @@ You can get or set the text alignment of selected paragraphs using the following documenteditor.selection.paragraphFormat.textAlignment = 'Center' | 'Left' | 'Right' | 'Justify'; ``` ->Note: Starting from `v19.4.0.x`, the text justification of Document editor component matches alignment of Microsoft Word 2013 and newer versions based on the compatibility mode present in the document. The DOCX document created using Microsoft Word 2013 and newer versions will have the compatibility mode `Word2013` and follows a special behavior in justifying the text. You can retain the text justification behavior like old versions by modifying the compatibility mode as `Word2010`. +N> Starting from `v19.4.0.x`, the text justification of Document Editor component matches alignment of Microsoft Word 2013 and newer versions based on the compatibility mode present in the document. The DOCX document created using Microsoft Word 2013 and newer versions will have the compatibility mode `Word2013` and follows a special behavior in justifying the text. You can retain the text justification behavior like old versions by modifying the compatibility mode as `Word2010`. ```ts documenteditor.documentSettings.compatibilityMode = 'Word2010'; ``` ->Note: The Document editor component assumes the compatibility mode as `Word2013` by default, if it is not defined for a document. +N> The Document Editor component assumes the compatibility mode as `Word2013` by default, if it is not defined for a document. ![Image](images/word2013justification.png) @@ -98,27 +98,11 @@ documenteditor.selection.paragraphFormat.spaceBeforeAuto = true; documenteditor.selection.paragraphFormat.spaceAfterAuto = true; ``` ->Note: If auto spacing property is enabled, then value defined in the `beforeSpacing` and `afterSpacing` property will not be considered. +N> If auto spacing property is enabled, then value defined in the `beforeSpacing` and `afterSpacing` property will not be considered. -## Pagination properties - -You can enable or disable the following pagination properties for the paragraphs in a Word document. - -* Widow/Orphan control - whether the first and last lines of the paragraph are to remain on the same page as the rest of the paragraph when paginating the document. -* Keep with next - whether the specified paragraph remains on the same page as the paragraph that follows it while paginating the document. -* Keep lines together - whether all lines in the specified paragraphs remain on the same page while paginating the document. - -The following example code illustrates how to enable or disable these pagination properties for the selected paragraphs. - -```ts -documenteditor.selection.paragraphFormat.widowControl = false; -documenteditor.selection.paragraphFormat.keepWithNext = true; -documenteditor.selection.paragraphFormat.keepLinesTogether = true; -``` - -## Paragraph Border +## Paragraph border -You can apply borders to the paragraphs in a Word document. Using borders, decorate the paragraphs to set them apart from other paragraphs in the document. +You can apply borders to the paragraphs in a Word document. Using borders, you can decorate the paragraphs to set them apart from other paragraphs in the document. The following example code illustrates how to apply box border for the selected paragraphs. @@ -144,11 +128,27 @@ documenteditor.selection.paragraphFormat.borders.bottom.lineWidth = 3; documenteditor.selection.paragraphFormat.borders.bottom.color = "#000000"; ``` -Note: At present, the Document editor component displays all the border styles as single line. But you can apply any border style and get the proper display in Microsoft Word app when opening the exported Word document. +N> At present, the Document Editor component displays all the border styles as single line. But you can apply any border style and get the proper display in Microsoft Word app when opening the exported Word document. + +## Pagination properties + +You can enable or disable the following pagination properties for the paragraphs in a Word document. + +* Widow/Orphan control - whether the first and last lines of the paragraph are to remain on the same page as the rest of the paragraph when paginating the document. +* Keep with next - whether the specified paragraph remains on the same page as the paragraph that follows it while paginating the document. +* Keep lines together - whether all lines in the specified paragraphs remain on the same page while paginating the document. + +The following example code illustrates how to enable or disable these pagination properties for the selected paragraphs. + +```ts +documenteditor.selection.paragraphFormat.widowControl = false; +documenteditor.selection.paragraphFormat.keepWithNext = true; +documenteditor.selection.paragraphFormat.keepLinesTogether = true; +``` ## Show or Hide Paragraph marks -You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document editor component. These marks help identify the start and end of a paragraph and all the hidden formatting symbols in a Word document. +You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document Editor component. These marks indicate the start and end of a paragraph, as well as all the hidden formatting symbols in a Word document. The following example code illustrates how to show or hide paragraph marks. @@ -173,7 +173,7 @@ The following sample demonstrates the paragraph formatting options using a toolb ## Online Demo -Explore how to apply paragraph formatting in Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/paragraph-formatting.html). +Explore how to apply paragraph formatting in Word documents using the JavaScript (ES5) Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/paragraph-formatting.html). ## See Also diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/print.md b/Document-Processing/Word/Word-Processor/javascript-es5/print.md index 86258ef9ad..2e53f8a10c 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/print.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/print.md @@ -1,18 +1,18 @@ --- layout: post -title: Print in JavaScript (ES5) Document editor control | Syncfusion -description: Learn here all about Print in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. +title: Print in JavaScript (ES5) DOCX Editor | Syncfusion +description: Learn here all about Print in the Syncfusion JavaScript (ES5) Document Editor of Syncfusion Essential JS 2 and more. platform: document-processing control: Print documentation: ug domainurl: ##DomainURL## --- -# Print in JavaScript (ES5) Document editor control +# Print in JavaScript (ES5) Document Editor component -To print the document, use the [`print`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/#print) method from [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) instance. +To print the document, use the [`print`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#print) method from [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) instance. -Refer to the following example for showing a document and print it. +Refer to the following example for showing a document and printing it. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -25,7 +25,7 @@ Refer to the following example for showing a document and print it. {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/print-cs1" %} -Refer to the following example for creating a document and print it. +Refer to the following example for creating a document and printing it. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -38,11 +38,14 @@ Refer to the following example for creating a document and print it. {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/print-cs2" %} +N> 1. DocumentEditor features are segregated into individual feature-wise modules. To use print, inject the `Print` module using `DocumentEditor.Inject(Print)`. +N> 2. To enable print for a Document Editor instance, set `enablePrint` as true. + ## Improve print quality -Document editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel/#printdevicepixelratio) in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using printDevicePixelRatio API, you can increase the image quality based on your requirement. +The Document Editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel#printdevicepixelratio) in Document Editor settings. The Document Editor uses a canvas approach to render content. The canvas is then converted to an image and processed for print. Using the `printDevicePixelRatio` API, you can increase the image quality based on your requirement. -The following example code illustrates how to improve the print quality in Document editor container. +The following example code illustrates how to improve the print quality in the Document Editor container. ```ts let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', @@ -54,13 +57,13 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo 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. +N> 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. ->Note: By default, printDevicePixelRatio value is 1 +N> By default, the `printDevicePixelRatio` value is 1. ## Print using window object -You can print the document in Document Editor by passing the window instance. This is useful to implement print in third party frameworks such as electron, where the window instance will not be available. Refer to the following example. +You can print the document in the Document Editor by passing the window instance. This is useful to implement print in third-party frameworks such as Electron, where the window instance will be available. Refer to the following example. ```ts import { DocumentEditor, Print } from '@syncfusion/ej2-documenteditor'; @@ -81,7 +84,7 @@ Some of the print options cannot be configured using JavaScript. Refer to the fo * [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1/) * [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox/) -However, you can customize margins, paper, and layout options by modifying the section format properties using page setup dialog +However, you can customize margins, paper, and layout options by modifying the section format properties using the page setup dialog. ```ts import { DocumentEditor, Print, PageSetupDialog, Editor, Selection, EditorHistory } from '@syncfusion/ej2-documenteditor'; @@ -101,7 +104,7 @@ documenteditor.appendTo('#DocumentEditor'); documenteditor.showPageSetupDialog(); ``` -By customizing margins, papers, and layouts, the layout of the document will be changed in Document Editor. To modify these options during print operation, serialize the document as SFDT using the [`serialize`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/#serialize) method in Document Editor instance and open the SFDT data in another instance of Document Editor in separate window. +By customizing margins, papers, and layouts, the layout of the document will be changed in the Document Editor. To modify these options during the print operation, serialize the document as SFDT using the [`serialize`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#serialize) method in the Document Editor instance and open the SFDT data in another instance of the Document Editor in a separate window. The following example shows how to customize layout options only for printing. @@ -118,7 +121,7 @@ The following example shows how to customize layout options only for printing. ## Online Demo -Explore how to print Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/print.html). +Explore how to print Word documents using the JavaScript (ES5) Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/print.html). ## See Also 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 9fc360b3db..4d9ee49d6e 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 @@ -1,24 +1,28 @@ --- layout: post -title: Save document to Google Drive in JavaScript (ES5) Document editor control | Syncfusion -description: Learn about how to Save document to Google Drive in JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more details. +title: Save to Google Drive in JavaScript (ES5) DOCX Editor | Syncfusion +description: Learn how to save a document to Google Drive in the Syncfusion JavaScript (ES5) DOCX Editor of Syncfusion Essential JS 2 and more details. platform: document-processing control: Save document to Google Drive documentation: ug domainurl: ##DomainURL## --- -# Save document to Google Drive +# Save document to Google Drive using JavaScript (ES5) DOCX Editor -To save a document to Google Drive, you can follow the steps below +To save a document to Google Drive, you can follow the steps below. **Step 1:** Set up Google Drive API You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk). -**Step 2:** Create a Simple [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) sample in JavaScript +* Configure the OAuth consent screen and add the authorized redirect URIs and scopes. For more information, refer to the official [link](https://developers.google.com/drive/api/guides/enable-sdk). -Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component. +* Download the OAuth 2.0 Client IDs credentials JSON file from the Google Cloud Console and save it locally. Save the path to this file for use in the `appsettings.json` configuration. + +**Step 2:** Create a Simple [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) sample in JavaScript (ES5) + +Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in JavaScript. This will give you a basic setup of the Document Editor component. **Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project @@ -34,7 +38,7 @@ using Google.Apis.Drive.v3; using Google.Apis.Util.Store; ``` -* 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 +58,14 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC } ``` -* Create the `SaveToGoogleDrive()` method to save the downloaded document to Google Drive bucket +* Create the `SaveToGoogleDrive()` method to save the downloaded document to Google Drive. ```csharp [AcceptVerbs("Post")] [HttpPost] [EnableCors("AllowAllOrigins")] [Route("SaveToGoogleDrive")] -//Post action for downloading the document +//Post action for uploading the document to Google Drive public void SaveToGoogleDrive(IFormCollection data) { @@ -139,20 +143,17 @@ private string GetValue(IFormCollection data, string key) } ``` -N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file. - -N> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`. - -N> You must use a unique `Client_ID` from json file to interface your application with the Google Drive API in order to save document directly to Google Drive. This Client_ID will serve as the authentication key, allowing you to save files securely. +N> 1. Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google Drive folder ID, your name for your application, and the path for the JSON file. +N> 2. The **FolderId** is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`. +N> 3. The `CredentialPath` value in `appsettings.json` must point to the full OAuth 2.0 Client IDs credentials JSON file downloaded from the Google Cloud Console. This JSON file contains the unique `Client_ID` and `Client_Secret` used to authenticate with the Google Drive API and securely save files. +N> 4. The **Google.Apis.Drive.v3** (v1.68.0.XXXX or later) NuGet package must be installed in your application to use the previous code example. **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/javascript/documentation/api/document-editor#saveAsBlob) and sent to server-side for saving in Google Drive. +On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in Google Drive. {% tabs %} {% highlight html tabtitle="index.html" %} {% include code-snippet/document-editor/javascript-es5/save-google-drive/index.html %} {% endhighlight %} {% endtabs %} - -N> The **Google.Apis.Drive.v3** NuGet package must be installed in your application to use the previous code example. 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 c668a098e4..b92ef57b16 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 @@ -1,24 +1,24 @@ --- layout: post -title: Save document to One Drive in JavaScript (ES5) Document editor control | Syncfusion -description: Learn about how to Save document to One Drive in JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more details. +title: Save document to OneDrive in JavaScript (ES5) DOCX Editor | Syncfusion +description: Learn how to save a document to OneDrive in the Syncfusion JavaScript (ES5) DOCX 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 -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 [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) sample in JavaScript +**Step 2:** Create a Simple [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) sample in JavaScript (ES5) -Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Javascript. 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 JavaScript. 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" } - ``` -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. +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/javascript/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/javascript/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in OneDrive. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -145,7 +144,7 @@ In the client-side, to export the document into blob the document using [`saveAs {% endhighlight %} {% endtabs %} -N> 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** From 8e8ca6fe870e7d3cd475bbc949d27bde7ace1acb Mon Sep 17 00:00:00 2001 From: Krishna Kaviarasu Sethuramasamy Date: Mon, 10 Aug 2026 18:24:54 +0530 Subject: [PATCH 2/2] 1045871: resolved CI issue --- .../Word/Word-Processor/javascript-es5/paragraph-format.md | 2 +- .../Word-Processor/javascript-es5/saving-documents/one-drive.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md index 358e54abd2..0a2a3219f3 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md @@ -1,6 +1,6 @@ --- layout: post -title: Paragraph format in JavaScript (ES5) DOCX Editor component | Syncfusion +title: Paragraph format in JavaScript (ES5) DOCX Editor | Syncfusion description: Learn about paragraph formatting in the Syncfusion JavaScript (ES5) Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Paragraph format 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 b92ef57b16..2a6646c637 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 @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Save document to OneDrive +# Save document to OneDrive using JavaScript (ES5) DOCX Editor To save a document to OneDrive, you can follow the steps below.