Skip to content
Open
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
20 changes: 10 additions & 10 deletions Document-Processing/Word/Word-Processor/asp-net-mvc/overview.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
---
layout: post
title: Overview of ASP.NET MVC DOCX Editor | Syncfusion
description: Learn about the ASP.NET MVC DOCX Editor control, which enables you to create, edit, view, and print Word documents.
description: Learn about the ASP.NET MVC Document Editor component, which enables you to create, edit, view, and print Word documents.
platform: document-processing
control: Index
documentation: ug
---


# Overview of the ASP.NET MVC DOCX Editor
# Overview of the ASP.NET MVC Document Editor component

The Syncfusion<sup style="font-size:70%">&reg;</sup> [ASP.NET MVC DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-mvc-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 ASP.NET MVC DOCX Editor](./images/docx-editor.png)
![Output of ASP.NET MVC 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).
* 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 track the inserted and deleted content.
* Provides support to insert and edit [form fields](./form-fields).
* Provides support to insert and edit [comments](./comments).
* Provides support to track inserted and deleted content.
* 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 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.
* [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.
* [Localizes](./global-local) all static text to any desired language.
* Allows you to create a lightweight Word viewer using module injection to view and [print](./print) Word documents.
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Paragraph Format in ASP.NET MVC Document Editor Control | Syncfusion
title: Paragraph Format in ASP.NET MVC DOCX Editor Control | Syncfusion
description: Learn here all about paragraph format in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Paragraph Format
documentation: ug
---


# Working with Paragraph Formatting
# Working with Paragraph Formatting in ASP.NET MVC Document Editor

Document editor supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.

Expand All @@ -17,16 +17,16 @@ Document editor supports various paragraph formatting options such as text align
You can modify the left or right indentation of selected paragraphs using the following sample code.

```typescript
documenteditor.selection.paragraphFormat.leftIndent= 24;
documenteditor.selection.paragraphFormat.rightIndent= 24;
documenteditor.selection.paragraphFormat.leftIndent = 24;
documenteditor.selection.paragraphFormat.rightIndent = 24;
```

## Special indentation

You can define special indent for the first line of the paragraph using the following sample code.
You can define special indentation for the first line of the paragraph using the following sample code.

```typescript
documenteditor.selection.paragraphFormat.firstLineIndent= 24;
documenteditor.selection.paragraphFormat.firstLineIndent = 24;
```

## Increase indent
Expand All @@ -50,7 +50,7 @@ documenteditor.editor.decreaseIndent()
You can get or set the text alignment of selected paragraphs using the following sample code.

```typescript
documenteditor.selection.paragraphFormat.textAlignment= 'Center' | 'Left' | 'Right' | 'Justify';
documenteditor.selection.paragraphFormat.textAlignment = 'Center' | 'Left' | 'Right' | 'Justify';
```

You can toggle the text alignment of selected paragraphs by specifying a value using the following sample code.
Expand All @@ -65,19 +65,19 @@ You can define the line spacing and its type for selected paragraphs using the f

```typescript
// Set line spacing type
documenteditor.selection.paragraphFormat.lineSpacingType='AtLeast';
documenteditor.selection.paragraphFormat.lineSpacingType = 'AtLeast';
// Set line spacing value (supports both integer and float)
documenteditor.selection.paragraphFormat.lineSpacing= 6; // Integer value
documenteditor.selection.paragraphFormat.lineSpacing= 6.5; // Float value
documenteditor.selection.paragraphFormat.lineSpacing = 6; // Integer value
documenteditor.selection.paragraphFormat.lineSpacing = 6.5; // Float value
```

## Paragraph spacing

You can define the spacing before or after the paragraph by using the following sample code.

```typescript
documenteditor.selection.paragraphFormat.beforeSpacing= 24;
documenteditor.selection.paragraphFormat.afterSpacing= 24;
documenteditor.selection.paragraphFormat.beforeSpacing = 24;
documenteditor.selection.paragraphFormat.afterSpacing = 24;
```

You can also set automatic spacing before and after the paragraph by using the following sample code.
Expand All @@ -87,7 +87,7 @@ documenteditor.selection.paragraphFormat.spaceBeforeAuto = true;
documenteditor.selection.paragraphFormat.spaceAfterAuto = true;
```

N> If auto spacing property is enabled, then value defined in the `beforeSpacing` and `afterSpacing` property will not be considered.
N> If auto spacing property is enabled, then the value defined in the `beforeSpacing` and `afterSpacing` properties will not be considered.

## Pagination properties

Expand All @@ -103,11 +103,11 @@ documenteditor.selection.paragraphFormat.keepWithNext = true;
documenteditor.selection.paragraphFormat.keepLinesTogether = true;
```

## Paragraph Border
## Paragraph border

You can apply borders to the paragraphs in a Word document. Using borders, decorate the paragraphs to set them apart from other paragraphs in the document.
You can apply borders to the paragraphs in a Word document. Using borders, you can decorate the paragraphs to set them apart from other paragraphs in the document.

The following example code illustrates how to apply box border for the selected paragraphs.
The following example code illustrates how to apply a box border to the selected paragraphs.

```typescript
// left
Expand All @@ -132,11 +132,11 @@ documenteditor.selection.paragraphFormat.borders.bottom.color = "#000000";

```

N> At present, the Document editor component displays all the border styles as single line. But you can apply any border style and get the proper display in Microsoft Word app when opening the exported Word document.
N> At present, the Document editor component displays all the border styles as a single line. But you can apply any border style and get the proper display in the Microsoft Word app when opening the exported Word document.

## Show or Hide Paragraph marks
## Show or hide paragraph marks

You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document editor component. These marks help identify the start and end of a paragraph and all the hidden formatting symbols in a Word document.
You can show or hide the hidden formatting symbols like spaces, tabs, paragraph marks, and breaks in the Document editor component. These marks help identify the start and end of a paragraph and all the hidden formatting symbols in a Word document.

The following example code illustrates how to show or hide paragraph marks.

Expand Down
27 changes: 15 additions & 12 deletions Document-Processing/Word/Word-Processor/asp-net-mvc/print.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Print in ASP.NET MVC Document Editor Control | Syncfusion
description: Learn here all about print in Syncfusion ASP.NET MVC Document Editor control of Syncfusion Essential JS 2 and more.
title: Print in ASP.NET MVC DOCX Editor Control | Syncfusion
description: Learn here all about print in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Print
documentation: ug
---


# Print in Document Editor Control
# Print in ASP.NET MVC Document Editor component

To print the document, use the `print` method from document editor instance.
To print the document, use the `print` method from the document editor instance.


{% tabs %}
Expand Down Expand Up @@ -40,31 +40,33 @@ N> 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` in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it is processed for print. Using printDevicePixelRatio API, you can increase the image quality based on your requirement.
Document editor provides an option to improve the print quality using `printDevicePixelRatio` in Document editor settings. Document editor uses a canvas approach to render content. Then, the canvas is converted to an image and it is processed for print. Using the printDevicePixelRatio API, you can increase the image quality based on your requirement.


{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/print/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Print.cs" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}



N> 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.
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.


{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/document-editor/asp-net-mvc/print-window/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Print-window.cs" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}



Expand All @@ -75,19 +77,20 @@ Some of the print options cannot be configured using JavaScript.
* [`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.


{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/document-editor/asp-net-mvc/print-dialog/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Print-dialog.cs" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}



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` method in document editor instance and open the SFDT data in another instance of document editor in separate window.
By customizing margins, paper, 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` method in the document editor instance and open the SFDT data in another instance of the document editor in a separate window.


{% tabs %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Restrict Editing in ASP.NET MVC Document Editor Component| Syncfusion
title: Restrict Editing in ASP.NET MVC DOCX Editor Component | Syncfusion
description: Learn here all about Restrict Editing in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Restrict Editing
documentation: ug
---


# Restrict Editing in Document Editor Component
# Restrict Editing in ASP.NET MVC Document Editor component

Document Editor provides support to restrict editing. When the protected document includes range permission, then unique user or user group is only authorized to edit separate text area.
Document Editor provides support to restrict editing. When the protected document includes range permission, then only a 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.

```typescript
container.documentEditor.currentUser = '[email protected]';
Expand All @@ -26,7 +26,7 @@ container.documentEditor.currentUser = '[email protected]';
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.

### Insert editable region
Use the `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` 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 @@ -73,12 +73,12 @@ container.documentEditor.documentEditorSettings.highlightEditableRanges = true;

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 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 the more users option and add users 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 apply the chosen editing restrictions, click the **YES, START ENFORCING PROTECTION** button. A dialog box displays, asking for a password to protect the document.
* To stop protection, select the **STOP PROTECTION** button. A dialog box displays, asking for a password to stop protection.

## Online Demo

Expand Down
18 changes: 9 additions & 9 deletions Document-Processing/Word/Word-Processor/asp-net-mvc/ribbon.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
---
layout: post
title: Ribbon in ASP.NET MVC Document editor control | Syncfusion
description: Learn here all about the Ribbon UI in Syncfusion ASP.NET MVC Document editor control, how to switch between Ribbon and Toolbar modes.
title: Ribbon in ASP.NET MVC DOCX Editor Control | Syncfusion
description: Learn here all about the Ribbon UI in Syncfusion ASP.NET MVC Document Editor component, and how to switch between Ribbon and Toolbar modes.
platform: document-processing
control: Ribbon
documentation: ug
domainurl: ##DomainURL##
---

# Ribbon in ASP.NET MVC Document Editor Control
# Ribbon in ASP.NET MVC Document Editor component

The Document Editor provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document.

You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** Ribbon layouts.

## Enable Ribbon Mode

To enable Ribbon in Document Editor, use the `toolbarMode` property of `DocumentEditorContainer`. The available toolbar modes are:
To enable the Ribbon in the Document Editor, use the `toolbarMode` property of `DocumentEditorContainer`. The available toolbar modes are:

- **'Toolbar'** - The traditional toolbar UI.
- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.

By default, `toolbarMode` is `Toolbar`.

The following code shows the how to enable the `Ribbon` in Document Editor.
The following code shows how to enable the `Ribbon` in the Document Editor.

```typescript
```cshtml

@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").ServiceUrl("api/documenteditor/").Render()
<script>
Expand All @@ -42,9 +42,9 @@ Document Editor provides two different Ribbon layouts:

By default, `ribbonLayout` is set to `Simplified`.

The following code shows the how to configure the ribbon layout in Document Editor:
The following code shows how to configure the ribbon layout in the Document Editor:

```typescript
```cshtml

@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").RibbonLayout("Classic").ServiceUrl("api/documenteditor/").Render()
<script>
Expand Down