Skip to content

1043287: update blazor files #4059

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
Krishna5272 wants to merge 1 commit into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

1043287: update blazor files #4059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 7 additions & 7 deletions ...ocessing/Word/Word-Processor/blazor/how-to/hide-tool-bar-and-properties-pane.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
layout: post
title: Hide Toolbar and Properties Pane in Blazor DocumentEditor | Syncfusion
title: Hide Toolbar and Properties Pane in Blazor DOCX Editor | Syncfusion
description: Learn how to hide the built-in toolbar properties pane in the Syncfusion Blazor Document Editor component and much more.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# How to hide the Toolbar and Properties Pane in Blazor Document Editor
# How to hide the toolbar and properties pane in Blazor Document Editor

**[Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) container** provides the main document view area along with the built-in toolbar and properties pane.
**[Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (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. Use this component when you want to design your own UI options for your application.

## Hide the properties pane

By default, Document editor container has built-in properties pane which contains options for formatting text, table, image and header and footer. You can use [`ShowPropertiesPane`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_ShowPropertiesPane) API in [`DocumentEditorContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html) to hide the properties pane.
By default, the Document Editor Container has a built-in properties pane that contains options for formatting text, tables, images, and headers and footers. You can use the [`ShowPropertiesPane`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_ShowPropertiesPane) API in the [`DocumentEditorContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html) to hide the properties pane.

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

Expand All @@ -27,7 +27,7 @@ The following example code illustrates how to hide the properties pane.
</SfDocumentEditorContainer>
```

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

Expand Down
38 changes: 19 additions & 19 deletions ...ng/Word/Word-Processor/blazor/how-to/insert-page-number-and-navigate-to-page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
layout: post
title: Page Numbers and Navigation in Blazor DocumentEditor | Syncfusion
description: Learn how to Insert Page number and Navigate to specific page from the Syncfusion Blazor Document Editor component and much more.
title: Page Numbers and Navigation in Blazor DOCX Editor | Syncfusion
description: Learn how to insert page numbers and navigate to a specific page from the Syncfusion Blazor Document Editor component and much more.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# Insert page number and navigate to page in Blazor Document Editor

You can insert page number and navigate to specific page in [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) component by following ways.
You can insert a page number and navigate to a specific page in the [Blazor Document Editor](https://www.syncfusion.com/Document-editor-sdk/blazor-docx-editor) (Document Editor) component in the following ways.

## Insert page number

The [`InsertFieldAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertFieldAsync_System_String_System_String_) API in Editor module is used to insert the Page number in current position. By default, Page number will insert in Arabic number style.
The [`InsertFieldAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertFieldAsync_System_String_System_String_) API in the Editor module is used to insert the page number at the current position. By default, the page number will be inserted in Arabic number style.

N> Currently, Document Editor have options to insert page number at current cursor position.
N> Currently, the Document Editor has an option to insert a page number at the current cursor position.

The following example code illustrates how to insert page number in header.
The following example code illustrates how to insert a page number in the header.

```csharp
@using Syncfusion.Blazor.DocumentEditor
Expand All @@ -31,21 +31,21 @@ The following example code illustrates how to insert page number in header.

public async void OnCreated(object args)
{
// To insert text in cursor position
await container.DocumentEditor.Editor.InsertTextAsync("Document editor");
// To move the selection to header
// To insert text at the cursor position
await container.DocumentEditor.Editor.InsertTextAsync("Document Editor");
// To move the selection to the header
await container.DocumentEditor.Selection.GoToHeaderAsync();
// Insert page number in the current cursor position
// Insert page number at the current cursor position
await container.DocumentEditor.Editor.InsertFieldAsync("PAGE \\* MERGEFORMAT", "1");
}
}
```

## Get page count

The [`GetPageCountAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_GetPageCountAsync) API is used to get the total number of pages in Document.
The [`GetPageCountAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_GetPageCountAsync) API is used to get the total number of pages in the document.

The following example code illustrates how to get the number of pages in Document.
The following example code illustrates how to get the number of pages in the document.

```csharp
@using Syncfusion.Blazor.DocumentEditor
Expand All @@ -59,19 +59,19 @@ The following example code illustrates how to get the number of pages in Documen

public async void OnCreated(object args)
{
// To insert text in cursor position
await container.DocumentEditor.Editor.InsertTextAsync("Document editor");
// To insert text at the cursor position
await container.DocumentEditor.Editor.InsertTextAsync("Document Editor");
// To get the total number of pages
Task<int> pageCount = container.DocumentEditor.GetPageCountAsync();
int pageCount = await container.DocumentEditor.GetPageCountAsync();
}
}
```

## Navigate to specific page
## Navigate to a specific page

Use the [`GoToPageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GoToPageAsync_System_Double_) API in the Selection module to move the selection to the start of the specified page number.

The following example code illustrates how to move selection to specific page.
The following example code illustrates how to move the selection to a specific page.

