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
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Accessibility in Angular DOCX Editor

The accessibility compliance for the [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component is outlined below.
The accessibility compliance for the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component is outlined below.

| Accessibility Criteria | Compatibility |
| -- | -- |
Expand Down Expand Up @@ -38,15 +38,15 @@ The accessibility compliance for the [Angular Document Editor](https://www.syncf

## Keyboard interaction

The Document Editor supports [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.
The DOCX Editor supports [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.

The following accessibility compliance summary applies to the `@syncfusion/ej2-angular-documenteditor` package.

## 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 DOCX 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 DOCX 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 DOCX Editor component with accessibility tools.

{% previewsample "/document-processing/samples/document-editor/angular/accessibility-cs1" %}

Expand Down
8 changes: 4 additions & 4 deletions Document-Processing/Word/Word-Processor/angular/bookmark.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ domainurl: ##DomainURL##

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.

[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-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.
[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-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.
Expand Down Expand Up @@ -79,7 +79,7 @@ this.container.documentEditor.editor.insertText('Hello World');

## Show or Hide bookmark

You can show or hide the bookmark indicators around bookmarked items in Document Editor component.
You can show or hide the bookmark indicators around bookmarked items in DOCX Editor component.

The following example code illustrates how to show or hide the bookmark indicators around bookmarked items.

Expand All @@ -89,7 +89,7 @@ this.container.documentEditor.documentEditorSettings.showBookmarks = true;

## Bookmark Dialog

The following example shows how to open bookmark dialog in Document Editor.
The following example shows how to open bookmark dialog in DOCX Editor.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -105,7 +105,7 @@ The following example shows how to open bookmark dialog in Document Editor.

## Online Demo

Explore how to insert and manage bookmarks in Word documents using the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/links-bookmarks).
Explore how to insert and manage bookmarks in Word documents using the Angular DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/links-bookmarks).

## See Also

Expand Down
8 changes: 4 additions & 4 deletions Document-Processing/Word/Word-Processor/angular/chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ domainurl: ##DomainURL##

# Charts in Angular DOCX Editor

[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides chart preservation support. Using the Document Editor, you can view chart reports from your Word document.
[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides chart preservation support. Using the DOCX Editor, you can view chart reports from your Word document.

The following example shows chart preservation in the Document Editor.
The following example shows chart preservation in the DOCX Editor.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -28,7 +28,7 @@ The following example shows chart preservation in the Document Editor.

## Supported Chart Types

The following chart types are supported in the Document Editor:
The following chart types are supported in the DOCX Editor:
* Scatter_Markers
* Bubble
* Area
Expand All @@ -51,4 +51,4 @@ The following chart types are supported in the Document Editor:

## Online Demo

Explore how to preserve charts in Word documents using the Angular Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/chart).
Explore how to preserve charts in Word documents using the Angular DOCX Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/chart).
26 changes: 13 additions & 13 deletions Document-Processing/Word/Word-Processor/angular/clipboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,35 @@ domainurl: ##DomainURL##

# Clipboard in Angular DOCX Editor

[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) takes advantage of the system clipboard and allows you to copy or move a portion of the document into the clipboard in HTML format, so that it can be pasted in any application that supports clipboard.
[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) takes advantage of the system clipboard and allows you to copy or move a portion of the document into the clipboard in HTML format, so that it can be pasted in any application that supports clipboard.

## Copy

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.
Copy a portion of the document to the system clipboard using the built-in context menu of the DOCX Editor. You can also do it programmatically using the following sample code.

```typescript
this.documentEditor.selection.copy();
```

## Cut

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.
Cut a portion of the document to the system clipboard using the built-in context menu of the DOCX Editor. You can also do it programmatically using the following sample code.

```typescript
this.documentEditor.editor.cut();
```

## Paste

Due to limitations, you can paste contents from the system clipboard in the Document Editor only using the 'CTRL + V' keyboard shortcut.
Due to limitations, you can paste contents from the system clipboard in the DOCX Editor only using the 'CTRL + V' keyboard shortcut.

N> Due to browser limitation of getting content from the system clipboard, paste using the API and context menu option doesn't work.

## Local paste (copy/paste within control)

Document Editor exposes an API to enable local paste within the control. On enabling this, the following is performed:
DOCX Editor exposes an API to enable local paste within the control. On enabling this, the following is performed:
* Selected contents will be stored to an internal clipboard in addition to the system clipboard.
* Clipboard paste will be overridden, and internally stored data (SFDT data) that has formatted text will be pasted using paste() API in the Document Editor.
* Clipboard paste will be overridden, and internally stored data (SFDT data) that has formatted text will be pasted using paste() API in the DOCX Editor.

Refer to the following sample code.

Expand Down Expand Up @@ -91,15 +91,15 @@ export class AppComponent {
```

By default, **enableLocalPaste** is false.
When local paste is enabled for a Document Editor instance, you can paste contents programmatically if the internal clipboard has stored data during the last copy operation. Refer to the following sample code.
When local paste is enabled for a DOCX Editor instance, you can paste contents programmatically if the internal clipboard has stored data during the last copy operation. Refer to the following sample code.

```typescript
this.documentEditor.editor.paste();
```

### Paste options in context menu

In Document Editor, paste options in the context menu will be in disabled state if you try to copy/paste content from outside of the Document Editor. It gets enabled when **enableLocalPaste** is true and trying to copy/paste content inside the Document Editor.
In DOCX Editor, paste options in the context menu will be in disabled state if you try to copy/paste content from outside of the DOCX Editor. It gets enabled when **enableLocalPaste** is true and trying to copy/paste content inside the DOCX Editor.

N> 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.
Alternatively, you can use the keyboard shortcuts,
Expand All @@ -112,16 +112,16 @@ Alternatively, you can use the keyboard shortcuts,

|**EnableLocalPaste** |**Paste behavior details**|
|--------------------------|----------------------|
|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.<br>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.<br>Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.|
|True |Allows to paste content that is copied from the same DOCX Editor component alone and prevents pasting content from system clipboard. Hence the content copied from outside DOCX Editor component can’t be pasted.<br>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 DOCX Editor component using API and context menu options too.|
|False|Allows to paste content from system clipboard. Hence the content copied from both the DOCX Editor component and outside can be pasted.<br>Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.|

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 DOCX 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`](<https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core/>) by the web API service implementation. This library helps you to paste the system clipboard data with formatting.
DOCX Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `enableLocalPaste` property in DOCX Editor to false and use this .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`](<https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core/>) by the web API service implementation. This library helps you to paste the system clipboard data with formatting.

Refer this [page](./web-services-overview) for more details.

Expand All @@ -134,7 +134,7 @@ This paste option appears as follows.

![Image](images/paste.png)

N> When you paste content from an external source into the Document Editor, some formatting or elements may not appear as expected because certain elements are not supported. Refer [here](./unsupported-features) to learn more about unsupported elements.
N> When you paste content from an external source into the DOCX Editor, some formatting or elements may not appear as expected because certain elements are not supported. Refer [here](./unsupported-features) to learn more about unsupported elements.

## See Also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ To support collaborative editing, it's crucial to have a backing system that tem

With the distributed cache or database, all the editing operations are queued in order, and conflict resolution is performed using the `Operational Transformation` algorithm.

N> 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.
N> To calculate the average requests per second of your application, assume the DOCX 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.

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ domainurl: ##DomainURL##

# Collaborative Editing in Angular DOCX Editor using ASP.NET Core

[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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.
[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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

The following are needed to enable collaborative editing in Document Editor.
The following are needed to enable collaborative editing in DOCX Editor.

- SignalR
- Redis
Expand Down Expand Up @@ -96,7 +96,7 @@ The configuration and storage size of the Redis cache can be adjusted based on t

Collaborative editing is built using three main components:

### Client (Angular Document Editor)
### Client (Angular DOCX Editor)

- Captures user edits in the document

Expand All @@ -122,15 +122,15 @@ Collaborative editing is built using three main components:

## Integrate collaborative editing in client side

### Step 1: Integrate Document Editor in Angular sample
### Step 1: Integrate DOCX Editor in Angular sample

Refer to the following documentation to get started with the [Angular Document Editor](https://help.syncfusion.com/document-processing/word/word-processor/angular/getting-started)
Refer to the following documentation to get started with the [Angular DOCX Editor](https://help.syncfusion.com/document-processing/word/word-processor/angular/getting-started)

### Step 2: Enable collaborative editing

To enable collaborative editing, inject `CollaborativeEditingHandler` and set the `enableCollaborativeEditing` property to true in the Document Editor.
To enable collaborative editing, inject `CollaborativeEditingHandler` and set the `enableCollaborativeEditing` property to true in the DOCX Editor.

The following code snippet demonstrates how to enable collaborative editing in the Document Editor.
The following code snippet demonstrates how to enable collaborative editing in the DOCX Editor.

{% tabs %}
{% highlight ts tabtitle="app.ts" %}
Expand Down Expand Up @@ -179,7 +179,7 @@ export class App {

To broadcast changes and receive updates from remote users, install the [Microsoft SignalR npm](https://www.npmjs.com/package/@microsoft/signalr) package in the Angular application.

The following code snippet demonstrates how to configure SignalR in the Document Editor.
The following code snippet demonstrates how to configure SignalR in the DOCX Editor.

{% tabs %}
{% highlight ts tabtitle="app.ts" %}
Expand Down Expand Up @@ -314,7 +314,7 @@ openDocument(responseText: string, roomName: string): void {

Changes made on the client side must be transmitted to the server to be broadcast to other connected users.

The following code snippet demonstrates how to send changes to the server using the `contentChange` event in the Document Editor.
The following code snippet demonstrates how to send changes to the server using the `contentChange` event in the DOCX Editor.

{% tabs %}
{% highlight ts tabtitle="app.ts" %}
Expand All @@ -333,7 +333,7 @@ The complete version of the code discussed above is available at the following [

## Integrate collaborative editing in server side

### Step 1: Create the Document Editor web service project
### Step 1: Create the DOCX Editor web service project

Create an ASP.NET Core web service to handle server-side operations.

Expand Down
Loading