Skip to content

1023472-Update getting started pages of Document Editor #2707

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MohanaselvamJothi wants to merge 9 commits into
base: hotfix/hotfix-v33.2.3
Choose a base branch
from
Open

1023472-Update getting started pages of Document Editor #2707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
cee84d4
Added getting started pages
MohanaselvamJothi Apr 24, 2026
ce236d9
Revise getting started guide for Angular DOCX Editor
MohanaselvamJothi Apr 27, 2026
362bc4a
Revise getting started guide for Angular DOCX Editor
MohanaselvamJothi Apr 27, 2026
9bc1bab
Added images
MohanaselvamJothi Apr 27, 2026
4f895af
Merge branch '1023472-react-docEditor' of https://github.com/syncfusi…
MohanaselvamJothi Apr 27, 2026
54b183c
Updated react page
MohanaselvamJothi Apr 27, 2026
74aace1
Updated getting started
MohanaselvamJothi Apr 27, 2026
3635ff9
Merge branch 'hotfix/hotfix-v33.2.3' of https://github.com/syncfusion…
MohanaselvamJothi Apr 27, 2026
eb3e9d7
Updated getting started
MohanaselvamJothi Apr 27, 2026
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
277 changes: 63 additions & 214 deletions Document-Processing/Word/Word-Processor/angular/getting-started.md
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added Document-Processing/Word/Word-Processor/angular/images/AI-tools.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified Document-Processing/Word/Word-Processor/angular/images/Initial-setup.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...t-Processing/Word/Word-Processor/angular/images/Server-Side-Rendering-setup.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
177 changes: 15 additions & 162 deletions Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
---
layout: post
title: Getting started with JavaScript (ES5) Document editor | Syncfusion
description: Checkout and learn about Getting started with JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more details.
title: Getting Started with JavaScript (ES5) DOCX Editor | Syncfusion
description: Learn how to create a DOCX Editor in a JavaScript application using the Syncfusion® Document Editor control to create, edit, and view Word documents.
platform: document-processing
control: Getting started
documentation: ug
domainurl: ##DomainURL##
---

# Getting started with JavaScript (ES5) Document editor control
# Getting Started with JavaScript (ES5) Document Editor

Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a JavaScript (ES5) application.

The Essential<sup style="font-size:70%">&reg;</sup> JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework designed for compatibility with modern web browsers without requiring build tools.

## Component Initialization

Expand Down Expand Up @@ -82,74 +83,8 @@ This approach downloads and hosts the required files locally, providing better c
<body>
</body>
</html>
```
**Step 5:** Now, add the `Div` element and initiate the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditor** component in the `index.html` by using following code

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Document editor</title>
<!-- EJ2 Document editor dependent material theme -->
<link href="resources/base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<!-- EJ2 DocumentEditor material theme -->
<link href="resources/documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />

<!-- EJ2 Document editor dependent scripts -->
<script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-file-utils.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-compression.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-pdf-export.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-buttons.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-popups.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-inputs.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-lists.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-navigations.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-calendars.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-charts.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-office-chart.min.js" type="text/javascript"></script>
<!-- EJ2 Document editor script -->
<script src="resources/scripts/ej2-documenteditor.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Element which is going to render -->
<div id='DocumentEditor'></div>
<script>
// Initialize DocumentEditor component
var documenteditor = new ej.documenteditor.DocumentEditor({
isReadOnly: false,
serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});

documenteditor.acceptTab = true;

// Enable all the built-in modules
documenteditor.enableAllModules();
documenteditor.pageOutline = '#E0E0E0';

// Document editor control rendering
documenteditor.appendTo('#DocumentEditor');
</script>
</body>
</html>
```

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

**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditor** component.

**Step 7:** To render DocumentEditorContainer component, add the `Div` element and initiate the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditorContainer** component in the `index.html` by using following code
**Step 5:** To render DocumentEditorContainer component, add the `Div` element and initiate the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditorContainer** component in the `index.html` by using following code

```html
<!DOCTYPE html>
Expand Down Expand Up @@ -206,7 +141,8 @@ This approach downloads and hosts the required files locally, providing better c
</html>
```

> 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 hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).


Now, run the `index.html` in web browser, it will render the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditorContainer** component.

Expand All @@ -228,76 +164,7 @@ This approach uses Content Delivery Network (CDN) links to reference the require
>
> Styles: [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-documenteditor/styles/material.css`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-documenteditor/styles/material.css)

**Step 3:** Create a HTML page (index.html) in `app` location and add the CDN link references. Now, add the `Div` element and initiate the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditor** component in the index.html by using following code.

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Document editor</title>
<!-- EJ2 Document editor dependent theme -->
<link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="https://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<!-- EJ2 Document editor theme -->
<link href="https://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />

<!-- EJ2 Document editor dependent scripts -->
<script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
<!-- EJ2 Document editor script -->
<script src="https://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Element which is going to render -->
<div id='DocumentEditor' style='height:350px'></div>
<script>
// Initialize DocumentEditor component
var documenteditor = new ej.documenteditor.DocumentEditor({
height: '370px',
isReadOnly: false,
serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});

documenteditor.acceptTab = true;

// Enable all the built-in modules
documenteditor.enableAllModules();

// Set page border color
documenteditor.pageOutline = '#E0E0E0';

// Document editor control rendering
documenteditor.appendTo('#DocumentEditor');
</script>
</body>
</html>
```

{% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/es5-getting-started-cs1" %}

**Step 4:** Now, run the `index.html` in web browser, it will render the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditor** component.

**Step 5:** To render DocumentEditorContainer component, add the `Div` element and initiate the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditorContainer** component in the index.html by using following code.
**Step 5:** Create a HTML page (index.html) in `app` location and add the CDN link references. Now add the `Div` element and initiate the **Essential<sup style="font-size:70%">&reg;</sup> JS 2 DocumentEditorContainer** component in the index.html by using following code.

```html
<!DOCTYPE html>
Expand Down Expand Up @@ -364,26 +231,12 @@ Now, run the `index.html` in web browser, it will render the **Essential<sup sty

The Document editor component requires server-side interactions for the following operations:

* [Open file formats other than SFDT](./import#convert-word-documents-into-sfdt)
* [Paste with formatting](./clipboard#paste-with-formatting)
* [Restrict editing](./document-management)
* [Spell check](./spell-check)
* [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export)
* Open file formats other than SFDT
* Paste with formatting
* Restrict editing
* Spell check
* Save as file formats other than SFDT and DOCX

>Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.

### Configuring web services

Refer to the [example from GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) to configure the web service and set the [serviceUrl](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#serviceurl).

Syncfusion provides a predefined [Word Processor server Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) targeting ASP.NET Core 2.1 framework. You can directly pull this Docker image and deploy it on a server. You can also create your own Docker image by customizing the existing [Docker project from GitHub](https://github.com/SyncfusionExamples/Word-Processor-Server-Docker).

>Note: Starting from version `v19.3.0.x`, the accuracy of text size measurements has been optimized to match Microsoft Word pagination for most documents. This improvement is enabled by default. You can [disable it to retain the pagination behavior of older versions](./how-to/disable-optimized-text-measuring) if needed.

## Frequently Asked Questions

* [How to localize the Document editor container](./global-local)
* [How to load a document by default](./how-to/open-default-document)
* [How to customize the toolbar](./how-to/customize-tool-bar)
* [How to resize the Document editor component](./how-to/resize-document-editor)
* [How to add a save button to the DocumentEditorContainer toolbar](./how-to/add-save-button-in-toolbar)
For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
Loading