diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/hide-tool-bar-and-properties-pane.md b/Document-Processing/Word/Word-Processor/blazor/how-to/hide-tool-bar-and-properties-pane.md index a201db9da2..b6615e1be9 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/hide-tool-bar-and-properties-pane.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/hide-tool-bar-and-properties-pane.md @@ -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. @@ -27,7 +27,7 @@ The following example code illustrates how to hide the properties pane. ``` -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 diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/insert-page-number-and-navigate-to-page.md b/Document-Processing/Word/Word-Processor/blazor/how-to/insert-page-number-and-navigate-to-page.md index f44974d34d..a562f6e345 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/insert-page-number-and-navigate-to-page.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/insert-page-number-and-navigate-to-page.md @@ -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 @@ -31,11 +31,11 @@ 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"); } } @@ -43,9 +43,9 @@ The following example code illustrates how to insert page number in header. ## 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 @@ -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 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 @@ -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); } } diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/insert-text-in-current-position.md b/Document-Processing/Word/Word-Processor/blazor/how-to/insert-text-in-current-position.md index f7b6440b03..dd0ba4ad35 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/insert-text-in-current-position.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/insert-text-in-current-position.md @@ -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 @@ -27,7 +27,7 @@ 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"); @@ -35,26 +35,26 @@ 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 @@ -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 = "

The img element

Lamp Image"; - // You can also load HTML file/string . + string htmltags = "

The img element

Lamp Image"; + // 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); } } diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/move-selection-to-specific-position.md b/Document-Processing/Word/Word-Processor/blazor/how-to/move-selection-to-specific-position.md index 407e07d0f7..03c07c491c 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/move-selection-to-specific-position.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/move-selection-to-specific-position.md @@ -1,23 +1,23 @@ --- layout: post -title: Move to selection position in Blazor DocumentEditor | Syncfusion -description: Learn how to Move to selection position in Syncfusion Blazor DocumentEditor component and much more. +title: Move to selection position in Blazor DOCX Editor | Syncfusion +description: Learn how to move the selection to a specific position in the Syncfusion Blazor Document Editor component and much more. platform: document-processing -control: DocumentEditor +control: Document Editor documentation: ug --- -# Move selection to specific position in Blazor Document editor +# Move selection to a specific position in Blazor Document Editor The [`SelectAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectAsync_System_String_System_String_) API in the selection module can be used to 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 following format. `sectionIndex;blockIndex;offset` -The following code snippet illustrate how to select using hierarchical index. +The following code snippet illustrates how to select using the hierarchical index. ```csharp @@ -26,32 +26,31 @@ The following code snippet illustrate how to select using hierarchical index. @code { SfDocumentEditorContainer container; - // It will select the specified Position + // It will select the specified position public async void SelectText() { - // Selection will occur between provided start and end offset + // Selection will occur between the provided start and end offset await container.DocumentEditor.Editor.InsertTextAsync("Welcome"); - // The below code will select the letters “We” from inserted text “Welcome” + // The following code will select the letters "We" from the inserted text "Welcome" await container.DocumentEditor.Selection.SelectAsync("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 | +| Element | Hierarchical Format | Explanation | |-----------------|-------------|----| -|Move selection to Paragraph |sectionIndex;blockIndex;offset
**Ex:** 0;0;0|It moves the cursor to the start of paragraph.| -|Move selection to Table|sectionIndex;tableIndex;rowIndex;cellIndex;blockIndex;offset
**Ex:** 0;0;0;0;1;0|It moves the cursor to the second paragraph which is inside first row and cell of table.| -|Move selection to header|pageIndex;H;sectionIndex;blockIndex;offset
**Ex:** 1;H;0;0;0|It moves cursor to the header in second page.| -|Move selection to Footer|pageIndex;F;sectionIndex;blockIndex;offset
**Ex:** 1;F;0;0;0|It moves cursor to the footer in second page.| +| Move selection to paragraph | sectionIndex;blockIndex;offset
**Ex:** 0;0;0 | It moves the cursor to the start of the paragraph. | +| Move selection to table | sectionIndex;tableIndex;rowIndex;cellIndex;blockIndex;offset
**Ex:** 0;0;0;0;1;0 | It moves the cursor to the second paragraph which is inside the first row and cell of the table. | +| Move selection to header | pageIndex;H;sectionIndex;blockIndex;offset
**Ex:** 1;H;0;0;0 | It moves the cursor to the header on the second page. | +| Move selection to footer | pageIndex;F;sectionIndex;blockIndex;offset
**Ex:** 1;F;0;0;0 | It moves the cursor to the footer on the second page. | ## Get the selection start and end hierarchical index -Using [`GetStartOffsetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetStartOffsetAsync), you can get start hierarchical index which denotes the start index of current selection. Similarly, using [`GetEndOffsetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetEndOffsetAsync), you can get end hierarchical index which denotes the end index of current selection. - -The following code snippet illustrate how to get the selection start and end offset on selection changes in document. +Using [`GetStartOffsetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetStartOffsetAsync), you can get the start hierarchical index which denotes the start index of the current selection. Similarly, using [`GetEndOffsetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetEndOffsetAsync), you can get the end hierarchical index which denotes the end index of the current selection. +The following code snippet illustrates how to get the selection start and end offset on selection changes in the document. ```csharp @@ -61,12 +60,12 @@ The following code snippet illustrate how to get the selection start and end off private string startOffset; private string endOffset; - // Event gets triggered on selection change in document + // Event gets triggered on selection change in the document public async void selectionChange() { - //Get the start index of current selection + // Get the start index of the current selection startOffset = await container.DocumentEditor.Selection.GetStartOffsetAsync(); - //Get the end index of current selection + // Get the end index of the current selection endOffset = await container.DocumentEditor.Selection.GetEndOffsetAsync(); } } diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/blazor/how-to/optimize-sfdt.md index 836843af3e..df32e1327c 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/optimize-sfdt.md @@ -1,22 +1,23 @@ --- layout: post -title: Optimize the SFDT file in Blazor DocumentEditor Component | Syncfusion -description: Learn here all about optimize the SFDT file in Document Editor in Syncfusion Blazor DocumentEditor component and more. +title: Optimize the SFDT file in Blazor DOCX Editor Component | Syncfusion +description: Learn here all about optimize the SFDT file in Document Editor in Syncfusion Blazor Document Editor component and more. platform: document-processing -control: DocumentEditor +control: Document Editor documentation: ug --- -# How to optimize the SFDT file +# How to optimize the SFDT file in Blazor Document Editor -Starting from version v21.1.x, the SFDT file generated in [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, -* File transfer between client and server through the internet gets faster. +Starting from version v21.1.x, the SFDT file generated in [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits: +* Faster file transfer between client and server through the internet. * The new optimized SFDT files require less storage space than the old SFDT files. -Hence, the optimized SFDT file can't be directly manipulated as JSON string. -> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility. +Hence, the optimized SFDT file can't be directly manipulated as a JSON string. -As a backward compatibility to create older format SFDT files, refer the following code changes, +N> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility. + +For backward compatibility, to create older-format SFDT files, refer to the following code changes: @@ -68,7 +69,7 @@ string sfdt = JsonSerializer.Serialize(sfdtDocument);
-To convert from older format SFDT from a new optimized SFDT file, refer the following code example, +To convert a new optimized SFDT file to the older SFDT format, refer to the following code example: