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
@@ -1,22 +1,22 @@
---
layout: post
title: Hide Toolbar and Panes in Angular Document Editor | Syncfusion
description: Learn here all about Hide tool bar and properties pane in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Hide Toolbar and Panes in Angular DOCX Editor | Syncfusion
description: Learn here all about Hide tool bar and properties pane in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Hide tool bar and properties pane
documentation: ug
domainurl: ##DomainURL##
---

# Hide tool bar and properties pane in Angular Document editor component
# Hide toolbar and properties pane in Angular Document Editor component

**Document editor container** provides the main document view area along with the built-in toolbar and properties pane.
**Document Editor Container** provides the main document view area along with the built-in toolbar and properties pane.

**Document editor** provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application.
**Document Editor** provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application.

## Hide the properties pane

By default, [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) container has built-in properties pane which contains options for formatting text, table, image and header and footer. You can use [`showPropertiesPane`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documentEditorContainerModel#showpropertiespane) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documentEditorContainerModel/) to hide the properties pane.
By default, Document Editor Container has built-in properties pane which contains options for formatting text, tables, images, headers, and footers. You can use [`showPropertiesPane`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documentEditorContainerModel#showpropertiespane) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documentEditorContainerModel) to hide the properties pane.

The following example code illustrates how to hide the properties pane.

Expand Down Expand Up @@ -50,11 +50,11 @@ export class AppComponent implements OnInit {

> 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: Positioning and customizing the properties pane in Document editor container is not possible. Instead, you can hide the exiting properties pane and create your own pane using public API's.
N> Positioning and customizing the properties pane in the Document Editor Container is not possible. Instead, you can hide the existing properties pane and create your own pane using public APIs.

## Hide the toolbar

You can use [`enableToolbar`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documentEditorContainerModel#enabletoolbar) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documentEditorContainerModel/) to hide the existing toolbar.
You can use [`enableToolbar`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documentEditorContainerModel#enabletoolbar) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documentEditorContainerModel) to hide the existing toolbar.

The following example code illustrates how to hide the existing toolbar.

Expand Down Expand Up @@ -87,6 +87,6 @@ export class AppComponent implements OnInit {

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

## See Also
## See also

* [How to customize the toolbar](../how-to/customize-tool-bar)
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
---
layout: post
title: Move Selection to a Position in Angular Document Editor | Syncfusion
description: Learn here all about Move selection to specific position in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Move Selection to a Position in Angular DOCX Editor | Syncfusion
description: Learn here all about Move selection to specific position in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Move selection to specific position
documentation: ug
domainurl: ##DomainURL##
---

# Move Selection to Specific Position in Angular Document Editor
# Move selection to specific position in Angular Document Editor

Using [`select`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#select) API in selection module, You can set cursor position to anywhere in the document.
Using [`select`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#select) API in selection module, you can set the cursor position anywhere in the document.

## Selects content based on start and end hierarchical index
## Select content based on start and end hierarchical index

Hierarchical index will be in below format.
The hierarchical index will be in the format below.

`sectionIndex;blockIndex;offset`

The following code snippet illustrate how to select using hierarchical index.
The following code snippet illustrates how to select using hierarchical index.

```typescript
// Selection will occur between provided start and end offset
this.documentEdContainerIns.documentEditor.editor.insertText("Welcome");
// The below code will select the letters “We” from inserted text Welcome
// The following code will select the letters "We" from inserted text "Welcome"
this.documentEdContainerIns.documentEditor.selection.select("0;0;0", "0;0;2");
```

The following table illustrates about Hierarchical index in detail.
The following table illustrates the hierarchical index in detail.

| Element |Hierarchical Format | Explanation |
|-----------------|-------------|----|
Expand All @@ -38,10 +38,10 @@ The following table illustrates about Hierarchical index in detail.

## Get the selection start and end hierarchical index

Using [`startOffset`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#startoffset), you can get start hierarchical index which denotes the start index of current selection.
Similarly, using [`endOffset`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#endoffset), you can get end hierarchical index which denotes the end index of current selection.
Using [`startOffset`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#startoffset), you can get the start hierarchical index, which denotes the start index of the current selection.
Similarly, using [`endOffset`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#endoffset), you can get the end hierarchical index, which denotes the end index of the current selection.

The following code snippet illustrate how to get the selection start and end offset on selection changes in document.
The following code snippet illustrates how to get the selection start and end offset on selection changes in document.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down Expand Up @@ -71,15 +71,15 @@ export class AppComponent implements OnInit {

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

Document editor have [`selectionChange`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#selectionchange) event which is triggered whenever the selection changes in Document.
Document Editor has [`selectionChange`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#selectionchange) event which is triggered whenever the selection changes in the document.

## Selects the content based on left and top position
## Select the content based on left and top positions

Here, you can specify the [`selection settings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/Settings/) to select the content based on left and top position.
Here, you can specify the [`selection settings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selectionSettings) to select the content based on left and top positions.

x denotes the left position and y denotes the top position and extend denotes whether to extend or update selection.
x denotes the left position, y denotes the top position, and extend denotes whether to extend or update the selection.

Please check below code sample for reference.
Please refer to the code sample below for reference.

```typescript
this.container.documentEditor.selection.select({ x: 188.4814208984375 , y: 662.00005, extend: true });
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Retrieve bookmark as text in Angular Document Editor | Syncfusion
description: Learn here all about Retrieve the bookmark content as text in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Retrieve bookmark as text in Angular DOCX Editor | Syncfusion
description: Learn here all about Retrieve the bookmark content as text in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Retrieve the bookmark content as text
documentation: ug
domainurl: ##DomainURL##
---

# Retrieve the bookmark content as text in Angular Document editor component
# Retrieve the bookmark content as text in Angular Document Editor

You can get the bookmark or whole document content from the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component as plain text and SFDT (rich text).
You can get the bookmark or the whole document content from the [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component as plain text and SFDT (rich text).

## Get the bookmark content as plain text

You can [`selectBookmark`](../bookmark#select-bookmark) API to navigate to the bookmark and use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the bookmark content as plain text from Angular Document Editor component.
You can use the [`selectBookmark`](../bookmark#select-bookmark) API to navigate to the bookmark and use the [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the bookmark content as plain text from Angular Document Editor component.

The following example code illustrates how to get the bookmark content as plain text.

Expand Down Expand Up @@ -63,11 +63,11 @@ export class AppComponent implements OnInit {

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

To get the bookmark content as SFDT (rich text), please check this [`link`](../how-to/get-the-selected-content#get-the-selected-content-as-sfdt-rich-text)
To get the bookmark content as SFDT (rich text), check this [`link`](../how-to/get-the-selected-content#get-the-selected-content-as-sfdt-rich-text).

## Get the whole document content as text

You can use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the whole document content as plain text from Angular Document Editor component.
You can use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the whole document content as plain text from Angular Document Editor component.

The following example code illustrates how to get the whole document content as plain text.

Expand Down Expand Up @@ -111,9 +111,9 @@ export class AppComponent implements OnInit {

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

## Get the whole document content as SFDT(rich text)
## Get the whole document content as SFDT (rich text)

You can use [`serialize`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#serialize) API to get the whole document content as SFDT string from Angular Document Editor component.
You can use [`serialize`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#serialize) API to get the whole document content as SFDT string from Angular Document Editor component.

The following example code illustrates how to get the whole document content as SFDT.

Expand Down Expand Up @@ -157,7 +157,7 @@ export class AppComponent implements OnInit {

## Get the header content as text

You can use [`goToHeader`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#gotoheader) API to navigate the selection to the header and then use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the content as plain text.
You can use [`goToHeader`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#gotoheader) API to navigate the selection to the header and then use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the content as plain text.

The following example code illustrates how to get the header content as plain text.

Expand Down Expand Up @@ -203,4 +203,4 @@ export class AppComponent implements OnInit {

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

Similarly, you can use [`goToFooter`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#gotofooter) API to navigate the selection to the footer and then use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the content as plain text.
Similarly, you can use [`goToFooter`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#gotofooter) API to navigate the selection to the footer and then use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the content as plain text.
Loading