From 18fc099a6766f7fa7618a7e3d67614a5da612d96 Mon Sep 17 00:00:00 2001 From: Krishna Kaviarasu Sethuramasamy Date: Wed, 22 Jul 2026 11:00:45 +0530 Subject: [PATCH 1/3] 1041382: UG Documentation Correction for react platform --- .../Word/Word-Processor/react/print.md | 58 +++++++++---------- .../Word-Processor/react/restrict-editing.md | 26 +++++---- .../Word/Word-Processor/react/ribbon.md | 14 ++--- .../Word-Processor/react/right-to-left.md | 12 ++-- .../react/saving-documents/aws-s3-bucket.md | 23 ++++---- 5 files changed, 67 insertions(+), 66 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/print.md b/Document-Processing/Word/Word-Processor/react/print.md index 14d7b8cd70..51efce4181 100644 --- a/Document-Processing/Word/Word-Processor/react/print.md +++ b/Document-Processing/Word/Word-Processor/react/print.md @@ -1,18 +1,18 @@ --- layout: post -title: Print in React Document editor component | Syncfusion -description: Learn here all about Print in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Print in React DOCX Editor | Syncfusion +description: Learn here all about Print in the Syncfusion React DOCX Editor of Syncfusion Essential JS 2 and more. control: Print platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Print in React Document editor component +# Print in React DOCX Editor -To print the document, use the [`print`](https://ej2.syncfusion.com/react/documentation/api/document-editor#print) method from document editor instance. +To print the document, use the [`print`](https://ej2.syncfusion.com/react/documentation/api/document-editor#print) method from the 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.jsx" %} @@ -28,7 +28,7 @@ Refer to the following example for showing a document and print it. {% previewsample "/document-processing/code-snippet/document-editor/react/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.jsx" %} @@ -44,14 +44,14 @@ Refer to the following example for creating a document and print it. {% previewsample "/document-processing/code-snippet/document-editor/react/print-cs2" %} -> DocumentEditor features are segregated into individual feature-wise modules. To use print inject `Print` module using the `DocumentEditor.Inject(Print)`. -> To enable print for a document editor instance, set enablePrint as true. +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/react/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/react/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 import { createRoot } from 'react-dom/client'; @@ -63,25 +63,28 @@ import { } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { - let settings={printDevicePixelRatio :2}; + let settings = { printDevicePixelRatio: 2 }; return ( - ); + + ); } export default App; createRoot(document.getElementById('sample')).render(); - - ``` -> 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 * as ReactDOM from 'react-dom'; @@ -96,7 +99,7 @@ DocumentEditor.Inject(Print); function App() { let documenteditor: DocumentEditorComponent; React.useEffect(() => { - componentDidMount() + componentDidMount(); }, []); function componentDidMount() { //Print the document content. @@ -115,7 +118,6 @@ function App() { } export default App; ReactDOM.render(, document.getElementById('sample')); - ``` ```ts @@ -129,14 +131,14 @@ import { Print, } from '@syncfusion/ej2-react-documenteditor'; -//Inject require module. +//Inject required modules. DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, Print); function App() { let documenteditor; React.useEffect(() => { - ComponentDidMount(); + componentDidMount(); }, []); - function ComponentDidMount() { + function componentDidMount() { //Print the document content. documenteditor.print(window); } @@ -169,9 +171,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 * as ReactDOM from 'react-dom'; @@ -183,7 +183,7 @@ import { Editor, PageSetupDialog, } from '@syncfusion/ej2-react-documenteditor'; -//Inject require module. +//Inject required modules. DocumentEditorComponent.Inject(Selection, Editor, PageSetupDialog); function App() { let documenteditor; @@ -216,7 +216,7 @@ ReactDOM.render(, document.getElementById('sample')); ``` -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/react/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/react/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. diff --git a/Document-Processing/Word/Word-Processor/react/restrict-editing.md b/Document-Processing/Word/Word-Processor/react/restrict-editing.md index f7fdfa6f27..dc6ddaad9f 100644 --- a/Document-Processing/Word/Word-Processor/react/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/react/restrict-editing.md @@ -15,12 +15,12 @@ domainurl: ##DomainURL## ## Configure on client side -Document Editor provides options to protect and unprotect a document using the [enforceProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) APIs, enabling various restricting editing operations. +The Document Editor provides options to protect and unprotect a document using the [enforceProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) APIs, enabling various restrict-editing operations. -### Read only mode +### Read-only mode -Document Editor supports protecting a document in read-only mode, where users can only view the content without making changes. +The Document Editor supports protecting a document in read-only mode, where users can only view the content without making changes. The following example code illustrates how to enforce or remove read-only protection in the Document Editor. @@ -68,7 +68,7 @@ export default App; ### Form filling mode -Document Editor supports protecting a document with form-filling restrictions, allowing users to edit only form fields. +The Document Editor supports protecting a document with form-filling restrictions, allowing users to edit only form fields. The following example code illustrates how to enforce or remove form-filling restrictions in the Document Editor. @@ -118,7 +118,7 @@ export default App; ### Comments only mode -Document Editor supports protecting a document in comments-only mode, allowing users to add or edit comments only. +The Document Editor supports protecting a document in comments-only mode, allowing users to add or edit comments only. The following example code illustrates how to enforce and remove comments-only protection in the Document Editor. @@ -136,7 +136,7 @@ function App() { let container: DocumentEditorContainerComponent; React.useEffect(() => { let sfdt = {"sfdt":"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"}; - container.documentEditor.open(JSON.stringify(sfdt)); + container.documentEditor.open(JSON.stringify(sfdt)); }, []); function enforceProtection() { //enforce protection @@ -168,7 +168,7 @@ export default App; ### Track changes only mode -Document Editor supports protecting a document in revisions-only mode, allowing users to view the document and make corrections while tracking all changes. Users cannot accept or reject tracked changes; only the author can review and finalize them later. +The Document Editor supports protecting a document in revisions-only mode, allowing users to view the document and make corrections while tracking all changes. Users cannot accept or reject tracked changes; only the author can review and finalize them later. The following example code illustrates how to enforce and remove revisions-only protection in the Document Editor. @@ -218,7 +218,7 @@ export default App; ### Format restrictions -Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly. +The Document Editor enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents `limitToFormatting`, and the third parameter represents `isReadOnly`. {% tabs %} {% highlight ts tabtitle="TS" %} @@ -246,7 +246,7 @@ For more information on configuring restrict editing on the server side, refer t The [currentUser](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documenteditor#currentuser) property can be used to authorize the current document user by name, email, or user group. -The following code example demonstrates how to set the currentUser. +The following code example demonstrates how to set the `currentUser`. {% tabs %} {% highlight ts tabtitle="TS" %} @@ -257,10 +257,12 @@ container.documentEditor.currentUser = 'engineer@mycompany.com'; {% endtabs %} ## Protect document with editable region -User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. + +Users can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. ### Insert editable region -Use the [insertEditingRegion](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users. + +Use the [insertEditingRegion](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable. This allows you to control editing by giving access to all users or only selected users. The following example shows how to insert an editable region. {% tabs %} @@ -311,7 +313,7 @@ Restrict Editing Pane provides the following options to manage the document: * To apply editing restrictions to the current document, select the read only check box. * To add users to the current document, select more users option and add user from the popup dialog. * To include range permission to the current document, select parts of the document and choose users who are allowed to freely edit them from the listed check box. -* To apply the chosen editing restrictions, click the **YES,START ENFORCING PROTECTION** button. A dialog box displays asking for a password to protect. +* To apply the chosen editing restrictions, click the **YES, START ENFORCING PROTECTION** button. A dialog box displays asking for a password to protect. * To stop protection, select **STOP PROTECTION** button. A dialog box displays asking for a password to stop protection. The following code shows Restrict Editing Pane. To unprotect the document, use password '123'. diff --git a/Document-Processing/Word/Word-Processor/react/ribbon.md b/Document-Processing/Word/Word-Processor/react/ribbon.md index b18b6e3bcf..3310fbd033 100644 --- a/Document-Processing/Word/Word-Processor/react/ribbon.md +++ b/Document-Processing/Word/Word-Processor/react/ribbon.md @@ -1,7 +1,7 @@ --- layout: post -title: Ribbon in React Document editor control | Syncfusion -description: Learn here all about the Ribbon UI in Syncfusion React Document editor control, how to switch between Ribbon and Toolbar modes. +title: Ribbon in React DOCX Editor | Syncfusion +description: Learn here all about the Ribbon UI in the Syncfusion React DOCX Editor, how to switch between Ribbon and Toolbar modes. platform: document-processing control: Ribbon documentation: ug @@ -34,11 +34,11 @@ To use Ribbon mode, add Document Editor component and its dependent component st @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css"; +@import '../node_modules/@syncfusion/ej2-documenteditor/styles/material.css'; @import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';/* Required for Ribbon */ ``` -The following code shows the how to enable the `Ribbon` in Document Editor. +The following code shows how to enable the `Ribbon` in the Document Editor. {% raw %} @@ -86,7 +86,7 @@ Document Editor provides two different Ribbon layouts: By default, `ribbonLayout` is set to `Simplified`. -The following code shows the how to configure the ribbon layout in Document Editor: +The following code shows how to configure the ribbon layout in the Document Editor: {% raw %} @@ -98,8 +98,8 @@ import { DocumentEditorContainerComponent, Ribbon, Toolbar } from '@syncfusion/e DocumentEditorContainerComponent.Inject(Toolbar, Ribbon); const Default = () => { let hostUrl = "https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"; - let container = React.useRef(null);; - // Initialize the Document Editor Container with Ribbon mode enabled + let container = React.useRef(null); + // Configure the Document Editor Container with the Classic ribbon layout return (
diff --git a/Document-Processing/Word/Word-Processor/react/right-to-left.md b/Document-Processing/Word/Word-Processor/react/right-to-left.md index 84f0f7fc8c..5f54e13ee2 100644 --- a/Document-Processing/Word/Word-Processor/react/right-to-left.md +++ b/Document-Processing/Word/Word-Processor/react/right-to-left.md @@ -1,16 +1,16 @@ --- layout: post -title: Right to left in React Document editor component | Syncfusion -description: Learn here all about Right to left in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Right to left +title: Right to Left in React DOCX Editor | Syncfusion +description: Learn here all about Right to Left in the Syncfusion React DOCX Editor component of Syncfusion Essential JS 2 and more. +control: Right to Left platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Right to left in React Document editor component +# Right to Left in React DOCX Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides RTL (right-to-left) support. This can be enabled using the “enableRtl” property. +[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides RTL (right-to-left) support. This can be enabled using the `enableRtl` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -28,4 +28,4 @@ domainurl: ##DomainURL## ## Online Demo -Explore how to enable right-to-left layout in Word documents using the React Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/right-to-left). \ No newline at end of file +Explore how to enable right-to-left layout in Word documents using the React Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/right-to-left). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md b/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md index 6e70b29b0e..126472d263 100644 --- a/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md +++ b/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md @@ -1,7 +1,7 @@ --- layout: post -title: Save document to AWS S3 in React Document editor control | Syncfusion -description: Learn about how to Save document to AWS S3 in React Document editor of Syncfusion Essential JS 2 and more details. +title: Save document to AWS S3 in React DOCX Editor | Syncfusion +description: Learn about how to save a document to AWS S3 in the Syncfusion React DOCX Editor of Essential JS 2 and more details. platform: document-processing control: Save document to AWS S3 documentation: ug @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Save document to AWS S3 -To save a document to AWS S3, you can follow the steps below +To save a document to AWS S3, follow the steps below. -**Step 1:** Create a Simple [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) sample in React +**Step 1:** Create a simple [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) sample in React. Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in React. This will give you a basic setup of the Document Editor component. @@ -31,7 +31,7 @@ using Amazon.S3; using Amazon.S3.Model; ``` -4. 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 +4. 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; @@ -58,7 +58,7 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC [HttpPost] [EnableCors("AllowAllOrigins")] [Route("SaveToS3")] -//Post action for save the document to AWS S3 +//Post action to save the document to AWS S3 public void SaveToS3(IFormCollection data) { @@ -97,7 +97,7 @@ private string GetValue(IFormCollection data, string key) } ``` -6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration +6. Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -114,11 +114,11 @@ private string GetValue(IFormCollection data, string key) } ``` -N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name +N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key, and bucket name. -**Step 3:** Modify the index File in the Document Editor sample +**Step 3:** 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/react/documentation/api/document-editor#saveAsBlob) and sent to server-side for saving in AWS S3 Bucket. +On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/react/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in an AWS S3 Bucket. ```typescript import * as ReactDOM from 'react-dom'; @@ -137,7 +137,6 @@ function App() { let formData: FormData = new FormData(); formData.append('documentName', container.documentEditor.documentName); formData.append('data', exportedDocument); - /* tslint:disable */ let req = new XMLHttpRequest(); // Replace your running Url here req.open( @@ -148,7 +147,7 @@ function App() { req.onreadystatechange = () => { if (req.readyState === 4) { if (req.status === 200 || req.status === 304) { - console.log('Saved sucessfully'); + console.log('Saved successfully'); } } }; From 05cdb8b1ba5148ca768ae260f7a3e3d690a4fa71 Mon Sep 17 00:00:00 2001 From: Krishna Kaviarasu Sethuramasamy Date: Wed, 22 Jul 2026 20:23:13 +0530 Subject: [PATCH 2/3] 1041382: update name formats --- .../Word/Word-Processor/react/print.md | 14 +++++++------- .../Word/Word-Processor/react/restrict-editing.md | 6 +++--- .../Word/Word-Processor/react/ribbon.md | 4 ++-- .../Word/Word-Processor/react/right-to-left.md | 6 +++--- .../react/saving-documents/aws-s3-bucket.md | 4 ++-- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/print.md b/Document-Processing/Word/Word-Processor/react/print.md index 51efce4181..72ba046815 100644 --- a/Document-Processing/Word/Word-Processor/react/print.md +++ b/Document-Processing/Word/Word-Processor/react/print.md @@ -1,16 +1,16 @@ --- layout: post title: Print in React DOCX Editor | Syncfusion -description: Learn here all about Print in the Syncfusion React DOCX Editor of Syncfusion Essential JS 2 and more. +description: Learn here all about Print in the Syncfusion React Document Editor of Syncfusion Essential JS 2 and more. control: Print platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Print in React DOCX Editor +# Print in React Document Editor component -To print the document, use the [`print`](https://ej2.syncfusion.com/react/documentation/api/document-editor#print) method from the document editor instance. +To print the document, use the [`print`](https://ej2.syncfusion.com/react/documentation/api/document-editor#print) method from the Document Editor instance. Refer to the following example for showing a document and printing it. @@ -45,11 +45,11 @@ Refer to the following example for creating a document and printing it. {% previewsample "/document-processing/code-snippet/document-editor/react/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. +N> 2. To enable print for a Document Editor instance, set `enablePrint` as true. ## Improve print quality -The Document Editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/react/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 Document Editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/react/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 the Document Editor container. @@ -84,7 +84,7 @@ N> By default, the `printDevicePixelRatio` value is 1. ## Print using window object -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. +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 * as ReactDOM from 'react-dom'; @@ -216,7 +216,7 @@ ReactDOM.render(, document.getElementById('sample')); ``` -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/react/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. +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/react/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. diff --git a/Document-Processing/Word/Word-Processor/react/restrict-editing.md b/Document-Processing/Word/Word-Processor/react/restrict-editing.md index dc6ddaad9f..e4b09cb5c1 100644 --- a/Document-Processing/Word/Word-Processor/react/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/react/restrict-editing.md @@ -1,7 +1,7 @@ --- layout: post title: Restrict Editing in React DOCX Editor | Syncfusion -description: Learn how to enable Restrict Editing in the React DOCX Editor to securely manage document access and control user modifications. +description: Learn how to enable Restrict Editing in the React Document Editor to securely manage document access and control user modifications. control: Restrict editing platform: document-processing documentation: ug @@ -9,9 +9,9 @@ domainurl: ##DomainURL## --- -# Restrict Editing in React DOCX Editor +# Restrict Editing in React Document Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides support for restricting editing within a document. It enables control over how and where content can be modified. This helps limit editing so only specific sections of the document can be changed. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides support for restricting editing within a document. It enables control over how and where content can be modified. This helps limit editing so only specific sections of the document can be changed. ## Configure on client side diff --git a/Document-Processing/Word/Word-Processor/react/ribbon.md b/Document-Processing/Word/Word-Processor/react/ribbon.md index 3310fbd033..ed897c1f7b 100644 --- a/Document-Processing/Word/Word-Processor/react/ribbon.md +++ b/Document-Processing/Word/Word-Processor/react/ribbon.md @@ -1,7 +1,7 @@ --- layout: post title: Ribbon in React DOCX Editor | Syncfusion -description: Learn here all about the Ribbon UI in the Syncfusion React DOCX Editor, how to switch between Ribbon and Toolbar modes. +description: Learn here all about the Ribbon UI in the Syncfusion React Document Editor, how to switch between Ribbon and Toolbar modes. platform: document-processing control: Ribbon documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Ribbon in React Document Editor Control -The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document. +The [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document. You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts. diff --git a/Document-Processing/Word/Word-Processor/react/right-to-left.md b/Document-Processing/Word/Word-Processor/react/right-to-left.md index 5f54e13ee2..98d86d4632 100644 --- a/Document-Processing/Word/Word-Processor/react/right-to-left.md +++ b/Document-Processing/Word/Word-Processor/react/right-to-left.md @@ -1,16 +1,16 @@ --- layout: post title: Right to Left in React DOCX Editor | Syncfusion -description: Learn here all about Right to Left in the Syncfusion React DOCX Editor component of Syncfusion Essential JS 2 and more. +description: Learn here all about Right to Left in the Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Right to Left platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Right to Left in React DOCX Editor +# Right to Left in React Document Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides RTL (right-to-left) support. This can be enabled using the `enableRtl` property. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides RTL (right-to-left) support. This can be enabled using the `enableRtl` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md b/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md index 126472d263..e957d1e5e9 100644 --- a/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md +++ b/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md @@ -1,7 +1,7 @@ --- layout: post title: Save document to AWS S3 in React DOCX Editor | Syncfusion -description: Learn about how to save a document to AWS S3 in the Syncfusion React DOCX Editor of Essential JS 2 and more details. +description: Learn about how to save a document to AWS S3 in the Syncfusion React Document Editor of Essential JS 2 and more details. platform: document-processing control: Save document to AWS S3 documentation: ug @@ -12,7 +12,7 @@ domainurl: ##DomainURL## To save a document to AWS S3, follow the steps below. -**Step 1:** Create a simple [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) sample in React. +**Step 1:** Create a simple [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) sample in React. Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in React. This will give you a basic setup of the Document Editor component. From 415def5c4c4f28d015de67580c777ae958fec0f7 Mon Sep 17 00:00:00 2001 From: Krishna Kaviarasu Sethuramasamy Date: Thu, 23 Jul 2026 00:34:22 +0530 Subject: [PATCH 3/3] 1041382: updated code to handle Duplicate h1 tag --- .../Word/Word-Processor/react/saving-documents/aws-s3-bucket.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md b/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md index e957d1e5e9..5542b9d49f 100644 --- a/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md +++ b/Document-Processing/Word/Word-Processor/react/saving-documents/aws-s3-bucket.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Save document to AWS S3 +# Save document to AWS S3 in React DOCX Editor To save a document to AWS S3, follow the steps below.