Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions Document-Processing/Word/Word-Processor/react/print.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Print in React Document editor component | Syncfusion
description: Learn here all about Print in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
title: Print in React DOCX Editor | Syncfusion
description: Learn here all about Print in the Syncfusion React Document Editor of Syncfusion Essential JS 2 and more.
control: Print
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Print in React Document editor component
# Print in React Document Editor component

To print the document, use the [`print`](https://ej2.syncfusion.com/react/documentation/api/document-editor#print) method from document editor instance.
To print the document, use the [`print`](https://ej2.syncfusion.com/react/documentation/api/document-editor#print) method from the Document Editor instance.

Refer to the following example for showing a document and print it.
Refer to the following example for showing a document and printing it.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -28,7 +28,7 @@ Refer to the following example for showing a document and print it.

{% previewsample "/document-processing/code-snippet/document-editor/react/print-cs1" %}

Refer to the following example for creating a document and print it.
Refer to the following example for creating a document and printing it.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -44,14 +44,14 @@ Refer to the following example for creating a document and print it.

{% previewsample "/document-processing/code-snippet/document-editor/react/print-cs2" %}

> DocumentEditor features are segregated into individual feature-wise modules. To use print inject `Print` module using the `DocumentEditor.Inject(Print)`.
> To enable print for a document editor instance, set enablePrint as true.
N> 1. DocumentEditor features are segregated into individual feature-wise modules. To use print, inject the `Print` module using `DocumentEditor.Inject(Print)`.
N> 2. To enable print for a Document Editor instance, set `enablePrint` as true.

## Improve print quality

Document editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#printdevicepixelratio) in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using printDevicePixelRatio API, you can increase the image quality based on your requirement.
The Document Editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#printdevicepixelratio) in Document Editor settings. The Document Editor uses a canvas approach to render content. The canvas is then converted to an image and processed for print. Using the `printDevicePixelRatio` API, you can increase the image quality based on your requirement.

The following example code illustrates how to improve the print quality in Document editor container.
The following example code illustrates how to improve the print quality in the Document Editor container.

```ts
import { createRoot } from 'react-dom/client';
Expand All @@ -63,25 +63,28 @@ import {
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
let settings={printDevicePixelRatio :2};
let settings = { printDevicePixelRatio: 2 };
return (
<DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} documentEditorSettings= {settings}/>);
<DocumentEditorContainerComponent
id="container"
height={'590px'}
serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
enableToolbar={true}
documentEditorSettings={settings}
/>
);
}
export default App;
createRoot(document.getElementById('sample')).render(<App />);


```

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

>Note: By default, printDevicePixelRatio value is 1
N> By default, the `printDevicePixelRatio` value is 1.

## Print using window object

You can print the document in document editor by passing the window instance. This is useful to implement print in third party frameworks such as electron, where the window instance will not be available. Refer to the following example.


You can print the document in the Document Editor by passing the window instance. This is useful to implement print in third-party frameworks such as Electron, where the window instance will be available. Refer to the following example.

```ts
import * as ReactDOM from 'react-dom';
Expand All @@ -96,7 +99,7 @@ DocumentEditor.Inject(Print);
function App() {
let documenteditor: DocumentEditorComponent;
React.useEffect(() => {
componentDidMount()
componentDidMount();
}, []);
function componentDidMount() {
//Print the document content.
Expand All @@ -115,7 +118,6 @@ function App() {
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

```

```ts
Expand All @@ -129,14 +131,14 @@ import {
Print,
} from '@syncfusion/ej2-react-documenteditor';

//Inject require module.
//Inject required modules.
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, Print);
function App() {
let documenteditor;
React.useEffect(() => {
ComponentDidMount();
componentDidMount();
}, []);
function ComponentDidMount() {
function componentDidMount() {
//Print the document content.
documenteditor.print(window);
}
Expand Down Expand Up @@ -169,9 +171,7 @@ Some of the print options cannot be configured using JavaScript. Refer to the fo
* [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1/)
* [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox/)

However, you can customize margins, paper, and layout options by modifying the section format properties using page setup dialog


However, you can customize margins, paper, and layout options by modifying the section format properties using the page setup dialog.

```ts
import * as ReactDOM from 'react-dom';
Expand All @@ -183,7 +183,7 @@ import {
Editor,
PageSetupDialog,
} from '@syncfusion/ej2-react-documenteditor';
//Inject require module.
//Inject required modules.
DocumentEditorComponent.Inject(Selection, Editor, PageSetupDialog);
function App() {
let documenteditor;
Expand Down Expand Up @@ -216,7 +216,7 @@ ReactDOM.render(<App />, document.getElementById('sample'));

```

By customizing margins, papers, and layouts, the layout of the document will be changed in document editor. To modify these options during print operation, serialize the document as SFDT using the [`serialize`](https://ej2.syncfusion.com/react/documentation/api/document-editor#serialize) method in document editor instance and open the SFDT data in another instance of document editor in separate window.
By customizing margins, papers, and layouts, the layout of the document will be changed in the Document Editor. To modify these options during the print operation, serialize the document as SFDT using the [`serialize`](https://ej2.syncfusion.com/react/documentation/api/document-editor#serialize) method in the Document Editor instance and open the SFDT data in another instance of the Document Editor in a separate window.

The following example shows how to customize layout options only for printing.

Expand Down
32 changes: 17 additions & 15 deletions Document-Processing/Word/Word-Processor/react/restrict-editing.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: post
title: Restrict Editing in React DOCX Editor | Syncfusion
description: Learn how to enable Restrict Editing in the React DOCX Editor to securely manage document access and control user modifications.
description: Learn how to enable Restrict Editing in the React Document Editor to securely manage document access and control user modifications.
control: Restrict editing
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---


# Restrict Editing in React DOCX Editor
# Restrict Editing in React Document Editor

[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides support for restricting editing within a document. It enables control over how and where content can be modified. This helps limit editing so only specific sections of the document can be changed.
[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides support for restricting editing within a document. It enables control over how and where content can be modified. This helps limit editing so only specific sections of the document can be changed.

## Configure on client side

Document Editor provides options to protect and unprotect a document using the [enforceProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) APIs, enabling various restricting editing operations.
The Document Editor provides options to protect and unprotect a document using the [enforceProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) APIs, enabling various restrict-editing operations.


### Read only mode
### Read-only mode

Document Editor supports protecting a document in read-only mode, where users can only view the content without making changes.
The Document Editor supports protecting a document in read-only mode, where users can only view the content without making changes.

The following example code illustrates how to enforce or remove read-only protection in the Document Editor.

Expand Down Expand Up @@ -68,7 +68,7 @@ export default App;

### Form filling mode

Document Editor supports protecting a document with form-filling restrictions, allowing users to edit only form fields.
The Document Editor supports protecting a document with form-filling restrictions, allowing users to edit only form fields.

The following example code illustrates how to enforce or remove form-filling restrictions in the Document Editor.

Expand Down Expand Up @@ -118,7 +118,7 @@ export default App;

### Comments only mode

Document Editor supports protecting a document in comments-only mode, allowing users to add or edit comments only.
The Document Editor supports protecting a document in comments-only mode, allowing users to add or edit comments only.

The following example code illustrates how to enforce and remove comments-only protection in the Document Editor.

Expand All @@ -136,7 +136,7 @@ function App() {
let container: DocumentEditorContainerComponent;
React.useEffect(() => {
let sfdt = {"sfdt":"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"};
container.documentEditor.open(JSON.stringify(sfdt));
container.documentEditor.open(JSON.stringify(sfdt));
}, []);
function enforceProtection() {
//enforce protection
Expand Down Expand Up @@ -168,7 +168,7 @@ export default App;

### Track changes only mode

Document Editor supports protecting a document in revisions-only mode, allowing users to view the document and make corrections while tracking all changes. Users cannot accept or reject tracked changes; only the author can review and finalize them later.
The Document Editor supports protecting a document in revisions-only mode, allowing users to view the document and make corrections while tracking all changes. Users cannot accept or reject tracked changes; only the author can review and finalize them later.

The following example code illustrates how to enforce and remove revisions-only protection in the Document Editor.

Expand Down Expand Up @@ -218,7 +218,7 @@ export default App;

### Format restrictions

Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly.
The Document Editor enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents `limitToFormatting`, and the third parameter represents `isReadOnly`.

{% tabs %}
{% highlight ts tabtitle="TS" %}
Expand Down Expand Up @@ -246,7 +246,7 @@ For more information on configuring restrict editing on the server side, refer t

The [currentUser](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documenteditor#currentuser) property can be used to authorize the current document user by name, email, or user group.

The following code example demonstrates how to set the currentUser.
The following code example demonstrates how to set the `currentUser`.

{% tabs %}
{% highlight ts tabtitle="TS" %}
Expand All @@ -257,10 +257,12 @@ container.documentEditor.currentUser = 'engineer@mycompany.com';
{% endtabs %}

## Protect document with editable region
User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.

Users can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.

### Insert editable region
Use the [insertEditingRegion](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users.

Use the [insertEditingRegion](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable. This allows you to control editing by giving access to all users or only selected users.

The following example shows how to insert an editable region.
{% tabs %}
Expand Down Expand Up @@ -311,7 +313,7 @@ Restrict Editing Pane provides the following options to manage the document:
* To apply editing restrictions to the current document, select the read only check box.
* To add users to the current document, select more users option and add user from the popup dialog.
* To include range permission to the current document, select parts of the document and choose users who are allowed to freely edit them from the listed check box.
* To apply the chosen editing restrictions, click the **YES,START ENFORCING PROTECTION** button. A dialog box displays asking for a password to protect.
* To apply the chosen editing restrictions, click the **YES, START ENFORCING PROTECTION** button. A dialog box displays asking for a password to protect.
* To stop protection, select **STOP PROTECTION** button. A dialog box displays asking for a password to stop protection.

The following code shows Restrict Editing Pane. To unprotect the document, use password '123'.
Expand Down
Loading