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
60 changes: 28 additions & 32 deletions Document-Processing/Word/Word-Processor/javascript-es5/overview.md
Original file line number Diff line number Diff line change
@@ -1,61 +1,57 @@
---
layout: post
title: Overview of JavaScript (ES5) Document editor control | Syncfusion
description: Learn about the JavaScript (ES5) DOCX Editor control, which enables you to create, edit, view, and print Word documents
title: Overview of JavaScript (ES5) DOCX Editor | Syncfusion
description: Learn about the JavaScript (ES5) Document Editor control, which enables you to create, edit, view, and print Word documents.
platform: document-processing
control: Index
documentation: ug
domainurl: ##DomainURL##
---

# Overview of the JavaScript (ES5) DOCX Editor
# Overview of the JavaScript (ES5) Document Editor

The [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats.
The [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats.

![Output of JavaScript DOCX Editor](./images/docx-editor.png)
![Output of JavaScript Document Editor](./images/docx-editor.png)

## Key Features

* [Opens](./import) the native `Syncfusion Document Text (*.sfdt)` format documents in the client-side.
* [Saves the documents](./export) in the client-side as `Syncfusion Document Text (*.sfdt)` and `Word document (*.docx)`.
* [Opens](./import) native `Syncfusion Document Text (*.sfdt)` format documents on the client side.
* [Saves the documents](./export) on the client side as `Syncfusion Document Text (*.sfdt)` and `Word document (*.docx)`.
* Supports document elements like text, [image](./image), [table](./table), fields, [bookmark](./bookmark), [shapes](./shapes), [section](./section-format), [header and footer](./header-footer).
* Supports the commonly used fields like [hyperlink](./link), page number, page count, and table of contents.
* Supports formats like [text](./text-format), [paragraph](./paragraph-format), [bullets and numbering](./list-format), [table](./table-format) and [page settings](./section-format).
* Provides support to create, edit, and apply [paragraph and character styles](./styles).
* Provides support to [find and replace](./find-and-replace) text within the document.
* Supports formats like [text](./text-format), [paragraph](./paragraph-format), [bullets and numbering](./list-format), [table](./table-format), and [page settings](./section-format).
* Supports creating, editing, and applying [paragraph and character styles](./styles).
* Supports [find and replace](./find-and-replace) text within the document.
* Supports all the common editing and formatting operations along with [undo and redo](./history).
* Provides support to [cut](./clipboard#cut), [copy](./clipboard#copy), and [paste](./clipboard#paste) rich text contents within the component. Also allows pasting simple text to and from other applications.
* Provides support to insert, and edit [form fields](./form-fields).
* Provides support to insert, and edit [comments](./comments).
* Provides support to track the [inserted and deleted content](./track-changes).
* Provides support to perform [spell checking](./spell-check) for any input text
* Allows user interactions like [zoom](./scrolling-zooming#zooming), [scroll](./scrolling-zooming), select contents through touch, mouse, and keyboard.
* Supports [cut](./clipboard#cut), [copy](./clipboard#copy), and [paste](./clipboard#paste) of rich text content within the component. Also supports pasting plain text to and from other applications.
* Supports inserting and editing [form fields](./form-fields).
* Supports inserting and editing [comments](./comments).
* Supports tracking [inserted and deleted content](./track-changes).
* Supports [spell checking](./spell-check) for any input text.
* Allows user interactions like [zoom](./scrolling-zooming#zooming), [scroll](./scrolling-zooming), and selecting contents through touch, mouse, and keyboard.
* Provides intuitive UI options like context menu, [dialogs](./dialog), and [navigation pane](./find-and-replace#options-pane).
* Provides a [ribbon interface](./ribbon) similar to Microsoft Word, with tab-based commands for quick and intuitive access to features.
* Provides a [ribbon interface](./ribbon) similar to Microsoft Word, with tab-based commands for quick and intuitive access to features.
* [Localizes](./global-local) all the static text to any desired language.
* Allows to create a lightweight Word viewer using module injection to view and [prints](./print) Word documents.
* Provides a [server-side helper library](./web-services-overview) to open the Word documents like DOCX, DOC, WordML, RTF, and Text, by converting it to SFDT file format.
* Allows creating a lightweight Word viewer using module injection to view and [print](./print) Word documents.
* Provides a [server-side helper library](./web-services) to open Word documents like DOCX, DOC, WordML, RTF, and Text by converting them to SFDT file format.

## Supported platforms for server-side dependencies
The Document Editor component requires server-side interactions for the following operations:

* Open file formats other than SFDT
The Document Editor component requires server-side interactions for the following operations:

* Paste with formatting
* Open file formats other than SFDT
* Paste with formatting
* Restrict editing
* Spell check
* Save as file formats other than SFDT and DOCX

* Restrict editing

* Spell check

* Save as file formats other than SFDT and DOCX


You can deploy web APIs for server-side dependencies of Document Editor component in the following platforms.
You can deploy web APIs for the server-side dependencies of the Document Editor component on the following platforms.

* [ASP.NET Core](./web-services/core)
* [ASP.NET MVC](./web-services/mvc)
* [Java](./web-services/java)

To know more about server-side dependencies, refer this [page](./web-services-overview).
To know more about server-side dependencies, refer to this [page](./web-services-overview).

N> If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
N> If you don't require the above functionalities, then you can deploy it as a pure client-side component without any server-side interactions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Paragraph format in JavaScript (ES5) Document editor | Syncfusion
description: Learn here all about Paragraph format in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more.
title: Paragraph format in JavaScript (ES5) DOCX Editor | Syncfusion
description: Learn about paragraph formatting in the Syncfusion JavaScript (ES5) Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Paragraph format
documentation: ug
domainurl: ##DomainURL##
---

# Paragraph format in JavaScript (ES5) Document editor control
# Paragraph format in JavaScript (ES5) Document Editor component

[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.

Expand All @@ -23,23 +23,23 @@ documenteditor.selection.paragraphFormat.rightIndent = 24;

## Special indentation

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

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

## Increase indent

You can increase the left indent of selected paragraphs by a factor of 36 points using the following sample code.
You can increase the left indent of selected paragraphs by 36 points using the following sample code.

```ts
documenteditor.editor.increaseIndent()
```

## Decrease indent

You can decrease the left indent of selected paragraphs by a factor of 36 points using the following sample code.
You can decrease the left indent of selected paragraphs by 36 points using the following sample code.

```ts
documenteditor.editor.decreaseIndent()
Expand All @@ -53,13 +53,13 @@ You can get or set the text alignment of selected paragraphs using the following
documenteditor.selection.paragraphFormat.textAlignment = 'Center' | 'Left' | 'Right' | 'Justify';
```

>Note: Starting from `v19.4.0.x`, the text justification of Document editor component matches alignment of Microsoft Word 2013 and newer versions based on the compatibility mode present in the document. The DOCX document created using Microsoft Word 2013 and newer versions will have the compatibility mode `Word2013` and follows a special behavior in justifying the text. You can retain the text justification behavior like old versions by modifying the compatibility mode as `Word2010`.
N> Starting from `v19.4.0.x`, the text justification of Document Editor component matches alignment of Microsoft Word 2013 and newer versions based on the compatibility mode present in the document. The DOCX document created using Microsoft Word 2013 and newer versions will have the compatibility mode `Word2013` and follows a special behavior in justifying the text. You can retain the text justification behavior like old versions by modifying the compatibility mode as `Word2010`.

```ts
documenteditor.documentSettings.compatibilityMode = 'Word2010';
```

>Note: The Document editor component assumes the compatibility mode as `Word2013` by default, if it is not defined for a document.
N> The Document Editor component assumes the compatibility mode as `Word2013` by default, if it is not defined for a document.

![Image](images/word2013justification.png)

Expand Down Expand Up @@ -98,27 +98,11 @@ documenteditor.selection.paragraphFormat.spaceBeforeAuto = true;
documenteditor.selection.paragraphFormat.spaceAfterAuto = true;
```

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

## Pagination properties

You can enable or disable the following pagination properties for the paragraphs in a Word document.

* Widow/Orphan control - whether the first and last lines of the paragraph are to remain on the same page as the rest of the paragraph when paginating the document.
* Keep with next - whether the specified paragraph remains on the same page as the paragraph that follows it while paginating the document.
* Keep lines together - whether all lines in the specified paragraphs remain on the same page while paginating the document.

The following example code illustrates how to enable or disable these pagination properties for the selected paragraphs.

```ts
documenteditor.selection.paragraphFormat.widowControl = false;
documenteditor.selection.paragraphFormat.keepWithNext = true;
documenteditor.selection.paragraphFormat.keepLinesTogether = true;
```

## Paragraph Border
## Paragraph border

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

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

Expand All @@ -144,11 +128,27 @@ documenteditor.selection.paragraphFormat.borders.bottom.lineWidth = 3;
documenteditor.selection.paragraphFormat.borders.bottom.color = "#000000";
```

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

## Pagination properties

You can enable or disable the following pagination properties for the paragraphs in a Word document.

* Widow/Orphan control - whether the first and last lines of the paragraph are to remain on the same page as the rest of the paragraph when paginating the document.
* Keep with next - whether the specified paragraph remains on the same page as the paragraph that follows it while paginating the document.
* Keep lines together - whether all lines in the specified paragraphs remain on the same page while paginating the document.

The following example code illustrates how to enable or disable these pagination properties for the selected paragraphs.

```ts
documenteditor.selection.paragraphFormat.widowControl = false;
documenteditor.selection.paragraphFormat.keepWithNext = true;
documenteditor.selection.paragraphFormat.keepLinesTogether = true;
```

## Show or Hide Paragraph marks

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

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

Expand All @@ -173,7 +173,7 @@ The following sample demonstrates the paragraph formatting options using a toolb

## Online Demo

Explore how to apply paragraph formatting in Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/paragraph-formatting.html).
Explore how to apply paragraph formatting in Word documents using the JavaScript (ES5) Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/paragraph-formatting.html).

## See Also

Expand Down
Loading