diff --git a/Document-Processing/Word/Word-Processor/blazor/accessibility.md b/Document-Processing/Word/Word-Processor/blazor/accessibility.md index 24c3be62f..e86cb1334 100644 --- a/Document-Processing/Word/Word-Processor/blazor/accessibility.md +++ b/Document-Processing/Word/Word-Processor/blazor/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor DocumentEditor Component -The [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. +The [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Document Editor component is outlined below. @@ -38,6 +38,8 @@ The accessibility compliance for the Blazor Document Editor component is outline ## Keyboard interaction +The Document Editor supports a wide range of keyboard shortcuts to facilitate common actions, including text formatting, paragraph formatting, navigation, and editing. + ### Text formatting The following table lists the default keyboard shortcuts in document editor for formatting text: diff --git a/Document-Processing/Word/Word-Processor/blazor/bookmark.md b/Document-Processing/Word/Word-Processor/blazor/bookmark.md index b3ebb5fa6..f0cffd757 100644 --- a/Document-Processing/Word/Word-Processor/blazor/bookmark.md +++ b/Document-Processing/Word/Word-Processor/blazor/bookmark.md @@ -1,7 +1,7 @@ --- layout: post title: Bookmarks in Blazor DocumentEditor Component | Syncfusion -description: Checkout and learn here all about the Bookmarks in Syncfusion Blazor DocumentEditor component and more. +description: Learn how to add, navigate, and manage bookmarks in the Syncfusion Blazor Document Editor component both through the UI and programmatically. platform: document-processing control: DocumentEditor documentation: ug @@ -9,45 +9,46 @@ documentation: ug # Bookmarks in Blazor DocumentEditor Component -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. +A bookmark is a powerful tool that marks a specific place in a document so you can easily find it again. You can insert multiple bookmarks in a document and give each one a unique name for easy identification. -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component provides built-in dialog and using code 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. +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) provides two ways to manage bookmarks: through a built-in dialog or programmatically using API methods. Once a bookmark is added, you can jump to its location or create hyperlinks to it. N>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. -You can open the bookmark dialog using Bookmark options in toolbar. You can also explore our [`Blazor Word Processor - Bookmark`](https://blazor.syncfusion.com/demos/document-editor/hyperlinks-and-bookmarks) example to know more about bookmark. +The bookmark dialog can be opened using the Bookmark option in the toolbar. For more details on bookmark functionality, refer to the [`Blazor Word Processor - Bookmark`](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/hyperlinks-and-bookmarks) example. -## Add bookmark +## Add a bookmark -Using [`InsertBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertBookmarkAsync_System_String_) method, Bookmark can be added to the selected text. +Use the [`InsertBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertBookmarkAsync_System_String_) method to add a bookmark to the currently selected text. ```csharp await container.DocumentEditor.Editor.InsertBookmarkAsync("Bookmark1"); ``` -## Select Bookmark +## Navigate to a bookmark -You can select the bookmark in the document using [`SelectBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectBookmarkAsync_System_String_) method by providing Bookmark name to select as shown in the following code snippet. +Use the [`SelectBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectBookmarkAsync_System_String_) method to navigate to and select a bookmark by its name. ```csharp await container.DocumentEditor.Selection.SelectBookmarkAsync("Bookmark1"); ``` -## Delete Bookmark +## Delete a Bookmark -You can delete bookmark in the document using [`DeleteBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_DeleteBookmarkAsync_System_String_) method as shown in the following code snippet. +Use the [`DeleteBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_DeleteBookmarkAsync_System_String_) method to delete a bookmark by its name. ```csharp await container.DocumentEditor.Editor.DeleteBookmarkAsync("Bookmark1"); ``` -## Get Bookmark +## Get all bookmarks -You can get all the bookmarks in the document using [`GetBookmarksAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetBookmarksAsync_System_Boolean_) method as shown in the following code snippet. +Use the [`GetBookmarksAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetBookmarksAsync_System_Boolean_) method to retrieve a list of all bookmarks in the document. ```csharp -await container.DocumentEditor.Selection.GetBookmarksAsync(false); +// Get all bookmarks, including hidden ones. +await container.DocumentEditor.Selection.GetBookmarksAsync(true); ``` -N> Parameter denotes is include hidden bookmarks. If false, ignore hidden bookmark. \ No newline at end of file +N> The boolean parameter of `GetBookmarksAsync` specifies whether to include hidden bookmarks in the result. If `false`, hidden bookmarks are excluded. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/blazor/clipboard.md b/Document-Processing/Word/Word-Processor/blazor/clipboard.md index e6f3804ad..f7af46193 100644 --- a/Document-Processing/Word/Word-Processor/blazor/clipboard.md +++ b/Document-Processing/Word/Word-Processor/blazor/clipboard.md @@ -1,7 +1,7 @@ --- layout: post title: Clipboard in Blazor DocumentEditor Component | Syncfusion -description: Checkout and learn here all about Clipboard in Syncfusion Blazor DocumentEditor component and much more. +description: Learn how to perform cut, copy, and paste clipboard operations in the Syncfusion Blazor Document Editor component, both programmatically and through the UI. platform: document-processing control: DocumentEditor documentation: ug @@ -9,72 +9,66 @@ documentation: ug # Clipboard in Blazor DocumentEditor Component -[Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) provides built-in support for clipboard operations such as cut, copy, and paste. You can perform the clipboard operations using keyboard shortcuts, touch, and keyboard interactions. Also, the same functionalities can be invoked programmatically. +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) provides built-in support for clipboard operations, including cut, copy, and paste. These actions can be performed through the toolbar, context menus, standard keyboard shortcuts, or programmatically via the component's APIs. -There is a built-in clipboard (local clipboard) with this Word processor component, which allows the users to perform cut, copy, and paste faster. If you want to use system clipboard instead of local clipboard, turn off the local clipboard by setting the [`EnableLocalPaste`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_EnableLocalPaste) to false. +## Local vs. System Clipboard -If you need to copy or paste the contents from other applications, use system clipboard. To copy or paste the contents within the Word processor component, use local clipboard. +The Document Editor supports two clipboard modes to handle content transfer: + +To copy or paste contents from other applications, the system clipboard should be used. To copy or paste the contents within the Word processor component, use local clipboard. Let’s see how to invoke each clipboard operations using code. -## Copy +* **Local Clipboard (Default)**: This is a built-in clipboard that is optimized for performance when cutting, copying, and pasting content **within** the editor itself. It is enabled by default. +* **System Clipboard**: This is the operating system's standard clipboard, which allows for transferring content between the Document Editor and other applications. + +To use the system clipboard, set the [`EnableLocalPaste`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_EnableLocalPaste) property to `false`. When this property is false, all clipboard operations will use the system clipboard. -You can copy the selected contents using the [`CopyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_CopyAsync) method as shown in the following code example. +## Programmatic Clipboard Operations + +You can programmatically invoke clipboard operations using the editor's API methods. The following example demonstrates how to call the [`CutAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_CutAsync), [`CopyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_CopyAsync), and [`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__) methods. ```cshtml @using Syncfusion.Blazor.DocumentEditor - + + + + @code { SfDocumentEditorContainer container; - protected async void CopyClick(object args) + protected async void CopyClick() { + // Copies the selected content to the clipboard. await container.DocumentEditor.Selection.CopyAsync(); } -} -``` - -## Cut - -You can cut the selected content using the ['Cut'](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_CutAsync) method as shown in the following code example. - -```cshtml -@using Syncfusion.Blazor.DocumentEditor - - - - -@code { - SfDocumentEditorContainer container; - protected async void CutClick(object args) + protected async void CutClick() { + // Cuts the selected content and moves it to the clipboard. await container.DocumentEditor.Editor.CutAsync(); } + protected async void PasteClick() + { + // Pastes content from the clipboard to the current cursor position. + // This will use the local or system clipboard based on the EnableLocalPaste property. + await container.DocumentEditor.Editor.PasteAsync(); + } } - ``` +### Copy -## Paste - -## Local paste +The [`CopyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_CopyAsync) method copies the currently selected content in the editor to the clipboard. -The following code example shows how to perform the paste operation from the local clipboard. +### Cut -```cshtml -@using Syncfusion.Blazor.DocumentEditor +The [`CutAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_CutAsync) method removes the currently selected content from the editor and moves it to the clipboard. - - -@code { - SfDocumentEditorContainer container; - protected async void PasteClick(object args) - { - await container.DocumentEditor.Editor.PasteAsync(); - } -} +### Paste -``` +The [`PasteAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_PasteAsync) method inserts the content from the clipboard at the current cursor position. Its behavior depends on the `EnableLocalPaste` property: +* If `true` (default), it pastes from the editor's local clipboard. +* If `false`, it pastes from the system clipboard. -You can also explore our [Blazor Word Processor](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) example to know how to render and configure the document editor. +Explore the [Blazor Word Processor example](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) to see how to render and configure the Document Editor. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/blazor/comments.md b/Document-Processing/Word/Word-Processor/blazor/comments.md index c1f7181ff..8d5fca139 100644 --- a/Document-Processing/Word/Word-Processor/blazor/comments.md +++ b/Document-Processing/Word/Word-Processor/blazor/comments.md @@ -1,7 +1,7 @@ --- layout: post title: Comments in Blazor DocumentEditor Component | Syncfusion -description: Checkout and learn here all about the Comments in Syncfusion Blazor DocumentEditor component and more. +description: Learn how to add, navigate, reply to, and manage comments in the Syncfusion Blazor Document Editor component, including how to use comments-only protection. platform: document-processing control: DocumentEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Comments in Blazor DocumentEditor Component -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component allows you to add comments to documents. You can add, navigate and remove comments using code and from the UI. +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) provides comprehensive support for adding, navigating, and managing comments within a document. These features facilitate collaborative review and feedback cycles. Operations can be performed both through the built-in user interface and programmatically using APIs. ## Add a new comment @@ -47,9 +47,9 @@ You can delete all the comments in the document using [`DeleteAllCommentsAsync`] await container.DocumentEditor.Editor.DeleteAllCommentsAsync(); ``` -## Protect the document in comments only mode +## Protect the Document in Comments-Only Mode -Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user allowed to add or edit comments alone in the document. +The Document Editor supports a special protection mode that restricts user actions to only adding or editing comments. When `CommentsOnly` protection is active, users cannot make changes to the document's content. Document editor provides an option to protect and unprotect document using [`EnforceProtectionAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_EnforceProtectionAsync_System_String_Syncfusion_Blazor_DocumentEditor_ProtectionType_) and [`StopProtectionAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_StopProtectionAsync_System_String_) API. diff --git a/Document-Processing/Word/Word-Processor/blazor/fields.md b/Document-Processing/Word/Word-Processor/blazor/fields.md index a8b5f1063..b7e48c014 100644 --- a/Document-Processing/Word/Word-Processor/blazor/fields.md +++ b/Document-Processing/Word/Word-Processor/blazor/fields.md @@ -1,80 +1,98 @@ --- layout: post -title: Fields in Blazor DocumentEditor Component | Syncfusion -description: Checkout and learn here all about the fields in Syncfusion Blazor DocumentEditor component and more. +title: Working with Fields in Blazor DocumentEditor Component | Syncfusion +description: Learn how to preserve, update, and manage fields like merge fields and page numbers in the Syncfusion Blazor Document Editor component. platform: document-processing control: DocumentEditor documentation: ug --- -# Fields in Blazor DocumentEditor Component +# Working with Fields in Blazor DocumentEditor Component -Document Editor has preservation support for all types of fields in an existing word document without any data loss. +Fields are placeholders in a document that display data that can change, such as the current date, the total number of pages, or information from a data source (like in a mail merge). The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) is designed to preserve all field types when loading an existing document, ensuring that no data or functionality is lost. -## Adding Fields +This document explains how to update fields and interact with them programmatically using the Document Editor's APIs. -You can add a field to the document by using [`InsertFieldAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertFieldAsync_System_String_System_String_) method in [`EditorModule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html). +## Automatic and Manual Field Updates -The following example code illustrates how to insert merge field programmatically by providing the field code and field result. +Certain fields are automatically updated by the Document Editor as the document's content changes. -```csharp -string fieldCode = "MERGEFIELD First Name \\* MERGEFORMAT "; -string fieldResult = "«First Name»"; -await container.DocumentEditor.Editor.InsertFieldAsync(fieldCode, fieldResult); -``` +### Automatically Updated Fields + +The following fields are updated automatically without any user intervention: +* `PAGE`: Displays the current page number. +* `NUMPAGES`: Displays the total number of pages in the document. +* `SECTION`: Displays the number of the current section. + +### Manually Updating Fields + +Other fields, such as bookmark cross-references, must be updated manually. This update can be triggered either through the user interface or programmatically. + +#### Update via the UI + +To update all fields in the document, click the **Update Fields** button in the **Review** tab of the toolbar. -N> Document editor does not validate/process the field code/field result. it simply inserts the field with specified field information. +![The Update Fields button in the Blazor Document Editor toolbar.](images/updatefields.png "Update Bookmark Cross-Reference Field") -## Update fields +#### Update Programmatically -Document Editor provides support for updating bookmark cross reference field. The following example code illustrates how to update bookmark cross reference field. +To update the fields programmatically, use the [`UpdateFieldsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditor.html#Syncfusion_Blazor_DocumentEditor_DocumentEditor_UpdateFieldsAsync) method. This method updates all bookmark cross-reference fields in the document. ```csharp -//Update all the bookmark cross reference field in the document. +// Updates all bookmark cross-reference fields in the document. await container.DocumentEditor.UpdateFieldsAsync(); ``` -Bookmark cross reference fields can be updated through UI by using update fields option in `Toolbar`. +## Programmatically Interacting with Fields -![Update bookmark cross reference field.](images/updatefields.png) +The Document Editor provides APIs to insert fields and to get or set the information of an existing field. + +### Inserting a Field The following type of fields are automatically updated in Document Editor. -* NUMPAGES -* SECTION -* PAGE +A new field can be inserted at the current selection using the [`InsertFieldAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertFieldAsync_System_String_System_String_) method. This requires specifying both the fieldCode and the `fieldResult`. -## Get field info +* **Field Code**: The instruction that defines the field's behavior (e.g., `MERGEFIELD FirstName`). +* **Field Result**: The text displayed in the document (e.g., `«FirstName»`). -You can get field code and field result of the current selected field by using [`GetFieldInfoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetFieldInfoAsync) method in the [`SelectionModule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html). +The following example demonstrates how to insert a `MERGEFIELD`. ```csharp -//Gets the field information of the selected field. -FieldInfo fieldInfo = await container.DocumentEditor.Selection.GetFieldInfoAsync(); +// Defines the field's behavior. +string fieldCode = "MERGEFIELD FirstName \\* MERGEFORMAT "; +// Defines the placeholder text to display in the editor. +string fieldResult = "«First Name»"; + +await container.DocumentEditor.Editor.InsertFieldAsync(fieldCode, fieldResult); ``` -N> For nested fields, this method returns combined field code and result. +N> The Document Editor does not validate the field code or result; it simply inserts a field with the provided information. + +### Getting and Modifying Field Information -## Set field info +The properties of the currently selected field can be retrieved and modified as needed. -You can modify the field code and field result of the current selected field by using [`SetFieldInfoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_SetFieldInfoAsync_Syncfusion_Blazor_DocumentEditor_FieldInfo_) method in the [`EditorModule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html). +* **Get Field Info**: Use the [`GetFieldInfoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetFieldInfoAsync) method to get a `FieldInfo` object containing the code and result of the selected field. +* **Set Field Info**: Use the [`SetFieldInfoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_SetFieldInfoAsync_Syncfusion_Blazor_DocumentEditor_FieldInfo_) method to update the properties of the selected field with a modified `FieldInfo` object. + +The following example shows how to get the information of a selected field and then modify it. ```csharp -//Gets the field information for the selected field. +// Gets the FieldInfo object for the currently selected field. FieldInfo fieldInfo = await container.DocumentEditor.Selection.GetFieldInfoAsync(); -//Modify field code -fieldInfo.Code = "MERGEFIELD First Name \\* MERGEFORMAT "; - -//Modify field result -fieldInfo.Result = "«First Name»"; +// Modify the field's code and result. +fieldInfo.Code = "MERGEFIELD LastName \\* MERGEFORMAT "; +fieldInfo.Result = "«Last Name»"; -//Modify field code and result of the current selected field. +// Apply the changes to the selected field. await container.DocumentEditor.Editor.SetFieldInfoAsync(fieldInfo); ``` -N> For nested field, entire field gets replaced completely with the specified field information. +N> For nested fields, `GetFieldInfoAsync` returns the combined field code and result. When using `SetFieldInfoAsync` on a nested field, the entire field is replaced with the new information. ## See Also -[Mail merge using DocIO](https://help.syncfusion.com/file-formats/docio/working-with-mail-merge) \ No newline at end of file +* [Mail Merge with Syncfusion DocIO](https://help.syncfusion.com/file-formats/docio/working-with-mail-merge) +* For advanced, server-side mail merge operations to populate fields with data, consider using the Syncfusion DocIO library in your backend. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/blazor/find-and-replace.md b/Document-Processing/Word/Word-Processor/blazor/find-and-replace.md index 5b8a2d97d..b7d691803 100644 --- a/Document-Processing/Word/Word-Processor/blazor/find-and-replace.md +++ b/Document-Processing/Word/Word-Processor/blazor/find-and-replace.md @@ -9,15 +9,15 @@ documentation: ug # Find and Replace in Blazor DocumentEditor Component -Documents can be long, and you might need to search through the text to find and select specific words, text sequences, sentences, or paragraphs and then replace them with the desired content. This Word processor (DocumentEditor) provides a built-in navigation pane like Microsoft Word on the left of the editor. +In long documents, it may be necessary to search for specific text and replace it with the desired content. This Word processor (DocumentEditor) provides a built-in navigation pane like Microsoft Word on the left of the editor. -You can use the search box at the top of this navigation pane to find all the instances of a specific word or phrase in the document. When you enter a word in the search box and perform search, it highlights all the occurrences of those words in the document and displays them below the search options in the pane. When you click on a search result, the cursor or selection move directly to that location in the document. +The search box at the top of the navigation pane can be used to find all instances of a specific word or phrase. Entering a word in the search box and performing a search highlights all occurrences in the document, which are then displayed in the pane. Clicking a search result moves the cursor directly to that location in the document. -You can open the navigation pane using the `Ctrl+F` shortcut key and close using the `ESC` key. +The navigation pane can be opened using the `Ctrl+F` shortcut key and closed using the `ESC` key. ## Show or hide navigation pane -You can programmatically toggle the visibility of navigation pane using the `ShowOptionsPane()` method. +The visibility of the navigation pane can be toggled programmatically using the `ShowOptionsPane()` method. ```cshtml @using Syncfusion.Blazor.DocumentEditor diff --git a/Document-Processing/Word/Word-Processor/blazor/form-fields.md b/Document-Processing/Word/Word-Processor/blazor/form-fields.md index a27604282..a3a5263fd 100644 --- a/Document-Processing/Word/Word-Processor/blazor/form-fields.md +++ b/Document-Processing/Word/Word-Processor/blazor/form-fields.md @@ -9,7 +9,7 @@ documentation: ug # Form Fields in Blazor DocumentEditor Component -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar. +The [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar. ![Form Fields](images/toolbar-form-fields.png) diff --git a/Document-Processing/Word/Word-Processor/blazor/header-footer.md b/Document-Processing/Word/Word-Processor/blazor/header-footer.md index 992f27fe0..dd1fcee96 100644 --- a/Document-Processing/Word/Word-Processor/blazor/header-footer.md +++ b/Document-Processing/Word/Word-Processor/blazor/header-footer.md @@ -9,13 +9,15 @@ documentation: ug # Headers and Footers in Blazor DocumentEditor Component -[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) supports headers and footers in its document. Each section in the document can have the following types of headers and footers: +Headers and footers are the areas in the top and bottom margins of each page in a document. They are typically used to display content that repeats across multiple pages, such as document titles, company logos, page numbers, and dates. -* First page: Used only on the first page of the section. -* Even pages: Used on all even numbered pages in the section. -* Default: Used on all pages of the section, where first or even pages are not applicable or not specified. +The [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) supports headers and footers in its document. Each section in the document can have the following types of headers and footers: -You can define this by setting format properties of the corresponding section using the following sample code. +* **First Page**: A unique header and footer that appears only on the first page of the section. +* **Even Pages**: A header and footer that appears on all even-numbered pages in the section. +* **Default**: A header and footer that appears on all pages of the section, where first or even pages are not applicable or not specified. + +This can be defined by setting the format properties of the corresponding section. ```csharp //Defines whether different header footer is required for first page of the section @@ -26,7 +28,7 @@ await container.DocumentEditor.Selection.SectionFormat.SetDifferentOddAndEvenPag ## Go to header footer region -Double click in header or footer region to move the selection into it. You can also do this by using the following code. +Double click in header or footer region to move the selection into it. This can also be done using the following code. ```csharp await container.DocumentEditor.Selection.GoToHeaderAsync(); @@ -36,7 +38,7 @@ await container.DocumentEditor.Selection.GoToFooterAsync(); ## Header and footer distance -You can define the distance of header region content from the top of the page. Refer to the following sample code. +The distance of the header region content from the top of the page can be defined. Refer to the following sample code. ```csharp await container.DocumentEditor.Selection.SectionFormat.SetHeaderDistanceAsync(36); diff --git a/Document-Processing/Word/Word-Processor/blazor/history.md b/Document-Processing/Word/Word-Processor/blazor/history.md index 705f39f30..0231f82b4 100644 --- a/Document-Processing/Word/Word-Processor/blazor/history.md +++ b/Document-Processing/Word/Word-Processor/blazor/history.md @@ -1,6 +1,6 @@ --- layout: post -title: Undo and redo in Blazor DocumentEditor Component | Syncfusion +title: Undo and Redo in Blazor DocumentEditor Component | Syncfusion description: Checkout and learn here all about Undo and redo in Syncfusion Blazor DocumentEditor component and more. platform: document-processing control: DocumentEditor @@ -9,11 +9,13 @@ documentation: ug # Undo and Redo in Blazor DocumentEditor Component -[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) tracks the history of all editing actions done in the document, which allows undo and redo functionality. +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) automatically tracks the history of all editing actions performed in a document. This history allows users to reverse (undo) their recent actions or re-apply (redo) actions that were undone. + +This functionality is enabled by default through the integrated `EditorHistoryModule`. ## Enable or disable history -Inject the [`EditorHistory`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorHistoryModule.html) module in your application to provide history preservation functionality for [`DocumentEditor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html). Refer to the following code example. +Inject the [`EditorHistory`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorHistoryModule.html) module into the application to enable history preservation functionality for the [`DocumentEditor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html). Refer to the following code example. ```cshtml @using Syncfusion.Blazor.DocumentEditor @@ -31,7 +33,7 @@ Inject the [`EditorHistory`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl } ``` -You can enable or disable history preservation for a document editor instance any time using the `EnableEditorHistory` property. Refer to the following sample code. +History preservation for a Document Editor instance can be enabled or disabled at any time using the `EnableEditorHistory` property. Refer to the following sample code. ```csharp documentEditor.EnableEditorHistory = true; @@ -60,4 +62,4 @@ History of editing actions will be maintained in stack, so that the last item wi await container.DocumentEditor.EditorHistory.SetRedoLimitAsync(400); ``` -You can also explore our [Blazor Word Processor](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) example to know how to render and configure the document editor. +Explore the [Blazor Word Processor example](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) to understand how to render and configure the Document Editor. diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/add-save-button-in-toolbar.md b/Document-Processing/Word/Word-Processor/blazor/how-to/add-save-button-in-toolbar.md index d3a38377d..06909ae44 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/add-save-button-in-toolbar.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/add-save-button-in-toolbar.md @@ -1,7 +1,7 @@ --- layout: post title: Add save button in Blazor DocumentEditor Component | Syncfusion -description: Learn how to add a save button to the toolbar in the Syncfusion Blazor DocumentEditor component and much more. +description: Learn how to add a custom save button to the toolbar in the Syncfusion Blazor Document Editor component and much more. platform: document-processing control: DocumentEditor documentation: ug @@ -10,7 +10,7 @@ documentation: ug ## To add a save button to the existing toolbar in DocumentEditorContainer -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.CustomToolbarItemModel.html) and with existing items in [`toolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_ToolbarItems) property. Newly added item click action can be defined in [`toolbarClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorContainerEvents.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorContainerEvents_OnToolbarClick). +[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) component allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.CustomToolbarItemModel.html) and with existing items in [`toolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_ToolbarItems) property. Newly added item click action can be defined in [`toolbarClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorContainerEvents.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorContainerEvents_OnToolbarClick). ```csharp diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/auto-save-document.md b/Document-Processing/Word/Word-Processor/blazor/how-to/auto-save-document.md index 88ce140cf..47832c14b 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/auto-save-document.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/auto-save-document.md @@ -1,6 +1,6 @@ --- layout: post -title: Auto save document in Blazor DocumentEditor Component | Syncfusion +title: Auto-Save a Document in Blazor DocumentEditor Component | Syncfusion description: Learn here all about Auto save document in document editor in Syncfusion Blazor DocumentEditor component and much more. platform: document-processing control: DocumentEditor @@ -12,7 +12,7 @@ In this article, we are going to see how to auto save the document to server. Yo The following example illustrates how to auto save the document in server. -* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`SaveAsBlobAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_SaveAsBlobAsync_System_Nullable_Syncfusion_Blazor_DocumentEditor_FormatType__) method. +* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as DOCX format to server-side using [`SaveAsBlobAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_SaveAsBlobAsync_System_Nullable_Syncfusion_Blazor_DocumentEditor_FormatType__) method. ```cshtml @using Syncfusion.Blazor.DocumentEditor diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/change-document-view.md b/Document-Processing/Word/Word-Processor/blazor/how-to/change-document-view.md index 4a1f375f6..0775c9370 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/change-document-view.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/change-document-view.md @@ -1,19 +1,34 @@ --- layout: post -title: Layout type in in Blazor DocumentEditor Component | Syncfusion -description: Checkout and learn here all about change layout type in Syncfusion Blazor DocumentEditor component and much more. +title: Change Document View Type in Blazor DocumentEditor | Syncfusion +description: Learn how to change the document view between Print Layout (Pages) and Web Layout (Continuous) in the Syncfusion Blazor DocumentEditor component. platform: document-processing control: DocumentEditor documentation: ug --- -# Change document view in Blazor DocumentEditor Component +# Change Document View in Blazor DocumentEditor -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component allows you to change the view to web layout and print using the [`layoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html#fields) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html). +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) provides two different layout options for viewing a document, controlled by the `LayoutType` property. This allows users to switch between a print-optimized view and a continuous web-based view. -```typescript - +The two available layout types are: + +* **Pages (Print Layout)**: This is the default view. It displays the document as a series of distinct pages, exactly as it would appear when printed. This layout is ideal for understanding the document's structure, including headers, footers, and page breaks. +* **Continuous (Web Layout)**: This view displays the document as a single, continuous flowing page without any page breaks. This is similar to how a standard web page is rendered and is useful for continuous reading and editing without the interruption of page boundaries. + +## Setting the Layout Type + +The layout type can be set during component initialization. The following example demonstrates how to configure the Document Editor to use the `Continuous` (Web Layout) view. + +```razor +@using Syncfusion.Blazor.DocumentEditor + + + +@code { + private SfDocumentEditorContainer Container; +} ``` -N> Default value of [`LayoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html?_ga=2.86979928.1792501268.1670214760-93590999.1630704258) in DocumentEditorContainer component is [`Pages`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html#Syncfusion_Blazor_DocumentEditor_LayoutType_Pages). \ No newline at end of file +N> By default, the `LayoutType` is set to `LayoutType.Pages`, which provides a print layout view. To switch to a web layout, set the property to `LayoutType.Continuous`. diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/change-the-cursor-color-in-document-editor.md b/Document-Processing/Word/Word-Processor/blazor/how-to/change-the-cursor-color-in-document-editor.md index b8876efb8..8af95f8f7 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/change-the-cursor-color-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/change-the-cursor-color-in-document-editor.md @@ -1,24 +1,28 @@ --- layout: post -title: Change the cursor color in Blazor document editor | Syncfusion -description: Learn how to change the cursor color using CSS in the Syncfusion Blazor Document Editor component and much more. +title: Change the Cursor Color in Blazor Document Editor | Syncfusion +description: Learn how to change the cursor color in the Syncfusion Blazor Document Editor component by overriding the default CSS styles. platform: document-processing control: DocumentEditor documentation: ug --- -# How to change the cursor color using CSS in Blazor Document Editor +# Change the Cursor Color in Blazor Document Editor -Document Editor default cursor color is black. The user can change the color by overriding the css property using class name. The Document editor cursor css have a class named `e-de-blink-cursor`. +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) component uses a black cursor by default. However, this color can be easily customized by overriding the corresponding CSS class. -Refer the below code snippet to change the cursor color to red. +The editor's blinking cursor is styled using the `.e-de-blink-cursor` CSS class. To change its color, you can define a new style for this class with a different `border-left` property. + +## Applying the CSS Override ```css .e-de-blink-cursor { -border-left: 1px solid red!important; + border-left: 1px solid red !important; } ``` -Output will be like below: +N> The `!important` declaration is used here to ensure this custom style takes precedence over the component's default styles. + +After applying this CSS, the cursor in the Document Editor will appear in the new color. -![Change the cursor color in document editor](../images/cursor-css.png) +![The cursor in the Blazor Document Editor is shown in red instead of the default black color.](../images/cursor-css.png) diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/customize-color-picker.md b/Document-Processing/Word/Word-Processor/blazor/how-to/customize-color-picker.md index d28568289..549e09c37 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/customize-color-picker.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/customize-color-picker.md @@ -1,13 +1,13 @@ --- layout: post -title: Customize color picker in Blazor DocumentEditor Component | Syncfusion -description: Learn how to Customize the color picker in Syncfusion Blazor DocumentEditor component and much more. +title: Customize Color Picker in Blazor DocumentEditor | Syncfusion +description: Learn how to customize the color picker in Syncfusion Blazor DocumentEditor component and much more. platform: document-processing control: DocumentEditor documentation: ug --- -# Customize color picker in Blazor Document Editor Component +# Customize the Color Picker in Blazor Document Editor Component ## How to customize color picker in Document Editor Container diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/customize-context-menu.md b/Document-Processing/Word/Word-Processor/blazor/how-to/customize-context-menu.md index 59a90c4f0..e0cee0aae 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/customize-context-menu.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/customize-context-menu.md @@ -1,17 +1,17 @@ --- layout: post -title: Customize context menu in Blazor DocumentEditor Component | Syncfusion +title: Customize Context Menu in Blazor DocumentEditor | Syncfusion description: Learn how to customize context menu with document editor in real time scenarios like create simple word processor in Syncfusion Blazor DocumentEditor component. platform: document-processing control: DocumentEditor documentation: ug --- -# Context menu customization in Blazor DocumentEditor Component +# Context Menu Customization in Blazor DocumentEditor Component ## How to customize context menu in Document Editor -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) allows you to add custom option in context menu. It can be achieved by using the [`AddCustomMenu()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.ContextMenuModule.html#Syncfusion_Blazor_DocumentEditor_ContextMenuModule_AddCustomMenu_System_Collections_Generic_List_Syncfusion_Blazor_DocumentEditor_MenuItemModel__System_Boolean_System_Boolean_) method and custom action is defined using the [`ContextMenuItemSelected`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorEvents.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorEvents_ContextMenuItemSelected) +The [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) for customizing the added custom options and hiding/showing the default context menu. It can be achieved by using the [`AddCustomMenu()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.ContextMenuModule.html#Syncfusion_Blazor_DocumentEditor_ContextMenuModule_AddCustomMenu_System_Collections_Generic_List_Syncfusion_Blazor_DocumentEditor_MenuItemModel__System_Boolean_System_Boolean_) method and custom action is defined using the [`ContextMenuItemSelected`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorEvents.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorEvents_ContextMenuItemSelected) ### Add Custom Option @@ -53,7 +53,7 @@ The following code shows how to add custom option in context menu. ### Customize custom option in context menu -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) allows you to customize the added custom option and also to hide/show default context menu. +The [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) allows for customizing the added custom options and hiding/showing the default context menu. #### Hide default context menu items @@ -79,4 +79,4 @@ The following code shows how to hide default context menu and add custom option } ``` -You can also explore our [Blazor Word Processor - Context Menu](https://blazor.syncfusion.com/demos/document-editor/custom-context-menu?theme=bootstrap5) example to know how to render and configure the document editor. \ No newline at end of file +Explore the [Blazor Word Processor - Context Menu](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/custom-context-menu?theme=bootstrap5) example to learn how to render and configure the document editor. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/blazor/how-to/customize-tool-bar.md index 169726d48..12c81643d 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/customize-tool-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize the toolbar in Blazor DocumentEditor Component | Syncfusion +title: Customize the Toolbar in Blazor DocumentEditor Component | Syncfusion description: Learn how to Customize the existing toolbar in Syncfusion Blazor DocumentEditor component and much more. platform: document-processing control: DocumentEditor @@ -10,7 +10,7 @@ documentation: ug ## How to customize existing toolbar in Document Editor Container -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. +[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) component allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. * Add - New items can defined by [`CustomToolbarItemModel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.CustomToolbarItemModel.html) and with existing items in [`toolbarItems`]https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_ToolbarItems property. Newly added item click action can be defined in [`toolbarClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorContainerEvents.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorContainerEvents_OnToolbarClick). * Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`]https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_ToolbarItems property. Pre-defined toolbar items are available with [`ToolbarItem`]https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.ToolbarItem.html. diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/disable-optimized-text-measuring.md b/Document-Processing/Word/Word-Processor/blazor/how-to/disable-optimized-text-measuring.md index 2854f74bd..292428a57 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/disable-optimized-text-measuring.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/disable-optimized-text-measuring.md @@ -1,19 +1,19 @@ --- layout: post -title: Text measuring in Blazor DocumentEditor Component | Syncfusion +title: Disable Optimized Text Measuring in Blazor DocumentEditor | Syncfusion description: Learn how to disable optimized text measuring in Syncfusion Blazor DocumentEditor component and much more. platform: document-processing control: DocumentEditor documentation: ug --- -# Disable optimized text measuring in Blazor DocumentEditor component +# Disable Optimized Text Measuring in Blazor DocumentEditor component Starting from v19.3.0.x, the accuracy of text size measurements in Document editor is improved such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [`EnableOptimizedTextMeasuring`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorSettingsModel.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorSettingsModel_EnableOptimizedTextMeasuring) in Document editor settings. -If you want the [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions. Then you can disable this optimized text measuring improvement, by setting `false` to [`EnableOptimizedTextMeasuring`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorSettingsModel.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorSettingsModel_EnableOptimizedTextMeasuring) property of Blazor Document Editor component. +If you want the [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions. Then you can disable this optimized text measuring improvement, by setting `false` to [`EnableOptimizedTextMeasuring`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorSettingsModel.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorSettingsModel_EnableOptimizedTextMeasuring) property of Blazor Document Editor component. -## Disable optimized text measuring in DocumentEditorContainer instance +## Disable Optimized Text Measuring in DocumentEditorContainer instance The following example code illustrates how to disable optimized text measuring improvement in [`DocumentEditorContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html) instance. diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/export-document-as-pdf.md b/Document-Processing/Word/Word-Processor/blazor/how-to/export-document-as-pdf.md index 2812dbce6..f74644770 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/export-document-as-pdf.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/export-document-as-pdf.md @@ -1,6 +1,6 @@ --- layout: post -title: PDF Export in Blazor DocumentEditor Component | Syncfusion +title: Export a Document as a PDF in Blazor DocumentEditor | Syncfusion description: Learn how to export the document as PDF in Syncfusion Blazor DocumentEditor component and much more. platform: document-processing control: DocumentEditor diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/get-current-word.md b/Document-Processing/Word/Word-Processor/blazor/how-to/get-current-word.md index 240adcb62..60d09290a 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/get-current-word.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/get-current-word.md @@ -1,6 +1,6 @@ --- layout: post -title: Retrieve word and Paragraph in Blazor DocumentEditor | Syncfusion +title: Get Word and Paragraph in Blazor DocumentEditor | Syncfusion description: Learn how to select and retrieve current word and Paragraph in the Syncfusion Blazor Document Editor component and much more. platform: document-processing control: DocumentEditor @@ -9,11 +9,11 @@ documentation: ug # How to select and retrieve the word and paragraph in Document Editor -You can get the current word or paragraph content from the Blazor Document Editor component as plain text and SFDT (rich text). +The Blazor Document Editor component allows for getting the current word or paragraph content as plain text and SFDT (rich text). ## Select and get the word in current cursor position -You can use [`SelectCurrentWordAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectCurrentWordAsync_System_Boolean_) API in selection module to select the current word at cursor position and use [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the selected content as plain text from Blazor Document Editor component. +Use the [`SelectCurrentWordAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectCurrentWordAsync_System_Boolean_) API in the selection module to select the current word at the cursor position, and use the [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the selected content as plain text from Blazor Document Editor component. The following example code illustrates how to select and get the current word as plain text. diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/get-the-selected-content.md b/Document-Processing/Word/Word-Processor/blazor/how-to/get-the-selected-content.md index 615547891..995a68859 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/get-the-selected-content.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/get-the-selected-content.md @@ -1,7 +1,7 @@ --- layout: post -title: Get selected content in Blazor DocumentEditor Component | Syncfusion -description: Learn how to get the selected content from the Syncfusion Blazor Document Editor component as plain text or SFDT (rich text) and much more. +title: Get Selected Content in Blazor DocumentEditor Component | Syncfusion +description: Learn how to get the selected content from the Syncfusion Blazor DocumentEditor component as plain text or SFDT (rich text) and much more. platform: document-processing control: DocumentEditor documentation: ug @@ -52,7 +52,7 @@ The following example code illustrates how to add search in google option in con } ``` -You can add the following custom options using this API, +The following custom options can be added using this API, * Save or export the selected text as text file. * Search the selected text in Google or other search engines. @@ -93,7 +93,7 @@ The following example code illustrates how to get the content of a bookmark and } ``` -You can add the following custom options using this API, +The following custom options can be added using this API, * Save or export the selected content as SFDT file. * Get the content of a bookmark in Word document as SFDT by selecting a bookmark using [`SelectBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectBookmarkAsync_System_String_) API. 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 52202856e..9f0bc3da7 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,13 +1,13 @@ --- layout: post -title: Hide toolbar and properties pane in Blazor DocumentEditor | Syncfusion -description: Learn how to hide the default tool bar properties pane in the Syncfusion Blazor Document Editor component and much more. +title: Hide Toolbar and Properties Pane in Blazor DocumentEditor | 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 documentation: ug --- -# How to hide the tool bar and properties pane in Blazor Document Editor +# How to hide the Toolbar and Properties Pane in Blazor Document Editor **Document editor container** provides the main document view area along with the built-in toolbar and properties pane. @@ -31,7 +31,7 @@ N> Positioning and customizing the properties pane in Document editor container ## Hide the toolbar -You can use [`EnableToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_EnableToolbar) API in [`DocumentEditorContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html) to hide the existing toolbar. +Use the [`EnableToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_EnableToolbar) API in the [`DocumentEditorContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html) to hide the existing toolbar. The following example code illustrates how to hide the existing 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 ea3328bb7..e1a923597 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,6 +1,6 @@ --- layout: post -title: Insert page number and Navigate in Blazor DocumentEditor | Syncfusion +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. platform: document-processing control: DocumentEditor @@ -13,7 +13,7 @@ You can insert page number and navigate to specific page in Blazor Document Edit ## Insert page number -You can use [`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 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 Editor module is used to insert the Page number in current position. By default, Page number will insert in Arabic number style. N> Currently, Document Editor have options to insert page number at current cursor position. @@ -43,7 +43,7 @@ The following example code illustrates how to insert page number in header. ## Get page count -You can use [`GetPageCountAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_GetPageCountAsync) API to gets 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 Document. The following example code illustrates how to get the number of pages in Document. @@ -69,7 +69,7 @@ The following example code illustrates how to get the number of pages in Documen ## Navigate to specific page -You can use [`GoToPageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GoToPageAsync_System_Double_) API in Selection module to move selection to the start of the specified page number. +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. 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 b0f4aa03d..8c5f8a561 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 @@ -7,13 +7,13 @@ control: DocumentEditor documentation: ug --- -# Insert text , paragraph and rich-text content in Blazor DocumentEditor +# Insert Text and Rich-Text Content in Blazor DocumentEditor -You can insert the text, paragraph and rich-text content in Blazor Document Editor component. +The Blazor Document Editor component supports inserting text, paragraphs, and rich-text content. ## Insert text in current cursor position -You can use [`InsertTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertTextAsync_System_String_) API in editor module to insert the text in 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. @@ -37,7 +37,7 @@ await container.DocumentEditor.Editor.InsertTextAsync("Syncfusion"); ## Insert paragraph in current cursor position -To insert new paragraph at current selection, you can can use [`InsertTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertTextAsync_System_String_) API with parameter as `\r\n` or `\n`. +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. The following example code illustrates how to add the new paragraph in current selection. @@ -48,7 +48,7 @@ await container.DocumentEditor.Editor.InsertTextAsync("\n"); ## Insert the rich-text content -To insert the HTML content, you have to convert the HTML content to SFDT Format and then use [`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 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. 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 6e55fbee6..407e07d0f 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 @@ -9,7 +9,7 @@ documentation: ug # Move selection to specific position in Blazor Document editor -Using [`SelectAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectAsync_System_String_System_String_) API in selection module, You can set cursor position to anywhere in the document. +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 diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/read-only-default.md b/Document-Processing/Word/Word-Processor/blazor/how-to/read-only-default.md index f741eba59..6e5f5acd4 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/read-only-default.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/read-only-default.md @@ -9,7 +9,7 @@ documentation: ug # How to Open document in read only in Blazor DocumentEditor component -In this article, we are going to see how to open a document in read only mode by default [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component. +In this article, we are going to see how to open a document in read only mode by default [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) component. The following code example illustrate how to open a document in read only mode. @@ -60,4 +60,4 @@ The following code example illustrate how to open a document in read only mode. } } ``` -N> You can use the [`RestrictEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_RestrictEditing) in DocumentEditorContainer and [`IsReadOnly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_IsReadOnly) in DocumentEditor based on your requirement to change component to read only mode. \ No newline at end of file +N> Use the [`RestrictEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_RestrictEditing) property in the DocumentEditorContainer or [`IsReadOnly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_IsReadOnly) property in the DocumentEditor to change the component to read-only mode based on the specific requirement. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/resize-document-editor.md b/Document-Processing/Word/Word-Processor/blazor/how-to/resize-document-editor.md index 83068848a..02206a5d3 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/resize-document-editor.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/resize-document-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Resize in Blazor DocumentEditor Component | Syncfusion +title: Resizing the Blazor DocumentEditor Component | Syncfusion description: Learn how to change the height and width of Syncfusion Blazor DocumentEditor component and much more. platform: document-processing control: DocumentEditor @@ -13,7 +13,7 @@ In this article, we are going to see how to change height and width of Document ## Change height of Document Editor -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component initially render with default height. You can change height of document editor using [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_Height) property, the value which is in pixel. +[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) component initially render with default height. You can change height of document editor using [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_Height) property, the value which is in pixel. The following example code illustrates how to change height of Document Editor. @@ -28,7 +28,7 @@ Similarly, you can use [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusi ## Change width of Document Editor -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) initially render with default width. You can change width of document editor using [`Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_Width) property, the value which is in percent. +[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) initially render with default width. You can change width of document editor using [`Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_Width) property, the value which is in percent. The following example code illustrates how to change width of Document Editor. diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/retrieve-the-bookmark-content-as-text.md b/Document-Processing/Word/Word-Processor/blazor/how-to/retrieve-the-bookmark-content-as-text.md index c9e395b33..df75b7e59 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/retrieve-the-bookmark-content-as-text.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/retrieve-the-bookmark-content-as-text.md @@ -11,11 +11,11 @@ documentation: ug ## How to retrieve the whole document and bookmark content as text in Blazor Document Editor -You can get the bookmark or whole document content from the Blazor Document Editor component as plain text and SFDT (rich text). +The Blazor Document Editor component allows retrieving bookmark or whole document content as plain text and SFDT (rich text). ## Get the bookmark content as plain text -You can [`SelectBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectBookmarkAsync_System_String_) API to navigate to the bookmark and use [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the bookmark content as plain text from Blazor Document Editor component. +Use the [`SelectBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_SelectBookmarkAsync_System_String_) API to navigate to the bookmark and use [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the bookmark content as plain text from Blazor Document Editor component. The following example code illustrates how to get the bookmark content as plain text. @@ -49,7 +49,7 @@ To get the bookmark content as SFDT (rich text), check this [`link`](./get-the-s ## Get the whole document content as text -You can use [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the whole document content as plain text from Blazor Document Editor component. +The [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API can be used to get the whole document content as plain text from Blazor Document Editor component. The following example code illustrates how to get the whole document content as plain text. @@ -77,7 +77,7 @@ The following example code illustrates how to get the whole document content as ## Get the whole document content as SFDT(rich text) -You can use [`SerializeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_SerializeAsync) API to get the whole document content as SFDT string from Blazor Document Editor component. +The [`SerializeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_SerializeAsync) API is used to get the whole document content as an SFDT string from Blazor Document Editor component. The following example code illustrates how to get the whole document content as SFDT. @@ -103,7 +103,7 @@ The following example code illustrates how to get the whole document content as ## Get the header content as text -You can use [`GoToHeaderAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GoToHeaderAsync) API to navigate the selection to the header and then use [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the content as plain text. +Use the [`GoToHeaderAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GoToHeaderAsync) API to navigate the selection to the header and then use the [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the content as plain text. The following example code illustrates how to get the header content as plain text. @@ -130,4 +130,4 @@ The following example code illustrates how to get the header content as plain te } ``` -Similarly, you can use [`GoToFooterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GoToFooterAsync) API to navigate the selection to the footer and then use [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the content as plain text. \ No newline at end of file +Similarly, the [`GoToFooterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GoToFooterAsync) API can be used to navigate the selection to the footer, followed by the [`GetTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_GetTextAsync) API to get the content as plain text. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/blazor/how-to/show-hide-spinner.md b/Document-Processing/Word/Word-Processor/blazor/how-to/show-hide-spinner.md index 4997b4ebf..6292e0985 100644 --- a/Document-Processing/Word/Word-Processor/blazor/how-to/show-hide-spinner.md +++ b/Document-Processing/Word/Word-Processor/blazor/how-to/show-hide-spinner.md @@ -1,7 +1,7 @@ --- layout: post title: Show and hide spinner in Blazor DocumentEditor Component | Syncfusion -description: Learn show and hide spinner while opening document in Syncfusion Blazor DocumentEditor component and much more. +description: Learn how to display and hide a loading spinner while opening a document in the Syncfusion Blazor DocumentEditor component. platform: document-processing control: DocumentEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # How to show and hide spinner in Blazor Document Editor component -Using [`Spinner`](https://blazor.syncfusion.com/documentation/spinner/getting-started) component, you can show/hide spinner while opening document in [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component. +The [`Spinner`](https://blazor.syncfusion.com/documentation/spinner/getting-started) component can be used to show/hide a spinner while opening a document in the [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) component. Example code snippet to show/hide spinner diff --git a/Document-Processing/Word/Word-Processor/blazor/image.md b/Document-Processing/Word/Word-Processor/blazor/image.md index d7d90d135..0d7df144b 100644 --- a/Document-Processing/Word/Word-Processor/blazor/image.md +++ b/Document-Processing/Word/Word-Processor/blazor/image.md @@ -9,7 +9,7 @@ documentation: ug # Images in Blazor DocumentEditor Component -[`Blazor Document Editor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) supports common raster format images like PNG, BMP, JPEG, SVG and GIF. You can insert an image file or online image in the document using the [`InsertImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertImageAsync_System_String_System_Nullable_System_Double__System_Nullable_System_Double__) method. +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) component provides robust support for working with images in documents. It supports common raster image formats like PNG, BMP, and JPEG, as well as GIF and SVG images. You can insert an image file or online image in the document using the [`InsertImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertImageAsync_System_String_System_Nullable_System_Double__System_Nullable_System_Double__) method. ```csharp await container.DocumentEditor.Editor.InsertImageAsync("<>"); @@ -19,7 +19,7 @@ Image files will be internally converted to base64 string. Whereas, online image ## Image resizing -Document editor provides built-in image resizer that can be injected into your application based on the requirements. This allows you to resize the image by dragging the resizing points using mouse or touch interactions. This resizer appears as follows. +Document editor provides built-in image resizer that can be injected into your application based on the requirements. This allows the image to be resized by dragging the resizing points using mouse or touch interactions. This resizer appears as follows. ![Image Resizing in Blazor DocumentEditor](images/blazor-document-editor-image-resizing.jpeg) diff --git a/Document-Processing/Word/Word-Processor/blazor/link.md b/Document-Processing/Word/Word-Processor/blazor/link.md index 80343c124..09fe2ae14 100644 --- a/Document-Processing/Word/Word-Processor/blazor/link.md +++ b/Document-Processing/Word/Word-Processor/blazor/link.md @@ -9,11 +9,15 @@ documentation: ug # Hyperlink in Blazor DocumentEditor Component -[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) supports hyperlink field. You can link a part of the document content to Internet or file location, mail address, or any text within the document. +A hyperlink is a reference in a document that links content to another location, such as a web page, an email address, or a bookmark within the same document. The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) provides comprehensive support for creating, editing, and customizing hyperlinks. ## Navigate a hyperlink -[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) triggers [`OnRequestNavigate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorEvents.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorEvents_OnRequestNavigate) event whenever user clicks Ctrl key or tap a hyperlink within the document. This event provides necessary details about link type, navigation URL, and local URL (if any) as arguments, and allows you to easily customize the hyperlink navigation functionality. +By default, clicking a hyperlink navigates to its destination. This behavior can be customized using the [`OnRequestNavigate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorEvents.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorEvents_OnRequestNavigate) event. + +This event is triggered when a user `Ctrl+Clicks` a hyperlink, providing details about the link type and destination. You can intercept this action to define custom logic, such as opening the link in a new tab or handling it within your application. + +Setting `args.IsHandled = true` prevents the editor's default navigation action from executing, giving you full control over the process. ### Add the OnRequestNavigate event for DocumentEditor @@ -21,82 +25,95 @@ The following example illustrates how to add OnRequestNavigate event for Documen ```cshtml - + @code { - SfDocumentEditorContainer container; + SfDocumentEditor container; - // Add event listener for requestNavigate event to customize hyperlink navigation functionality - public void OnRequestNavigate(RequestNavigateEventArgs args) + // An event handler to customize hyperlink navigation. + public async Task OnRequestNavigate(RequestNavigateEventArgs args) { - if (args.LinkType != HyperlinkType.Bookmark) + // Check if the link is a web URL. Bookmarks are handled internally. + if (args.LinkType == HyperlinkType.Web) { - string link = args.NavigationLink; - if (args.LocalReference.Length > 0) + // Prevent the default navigation. + args.IsHandled = true; + + // Get the full URL. + string url = args.NavigationLink; + if (!string.IsNullOrEmpty(args.LocalReference)) { - link += '#' + args.LocalReference; + url += "#" + args.LocalReference; } - //Customize your code here. - - args.IsHandled = true; + + // Implement custom logic, e.g., opening the URL in a new browser tab. + await JSRuntime.InvokeVoidAsync("open", url, "_blank"); } } + + public void OnCreated() + { + // Your creation logic here. + } } ``` - -If the selection is in hyperlink, trigger this event by calling [`NavigateHyperlinkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_NavigateHyperlinkAsync) method of ‘Selection’ instance. Refer to the following example. +You can also programmatically trigger navigation for the hyperlink at the current selection by calling the [`NavigateHyperlinkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_NavigateHyperlinkAsync) method. ```csharp await container.DocumentEditor.Selection.NavigateHyperlinkAsync(); ``` +## Copy Hyperlink -## Copy link - -[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) copies link text of a hyperlink field to the clipboard if the selection is in hyperlink. Refer to the following example. +To copy the destination URL of a hyperlink to the clipboard, use the [`CopyHyperlinkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_CopyHyperlinkAsync) method. ```csharp await container.DocumentEditor.Selection.CopyHyperlinkAsync(); ``` -## Add hyperlink - -To create a basic hyperlink in the document, press `ENTER` / `SPACEBAR` / `SHIFT + ENTER` / `TAB` key after typing the address, for instance [`http://www.google.com`](http://www.google.com). Document Editor automatically converts this address to a hyperlink field. The text can be considered as a valid URL if it starts with any of the following. +## Add Hyperlink -N> ``
-
``
-
`file:///`
-
`www.`
-
`mail to:`
+The Document Editor can automatically format a URL as a hyperlink. Simply type an address and press `ENTER`, `SPACEBAR`, or `TAB`. The text will be converted to a functional hyperlink if it begins with one of the following prefixes: -Also Document Editor expose API [`InsertHyperlinkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertHyperlinkAsync_System_String_System_String_)to insert hyperlink. +* http:// +* https:// +* file:/// +* www. +* mail to: -Refer to the following sample code. +Use the [`InsertHyperlinkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertHyperlinkAsync_System_String_System_String_) method to create a hyperlink at the current selection. You can specify both the destination URL and the display text. ```csharp await container.DocumentEditor.Editor.InsertHyperlinkAsync("https://www.google.com", "Google"); ``` -## Remove hyperlink +## Remove Hyperlink -To remove link from hyperlink in the document, press Backspace key at the end of a hyperlink. By removing the link, it will be converted as plain text. You can use [`RemoveHyperlinkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_RemoveHyperlinkAsync) method of ‘Editor’ instance if the selection is in hyperlink. Refer to the following example. +To remove a hyperlink and convert it back to plain text, use the [`RemoveHyperlinkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_RemoveHyperlinkAsync) method. This can also be done by pressing the `Backspace` key at the end of the hyperlinked text. ```csharp await container.DocumentEditor.Editor.RemoveHyperlinkAsync(); ``` -## Hyperlink dialog - -[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) provides dialog support to insert or edit a hyperlink. +## Hyperlink Dialog -Refer to the following example to open Hyperlink dialog. +For more control, the component includes a built-in dialog for inserting and editing hyperlinks. To open it, place the cursor on the desired text and press `Ctrl+K`. +The dialog allows you to: +* Link to an existing web page or file by entering its URL. +* Link to an email address. +* Link to a bookmark within the current document. +You can also open the dialog programmatically: ```csharp container.DocumentEditor.OpenDialog(DialogType.Hyperlink); ``` - You can use the following keyboard shortcut to open the hyperlink dialog if the selection is in hyperlink. | Key Combination | Description | |-----------------|-------------| -|Ctrl + K | Open hyperlink dialog that allows you to create or edit hyperlink| \ No newline at end of file +|Ctrl + K | Open hyperlink dialog that allows you to create or edit hyperlink| + + + + + diff --git a/Document-Processing/Word/Word-Processor/blazor/list-format.md b/Document-Processing/Word/Word-Processor/blazor/list-format.md index dd9e1606b..c21aa9511 100644 --- a/Document-Processing/Word/Word-Processor/blazor/list-format.md +++ b/Document-Processing/Word/Word-Processor/blazor/list-format.md @@ -9,11 +9,11 @@ documentation: ug # Working with Lists in Blazor DocumentEditor Component -[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) supports both the single-level and multilevel lists. Lists are used to organize data as step-by-step instructions in documents for easy understanding of key points. You can apply list to the paragraph using supported APIs. +Lists are a fundamental feature for organizing content in a document, making it easier for readers to follow step-by-step instructions or grasp key points. The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) provides comprehensive support for single-level and multilevel lists, which can be either ordered (numbered) or unordered (bulleted). -## Create bullet list +## Create a Bulleted List -Bullets are usually used for unordered lists. To apply bulleted list for selected paragraphs, use [`ApplyBulletAsync(bullet, fontFamily)`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_ApplyBulletAsync_System_String_System_String_) method of [`Editor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html) instance. +Bulleted (unordered) lists are ideal for items that do not need to be in a specific sequence. Use the [`ApplyBulletAsync(bullet, fontFamily)`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_ApplyBulletAsync_System_String_System_String_) method to apply a bullet format to the selected paragraphs. The method accepts a bullet character and its font family. |Parameter|Type|Description| |---------|----|-----------| @@ -23,34 +23,41 @@ Bullets are usually used for unordered lists. To apply bulleted list for selecte Refer to the following sample code. ```csharp -await container.DocumentEditor.Editor.ApplyBulletAsync("\uf0b7", "Symbol"); +@* The following code example demonstrates how to apply a standard circular bullet. *@ +await container.DocumentEditor.Editor.ApplyBulletAsync("\u00B7", "Symbol"); ``` -## Create numbered list +## Create a Numbered List -Numbered lists are usually used for ordered lists. To apply numbered list for selected paragraphs, use [`ApplyNumberingAsync(numberFormat,listLevelPattern)`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_ApplyNumberingAsync_System_String_System_Nullable_Syncfusion_Blazor_DocumentEditor_ListLevelPattern__) method of [`Editor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html) instance. +Numbered (ordered) lists are used for sequential items. Use the [`ApplyNumberingAsync(numberFormat,listLevelPattern)`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_ApplyNumberingAsync_System_String_System_Nullable_Syncfusion_Blazor_DocumentEditor_ListLevelPattern__) method to apply a numbering format. This method allows you to define the number format and the character style for the list level. -|Parameter|Type|Description| -|---------|----|-----------| -|numberFormat|string|“%n” representations in ‘numberFormat’ parameter will be replaced by respective list level’s value. “%1” will be displayed as “1”| -|listLevelPattern(optional)|string|Default value is 'Arabic'.| +The `numberFormat` parameter uses placeholders like `%1`, `%2`, etc., which correspond to the value of each list level. The `ListLevelPattern` specifies the character style for the number (e.g., Arabic numerals, Roman numerals, or letters). -Refer to the following example. +| Parameter | Type | Description | +|---|---|---| +| `numberFormat` | `string` | Defines the pattern for the list number. For example, `"%1."` will produce "1.", "2.", etc. | +| `listLevelPattern` | `ListLevelPattern` | (Optional) Specifies the character style for the list numbers. Defaults to `Arabic`. Options include `UpRoman`, `LowRoman`, `UpLetter`, `LowLetter`, etc. | ```csharp -await container.DocumentEditor.Editor.ApplyNumberingAsync("%1)", ListLevelPattern.UpRoman); +@* The following code example applies an uppercase Roman numeral format to the selected list. *@ +await container.DocumentEditor.Editor.ApplyNumberingAsync("%1.", ListLevelPattern.UpRoman); ``` ## Clear list -You can also clear the list formatting applied for selected paragraphs. Refer to the following sample code. +To remove all list formatting from a selection of paragraphs and revert them to normal text, use the [`ClearListAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_ClearListAsync) method. ```csharp +@* The following code example removes list formatting from the current selection. *@ await container.DocumentEditor.Editor.ClearListAsync(); ``` -## Editing numbered list +## Editing Numbered Lists + +The Document Editor provides options for controlling the sequence of numbered lists. + +### Restarting and Continuing Numbering -Document editor restarts the numbering or continue numbering for a numbered list. These options are found in the built-in context menu, if the list value is selected. Refer to the following screenshot. +When working with numbered lists, you can choose to restart numbering at "1" or continue the sequence from a previous list. These options are available in the context menu when you right-click on a list number. -![Blazor DocumentEditor with List](images/blazor-document-editor-list.jpeg) \ No newline at end of file +![Context menu in Blazor Document Editor showing options to restart or continue list numbering.](images/blazor-document-editor-list.jpeg) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/blazor/opening-a-document.md b/Document-Processing/Word/Word-Processor/blazor/opening-a-document.md index 0af667d92..9bd9b7c0c 100644 --- a/Document-Processing/Word/Word-Processor/blazor/opening-a-document.md +++ b/Document-Processing/Word/Word-Processor/blazor/opening-a-document.md @@ -1,13 +1,13 @@ --- layout: post -title: Opening a document in Blazor DocumentEditor Component | Syncfusion +title: Opening a Document in the Blazor DocumentEditor Component | Syncfusion description: Checkout and learn here all about Opening a document in Syncfusion Blazor DocumentEditor component and more. platform: document-processing control: DocumentEditor documentation: ug --- -# Opening a document in Blazor DocumentEditor Component +# Opening a Document in Blazor DocumentEditor Component You might need to open and view Word documents from various location. In this section, you can find the information about how to open Word documents from URL, cloud, database, and local file system and also how to load a document during control initialization. @@ -296,7 +296,7 @@ You can also explore our [Blazor Word Processor](https://document.syncfusion.com The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component. ->Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `MetafileStream` property and you can get the `IsMetafile` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using `Bitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET`. +>Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `MetafileStream` property and you can get the `IsMetafile` boolean value to determine whether the image is meta file images(WMF,EMF) or TIFF format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using `BitMiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET`. The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document. diff --git a/Document-Processing/Word/Word-Processor/blazor/overview.md b/Document-Processing/Word/Word-Processor/blazor/overview.md index fe985e140..80d8a6a2e 100644 --- a/Document-Processing/Word/Word-Processor/blazor/overview.md +++ b/Document-Processing/Word/Word-Processor/blazor/overview.md @@ -1,13 +1,13 @@ --- layout: post -title: Overview of Blazor DocumentEditor Component | Syncfusion +title: Overview of the Blazor DocumentEditor Component | Syncfusion description: Checkout and learn about overview of the Syncfusion Blazor DocumentEditor component and much more details. platform: document-processing control: DocumentEditor documentation: ug --- -# Overview of Blazor DocumentEditor Component +# Overview of the Blazor DocumentEditor Component The [Blazor Word Processor component](https://www.syncfusion.com/blazor-components/blazor-word-processor) for Blazor is used to compose, edit, view, and print Word (DOC, DOCX, and RTF) documents in Blazor applications. diff --git a/Document-Processing/Word/Word-Processor/blazor/paragraph-format.md b/Document-Processing/Word/Word-Processor/blazor/paragraph-format.md index f668517f5..0087c8bef 100644 --- a/Document-Processing/Word/Word-Processor/blazor/paragraph-format.md +++ b/Document-Processing/Word/Word-Processor/blazor/paragraph-format.md @@ -13,7 +13,7 @@ documentation: ug ## Indentation -You can modify the left or right indentation of selected paragraphs using the following sample code. +Indentation is used to adjust the distance between the paragraph and the page margins. The left or right indentation of selected paragraphs can be modified using the following sample code. ```csharp await documentEditor.Selection.ParagraphFormat.SetLeftIndentAsync(24); @@ -22,7 +22,7 @@ await documentEditor.Selection.ParagraphFormat.SetRightIndentAsync(24); ## Special indentation -You can define special indent for first line of the paragraph using the following sample code. +A special indent for the first line of the paragraph can be defined using the following sample code. ```csharp await documentEditor.Selection.ParagraphFormat.SetFirstLineIndentAsync(24); @@ -30,7 +30,7 @@ await documentEditor.Selection.ParagraphFormat.SetFirstLineIndentAsync(24); ## Increase indent -You can increase the left indent of selected paragraphs by a factor of 36 points using the following sample code. +The left indent of selected paragraphs can be increased by a factor of 36 points using the following sample code. ```csharp await documentEditor.Editor.IncreaseIndentAsync(); @@ -38,7 +38,7 @@ await documentEditor.Editor.IncreaseIndentAsync(); ## Decrease indent -You can decrease the left indent of selected paragraphs by a factor of 36 points using the following sample code. +The left indent of selected paragraphs can be decreased by a factor of 36 points using the following sample code. ```csharp await documentEditor.Editor.DecreaseIndentAsync(); @@ -46,7 +46,7 @@ await documentEditor.Editor.DecreaseIndentAsync(); ## Text alignment -You can get or set the text alignment of selected paragraphs using the following sample code. +The text alignment of selected paragraphs can be retrieved or set using the following sample code. ```csharp await documentEditor.Selection.ParagraphFormat.SetTextAlignmentAsync(TextAlignment.Center); diff --git a/Document-Processing/Word/Word-Processor/blazor/print.md b/Document-Processing/Word/Word-Processor/blazor/print.md index 37d52ee86..cfb8d2e3c 100644 --- a/Document-Processing/Word/Word-Processor/blazor/print.md +++ b/Document-Processing/Word/Word-Processor/blazor/print.md @@ -1,13 +1,13 @@ --- layout: post -title: Print in Blazor DocumentEditor Component | Syncfusion -description: Checkout and learn here all about the Print functionality in Syncfusion Blazor DocumentEditor component and more. +title: Printing a Document in Blazor DocumentEditor | Syncfusion +description: Learn how to print a document and improve print quality in the Syncfusion Blazor DocumentEditor component. platform: document-processing control: DocumentEditor documentation: ug --- -# Print in Blazor DocumentEditor Component +# Printing a Document in Blazor DocumentEditor To print the document, use the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_PrintAsync) method from document editor instance. @@ -28,9 +28,9 @@ Refer to the following example for print. } ``` -## Improve print quality +## Improving print quality -Document editor provides an option to improve the print quality using [`PrintDevicePixelRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorSettingsModel.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorSettingsModel_PrintDevicePixelRatio) in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using PrintDevicePixelRatio API, you can increase the image quality based on your requirement. +Document editor provides an option to improve the print quality using [`PrintDevicePixelRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorSettingsModel.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorSettingsModel_PrintDevicePixelRatio) in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using the PrintDevicePixelRatio API, the image quality can be increased based on specific requirements. The following example code illustrates how to improve the print quality in Document editor container. diff --git a/Document-Processing/Word/Word-Processor/blazor/saving-document.md b/Document-Processing/Word/Word-Processor/blazor/saving-document.md index 62d2d4ac6..ae16482fd 100644 --- a/Document-Processing/Word/Word-Processor/blazor/saving-document.md +++ b/Document-Processing/Word/Word-Processor/blazor/saving-document.md @@ -1,19 +1,19 @@ --- layout: post -title: Saving document in Blazor DocumentEditor Component | Syncfusion +title: Saving a Document in Blazor DocumentEditor Component | Syncfusion description: Checkout and learn here all about saving document in Syncfusion Blazor DocumentEditor component and more. platform: document-processing control: DocumentEditor documentation: ug --- -# Saving Document in Blazor DocumentEditor Component +# Saving a Document in Blazor DocumentEditor Component -After composing or editing the document, you will need to save the document to the server, database, or local file system. +After composing or editing, a document must be saved to the server, a database, or the local file system. ## Save document to server -You might need to save the document back to the server. The following code example shows how to save the composed document to server. +It may be necessary to save the document back to the server. The following code example shows how to save the composed document to server. ```cshtml @using Syncfusion.Blazor.DocumentEditor diff --git a/Document-Processing/Word/Word-Processor/blazor/shapes.md b/Document-Processing/Word/Word-Processor/blazor/shapes.md index a790159a6..b51ef0330 100644 --- a/Document-Processing/Word/Word-Processor/blazor/shapes.md +++ b/Document-Processing/Word/Word-Processor/blazor/shapes.md @@ -1,13 +1,13 @@ --- layout: post -title: Shapes in Blazor DocumentEditor Component | Syncfusion +title: Working with Shapes in Blazor DocumentEditor Component | Syncfusion description: Checkout and learn here all about the Shapes in Syncfusion Blazor DocumentEditor component and more. platform: document-processing control: DocumentEditor documentation: ug --- -# Shapes in DocumentEditor +# Working with Shapes in Blazor DocumentEditor Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. At present, DocumentEditor does not have support to insert shapes. however, if the document contains a shape while importing, it will be preserved properly. @@ -21,7 +21,7 @@ N> When using ASP.NET MVC service, the unsupported shapes will be converted as i ## Text box Shape -A text box is a rectangular area on the document where you can enter text. When you click in a text box, a flashing cursor will display indicating that you can begin typing. It allows you to enter multiple lines of text with all text formatting. +A text box is a rectangular area on the document where you can enter text. Clicking in a text box displays a flashing cursor, indicating that text can be entered. It allows you to enter multiple lines of text with all text formatting. ![Text box shape view in DocumentEditor](images/Shapes_images/textbox_shape.png) diff --git a/Document-Processing/Word/Word-Processor/blazor/table-of-contents.md b/Document-Processing/Word/Word-Processor/blazor/table-of-contents.md index 6880ae9b1..e1e748008 100644 --- a/Document-Processing/Word/Word-Processor/blazor/table-of-contents.md +++ b/Document-Processing/Word/Word-Processor/blazor/table-of-contents.md @@ -1,6 +1,6 @@ --- layout: post -title: Table of contents in Blazor DocumentEditor Component | Syncfusion +title: Table of Contents in Blazor DocumentEditor Component | Syncfusion description: Checkout and learn here all about Table of contents in Syncfusion Blazor DocumentEditor component and more. platform: document-processing control: DocumentEditor @@ -13,7 +13,7 @@ The table of contents in a document is same as the list of chapters at the begin ## Inserting table of contents -[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) exposes an API to insert table of contents at cursor position programmatically. You can specify the settings for table of contents explicitly. Otherwise, the default settings will be applied. +[Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) exposes an API to insert table of contents at cursor position programmatically. The settings for a table of contents can be specified explicitly. Otherwise, the default settings will be applied. [`TableOfContentsSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.TableOfContentsSettings.html) contain the following properties: * **startLevel**: Specifies the start level for constructing table of contents. diff --git a/Document-Processing/Word/Word-Processor/blazor/table.md b/Document-Processing/Word/Word-Processor/blazor/table.md index bb2e87c12..bfffd7db4 100644 --- a/Document-Processing/Word/Word-Processor/blazor/table.md +++ b/Document-Processing/Word/Word-Processor/blazor/table.md @@ -1,13 +1,13 @@ --- layout: post -title: Tables in Blazor DocumentEditor Component | Syncfusion +title: Working with Tables in Blazor DocumentEditor Component | Syncfusion description: Checkout and learn here all about Tables in Syncfusion Blazor DocumentEditor component and much more. platform: document-processing control: DocumentEditor documentation: ug --- -# Tables in Blazor DocumentEditor Component +# Working with Tables in Blazor DocumentEditor Component Tables are an efficient way to present information. Document editor can display and edit the tables. You can select and edit tables through keyboard, mouse, or touch interactions. [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) exposes a rich set of APIs to perform these operations programmatically. diff --git a/Document-Processing/Word/Word-Processor/blazor/view.md b/Document-Processing/Word/Word-Processor/blazor/view.md index 6d1f32c7b..d5dd9053f 100644 --- a/Document-Processing/Word/Word-Processor/blazor/view.md +++ b/Document-Processing/Word/Word-Processor/blazor/view.md @@ -13,7 +13,7 @@ This topic describes view-related options in the Document Editor, including layo ## Web Layout -The [`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component allows you to change the view to web layout and print using the [`layoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html#fields) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html). +[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (Document Editor) component allows you to change the view to web layout and print using the [`layoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html#fields) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html). ```csharp