From 2256c5b65ab9bbfa966c864840bc57b8d14a638d Mon Sep 17 00:00:00 2001 From: Vincentsf4657 Date: Fri, 24 Jul 2026 11:34:53 +0530 Subject: [PATCH] 1042347: Moved the changes to hotfix --- .../Word-Processor/react/accessibility.md | 26 +++--- .../Word/Word-Processor/react/bookmark.md | 85 ++++++++++--------- .../Word/Word-Processor/react/chart.md | 16 ++-- .../Word/Word-Processor/react/clipboard.md | 58 +++++++------ .../react/collaborative-editing/overview.md | 26 +++--- .../using-redis-cache-asp-net-core.md | 24 +++--- .../using-redis-cache-java.md | 23 +++-- .../Word/Word-Processor/react/comments.md | 32 +++---- .../Word-Processor/react/content-control.md | 36 ++++---- .../Word/Word-Processor/react/dialog.md | 49 +++++------ .../react/document-editor-toc.html | 3 +- .../react/document-management.md | 30 +++---- .../Word/Word-Processor/react/export.md | 68 +++++++-------- .../Word-Processor/react/faq/sfdt-faqs.md | 12 +-- .../react/faq/unsupported-file-format.md | 30 ++++--- .../Word-Processor/react/feature-module.md | 68 +++++++-------- .../Word/Word-Processor/react/fields.md | 24 +++--- .../Word-Processor/react/find-and-replace.md | 32 +++---- .../Word/Word-Processor/react/form-fields.md | 24 +++--- .../Word/Word-Processor/react/global-local.md | 12 +-- .../Word/Word-Processor/react/overview.md | 51 +++++------ 21 files changed, 371 insertions(+), 358 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/accessibility.md b/Document-Processing/Word/Word-Processor/react/accessibility.md index a57451adde..a88cfc5d76 100644 --- a/Document-Processing/Word/Word-Processor/react/accessibility.md +++ b/Document-Processing/Word/Word-Processor/react/accessibility.md @@ -1,16 +1,16 @@ --- layout: post -title: Accessibility in React Document editor component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Accessibility +title: Accessibility in React DOCX Editor component | Syncfusion +description: Learn here all about Accessibility in Syncfusion React Document Editor component of Essential JS 2 and more. +control: Accessibility platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Accessibility in React Document editor component +# Accessibility in React Document Editor component -The accessibility compliance for the [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component is outlined below. +The accessibility compliance for the [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (also referred to as the Document Editor) component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -24,30 +24,34 @@ The accessibility compliance for the [React DOCX Editor](https://www.syncfusion. | [Accessibility Checker Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | Intermediate | | [Axe-core Accessibility Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | Intermediate | + +
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.
-## Keyboard interaction +## Keyboard Accessibility + +For keyboard accessibility, the Document Editor supports a range of [keyboard shortcuts](./keyboard-shortcut) for navigation and editing without a mouse, including tab navigation, cursor movement, and shortcut key combinations for common editing actions such as copy, paste, undo, and redo. -Document editor supports [keyboard shortcuts](./keyboard-shortcut). +The following accessibility compliance summary applies to the `@syncfusion/ej2-react-documenteditor` package. -## Ensuring accessibility +## Ensuring Accessibility -The Document editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The Document Editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. -The accessibility compliance of the Document editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/wordprocessor.html) in a new window to evaluate the accessibility of the Document editor component with accessibility tools. +The accessibility compliance of the Document Editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/wordprocessor.html) in a new window to evaluate the accessibility of the Document Editor component with accessibility tools. {% previewsample "/document-processing/code-snippet/document-editor/react/accessibility-cs1" %} -## See also +## See Also - [Accessibility in Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/common/accessibility) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/bookmark.md b/Document-Processing/Word/Word-Processor/react/bookmark.md index 8981692bb6..9e82933ff3 100644 --- a/Document-Processing/Word/Word-Processor/react/bookmark.md +++ b/Document-Processing/Word/Word-Processor/react/bookmark.md @@ -1,95 +1,101 @@ --- layout: post -title: Bookmark in React Document editor component | Syncfusion -description: Learn here all about Bookmark in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Bookmark +title: Bookmark in React DOCX Editor component | Syncfusion +description: Learn here all about Bookmark in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. +control: Bookmark platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Bookmark in React Document editor component +# Bookmark in React Document Editor component Bookmark is a powerful tool that helps you to mark a place in the document to find again easily. You can enter many bookmarks in the document and give each one a unique name to identify easily. -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides built-in dialog to add, delete, and navigate bookmarks within the document. To add a bookmark, select a portion of text in the document. After that, jump to the location or add links to it within the document using built-in hyperlink dialog. You can also delete bookmarks from a document. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides built-in dialog to add, delete, and navigate bookmarks within the document. To add a bookmark, select a portion of text in the document. After that, jump to the location or add links to it within the document using built-in hyperlink dialog. You can also delete bookmarks from a document. >Bookmark names need to begin with a letter. They can include both numbers and letters, but not spaces. To separate the words, use an underscore. >Bookmark names starting with an underscore are called hidden bookmarks. For example, bookmarks generated for table of contents. -## Add bookmark +## Add a Bookmark -Using [`insertBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertbookmark) method, Bookmark can be added to the selected text. +Use the [`insertBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertbookmark) method to add a bookmark to the selected text. -```csharp +>The following code snippet assumes that `container` is a reference to the `DocumentEditorContainerComponent` instance declared in your React component. + +```typescript this.container.documentEditor.editor.insertBookmark("Bookmark1"); ``` ## Select Bookmark -You can select the bookmark in the document using [`selectBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#selectbookmark) method by providing Bookmark name to select as shown in the following code snippet. +You can select the bookmark in the document using [`selectBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#selectbookmark) method by providing the bookmark name to select as shown in the following code snippet. -```csharp +```typescript this.container.documentEditor.selection.selectBookmark("Bookmark1", true); ``` ->Note: Second parameter is optional parameter and it denotes is exclude bookmark start and end from selection. If true, excludes bookmark start and end from selection. +N> The second parameter is optional and it denotes whether to exclude the bookmark start and end from the selection. If true, excludes bookmark start and end from selection. ## Delete Bookmark -You can delete bookmark in the document using [`deleteBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#deletebookmark) method as shown in the following code snippet. +You can delete a bookmark in the document using [`deleteBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#deletebookmark) method as shown in the following code snippet. -```csharp +```typescript this.container.documentEditor.editor.deleteBookmark("Bookmark1"); ``` -## Get Bookmark from document +## Get Bookmark from Document -You can get all the bookmarks in the document using [`getBookmarks`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getbookmarks) method as shown in the following code snippet. +You can get all the bookmarks in the document using the [`getBookmarks`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getbookmarks) method on the `DocumentEditor` instance as shown in the following code snippet. -```csharp +```typescript this.container.documentEditor.getBookmarks(false); ``` ->Note: Parameter denotes is include hidden bookmarks. If false, ignore hidden bookmark. +N> The boolean parameter denotes whether to include hidden bookmarks. If false, hidden bookmarks are ignored. -## Get Bookmark from selection +## Get Bookmark from Selection -You can get bookmarks in current selection in the document using [`getBookmarks`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getbookmarks) method as shown in the following code snippet. +You can get bookmarks in the current selection in the document using the [`getBookmarks`](https://ej2.syncfusion.com/react/documentation/api/document-editor/index-default#getbookmarks) method on the `Selection` instance as shown in the following code snippet. -```csharp +```typescript this.container.documentEditor.selection.getBookmarks(false); ``` -## Replace bookmark content +## Show or Hide Bookmark -You can replace bookmark content without removing the bookmark start and end for backtracking the bookmark content. +You can show or hide the bookmark indicators around bookmarked items in Document Editor component. -```csharp -this.container.documentEditor.selection.selectBookmark("Bookmark1", true); -this.container.documentEditor.editor.insertText('Hello World') +The following example code illustrates how to show or hide the bookmark indicators around bookmarked items. + +```typescript +this.container.documentEditor.documentEditorSettings.showBookmarks = true; ``` -You can replace content by removing the bookmark start and end, thus the bookmark content can't be tracked in future. +## Replace Bookmark Content -```csharp -this.container.documentEditor.selection.selectBookmark("Bookmark1"); -this.container.documentEditor.editor.insertText('Hello World') -``` +### Preserve the Bookmark While Replacing Content -## Show or Hide bookmark +When you pass `true` for the `excludeStartEnd` parameter in `selectBookmark`, the bookmark start and end markers are preserved. The subsequent `insertText` call replaces only the content between the markers, so the bookmark remains intact and can be tracked later. + +```typescript +this.container.documentEditor.selection.selectBookmark("Bookmark1", true); +this.container.documentEditor.editor.insertText('Hello World'); +``` -You can show or hide the show square brackets around bookmarked items in Document editor component. +### Remove the Bookmark While Replacing Content -The following example code illustrates how to show or hide square brackets around bookmarked items. +When you omit the `excludeStartEnd` parameter (or pass `false`), the bookmark start and end markers are included in the selection. The subsequent `insertText` call replaces both the content and the markers, so the bookmark is removed and cannot be tracked later. ```typescript -this.container.documentEditorSettings.showBookmarks = true; +this.container.documentEditor.selection.selectBookmark("Bookmark1"); +this.container.documentEditor.editor.insertText('Hello World'); ``` ## Bookmark Dialog -The following example shows how to open bookmark dialog in document editor. +The following example shows how to open bookmark dialog in Document Editor. ```ts import * as ReactDOM from 'react-dom'; @@ -101,6 +107,8 @@ import { Editor, BookmarkDialog, } from '@syncfusion/ej2-react-documenteditor'; +import { createRoot } from 'react-dom/client'; + DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, BookmarkDialog); let documenteditor; function App() { @@ -123,11 +131,12 @@ function App() { ); function showBookmarkDialog() { //Open Bookmark dialog. - documenteditor.showDialog('Bookmark'); + documenteditor.documentEditor.showDialog('Bookmark'); } } export default App; -ReactDOM.render(, document.getElementById('sample')); +const root = createRoot(document.getElementById('sample')!); +root.render(); ``` ## Online Demo @@ -137,4 +146,4 @@ Explore how to insert and manage bookmarks in Word documents using the React Doc ## See Also * [Feature modules](./feature-module) -* [Bookmark dialog](./dialog#bookmark-dialog) +* [Bookmark dialog](./dialog#bookmark-dialog) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/chart.md b/Document-Processing/Word/Word-Processor/react/chart.md index ee6dca0c98..9badf854b9 100644 --- a/Document-Processing/Word/Word-Processor/react/chart.md +++ b/Document-Processing/Word/Word-Processor/react/chart.md @@ -1,18 +1,18 @@ --- layout: post -title: Chart in React Document editor component | Syncfusion -description: Learn here all about Chart in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Chart in React DOCX Editor component | Syncfusion +description: Learn here all about Chart in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Chart platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Chart in React Document editor component +# Chart in React Document Editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides chart preservation support. Using Document Editor, you can see the chart reports from your Word document. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides chart preservation support. Using the Document Editor, you can view chart reports from your Word document. -The following example shows chart preservation in Document Editor. +The following example shows chart preservation in the Document Editor. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -25,12 +25,12 @@ The following example shows chart preservation in Document Editor. {% include code-snippet/document-editor/react/chart-cs1/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/chart-cs1" %} ## Supported Chart Types -The following chart types are supported in document editor +The following chart types are supported in the Document Editor: * Scatter_Markers * Bubble * Area @@ -53,4 +53,4 @@ The following chart types are supported in document editor ## Online Demo -Explore how to preserve charts in Word documents using the React Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/chart). \ No newline at end of file +Explore how to preserve charts in Word documents using the React Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/chart). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/clipboard.md b/Document-Processing/Word/Word-Processor/react/clipboard.md index 9661546f45..b3939bffba 100644 --- a/Document-Processing/Word/Word-Processor/react/clipboard.md +++ b/Document-Processing/Word/Word-Processor/react/clipboard.md @@ -1,8 +1,8 @@ --- layout: post -title: Clipboard in React Document editor component | Syncfusion -description: Learn here all about Clipboard in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Clipboard +title: Clipboard in React DOCX editor component | Syncfusion +description: Learn here all about Clipboard in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. +control: Clipboard platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Clipboard in React Document editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) takes advantage of system clipboard and allows you to copy or move a portion of the document into it in HTML format, so that it can be pasted in any application that supports clipboard. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) takes advantage of the system clipboard and allows you to copy or move portions of the document to the clipboard in HTML format, so that it can be pasted into any application that supports clipboard operations. ## Copy -Copy a portion of document to system clipboard using built-in context menu of document editor. You can also do it programmatically using the following sample code. +Copy a portion of the document to the system clipboard using the built-in context menu of the Document Editor. You can also do it programmatically using the following sample code. ```ts documentEditor.selection.copy(); @@ -22,7 +22,7 @@ documentEditor.selection.copy(); ## Cut -Cut a portion of document to system clipboard using built-in context menu of document editor. You can also do it programmatically using the following sample code. +Cut a portion of the document to the system clipboard using the built-in context menu of the Document Editor. You can also do it programmatically using the following sample code. ```ts documentEditor.editor.cut(); @@ -30,38 +30,39 @@ documentEditor.editor.cut(); ## Paste -Due to limitations, you can paste contents from system clipboard in document editor only using the ‘CTRL + V’ keyboard shortcut. +Due to limitations, you can paste contents from the system clipboard into the Document Editor only using the **Ctrl + V** keyboard shortcut. ->Note: Due to browser limitation of getting content from system clipboard, paste using API and context menu option doesn't work. +N> Due to browser limitations of getting content from the system clipboard, paste using the API and context menu options doesn't work. ## Local paste (copy/paste within control) -Document Editor expose API to enable local paste within the control. On enabling this, the following is performed: -* Selected contents will be stored to an internal clipboard as SFDT in addition to system clipboard. -* Clipboard paste will be overridden, and internally stored data (SFDT data) that has formatted text will be pasted using paste() API in Document editor. +Document Editor exposes an API to enable local paste within the control. When enabled, the following occurs: +* Selected contents will be stored to an internal clipboard as SFDT in addition to the system clipboard. +* Clipboard paste will be overridden, and the internally stored data (SFDT data) that has formatted text will be pasted using the `paste()` API in the Document Editor. + +### Enable Local Paste Refer to the following sample code. ```ts -import * as ReactDOM from 'react-dom'; import * as React from 'react'; +import { createRoot } from 'react-dom/client'; import { DocumentEditorComponent, SfdtExport, Selection, Editor, } from '@syncfusion/ej2-react-documenteditor'; -//Inject require module. + +//Inject required modules. DocumentEditorComponent.Inject(Selection, Editor); + function App() { let documenteditor; React.useEffect(() => { - componentDidMount(); - }, []); - function componentDidMount() { //Enable document editor local paste option. documenteditor.enableLocalPaste = true; - } + }, []); return (
, document.getElementById('sample')); - +const root = createRoot(document.getElementById('sample')!); +root.render(); ``` By default, **enableLocalPaste** is false. @@ -90,11 +91,11 @@ documentEditor.editor.paste(); ### Paste options in context menu -In Document editor, paste options in context menu will be in disabled state if you were try to copy/paste content from outside of Document editor. It gets enabled when **enableLocalPaste** is true and trying to copy/paste content inside Document editor. +In the Document Editor, paste options in the context menu will be in a disabled state if you try to copy/paste content from outside of the Document Editor. It gets enabled when `enableLocalPaste` is `true` and you copy/paste content within the Document Editor. ->Note: Due to browser limitation of getting content from system clipboard, paste using API and context menu option doesn't work. Hence, the paste option is disabled in context menu. +N> Due to browser limitations of getting content from the system clipboard, paste using the API and context menu options doesn't work. Hence, the paste option is disabled in the context menu. -Alternatively, you can use the keyboard shortcuts, +Alternatively, you can use the keyboard shortcuts: * Cut: Ctrl + X * Copy: Ctrl + C @@ -107,18 +108,19 @@ Alternatively, you can use the keyboard shortcuts, |True |Allows to paste content that is copied from the same Document Editor component alone and prevents pasting content from system clipboard. Hence the content copied from outside Document Editor component can’t be pasted.
Browser limitation of pasting from system clipboard using API and context menu options, will be resolved. So, you can copy and paste content within the Document Editor component using API and context menu options too.| |False|Allows to paste content from system clipboard. Hence the content copied from both the Document Editor component and outside can be pasted.
Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.| -Note: +N> * Keyboard shortcut for pasting will work properly in both cases. -* Copying content from Document Editor component and pasting outside will work properly in both cases. +* Copying content from the Document Editor component and pasting outside will work properly in both cases. ## Paste with formatting -Document Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `enableLocalPaste` property in Document Editor to false and use this .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`]() for Core by the web API service implementation. This library helps you to paste the system clipboard data with formatting. +Document Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `enableLocalPaste` property in the Document Editor to `false` and use the `Syncfusion.EJ2.WordEditor.AspNet.Core` .NET Standard library for the ASP.NET Core web API service implementation. This library helps you to paste the system clipboard data with formatting. For details on setting up the web API service, refer to the [web services overview](./web-services-overview). You can paste your system clipboard data in the following ways: -* **Keep Source Formatting** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style. -* **Match Destination Formatting** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. -* **Text Only** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded and tables are converted to a series of paragraphs. + +* **Keep Source Formatting:** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style. +* **Match Destination Formatting:** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. +* **Text Only:** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded, and tables are converted to a series of paragraphs. This paste option appears as follows. diff --git a/Document-Processing/Word/Word-Processor/react/collaborative-editing/overview.md b/Document-Processing/Word/Word-Processor/react/collaborative-editing/overview.md index 8fd5f8ce6d..1dc99b9ab1 100644 --- a/Document-Processing/Word/Word-Processor/react/collaborative-editing/overview.md +++ b/Document-Processing/Word/Word-Processor/react/collaborative-editing/overview.md @@ -1,42 +1,42 @@ --- layout: post -title: Collaborative Editing in React Document editor control | Syncfusion -description: Learn about collaborative editing in Syncfusion React Document editor control of Syncfusion Essential JS 2 and more. +title: Collaborative Editing in React DOCX Editor control | Syncfusion +description: Learn about collaborative editing in the Syncfusion React Document Editor control and how to implement real-time document collaboration. platform: document-processing -control: Collaborative Editing +control: Collaborative Editing documentation: ug domainurl: ##DomainURL## --- -# Collaborative Editing in React +# Collaborative Editing in React Document Editor -Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes. +Allows multiple users to work on the same document simultaneously. This can be in real time so that collaborators can see them as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes. ## Prerequisites -- *Real-time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing. +- *Real-Time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing. - *Distributed Cache or Database*: Used to temporarily store the queue of editing operations. -### Real time transport protocol +### Real-Time Transport Protocol - *Managing Connections*: Keeps active connections open for real-time collaboration, allowing seamless communication between users and the server. - *Broadcasting Changes*: Ensures that any edits made by one user are instantly sent to all collaborators, keeping everyone on the same page with the latest document version. -### Distributed cache or database +### Distributed Cache or Database To support collaborative editing, it's crucial to have a backing system that temporarily stores the editing operations of all active users. There are two primary options: -- ***Distributed Cache***: Handles more HTTP requests per second than a database approach. For example, a server with 2 vCPUs and 8GB RAM can process up to 125 requests per second using a distributed cache. We highly recommend using a distributed cache as a backing system over a database. +- ***Distributed Cache***: Handles more HTTP requests per second than a database approach. For example, a server with 2 vCPUs and 8GB of RAM can process up to 125 requests per second using a distributed cache. We highly recommend using a distributed cache as a backing system over a database. - ***Database***: With the same server configuration, it can handle up to 50 requests per second. -Using the distributed cache or database all the editing operations are queued in order and conflict resolution is performed using `Operational Transformation` algorithm. +With the distributed cache or database, all the editing operations are queued in order, and conflict resolution is performed using the `Operational Transformation` algorithm. ->**Tips**: To calculate the average requests per second of your application Assume the editor in your live application is actively used by 1000 users and each user’s edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second. +N> 1. To calculate the average requests per second of your application, assume the Document Editor in your live application is actively used by 1000 users, and each user's edit can trigger 2 to 5 requests per second. The total requests per second of your application will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second. ->**Note**: The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app’s traffic and choose a configuration that best suits your needs. +N> 2. The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app's traffic and choose a configuration that best suits your needs. -#### See Also +## See Also - [Collaborative editing using Redis cache in ASP.NET Core](../collaborative-editing/using-redis-cache-asp-net-core) - [Collaborative editing using Java](../collaborative-editing/using-redis-cache-java) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md b/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md index a0254e818e..5935b7451d 100644 --- a/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md +++ b/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md @@ -1,7 +1,7 @@ --- layout: post title: Collaborative Editing in React DOCX Editor | Syncfusion -description: Learn how to enable collaborative editing in React DOCX Editor to allow multiple users to work on a document simultaneously. +description: Learn how to enable collaborative editing in React Document Editor to allow multiple users to work on a document simultaneously. platform: document-processing control: Collaborative Editing documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Collaborative Editing in React with Redis in ASP.NET Core -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports collaborative editing which Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports collaborative editing which allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made ## Prerequisites @@ -25,7 +25,7 @@ SignalR enables real-time communication by instantly sending and receiving docum ### Scale-out SignalR using Azure SignalR service -Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers). +Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application (across multiple servers). The following code snippet demonstrates how to configure Azure SignalR in an ASP.NET Core application using the `AddAzureSignalR` method in the "Program.cs" file of the web service project. @@ -249,7 +249,7 @@ public connectToRoom(data: any) { } }; -//other code snippets +// Other code snippets {% endhighlight %} {% endtabs %} @@ -419,14 +419,14 @@ public async Task JoinGroup(ActionInfo info) // Add the connection ID to the group await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName); - //To ensure whether the room exixts in the Redis cache + // To ensure whether the room exists in the Redis cache bool roomExists = await _db.KeyExistsAsync(info.RoomName + CollaborativeEditingHelper.UserInfoSuffix); if (roomExists) { // Fetch all connected users from Redis var allUsers = await _db.HashGetAllAsync(info.RoomName + CollaborativeEditingHelper.UserInfoSuffix); var userList = allUsers.Select(u => JsonConvert.DeserializeObject(u.Value)).ToList(); - //Send the exisiting user details to the newly joined user. + // Send the existing user details to the newly joined user. await Clients.Caller.SendAsync("dataReceived", "addUser", userList); } @@ -436,7 +436,7 @@ public async Task JoinGroup(ActionInfo info) // Store the room name with the connection ID await _db.HashSetAsync(CollaborativeEditingHelper.ConnectionIdRoomMappingKey, Context.ConnectionId, info.RoomName); - // Notify all the exsisiting users in the group about the new user + // Notify all the existing users in the group about the new user await Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info); } @@ -452,12 +452,12 @@ The following code snippet demonstrates how to disconnect a connection using Sig public override async Task OnDisconnectedAsync(Exception ? e) { - //Get the room name associated with the connection ID + // Get the room name associated with the connection ID string roomName = await _db.HashGetAsync(CollaborativeEditingHelper.ConnectionIdRoomMappingKey, Context.ConnectionId); - // Remove user from Redis + // Remove user from Redis await _db.HashDeleteAsync(roomName + CollaborativeEditingHelper.UserInfoSuffix, Context.ConnectionId); - //// Fetch all connected users from Redis + // Fetch all connected users from Redis var allUsers = await _db.HashGetAllAsync(roomName + CollaborativeEditingHelper.UserInfoSuffix); var userList = allUsers.Select(u => JsonConvert.DeserializeObject(u.Value)).ToList(); @@ -469,7 +469,7 @@ public override async Task OnDisconnectedAsync(Exception ? e) RedisValue[] pendingOps = await _db.ListRangeAsync(roomName, 0, -1); if (pendingOps.Length > 0) { List < ActionInfo > actions = new List(); - // Prepare the message fir adding it in background service queue. + // Prepare the message for adding it in background service queue. foreach(var element in pendingOps) { actions.Add(JsonConvert.DeserializeObject(element.ToString())); @@ -594,7 +594,7 @@ private async Task < ActionInfo > AddOperationsToCache(ActionInfo action) action.Version = version; action.IsTransformed = true; - //Other code snippets + // Other code snippets // Return the updated action return action; diff --git a/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-java.md b/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-java.md index d777e47a67..1af79c2350 100644 --- a/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-java.md +++ b/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-java.md @@ -1,7 +1,7 @@ --- layout: post title: Collaborative Editing in React using Java | Syncfusion -description: Learn how to enable collaborative editing in Syncfusion React Document editor control of Syncfusion Essential JS 2 and more. +description: Learn how to enable collaborative editing in Syncfusion React Document Editor control of Syncfusion Essential JS 2 and more. control: Collaborative Editing Java platform: document-processing documentation: ug @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Collaborative Editing in React with Redis in Java -Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes. +This feature allows multiple users to work on the same document simultaneously in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes. ## Prerequisites -The following are needed to enable collaborative editing in [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor). +The following are needed to enable collaborative editing in [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor). - `SockJS` - `Redis` @@ -51,7 +51,7 @@ render() { { this.container = scope; }} style={{ 'display': 'block' }} height={'100%'} currentUser={this.currentUser} toolbarItems={this.toolbarItems} serviceUrl={this.serviceUrl + 'api/wordeditor'} enableToolbar={true} locale='en-US' > - `` +
); } @@ -84,7 +84,7 @@ public onConnected() { this.connectToRoom(this.currentRoomName); } } -//Receive the remote action and apply to currenty document. +//Receive the remote action and apply to current document. public onDataRecived(data: any) { if (this.collaborativeEditingHandler) { var content = JSON.parse(data.body); @@ -109,7 +109,7 @@ public openDocument(responseText: string, roomName: string): void { //Open the document this.container.documentEditor.open(data.sfdt); setTimeout(() => { - // connect to server using ScketJS + // connect to server using SockJS this.connectToRoom({ action: 'connect', roomName: roomName, currentUser: this.container.currentUser }); }); } @@ -129,7 +129,7 @@ public connectToRoom(data: any) { ### Step 4: Broadcast current editing changes to remote users -Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event. +Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the Document Editor using the `contentChange` event. ```typescript this.container.contentChange = (args: ContainerContentChangeEventArgs) => { @@ -311,9 +311,9 @@ public String getActionsFromServer(@RequestBody ActionInfo param) throws ClassNo ## How to perform Scaling in Collaborative Editing. ### Role of Scaling in Collaborative editing -As the number of users increases, collaborative application face challenges in maintaining responsiveness and performance. This is where scaling becomes crucial. Scaling refers to the ability of an application to handle growing demands by effectively distributing the workload across multiple resources. +As the number of users increases, collaborative applications face challenges in maintaining responsiveness and performance. This is where scaling becomes crucial. Scaling refers to the ability of an application to handle growing demands by effectively distributing the workload across multiple resources. -During scaling the users may connected to different servers, so collaborative editing application introduces a specific challenge like, updating the edit operations to all the users connected in different serves. To overcome this issue you need to use ``` Redis Cache pub/sub ``` for message relay(syncing the editing operations to the users connected to different server instance) +During scaling, users may be connected to different servers, so collaborative editing applications introduce specific challenges, such as updating edit operations to all users connected to different server instances. To overcome this issue, you need to use ``` Redis Cache pub/sub ``` for message relay (syncing the editing operations to the users connected to different server instances). ### Use of Redis Pub/Sub in scaling environment Redis offers Pub/Sub functionality. The publish/subscribe (pub/sub) pattern provides asynchronous communication among multiple AWS services without creating interdependency. When a user edits a document, the application can publish the changes to a Redis channel. Clients (in different server instances) subscribed to that channel receive real-time updates, reflecting the changes in their document views. @@ -334,7 +334,7 @@ Publish each editing operation to Redis channel with the room name. This will se ```java try (Jedis jedis = RedisSubscriber.jedisPool.getResource()) { -jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.ObjectMapper().writeValueAsString(payload)); +jedis.publish("collaborativeediting", new com.fasterxml.jackson.databind.ObjectMapper().writeValueAsString(payload)); break; } catch (JedisConnectionException e) { } @@ -347,7 +347,7 @@ jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.Object @PostConstruct public void subscribeToInstanceChannel() { //Subscriber to `collaborativeediting` - String channel = "collaborativeedtiting"; + String channel = "collaborativeediting"; new Thread(() -> { JedisPoolConfig poolConfig = new JedisPoolConfig(); jedisPool = new JedisPool(poolConfig, REDIS_HOST, REDIS_PORT); @@ -380,4 +380,3 @@ jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.Object Full version of the code discussed about can be found in below GitHub location. GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing) - diff --git a/Document-Processing/Word/Word-Processor/react/comments.md b/Document-Processing/Word/Word-Processor/react/comments.md index 70a68cc2e4..cece49b5d6 100644 --- a/Document-Processing/Word/Word-Processor/react/comments.md +++ b/Document-Processing/Word/Word-Processor/react/comments.md @@ -1,16 +1,16 @@ --- layout: post -title: Comments in React Document editor component | Syncfusion -description: Learn here all about Comments in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Comments in React DOCX Editor component | Syncfusion +description: Learn here all about Comments in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Comments platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Comments in React Document editor component +# Comments in React Document Editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) allows you to add comments to documents. You can add, navigate and remove comments in code and from the UI. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) allows you to add comments to documents. You can add, navigate and remove comments in code and from the UI. To know more about the comments in DocumentEditor component, you can check the video below. @@ -75,7 +75,7 @@ documentEditor.editor.insertReplyComment(comment.id, 'Hello world', commentPrope ## Get Comments -Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getcomments). +Document Editor allows you to get the comments along with their replies and comment properties using [`getComments`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getcomments). ```ts //Get Comments in the document along with the properties author, date, status. @@ -122,11 +122,11 @@ documentEditor.editor.deleteAllComments(); ## Protect the document in comments only mode -Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user allowed to add or edit comments alone in the document. +Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, users are allowed to add or edit comments alone in the document. -Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) API. +Document Editor provides an option to protect and unprotect document using [`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) API. -The following example code illustrates how to enforce and stop protection in Document editor container. +The following example code illustrates how to enforce and stop protection in Document Editor container. ```ts import { createRoot } from 'react-dom/client'; @@ -137,7 +137,7 @@ import { } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { - let container = DocumentEditorContainerComponent; + let container: DocumentEditorContainerComponent; function enforceProtection() { //enforce protection container.documentEditor.editor.enforceProtection('123', 'CommentsOnly'); @@ -168,11 +168,11 @@ 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. -Comment only protection can be enabled in UI by using [Restrict Editing pane](./document-management#restrict-editing-pane) +Comment only protection can be enabled in the UI by using [Restrict Editing pane](./document-management#restrict-editing-pane) ![Enable comment only protection](images/commentsonly.png) ->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password. +N> In the enforceProtection method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In the stopProtection method, the parameter denotes the password. ## Mention support in Comments @@ -190,7 +190,7 @@ import { } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { - let container = DocumentEditorContainerComponent; + let container: DocumentEditorContainerComponent; let mentionData = [ { Name: 'Mary Kate', EmailId: 'marry@company.com' }, { Name: 'Andrew James', EmailId: 'james@company.com' }, @@ -224,7 +224,7 @@ createRoot(document.getElementById('sample')).render(); ## Events -DocumentEditor provides [beforeCommentAction](https://ej2.syncfusion.com/react/documentation/api/document-editor#beforecommentaction) event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the [CommentActionEventArgs](https://ej2.syncfusion.com/react/documentation/api/document-editor/commentactioneventargs/) object as an argument, which allows access to information about the comment. +DocumentEditor provides the [beforeCommentAction](https://ej2.syncfusion.com/react/documentation/api/document-editor#beforecommentaction) event, which is triggered on comment actions such as Post, edit, reply, resolve, and reopen. This event provides an opportunity to perform custom logic on these comment actions. The event handler receives the [CommentActionEventArgs](https://ej2.syncfusion.com/react/documentation/api/document-editor/commentactioneventargs) object as an argument, which allows access to information about the comment. To demonstrate a specific use case, let’s consider an example where we want to restrict the delete functionality based on the author’s name. The following code snippet illustrates how to allow only the author of a comment to delete: @@ -244,7 +244,7 @@ const Default = () => { useEffect(() => {}, []); let hostUrl: string = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; - let container: DocumentEditorContainerComponent = useRef(null); + let container = useRef(null); let mentionData = [ { Name: 'Mary Kate', EmailId: 'marry@company.com' }, { Name: 'Andrew James', EmailId: 'james@company.com' }, @@ -255,9 +255,9 @@ const Default = () => { mentionSettings: { dataSource: mentionData, fields: { text: 'Name' } }, }; - // Event get triggerd on comment actions like Post, edit, reply, resolve and reopen + // Event is triggered on comment actions such as Post, edit, reply, resolve, and reopen function beforeComment(args: CommentActionEventArgs) { - // Check the type and author of the comment and current user are different + // Check if the type is Delete and the author of the comment differs from the current user if ( args.type === 'Delete' && container.current.currentUser !== args.author diff --git a/Document-Processing/Word/Word-Processor/react/content-control.md b/Document-Processing/Word/Word-Processor/react/content-control.md index d599f217e0..a0f96a5898 100644 --- a/Document-Processing/Word/Word-Processor/react/content-control.md +++ b/Document-Processing/Word/Word-Processor/react/content-control.md @@ -1,34 +1,34 @@ --- layout: post -title: Content Control in React Document editor component | Syncfusion -description: Learn here all about Content Control in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Content Control in React DOCX Editor component | Syncfusion +description: Learn here all about Content Control in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Content Control platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Content control in React Document editor control +# Content Control in React Document Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides support for inserting, editing content controls. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides support for inserting, editing content controls. -Content controls can be categorized based on its occurrence in a document as follows, +Content controls can be categorized based on their occurrence in a document as follows: -InlineContentControl: Among inline content inside, as a child of a paragraph. -BlockContentControl: Among paragraphs and tables, as a child of a Body, HeaderFooter. +**Inline Content Control:** Among inline content within a paragraph as a child element. +**Block Content Control:** Among paragraphs and tables as a child of a Body or Header/Footer. ## Types of Content Controls * Rich Text * Plain Text * Check Box -* Date picker +* Date Picker * Drop-Down List and Combo Box * Picture -## Insert content control +## Insert Content Control -Content control can be inserted using [`insertContentControl`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertcontentcontrol) method in editor module. +Content controls can be inserted using the [`insertContentControl`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertcontentcontrol) method in the editor module. {% highlight ts %} //Insert Rich Text Content Control @@ -44,7 +44,7 @@ this.container.documentEditor.editor.insertContentControl('Text', 'Hello World') //Insert CheckBox Content Control this.container.documentEditor.editor.insertContentControl('CheckBox'); -//Insert CheckBox Content Control with mention checked state +//Insert CheckBox Content Control with a checked state specified this.container.documentEditor.editor.insertContentControl('CheckBox', true); //Insert ComboBox Content Control @@ -68,9 +68,9 @@ this.container.documentEditor.editor.insertContentControl('Picture'); this.container.documentEditor.editor.insertContentControl('Picture', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADgSURBVEhLY3jx4sV/WuDBafCluXH/D6ydhlWObIMPLmn8/32KPBiD2OjyKAY7+zbDsX945/91azehiBWU9IPVgVwJMxSX4SgG65jXwrGVa+v/6TOXoojBDEZ2LQh/m676/+D+/XBzQJgsg0EY5GqQgSCDsYUz2QaDMCiosIUvCKMYDFKIjK9dvYrCB3kXJIaMkfUjY5JdDEpioCCAYZCFyGbAMFkGI0fcMDUYpAgZY4s8EEYWwxWBJLsYhJHFQIYjmwHDQ9xgkGEwDCp0QAYji8EMRhYjymBq4lGDofjFfwCV5AGEIf9DQQAAAABJRU5ErkJggg=='); {% endhighlight %} -## Import content control properties +## Import Content Control Properties -Content control properties can be set using the [`ContentControlInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contentControlInfo/) and import it using [`importContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#importcontentcontroldata) +Content control properties can be set using the [`ContentControlInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contentControlInfo) and imported using the [`importContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#importcontentcontroldata) method. {% highlight ts %} let data: ContentControlInfo[] = []; @@ -79,17 +79,17 @@ data.push(contentControlData); this.container.documentEditor.importContentControlData(data); {% endhighlight %} -## Export content control properties +## Export Content Control Properties -Content control properties can be exported using the [`exportContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#exportcontentcontroldata) +Content control properties can be exported using the [`exportContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#exportcontentcontroldata) method. {% highlight ts %} let contentControlInfos: ContentControlInfo[] = this.container.documentEditor.exportContentControlData(); {% endhighlight %} -## Reset content control +## Reset Content Control -Content control properties can be reset using the [`resetContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#resetcontentcontroldata) +Content control properties can be reset using the [`resetContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#resetcontentcontroldata) method. {% highlight ts %} let data: ContentControlInfo[] = []; @@ -98,4 +98,4 @@ data.push(contentControlData); this.container.documentEditor.resetContentControlData(data); {% endhighlight %} ->Note: Content control with custom XML mapping of file type WordML is converted as normal Rich Text Content Control to provide lossless round-tripping upon saving. +N> Content controls with custom XML mapping of file type WordML are converted as normal Rich Text Content Control to provide lossless round-tripping upon saving. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/dialog.md b/Document-Processing/Word/Word-Processor/react/dialog.md index c3bce364f2..80ed251473 100644 --- a/Document-Processing/Word/Word-Processor/react/dialog.md +++ b/Document-Processing/Word/Word-Processor/react/dialog.md @@ -1,23 +1,23 @@ --- layout: post -title: Dialog in React Document editor component | Syncfusion -description: Learn here all about Dialog in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Dialog in React DOCX Editor component | Syncfusion +description: Learn here all about Dialog in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Dialog platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Dialog in React Document editor component +# Dialog in React Document Editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides dialog support to major operations such as insert or edit hyperlink, formatting text, paragraph, style, list and table properties. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides dialog support for major operations such as inserting or editing hyperlinks, and formatting text, paragraph, style, list, and table properties. ## Font Dialog -Font dialog allows you to modify all text properties for selected contents at once such as bold, italic, underline, font size, font color, strikethrough, subscript and superscript. +The Font dialog allows you to modify all text properties for selected contents at once, such as bold, italic, underline, font size, font color, strikethrough, subscript, and superscript. ->Document Editor features are segregated into individual feature-wise modules. To use font Dialog, inject ‘FontDialog’ module using the ‘DocumentEditor.Inject(Selection, SfdtExport, Editor, FontDialog)’. ->To enable font dialog for a document editor instance, set ‘enableFontDialog’ to true. +>Document Editor features are segregated into individual feature-wise modules. To use the Font dialog, inject the 'FontDialog' module using 'DocumentEditor.Inject(Selection, SfdtExport, Editor, FontDialog)'. +>To enable the Font dialog for a document editor instance, set 'enableFontDialog' to true. Refer to the following example. @@ -32,12 +32,12 @@ Refer to the following example. {% include code-snippet/document-editor/react/dialog-cs1/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/dialog-cs1" %} ## Paragraph dialog -This dialog allows modifying the paragraph formatting for selection at once such as text alignment, indentation, and spacing. +This dialog allows modifying the paragraph formatting for the selection at once, such as text alignment, indentation, and spacing. To open this dialog, refer to the following example. @@ -47,7 +47,7 @@ import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { DocumentEditorComponent, SfdtExport, Selection, Editor, ParagraphDialog } from '@syncfusion/ej2-react-documenteditor'; -//Inject require modules. +//Inject required modules. DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, ParagraphDialog); function App() { let documenteditor: DocumentEditorComponent; @@ -70,7 +70,7 @@ ReactDOM.render(, document.getElementById('sample')); ## Table dialog -This dialog allows creating and inserting a table at cursor position by specifying the required number of rows and columns. +This dialog allows creating and inserting a table at the cursor position by specifying the required number of rows and columns. To open this dialog, refer to the following example. @@ -109,8 +109,9 @@ This dialog allows you to perform the following operations: * View all bookmarks. * Navigate to a bookmark. -* Create a bookmark at current selection. +* Create a bookmark at the current selection. * Delete an existing bookmark. + To open this dialog, refer to the following example. @@ -144,7 +145,7 @@ ReactDOM.render(, document.getElementById('sample')); ## Hyperlink dialog -This dialog allows editing or inserting a hyperlink at cursor position. +This dialog allows editing or inserting a hyperlink at the cursor position. To open this dialog, refer to the following example. @@ -161,7 +162,7 @@ DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, HyperlinkDialog); function App() { let documenteditor: DocumentEditorComponent = new DocumentEditorComponent(undefined); function ShowHyperlinkDialog() { - //Open hyperlink dialog; + //Open hyperlink dialog. documenteditor.showDialog('Hyperlink'); } return ( @@ -178,7 +179,7 @@ ReactDOM.render(, document.getElementById('sample')); ## Table of contents dialog -This dialog allows creating and inserting table of contents at cursor position. If the table of contents already exists at cursor position, you can customize its properties. +This dialog allows creating and inserting a table of contents at the cursor position. If the table of contents already exists at the cursor position, you can customize its properties. To open this dialog, refer to the following example. @@ -213,7 +214,7 @@ ReactDOM.render(, document.getElementById('sample')); ## Styles Dialog -This dialog allows managing the styles in a document. It will display all the styles in the document with options to modify the properties of the existing style or create new style with the help of ‘Style dialog’. Refer to the following example. +This dialog allows managing the styles in a document. It will display all the styles in the document with options to modify the properties of the existing style or create a new style with the help of the 'Style dialog'. Refer to the following example. ```ts @@ -223,7 +224,7 @@ import { DocumentEditorComponent, SfdtExport, Selection, Editor, StyleDialog, StylesDialog, EditorHistory } from '@syncfusion/ej2-react-documenteditor'; -//Inject require modules. +//Inject required modules. DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, StyleDialog, StylesDialog, EditorHistory); function App() { let documenteditor: DocumentEditorComponent; @@ -246,7 +247,7 @@ ReactDOM.render(, document.getElementById('sample')); ## Style dialog -You can directly use this dialog for modifying any existing style or add new style by providing the style name. +You can directly use this dialog for modifying any existing style or adding a new style by providing the style name. To open this dialog, refer to the following example. @@ -258,7 +259,7 @@ import { DocumentEditorComponent, SfdtExport, Selection, Editor, StyleDialog, StylesDialog, EditorHistory } from '@syncfusion/ej2-react-documenteditor'; -//Inject require modules. +//Inject required modules. DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, StyleDialog, StylesDialog, EditorHistory); function App() { let documenteditor: DocumentEditorComponent; @@ -292,7 +293,7 @@ import { DocumentEditorComponent, SfdtExport, Selection, Editor, ListDialog } from '@syncfusion/ej2-react-documenteditor'; -//Inject require modules. +//Inject required modules. DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, ListDialog); function App() { let documenteditor: DocumentEditorComponent; @@ -334,7 +335,7 @@ function App() { ComponentDidMount(); }, []); function ComponentDidMount() { - //Insert table + //Insert table. documenteditor.editor.insertTable(2, 2); } @@ -356,7 +357,7 @@ ReactDOM.render(, document.getElementById('sample')); ## Table options dialog -This dialog allows customizing the default cell margins and spacing between each cells of the selected table. +This dialog allows customizing the default cell margins and spacing between each cell of the selected table. To open this dialog, refer to the following example. @@ -443,7 +444,7 @@ ReactDOM.render(, document.getElementById('sample')); ## Page setup dialog -This dialog allows customizing margins, size, and layout options for pages of the section. +This dialog allows customizing margins, size, and layout options for the pages of the section. To open this dialog, refer to the following example. @@ -479,4 +480,4 @@ ReactDOM.render(, document.getElementById('sample')); ## See Also -* [Feature modules](./feature-module) +* [Feature modules](./feature-module) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/document-editor-toc.html b/Document-Processing/Word/Word-Processor/react/document-editor-toc.html index de49254ed8..588a25c3f5 100644 --- a/Document-Processing/Word/Word-Processor/react/document-editor-toc.html +++ b/Document-Processing/Word/Word-Processor/react/document-editor-toc.html @@ -82,6 +82,7 @@
  • RTL
  • Chart
  • Content Control
    • +
  • Document Management
  • Restrict Editing
  • SpellCheck
  • Globalization
    • @@ -140,4 +141,4 @@ - + \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/document-management.md b/Document-Processing/Word/Word-Processor/react/document-management.md index f69f00f2f7..98f5335a48 100644 --- a/Document-Processing/Word/Word-Processor/react/document-management.md +++ b/Document-Processing/Word/Word-Processor/react/document-management.md @@ -1,22 +1,22 @@ --- layout: post -title: Document management in React Document editor component | Syncfusion -description: Learn here all about Document management in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Document management in React DOCX Editor component | Syncfusion +description: Learn here all about Document management in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Document management platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Document management in React Document editor component +# Document management in React Document Editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides support to restrict editing. When the protected document includes range permission, then unique user or user group only authorized to edit separate text area. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides support for restricting editing. When the protected document includes range permissions, only the unique user or user group is authorized to edit a separate text area. ## Set current user You can use the `currentUser` property to authorize the current document user by name, email, or user group name. -The following code shows how to set currentUser +The following code shows how to set currentUser: ```ts documentEditor.currentUser = 'engineer@mycompany.com'; @@ -32,25 +32,25 @@ The following code shows how to set userColor. documentEditor.userColor = '#fff000'; ``` -You can toggle the highlight the editable region value using the "highlightEditableRanges" property. +You can toggle the highlighting of the editable region using the `highlightEditableRanges` property. The following code shows how to toggle the highlight editable region value. ```ts -container.documentEditor.documentEditorSettings.highlightEditableRanges = true; +container.documentEditor.documentEditorSettings.highlightEditableRanges = true; ``` ## Restrict Editing Pane -Restrict Editing Pane provides the following options to manage the document: +The Restrict Editing Pane provides the following options to manage the document: * To apply formatting restrictions to the current document, select the allow formatting check box. * 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 stop protection, select **STOP PROTECTION** button. A dialog box displays asking for a password to stop protection. +* To add users to the current document, select the more users option and add users from the popup dialog. +* To include range permissions to the current document, select parts of the document and choose users who are allowed to freely edit them from the listed check boxes. +* 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 the **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'. +The following code shows the Restrict Editing Pane. To unprotect the document, use the password '123'. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -63,10 +63,10 @@ The following code shows Restrict Editing Pane. To unprotect the document, use p {% include code-snippet/document-editor/react/base-cs1/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/base-cs1" %} -> 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. +> 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 to 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 it for the serviceUrl property. ## See Also diff --git a/Document-Processing/Word/Word-Processor/react/export.md b/Document-Processing/Word/Word-Processor/react/export.md index 103d5da5c0..3a7f2dd942 100644 --- a/Document-Processing/Word/Word-Processor/react/export.md +++ b/Document-Processing/Word/Word-Processor/react/export.md @@ -1,7 +1,7 @@ --- layout: post -title: Export in React Document Editor Component | Syncfusion -description: Learn here all about export in Syncfusion Essential React Document Editor component, it's elements and more. +title: Export in React DOCX Editor Component | Syncfusion +description: Learn here all about export in Syncfusion Essential React Document Editor component, its elements and more. control: Export platform: document-processing documentation: ug @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Export in React Document Editor Component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) exports the document into various known file formats in client-side such as Microsoft Word document (.docx), Microsoft Word Template (.dotx), text document (.txt), and its own format called **Syncfusion® Document Text (.sfdt)**. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) exports the document into various known file formats on the client side, such as Microsoft Word document (.docx), Microsoft Word Template (.dotx), text document (.txt), and its own format called **Syncfusion® Document Text (.sfdt)**. -We are providing two types of save APIs as mentioned below. +Two types of save APIs are provided as mentioned below. |API name|Purpose|Code Snippet for Document Editor|Code Snippet for Document Editor Container| |--------|---------|----------|----------| @@ -21,7 +21,7 @@ We are providing two types of save APIs as mentioned below. ## SFDT export -The following example shows how to export documents in document editor as Syncfusion® document text (.sfdt). +The following example shows how to export documents in the Document Editor as Syncfusion® document text (.sfdt). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -34,7 +34,7 @@ The following example shows how to export documents in document editor as Syncfu {% include code-snippet/document-editor/react/export-cs1/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/export-cs1" %} {% tabs %} @@ -48,20 +48,20 @@ The following example shows how to export documents in document editor as Syncfu {% include code-snippet/document-editor/react/export-container-cs1/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/export-container-cs1" %} -> 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. +> 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 to 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 it for the serviceUrl property. ->Document Editor features are segregated into individual feature-wise modules. To use SFDT export, inject the `SfdtExport` module using `DocumentEditor.Inject( SfdtExport)`. +>Document Editor features are segregated into individual feature-wise modules. To use SFDT export, inject the `SfdtExport` module using `DocumentEditor.Inject(SfdtExport)`. > >To enable SFDT export for a document editor instance, set `enableSfdtExport` to true. ## Word export -The following example shows how to export the document as Word document (.docx). +The following example shows how to export the document as a Word document (.docx). ->Note: The React Document Editor component's document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](./import#why-the-document-pagination-differs-from-microsoft-word) +N> The React Document Editor component's document pagination (page-by-page display) can't be guaranteed for all Word documents to match the pagination of the Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](./import#why-the-document-pagination-differs-from-microsoft-word) {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -74,7 +74,7 @@ The following example shows how to export the document as Word document (.docx). {% include code-snippet/document-editor/react/export-cs2/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/export-cs2" %} {% tabs %} @@ -88,20 +88,20 @@ The following example shows how to export the document as Word document (.docx). {% include code-snippet/document-editor/react/export-container-cs2/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/export-container-cs2" %} -> 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. +> 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 to 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 it for the serviceUrl property. ->Document Editor features are segregated into individual feature-wise modules. To use word export, inject the `WordExport` and `SfdtExport` modules using `DocumentEditor.Inject(WordExport, SfdtExport)`. +>Document Editor features are segregated into individual feature-wise modules. To use Word export, inject the `WordExport` and `SfdtExport` modules using `DocumentEditor.Inject(WordExport, SfdtExport)`. > ->To enable word export for a document editor instance, set `enableWordExport` to true. +>To enable Word export for a document editor instance, set `enableWordExport` to true. ## Template export -The following example shows how to export the document as Word Template (.dotx). +The following example shows how to export the document as a Word Template (.dotx). ->Note: The React Document Editor component's document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](./import#why-the-document-pagination-differs-from-microsoft-word) +N> The React Document Editor component's document pagination (page-by-page display) can't be guaranteed for all Word documents to match the pagination of the Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](./import#why-the-document-pagination-differs-from-microsoft-word) {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -114,7 +114,7 @@ The following example shows how to export the document as Word Template (.dotx). {% include code-snippet/document-editor/react/export-cs4/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/export-cs4" %} {% tabs %} @@ -128,18 +128,18 @@ The following example shows how to export the document as Word Template (.dotx). {% include code-snippet/document-editor/react/export-container-cs4/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/export-container-cs4" %} -> 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. +> 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 to 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 it for the serviceUrl property. ->Document Editor features are segregated into individual feature-wise modules. To use word template export, inject the `WordExport` and `SfdtExport` modules using `DocumentEditor.Inject(WordExport, SfdtExport)`. +>Document Editor features are segregated into individual feature-wise modules. To use Word template export, inject the `WordExport` and `SfdtExport` modules using `DocumentEditor.Inject(WordExport, SfdtExport)`. > ->To enable word template export for a document editor instance, set `enableWordExport` to true. +>To enable Word template export for a document editor instance, set `enableWordExport` to true. ## Text export -The following example shows how to export document as text document (.txt). +The following example shows how to export the document as a text document (.txt). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -152,7 +152,7 @@ The following example shows how to export document as text document (.txt). {% include code-snippet/document-editor/react/export-cs3/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/react/export-cs3" %} {% tabs %} @@ -167,8 +167,8 @@ The following example shows how to export document as text document (.txt). {% endhighlight %} {% endtabs %} -> 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. - +> 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 to 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 it for the serviceUrl property. + {% previewsample "/document-processing/code-snippet/document-editor/react/export-container-cs3" %} >Document Editor features are segregated into individual feature-wise modules. To use text export, inject the `TextExport` and `SfdtExport` modules using the `DocumentEditor.Inject(TextExport, SfdtExport)`. @@ -177,7 +177,7 @@ The following example shows how to export document as text document (.txt). ## Export as blob -Document Editor also supports API to store the document into a blob. Refer to the following sample to export document into blob in client-side. +Document Editor also supports an API to store the document into a blob. Refer to the following sample to export the document into a blob on the client side. ```ts @@ -185,7 +185,7 @@ import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { DocumentEditorComponent, WordExport, SfdtExport } from '@syncfusion/ej2-react-documenteditor'; -//Inject require modules. +//Inject required modules. DocumentEditorComponent.Inject(WordExport, SfdtExport); function App() { let documenteditor: DocumentEditorComponent; @@ -207,7 +207,7 @@ ReactDOM.render(, document.getElementById('sample')); ``` -For instance, to export the document as Rich Text Format file, implement an ASP.NET MVC web API controller using DocIO library by passing the DOCX blob. Refer to the following code example. +For instance, to export the document as a Rich Text Format file, implement an ASP.NET MVC web API controller using the DocIO library by passing the DOCX blob. Refer to the following code example. ```csharp //API controller for the conversion. @@ -227,7 +227,7 @@ For instance, to export the document as Rich Text Format file, implement an ASP. ``` -In client-side, you can consume this web service and save the document as Rich Text Format (.rtf) file. Refer to the following example. +On the client side, you can consume this web service and save the document as a Rich Text Format (.rtf) file. Refer to the following example. ```ts @@ -271,7 +271,7 @@ In client-side, you can consume this web service and save the document as Rich T httpRequest.responseType = 'blob'; httpRequest.send(formData); } - //Downlod the document in client side. + //Download the document on the client side. download(fileName: string, extension: string, buffer: Blob, downloadLink: HTMLAnchorElement, hasDownloadAttribute: Boolean): void { if (hasDownloadAttribute) { downloadLink.download = fileName; @@ -299,9 +299,9 @@ In client-side, you can consume this web service and save the document as Rich T ## Online Demo -Explore how to export Word documents in various formats using the React Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/advanced-exporting). +Explore how to export Word documents in various formats using the React Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/advanced-exporting). ## See Also * [Feature modules](./feature-module) -* [How to export the document as pdf?](./how-to/export-document-as-pdf). \ No newline at end of file +* [How to export the document as pdf?](./how-to/export-document-as-pdf) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/faq/sfdt-faqs.md b/Document-Processing/Word/Word-Processor/react/faq/sfdt-faqs.md index db3d061e8d..6d8fe924df 100644 --- a/Document-Processing/Word/Word-Processor/react/faq/sfdt-faqs.md +++ b/Document-Processing/Word/Word-Processor/react/faq/sfdt-faqs.md @@ -1,16 +1,16 @@ --- layout: post title: FAQs about SFDT in React DOCX Editor | Syncfusion -description: Learn all about FAQs on SFDT in the Syncfusion React DOCX Editor component, including its structure and usage. +description: Learn all about FAQs on SFDT in the Syncfusion React Document Editor component, including its structure and usage. control: SFDT format platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# FAQs about SFDT in React DOCX Editor +# FAQs about SFDT in React Document Editor -The frequently asked questions about SFDT in [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) is listed below: +The frequently asked questions about SFDT in [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) are listed below: ## What is SFDT format? @@ -22,7 +22,7 @@ It is not recommended to modify SFDT directly (either manually or programmatical ## What are the advantages of SFDT over DOCX? -SFDT is optimized for web-based document editing scenarios. +SFDT is optimized for web-based document editing scenarios. - It is lightweight and easier to process. @@ -34,9 +34,9 @@ SFDT is optimized for web-based document editing scenarios. SFDT is suitable in the following scenarios: -- Applications where documents are edited within the browser using the Document Editor, and the document state needs to be saved and reopened later in the same editor +- Applications where documents are edited within the browser using the Document Editor, and the document state needs to be saved and reopened later in the same editor. -- Use cases that require efficient storage in a database and quick reloading for further editing +- Use cases that require efficient storage in a database and quick reloading for further editing. ## Can SFDT be converted back to DOCX? diff --git a/Document-Processing/Word/Word-Processor/react/faq/unsupported-file-format.md b/Document-Processing/Word/Word-Processor/react/faq/unsupported-file-format.md index 7d966e390a..eeddce16f4 100644 --- a/Document-Processing/Word/Word-Processor/react/faq/unsupported-file-format.md +++ b/Document-Processing/Word/Word-Processor/react/faq/unsupported-file-format.md @@ -1,29 +1,31 @@ --- layout: post -title: Unsupported file in React Document editor component | Syncfusion -description: Learn here all about Unsupported file in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Unsupported file in React DOCX Editor component | Syncfusion +description: Learn here all about Unsupported file in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Unsupported file platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Why Do I Get the Unsupported Warning Message When Opening a Document in React? +# Unsupported file format warning in React + +If you receive a "The file format you have selected isn't supported. Please choose a valid format." message when opening a document in the [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor), it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning: -If you receive an "The file format you have selected isn't supported. Please choose valid format." message when opening a document in the [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor), it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning: 1. Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT. 2. Corrupted Document: The document file might be corrupted or improperly formatted. Try opening a different document to see if the issue persists. -To avoid this warning, always use the recommended document formats and features supported by the Document Editor. + +To avoid this warning, always use the recommended document formats and features supported by the Document Editor. Document Editor supports the following file formats: -• Word Document (*.docx) -• Syncfusion Document Text (*.sfdt) -• Plain Text (*.txt) -• Word Template (*.dotx) -• HyperText Markup Language (*.html) -• Rich Text Format (*.rtf) -• Word XML Document(*.xml) -• Word 97-2003 Template (*.dot) -• Word 97-2003 Document (*.doc) +* Word Document (*.docx) +* Syncfusion Document Text (*.sfdt) +* Plain Text (*.txt) +* Word Template (*.dotx) +* HyperText Markup Language (*.html) +* Rich Text Format (*.rtf) +* Word XML Document (*.xml) +* Word 97-2003 Template (*.dot) +* Word 97-2003 Document (*.doc) By using these supported formats, you can ensure compatibility and avoid unsupported warning messages when opening documents in the Document Editor. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/feature-module.md b/Document-Processing/Word/Word-Processor/react/feature-module.md index 25ce86a949..d5ac5f2fda 100644 --- a/Document-Processing/Word/Word-Processor/react/feature-module.md +++ b/Document-Processing/Word/Word-Processor/react/feature-module.md @@ -1,55 +1,55 @@ --- layout: post -title: Feature module in React Document editor component | Syncfusion -description: Learn here all about Feature module in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Feature module in React DOCX Editor component | Syncfusion +description: Learn here all about Feature module in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Feature module platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Feature module in React Document editor component +# Feature module in React Document Editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) features are segregated into individual feature-wise modules to enable selective referencing. By default, the document editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of document editor that can be included as required: +[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) features are segregated into individual feature-wise modules to enable selective referencing. By default, the Document Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of Document Editor that can be included as required: * **Print** - Prints the document. * **SfdtExport** - Exports the document as Syncfusion Document Text (.SFDT) file. -* **Selection** - Selects a portion of the document and copy it to the clipboard. -* **Search** - Searches specific text and navigate between the results. +* **Selection** - Selects a portion of the document and copies it to the clipboard. +* **Search** - Searches specific text and navigates between the results. * **WordExport** - Exports the document as Word Document (.DOCX) file. * **TextExport** - Exports the document as Text Document (.TXT) file. -* **Editor** - Performs all kind of editing operations. +* **Editor** - Performs all kinds of editing operations. * **EditorHistory** - Maintains the history of editing operations so that you can perform undo and redo at any time. * User interface options such as context menu, options pane, image resizer, and dialog are available as individual modules. ->In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a document editor instance. +>In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a Document Editor instance. Refer to the following table. -| Module | Dependent modules to be injected for extending the functionality of document editor in your application | Property to enable the functionality for a document editor instance | +| Module | Dependent modules to be injected for extending the functionality of Document Editor in your application | Property to enable the functionality for a Document Editor instance | |---|---|---| -|Print|`DocumentEditor.Inject(Print)`|``| -|SfdtExport|`DocumentEditor.Inject(SfdtExport)`|``| -|Selection|`DocumentEditor.Inject(Selection)`|``| -|Search|`DocumentEditor.Inject(Selection, Search)`|``| -|WordExport|`DocumentEditor.Inject(SfdtExport, WordExport)`|``| -|TextExport|`DocumentEditor.Inject(SfdtExport, TextExport)`|``| -|Editor|`DocumentEditor.Inject(Selection, Editor)`|``| -|EditorHistory|`DocumentEditor.Inject(Selection, Editor, EditorHistory)`|``| -|OptionsPane(Find)|`DocumentEditor.Inject(Selection, Search, OptionsPane)`|``| -|OptionsPane(Find and Replace)|`DocumentEditor.Inject(Selection, Search, Editor, OptionsPane)`|``| -|ContextMenu|`DocumentEditor.Inject(Selection, ContextMenu)`|``| -|ImageResizer|`DocumentEditor.Inject(Selection, Editor, ImageResizer)`|``| -|HyperlinkDialog|`DocumentEditor.Inject(Selection, Editor, HyperlinkDialog)`|``| -|TableDialog|`DocumentEditor.Inject(Selection, Editor, TableDialog)`|``| -|FontDialog|`DocumentEditor.Inject(Selection, Editor, FontDialog)`|``| -|ParagraphDialog|`DocumentEditor.Inject(Selection, Editor, ParagraphDialog)`|``| -|BookmarkDialog|`DocumentEditor.Inject(Selection, Editor, BookmarkDialog)`|``| -|PageSetupDialog|`DocumentEditor.Inject(Selection, Editor, PageSetupDialog)`|``| -|TableOfContentsDialog|`DocumentEditor.Inject(Selection, Editor, TableOfContentsDialog)`|``| -|ListDialog|`DocumentEditor.Inject(Selection, Editor, ListDialog)`|``| -|TablePropertiesDialog|`DocumentEditor.Inject(Selection, Editor, TablePropertiesDialog)`|``| -|BordersAndShadingDialog|`DocumentEditor.Inject(Selection, Editor, BordersAndShadingDialog)`|``| -|TableOptionsDialog|`DocumentEditor.Inject(Selection, Editor, TableOptionsDialog)`|``| -|StylesDialog|`DocumentEditor.Inject(Selection, Editor, StylesDialog,StyleDialog)`|``| -|StyleDialog|`DocumentEditor.Inject(Selection, Editor, StyleDialog)`|``| +|Print|`DocumentEditor.Inject(Print)`|``| +|SfdtExport|`DocumentEditor.Inject(SfdtExport)`|``| +|Selection|`DocumentEditor.Inject(Selection)`|``| +|Search|`DocumentEditor.Inject(Selection, Search)`|``| +|WordExport|`DocumentEditor.Inject(SfdtExport, WordExport)`|``| +|TextExport|`DocumentEditor.Inject(SfdtExport, TextExport)`|``| +|Editor|`DocumentEditor.Inject(Selection, Editor)`|``| +|EditorHistory|`DocumentEditor.Inject(Selection, Editor, EditorHistory)`|``| +|OptionsPane(Find)|`DocumentEditor.Inject(Selection, Search, OptionsPane)`|``| +|OptionsPane(Find and Replace)|`DocumentEditor.Inject(Selection, Search, Editor, OptionsPane)`|``| +|ContextMenu|`DocumentEditor.Inject(Selection, ContextMenu)`|``| +|ImageResizer|`DocumentEditor.Inject(Selection, Editor, ImageResizer)`|``| +|HyperlinkDialog|`DocumentEditor.Inject(Selection, Editor, HyperlinkDialog)`|``| +|TableDialog|`DocumentEditor.Inject(Selection, Editor, TableDialog)`|``| +|FontDialog|`DocumentEditor.Inject(Selection, Editor, FontDialog)`|``| +|ParagraphDialog|`DocumentEditor.Inject(Selection, Editor, ParagraphDialog)`|``| +|BookmarkDialog|`DocumentEditor.Inject(Selection, Editor, BookmarkDialog)`|``| +|PageSetupDialog|`DocumentEditor.Inject(Selection, Editor, PageSetupDialog)`|``| +|TableOfContentsDialog|`DocumentEditor.Inject(Selection, Editor, TableOfContentsDialog)`|``| +|ListDialog|`DocumentEditor.Inject(Selection, Editor, ListDialog)`|``| +|TablePropertiesDialog|`DocumentEditor.Inject(Selection, Editor, TablePropertiesDialog)`|``| +|BordersAndShadingDialog|`DocumentEditor.Inject(Selection, Editor, BordersAndShadingDialog)`|``| +|TableOptionsDialog|`DocumentEditor.Inject(Selection, Editor, TableOptionsDialog)`|``| +|StylesDialog|`DocumentEditor.Inject(Selection, Editor, StylesDialog,StyleDialog)`|``| +|StyleDialog|`DocumentEditor.Inject(Selection, Editor, StyleDialog)`|``| These modules should be injected into the documenteditor using the `Inject` directive. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/fields.md b/Document-Processing/Word/Word-Processor/react/fields.md index 4093731529..d95c5eb444 100644 --- a/Document-Processing/Word/Word-Processor/react/fields.md +++ b/Document-Processing/Word/Word-Processor/react/fields.md @@ -1,20 +1,20 @@ --- layout: post -title: Fields in React Document editor component | Syncfusion -description: Learn here all about Fields in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Fields in React DOCX Editor component | Syncfusion +description: Learn here all about Fields in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Fields platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Fields in React Document editor component +# Fields in React Document Editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss. ## Adding Fields -You can add a field to the document by using [`insertField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) method in [`Editor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor/) module. +You can add a field to the document by using [`insertField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) method in [`Editor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor) module. The following example code illustrates how to insert merge field programmatically by providing the field code and field result. @@ -24,14 +24,14 @@ let fieldResult: string = '«First Name»'; documenteditor.editor.insertField(fieldCode, fieldResult); ``` ->Note: Document editor does not validate/process the field code/field result. it simply inserts the field with specified field information. +N> Document Editor does not validate/process the field code/field result. It simply inserts the field with specified field information. ## Update fields -Document Editor provides support for updating bookmark cross reference field. The following example code illustrates how to update bookmark cross reference field. +Document Editor provides support for updating bookmark cross reference fields. The following example code illustrates how to update bookmark cross reference fields. ```ts -//Update all the bookmark cross reference field in the document. +//Update all the bookmark cross reference fields in the document. documenteditor.updateFields(); ``` @@ -47,18 +47,18 @@ The following type of fields are automatically updated in Document Editor. ## Get field info -You can get field code and field result of the current selected field by using [`getFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#getfieldinfo) method in the [`Selection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection/) module. +You can get field code and field result of the current selected field by using [`getFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#getfieldinfo) method in the [`Selection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection) module. ```ts //Gets the field information of the selected field. let fieldInfo: FieldInfo = documenteditor.selection.getFieldInfo(); ``` ->Note: For nested fields, this method returns combined field code and result. +N> For nested fields, this method returns combined field code and result. ## Set field info -You can modify the field code and field result of the current selected field by using [`setFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#setfieldinfo) method in the [`Editor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor/) module. +You can modify the field code and field result of the current selected field by using [`setFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#setfieldinfo) method in the [`Editor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor) module. ```ts //Gets the field information for the selected field. @@ -74,7 +74,7 @@ fieldInfo.result = '«First Name»'; documenteditor.editor.setFieldInfo(fieldInfo); ``` ->Note: For nested field, entire field gets replaced completely with the specified field information. +N> For nested field, entire field gets replaced completely with the specified field information. ## See Also diff --git a/Document-Processing/Word/Word-Processor/react/find-and-replace.md b/Document-Processing/Word/Word-Processor/react/find-and-replace.md index cb72245b63..572e482bd1 100644 --- a/Document-Processing/Word/Word-Processor/react/find-and-replace.md +++ b/Document-Processing/Word/Word-Processor/react/find-and-replace.md @@ -1,20 +1,20 @@ --- layout: post -title: Find and replace in React Document editor component | Syncfusion -description: Learn here all about Find and replace in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Find and replace in React DOCX Editor component | Syncfusion +description: Learn here all about Find and replace in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Find and replace platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Find and replace in React Document editor component +# Find and replace in React Document Editor component -The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more. +The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection, it performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more. ## Options pane -This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code. +This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences can be replaced with another text by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code. ```ts import * as ReactDOM from 'react-dom'; @@ -89,41 +89,41 @@ You can close the options pane by pressing `Esc` key. ## Search -The [`Search`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search/) module of Document Editor exposes the following APIs: +The [`Search`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search) module of Document Editor exposes the following APIs: |API Name|Type |Description| |---|---|---| |[`findAll()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#findall)| Method |Searches for specified text in the whole document and highlights it with yellow.| -|[`searchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#searchresults) |Property |This is an instance of [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchresults/).| +|[`searchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#searchresults) |Property |This is an instance of [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchresults).| |[`find()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#find) | Method |Find immediate occurrence of specified text from cursor position in the document and highlights it with yellow.| ### Find the immediate occurrence in the document Using [`find()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#find) method, you can find the immediate occurrence of specified text from current cursor position in the document. -The following example code illustrates how to use find in Document editor. +The following example code illustrates how to use find in Document Editor. ```ts documenteditor.search.find('Some text', 'None'); ``` ->Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`. +N> Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`. ### Find all the occurrences in the document Using [`findAll()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#findall) method, you can find all the occurrences of specified text in the whole document and highlight it with yellow. -The following example code illustrates how to find All the text in the document. +The following example code illustrates how to find all the text in the document. ```ts documenteditor.search.findAll('Some text', 'None'); ``` ->Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`. +N> Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`. ## Search results -The [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults/) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](https://ej2.syncfusion.com/react/documentation/api/document-editor#searchresultschange) event. This will expose the following APIs: +The [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](https://ej2.syncfusion.com/react/documentation/api/document-editor#searchresultschange) event. This will expose the following APIs: |API Name|Type |Description| |---|---|---| @@ -136,7 +136,7 @@ The [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/documen Using [`replaceAll`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#replaceall), you can replace all the occurrences with specified text. -The following example code illustrates how to use replace All in Document editor. +The following example code illustrates how to use Replace All in Document Editor. ```ts documentEditor.search.findAll ('Some text'); @@ -146,9 +146,9 @@ documentEditor.search.searchResults.replaceAll("Mike"); ### Replace -Using [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext), you can replace the current searched text with specified text and it replace single occurrence. +Using [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext), you can replace the current searched text with specified text and it replaces a single occurrence. ->Note: This [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext) API accepts following control characters +N> This [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext) API accepts following control characters >* New line characters ("\r", "\r\n", "\n") - Inserts a new paragraph and appends the remaining text to the new paragraph. >* Line break character ("\v") - Moves the remaining text to start in new line. >* Tab character ("\t") - Allocates a tab space and continue the next character. @@ -281,4 +281,4 @@ ReactDOM.render(, document.getElementById('sample')); ## See Also * [Options pane](./dialog#options-pane) -* [Feature modules](./feature-module) +* [Feature modules](./feature-module) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/form-fields.md b/Document-Processing/Word/Word-Processor/react/form-fields.md index 31db265718..29f161a1f6 100644 --- a/Document-Processing/Word/Word-Processor/react/form-fields.md +++ b/Document-Processing/Word/Word-Processor/react/form-fields.md @@ -1,16 +1,16 @@ --- layout: post -title: Form fields in React Document editor component | Syncfusion -description: Learn here all about Form fields in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Form fields in React DOCX Editor component | Syncfusion +description: Learn here all about Form fields in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Form fields platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Form fields in React Document editor component +# Form fields in React Document Editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container component provides support for inserting Text, CheckBox, DropDown form fields through in-built toolbar. ![Form Fields](images/toolbar-form-fields.png) @@ -29,7 +29,7 @@ documentEditor.editor.insertFormField('DropDown'); ## Get form field names -All the form fields names form current document can be retrieved using [`getFormFieldNames()`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getformfieldnames). +All the form fields names from current document can be retrieved using [`getFormFieldNames()`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getformfieldnames). ```ts let formFieldsNames: string[] = documentEditor.getFormFieldNames(); @@ -67,14 +67,14 @@ checkboxfieldInfo.defaultValue = true; checkboxfieldInfo.name = "Check2"; documentEditor.setFormFieldInfo('Check1',checkboxfieldInfo); -// Set checkbox form field properties +// Set dropdown form field properties let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo; dropdownfieldInfo.dropdownItems = ['One','Two', 'Three']; dropdownfieldInfo.name = "Drop2"; documentEditor.setFormFieldInfo('Drop1',dropdownfieldInfo); ``` ->Note:If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique. +N> If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique. ## Form Field Shading @@ -124,9 +124,9 @@ documentEditor.resetFormFields(); Document Editor provides support for protecting the document with `FormFieldsOnly` protection. In this protection, user can only fill form fields in the document. -Document editor provides an option to protect and unprotect document using [`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) API. +Document Editor provides an option to protect and unprotect document using [`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) API. -The following example code illustrates how to enforce and stop protection in Document editor container. +The following example code illustrates how to enforce and stop protection in Document Editor container. ```ts import { createRoot } from 'react-dom/client'; @@ -148,8 +148,8 @@ function App() { } return (
    - - + + { @@ -170,7 +170,7 @@ 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. ->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password. +N> In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password. ## Online Demo diff --git a/Document-Processing/Word/Word-Processor/react/global-local.md b/Document-Processing/Word/Word-Processor/react/global-local.md index 11ee908fce..a51d3187c9 100644 --- a/Document-Processing/Word/Word-Processor/react/global-local.md +++ b/Document-Processing/Word/Word-Processor/react/global-local.md @@ -1,20 +1,20 @@ --- layout: post -title: Global local in React Document editor component | Syncfusion -description: Learn here all about Global local in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Global local in React DOCX Editor component | Syncfusion +description: Learn here all about Global local in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Global local platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Global local in React Document editor component +# Global local in React Document Editor component ## Localization -The `Localization` library allows you to localize default text content of the Document Editor. The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component has static text on some features (like find & replace, context-menu, dialogs) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. Please refer the sample link [RTL](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/right-to-left) +The `Localization` library allows you to localize default text content of the Document Editor. The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component has static text on some features (like find & replace, context-menu, dialogs) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. Please refer to the sample link [RTL](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/right-to-left) -Note: Please refer the [Locale](https://github.com/syncfusion/ej2-locale). +N> Please refer to the [Locale](https://github.com/syncfusion/ej2-locale). ## Document Editor @@ -262,7 +262,7 @@ Direction | Direction Table direction | Table direction Indent from right | Indent from right Contextual Spacing | Don't add space between the paragraphs of the same styles -Password Mismatch | The password don't match +Password Mismatch | The passwords don't match Restrict Editing | Restrict Editing Formatting restrictions | Formatting restrictions Allow formatting | Allow formatting diff --git a/Document-Processing/Word/Word-Processor/react/overview.md b/Document-Processing/Word/Word-Processor/react/overview.md index 1dba633296..0b35ab9566 100644 --- a/Document-Processing/Word/Word-Processor/react/overview.md +++ b/Document-Processing/Word/Word-Processor/react/overview.md @@ -1,62 +1,57 @@ --- layout: post title: Overview of React DOCX Editor | Syncfusion -description: Learn about the React DOCX Editor control, which enables you to create, edit, view, and print Word documents. +description: Learn about the React Document Editor control, which enables you to create, edit, view, and print Word documents. control: Index platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Overview of the React DOCX Editor +# Overview of the React Document Editor -The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-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 [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-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 React DOCX Editor](./images/docx-editor.png) +![Output of React 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) the 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). +* 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 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 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. +* Provides support to perform [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) 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: +The Document Editor component requires server-side interactions for the following operations: -* Open file formats other than SFDT +* Open file formats other than SFDT +* Paste with formatting +* Restrict editing +* Spell check +* Save as file formats other than SFDT and DOCX -* Paste with formatting - -* 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. \ No newline at end of file