```csharp
@using Syncfusion.Blazor.DocumentEditor
Expand All @@ -85,7 +85,7 @@ The following example code illustrates how to move selection to specific page.

public async void OnCreated(object args)
{
// To move selection to page number 2
// To move the selection to page number 2
await container.DocumentEditor.Selection.GoToPageAsync(2);
}
}
Expand Down
42 changes: 21 additions & 21 deletions ...Processing/Word/Word-Processor/blazor/how-to/insert-text-in-current-position.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
layout: post
title: Insert text and rich-text in Blazor DocumentEditor | Syncfusion
description: Learn how to insert text, paragraph and rich-text content in Blazor Document Editor component and much more.
title: Insert text and rich-text in Blazor DOCX Editor | Syncfusion
description: Learn how to insert text, a paragraph, and rich-text content in the Blazor Document Editor component and much more.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# Insert Text and Rich-Text Content in Blazor DocumentEditor
# Insert text and rich-text content in Blazor Document Editor

The [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) component supports inserting text, paragraphs, and rich-text content.
The [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) component supports inserting text, paragraphs, and rich-text content.

## Insert text in current cursor position
## Insert text at the current cursor position

Use the [`InsertTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertTextAsync_System_String_) API in the editor module to insert text at the current cursor position.
Use the [`InsertTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertTextAsync_System_String_) API in the Editor module to insert text at the current cursor position.

The following example code illustrates how to add the text in current selection.
The following example code illustrates how to add text in the current selection.

```csharp
// It will insert the provided text in current selection
Expand All @@ -27,34 +27,34 @@ await container.DocumentEditor.Editor.InsertTextAsync("Syncfusion");
@code {
SfDocumentEditorContainer container;

// It will insert the provided text in current selection
// It will insert the provided text in the current selection
public async void InsertText()
{
await container.DocumentEditor.Editor.InsertTextAsync("Syncfusion");
}
}
```

## Insert paragraph in current cursor position
## Insert a paragraph at the current cursor position

To insert a new paragraph at the current selection, use the [`InsertTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertTextAsync_System_String_) API with `\r\n` or `\n` as the parameter.
To insert a new paragraph at the current cursor position, use the [`InsertTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertTextAsync_System_String_) API with `\r\n` or `\n` as the parameter.

The following example code illustrates how to add the new paragraph in current selection.
The following example code illustrates how to add a new paragraph in the current selection.

```csharp
// It will add the new paragraph in current selection
// It will add a new paragraph in the current selection
await container.DocumentEditor.Editor.InsertTextAsync("\n");
```

## Insert the rich-text content
## Insert rich-text content at the current cursor position

To insert HTML content, convert the HTML to SFDT format and then use the [`PasteAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_PasteAsync_System_String_System_Nullable_Syncfusion_Blazor_DocumentEditor_PasteOptions__) API to insert the sfdt at the current cursor position.
To insert HTML content, convert the HTML to SFDT format and then use the [`PasteAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_PasteAsync_System_String_System_Nullable_Syncfusion_Blazor_DocumentEditor_PasteOptions__) API to insert the SFDT at the current cursor position.

N> HTML string should be well formatted HTML. [`DocIO`](https://help.syncfusion.com/file-formats/docio/html) support only well formatted XHTML.
N> HTML string should be well-formatted HTML. [`DocIO`](https://help.syncfusion.com/file-formats/docio/html) supports only well-formatted XHTML.

The following example illustrates how to insert the HTML content at current cursor position.
The following example illustrates how to insert HTML content at the current cursor position.

* Refer to the following example for Converting the HTML content to SFDT and then insert it in current position using Pasts API.
Refer to the following example for converting HTML content to SFDT and inserting it at the current position using the PasteAsync API.

```csharp
@using Syncfusion.Blazor.DocumentEditor
Expand All @@ -69,12 +69,12 @@ The following example illustrates how to insert the HTML content at current curs

public async void OnCreated(object args)
{
string htmltags = "<?xml version='1.0' encoding='utf - 8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns ='http://www.w3.org/1999/xhtml' xml:lang='en' lang ='en'><body><h1>The img element</h1><img src='https://www.w3schools.com/images/lamp.jpg' alt ='Lamp Image' width='500' height='600'/></body></html>";
// You can also load HTML file/string .
string htmltags = "<?xml version='1.0' encoding='utf-8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns ='http://www.w3.org/1999/xhtml' xml:lang='en' lang ='en'><body><h1>The img element</h1><img src='https://www.w3schools.com/images/lamp.jpg' alt ='Lamp Image' width='500' height='600'/></body></html>";
// You can also load an HTML file or string.
Syncfusion.Blazor.DocumentEditor.WordDocument document = Syncfusion.Blazor.DocumentEditor.WordDocument.LoadString(htmltags, ImportFormatType.Html); // Convert the HTML to SFDT format.
string sfdtString = JsonSerializer.Serialize(document);
document.Dispose();
// Insert the sfdt content in cursor position using paste API
// Insert the SFDT content at the current cursor position using the PasteAsync API
await container.DocumentEditor.Editor.PasteAsync(sfdtString);
}
}
Expand Down
Loading