From 4e6efea15c03a525f64c5872769982c616622760 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Mon, 6 Oct 2025 11:22:16 +0530 Subject: [PATCH 01/14] 983303: Updated style.md, table.md, toolbar.md, undo-redo-manager.md, webassembly-performance.md, xhtml-validation.md --- blazor/rich-text-editor/style.md | 21 +++---- blazor/rich-text-editor/table.md | 42 +++++++------- blazor/rich-text-editor/toolbar.md | 55 ++++++++++--------- blazor/rich-text-editor/undo-redo-manager.md | 22 ++++---- .../webassembly-performance.md | 10 ++-- blazor/rich-text-editor/xhtml-validation.md | 10 ++-- 6 files changed, 81 insertions(+), 79 deletions(-) diff --git a/blazor/rich-text-editor/style.md b/blazor/rich-text-editor/style.md index 3bd717cc65..b6321a02bc 100644 --- a/blazor/rich-text-editor/style.md +++ b/blazor/rich-text-editor/style.md @@ -1,13 +1,13 @@ --- layout: post -title: Style and appearance in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Style and appearance in Syncfusion Blazor RichTextEditor component and more. +title: Style and appearance in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Style and appearance in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Style and Appearance +# Styling and Appearance ## Set placeholder @@ -43,7 +43,8 @@ Use the `e-rte-placeholder` class to define the custom font family, font color, ## Source code view -The Rich Text Editor enables you to directly edit HTML code through the `Source View` in the text area. Any changes you make in Source view are immediately reflected in the editor's content, giving you greater flexibility and control over your work. +The Rich Text Editor allows users to directly edit HTML code using the `Source View` mode. Changes made in Source View are instantly reflected in the editor's content, providing enhanced flexibility and control over content formatting. + The source code is presented with enhanced formatting and consistent indentation for both block-level and inline HTML elements, resulting in a cleaner, more readable, and user-friendly editing experience. >While the visual alignment of the source code is improved, the editor's underlying value remains unchanged. @@ -60,7 +61,7 @@ The source code is presented with enhanced formatting and consistent indentation ## Customizing editor content -Use the following CSS to customize the default Rich Text Editor's content properties like font-family, font-size and color. +Apply the following CSS to customize the default content styling of the Rich Text Editor like font-family, font-size and color. ```css /* To change font family and font size */ @@ -80,9 +81,9 @@ Use the following CSS to customize the default Rich Text Editor's content proper ![Blazor RichTextEditor with customizing editor content](./images/blazor-richtexteditor-editor-content.png) -## Customizing editor toolbar +## Customize toolbar appearance -Use the following CSS to customize the default color of the Rich Text Editor's toolbar icon. +Apply the following CSS to modify the default color of toolbar icons in the Rich Text Editor. ```css /* To change font color for toolbar icon */ @@ -112,7 +113,7 @@ Use the following CSS to customize the default color of the Rich Text Editor's t ``` ![Blazor RichTextEditor with customizing editor toolbar](./images/blazor-richtexteditor-editor-toolbar.png) -### Refresh editor +### Refreshing the editor UI While rendering the Rich Text Editor inside the dialog component, the dialog container and its wrapper elements are styled with display: none, so the editor’s toolbar does not get the proper offset width and will render above the edit area container. To resolve this issue, call the `RefreshUI` method of the RichTextEditor in the dialog's opened event. @@ -130,7 +131,7 @@ While rendering the Rich Text Editor inside the dialog component, the dialog con Programmatically highlight a portion of the text in the editor, like setting the background color of the text by applying background style to the particular text using the RichTextEditor [ExecuteCommand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ExecuteCommandOption.html) method and the `jsinterop` method. -Refer the jsintrob method in the `` wwwroot/jsinterop.js of the file. +Refer to the `jsinterop` method in the `` wwwroot/jsinterop.js of the file. {% tabs %} {% highlight razor tabtitle="~/_jsinterop.js" %} @@ -147,7 +148,7 @@ window.RichTextEditor = { {% endhighlight %} {% endtabs %} -Refer script in the `` of the **~/Pages/_Host.cshtml** file. +Include the script reference in the `` of the **~/Pages/_Host.cshtml** file. {% tabs %} {% highlight razor tabtitle="~/-Host.cshtml" %} diff --git a/blazor/rich-text-editor/table.md b/blazor/rich-text-editor/table.md index 4ccd353710..1357a0a2c8 100644 --- a/blazor/rich-text-editor/table.md +++ b/blazor/rich-text-editor/table.md @@ -9,19 +9,19 @@ documentation: ug # Table in Blazor RichTextEditor Component -Rich Text Editor allows to insert table of content in edit panel and provide options to add, edit, and remove the table as well as perform other table related action. For inserting the table to the Rich Text Editor, the following list of options have been provided in the `RichTextEditorTableSettings` +Rich Text Editor allows users to insert tables in edit panel and provide options to add, edit, and remove the table as well as perform other table related action. For inserting the table to the Rich Text Editor, the following list of options are available in the [RichTextEditorTableSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html) | Options | Description | Default Value | |----------------|---------|-----------------------------| | MinWidth | Sets the default minWidth of the table. | 0 | | MaxWidth | Sets the default maxWidth of the table. | null | | EnableResize | Enables resize feature in table.| true | -| Styles | This is an array of key value pair, on each pair, key should be name of styling and value is class name. This list will be shown on quick toolbar options to change the styles of table on designing like dashed, double bordered. | `List` | +| Styles | This is an array of key value pair, on each pair, key should be name of styling and value is class name. This list appears in the quick toolbar and allows users to apply predefined styles such as dashed borders or alternate row shading. | `List` | | Width | Sets the default width of the table. | 100% | ## Insert table -Using the `CreateTable` toolbar option, select a number of rows and columns to be inserted over the table grid and insert table into Rich Text Editor content using the mouse. Tables can also be inserted through the `Insert Table` option in the pop-up where the number of rows and columns can be provided manually and this is the default way in devices. +Using the `CreateTable` toolbar option, select a number of rows and columns to be inserted over the table grid and insert table into Rich Text Editor content using the mouse. Alternatively, tables can be inserted using the `Insert Table` dialog, where users manually specify the number of rows and columns. This method is commonly used on mobile devices. In the following sample, the table has been inserted using `CreateTable` toolbar item. @@ -54,51 +54,51 @@ In the following sample, the table has been inserted using `CreateTable` toolbar ![Inserting Table in Blazor RichTextEditor](./images/blazor-richtexteditor-insert-table.png) -## Quick Toolbar +## Quick toolbar -Quick toolbar is opened by clicking the table. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily. +The quick toolbar appears when a user clicks on a table. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily. -## Table Header +## Table header `Table Header` command is available with quick toolbar option through which the header row can be added or removed from the inserted table. The following image illustrates the table header. ![Blazor RichTextEditor with Table Header](./images/blazor-richtexteditor-table-header.png) -## Insert Rows +## Insert or delete table rows `Rows` can be inserted above or below the required table cell through the quick toolbar. Also, focused row can be deleted. The following screenshot shows the available options of the row item. ![Inserting Table Rows in Blazor RichTextEditor](./images/blazor-richtexteditor-insert-table-rows.png) -## Insert Columns +## Insert or delete table columns `Columns` can be inserted to the left or right side of the required table cell through the quick toolbar. Also, the focused column can be deleted. The following screenshot shows the available options of the column item. ![Inserting Table Column in Blazor RichTextEditor](./images/blazor-richtexteditor-insert-table-column.png) -## Set Color +## Set table cell background Color The Background Color can be set for each table cell through the `BackgroundColor` command available with quick toolbar. ![Changing Table Background Color in Blazor RichTextEditor](./images/blazor-richtexteditor-table-background-color.png) -## Delete Table +## Delete table Using the delete item in the quick toolbar, users can delete the entire table. -## Vertical Align +## Vertical align -Text inside the table can be aligned to top, middle, or bottom using the `TableCellVerticalAlign` command of the quick toolbar. +Text within table cells can be vertically aligned to top, middle, or bottom using the `TableCellVerticalAlign` command of the quick toolbar. ![Changing Vertical Alignment in Blazor RichTextEditor Table](./images/blazor-richtexteditor-vertical-alignment.png) -## Horizontal Align +## Horizontal align -Text inside the table can be aligned left, right, or center using the `TableCellHorizontalAlign` command of the quick toolbar. +Text within table cells can be horizontally aligned to left, center, or right using the `TableCellHorizontalAlign` command of the quick toolbar. ![Changing Horizontal Alignment in Blazor RichTextEditor Table](./images/blazor-richtexteditor-horizontal-alignment.png) -## Table Styles +## Table styles Table styles provided for class name should be appended to a table element. It helps to design the table in specific CSS styles when inserting in the editor. @@ -110,9 +110,9 @@ By default, provides `Dashed border` and `Alternate rows`. ![Displaying Table Styles in Blazor RichTextEditor](./images/blazor-richtexteditor-table-style.png) -### Custom Styles +### Add custom table styles -Rich Text Editor provides support to custom styles for tables. If you want to add additional styles, pass the styles information as `List` data to the `Styles` field of `RichTextEditorTableSettings` tag. +Rich Text Editor supports custom table styles. If you want to add additional styles, pass the styles information as `List` data to the `Styles` field of `RichTextEditorTableSettings` tag. ```cshtml @@ -137,7 +137,7 @@ Rich Text Editor provides support to custom styles for tables. If you want to ad ![Blazor RichTextEditor with Custom Table Styles](./images/blazor-richtexteditor-custom-table-styles.png) -## Table Properties +## Configure table properties Sets the default width of the table when it is inserted in the Rich Text Editor using the width of `RichTextEditorTableSettings`. @@ -147,19 +147,19 @@ Using the quick toolbar, users can change the width, cell padding, and cell spac N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools. -## Table cell merge and split +## Merge and split table cells The Rich Text Editor allows users to change the appearance of the tables by splitting or merging the table cells. `TableCell` item should be configured in the Table [quickToolbarSettings](../api/rich-text-editor/quickToolbarSettings/#table) property to show the merge/split icons while selecting the table cells. -### Table cell merge +### Merge table cells The table cell merge feature allows to merge two or more row and column cells into a single cell with its contents. ![Table Cell Merging in Blazor RichTextEditor](./images/blazor-richtexteditor-table-cell-merge.png) -### Table cell split +### Split table cells The table cell split feature allows to a selected cell can be split both horizontally and vertically. diff --git a/blazor/rich-text-editor/toolbar.md b/blazor/rich-text-editor/toolbar.md index 92a9256384..6384845138 100644 --- a/blazor/rich-text-editor/toolbar.md +++ b/blazor/rich-text-editor/toolbar.md @@ -1,15 +1,15 @@ --- layout: post -title: Toolbar in Blazor RichTextEditor | Syncfusion -description: Checkout and learn here all about Toolbar in Syncfusion Blazor RichTextEditor component and much more. +title: Toolbar Configuration in Blazor Rich Text Editor | Syncfusion +description: Checkout and learn here all about Toolbar in Syncfusion Blazor Rich Text Editor component and much more. platform: Blazor control: RichTextEditor documentation: ug --- -# Toolbar types in Blazor RichTextEditor +# Toolbar types in Blazor Rich Text Editor -The Rich Text Editor toolbar contains a collection of tools such as bold, Italic, and text alignment buttons that are used to format the content. +The Rich Text Editor toolbar provides a collection of tools such as Bold, Italic, and text alignment buttons used to format the content. You can customize the toolbar configurations by using the [RichTextEditorToolbarSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Type) property. The types of toolbar are: @@ -18,9 +18,9 @@ You can customize the toolbar configurations by using the [RichTextEditorToolbar 3. Scrollable 4. Popup -## Expand Toolbar +## Expand toolbar -The expand toolbar allows to hide the overflowing items in the next line by using the [ToolbarType.Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Expand) property. By clicking the expand arrow, you can view the overflowing toolbar items. The default mode of toolbar is `Expand`. +The [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Expand) toolbar hides overflowing items in the next line using the property. By clicking the expand arrow, you can view the overflowing toolbar items. The default mode of toolbar is `Expand`. {% tabs %} {% highlight razor %} @@ -32,9 +32,9 @@ The expand toolbar allows to hide the overflowing items in the next line by usin ![Blazor RichTextEditor expand toolbar](./images/blazor-richtexteditor-expand-toolbar.png) -## Multi-row Toolbar +## Multi-row toolbar -You can display the toolbar items in a row-wise format by using the [ToolbarType.MultiRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_MultiRow) property. All toolbar items are visible always. +The [MultiRow]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_MultiRow)) toolbar displays items in multiple rows, ensuring all items are always visible. {% tabs %} {% highlight razor %} @@ -46,9 +46,9 @@ You can display the toolbar items in a row-wise format by using the [ToolbarType ![Blazor RichTextEditor multirow toolbar](./images/blazor-richtexteditor-multirow-toolbar.png) -## Scrollable Toolbar +## Scrollable toolbar -You can display the toolbar items in a single line with horizontal scrolling by using the [ToolbarType.Scrollable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Scrollable) property. +The [Scrollable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Scrollable) toolbar displays items in a single row with horizontal scrolling enabled. {% tabs %} {% highlight razor %} @@ -62,7 +62,7 @@ You can display the toolbar items in a single line with horizontal scrolling by ## Configuring a popup toolbar -You can display the toolbar items in a popup container by setting the [ToolbarType.Popup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Popup) property, which optimizes the toolbar layout for limited space and smaller screens. +The [Popup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Popup) toolbar property displays items in a popup container, ideal for limited space or smaller screens. {% tabs %} {% highlight razor %} @@ -74,7 +74,7 @@ You can display the toolbar items in a popup container by setting the [ToolbarTy ![Blazor RichTextEditor multirow toolbar](./images/blazor-richtexteditor-popup-toolbar.png) -## Floating Toolbar +## Floating toolbar By default, toolbar is float at the top of the Rich Text Editor on scrolling. It can be customized by specifying the offset of the floating toolbar from documents top position using [FloatingToolbarOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_FloatingToolbarOffset). @@ -101,7 +101,7 @@ The Rich Text Editor allows you to position the toolbar at the top or bottom of By default, the toolbar is displayed at the top of the editor, making all formatting and editing tools immediately accessible above the content. -To position the toolbar at the bottom, use the [RichTextEditorToolbarSettings.Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Position) property and set its value to `Bottom`. This places the toolbar below the content area, which can help maintain a cleaner top layout and improve accessibility in certain use cases. +To move the toolbar to the bottom, use the [RichTextEditorToolbarSettings.Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Position) property and set its value to `Bottom`. This places the toolbar below the content area, which can help maintain a cleaner top layout and improve accessibility in certain use cases. {% tabs %} {% highlight razor %} @@ -113,7 +113,7 @@ To position the toolbar at the bottom, use the [RichTextEditorToolbarSettings.Po ![Blazor RichTextEditor multirow toolbar](./images/blazor-richtexteditor-bottom-toolbar.png) -## Quick Toolbar +## Quick toolbar The Rich text editor has quick toolbars that are open as context-menu on clicking the image, link, audio, video and table elements. By default, the below quick toolbar items show on click on the corresponding elements. You can customize the quick toolbar items using the [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html) property. @@ -126,9 +126,9 @@ The Rich text editor has quick toolbars that are open as context-menu on clickin | [Video](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.VideoToolbarCommand.html#fields) | VideoReplace, VideoAlign, VideoRemove, VideoLayoutOption, VideoDimension | | [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.VideoToolbarCommand.html#fields) |No Default item have it and it support the all toolbar items | -### Image quick Toolbar +### Image quick toolbar -You can customize the inserted image in the editor by using the [RichTextEditorQuickToolbarSettings.Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Image) property. The image quick toolbar has the following items. +Customize the inserted image using the [RichTextEditorQuickToolbarSettings.Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Image) property. The image quick toolbar has the following items. | Image Toolabr items | Description | | --------------------| ------------- | @@ -151,9 +151,9 @@ You can customize the inserted image in the editor by using the [RichTextEditorQ ![Blazor RichTextEditor image quick toolbar](./images/blazor-richtexteditor-image-quick-toolbar.png) -### Link quick Toolbar +### Link quick toolbar -You can customize the selected link inside the editor through the quick toolbar by using [RichTextEditorQuickToolbarSettings.Link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Link) property. The quick toolbar for link has the following options. +Customize the selected link using the [RichTextEditorQuickToolbarSettings.Link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Link) property. The quick toolbar for link has the following options. | Tools | Description | |----------------|--------------------------------------| @@ -171,9 +171,9 @@ You can customize the selected link inside the editor through the quick toolbar ![Blazor RichTextEditor link quick toolbar](./images/blazor-richtexteditor-link-quick-toolbar.png) -### Table quick Toolbar +### Table quick toolbar -Quick toolbar is opened by clicking the table. You can customize the table by using the [RichTextEditorQuickToolbarSettings.Table](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Table) property. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily. +The table quick toolbar appears when clicking on a table. You can customize the table by using the [RichTextEditorQuickToolbarSettings.Table](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Table) property. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily. | Tools | Description | |----------------|--------------------------------------| @@ -195,9 +195,9 @@ Quick toolbar is opened by clicking the table. You can customize the table by us ![Blazor RichTextEditor table quick toolbar](./images/blazor-richtexteditor-table-quick-toolbar.png) -### Audio quick Toolbar +### Audio quick toolbar -The Rich Text Editor allows you to customize the inserted audio by using the [RichTextEditorQuickToolbarSettings.Audio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) property. The audio quick toolbar has the following items. +Customize the inserted audio using the [RichTextEditorQuickToolbarSettings.Audio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) property. The audio quick toolbar has the following items. | Tools | Description | |----------------|--------------------------------------| @@ -215,9 +215,9 @@ The Rich Text Editor allows you to customize the inserted audio by using the [Ri ![Blazor RichTextEditor audio quick toolbar](./images/blazor-richtexteditor-audio-quick-toolbar.png) -### Video quick Toolbar +### Video quick toolbar -The Rich Text Editor allows you to customize the inserted video by using the [RichTextEditorQuickToolbarSettings.video](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) property. The video quick toolbar has the following items. +Customize the inserted video using the [RichTextEditorQuickToolbarSettings.video](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) property. The video quick toolbar has the following items. | Tools | Description | |----------------|--------------------------------------| @@ -239,9 +239,9 @@ The Rich Text Editor allows you to customize the inserted video by using the [Ri N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to knows how to render and configure the rich text editor tools. -### Text quick Toolbar +### Text quick toolbar -By activating the "RichTextEditorQuickToolbarSettings.Text" property, the Rich Text Editor offers the ability to display a quick toolbar when needed. The floating toolbar shows up when you select or focus on editable text. By modifying the "RichTextEditorQuickToolbarSettings.Text" property, the commands shown in the text quick toolbar can be changed. +By activating the [RichTextEditorQuickToolbarSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Text) property, the Rich Text Editor offers the ability to display a quick toolbar when needed. The floating toolbar shows up when you select or focus on editable text. By modifying the `RichTextEditorQuickToolbarSettings.Text` property, the commands shown in the text quick toolbar can be changed. {% tabs %} {% highlight razor %} @@ -269,7 +269,8 @@ private List textQuickToolbarItems = new ListCtrl + Z/ Ctrl + Y combination on the keyboard -Using the [UndoRedoSteps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html) property, you can customize the undo/redo step count. Undo and redo actions are stored in the undo/redo manager in `300` milliseconds by default. The time interval can be customized by using the [UndoRedoTimer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_UndoRedoTimer) property. +You can customize the number of undo and redo steps using the [UndoRedoSteps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html) property. By default, undo and redo actions are stored every `300` milliseconds in the undo/redo manager. The time interval can be customized by using the [UndoRedoTimer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_UndoRedoTimer) property. {% tabs %} {% highlight razor %} @@ -30,7 +30,7 @@ Using the [UndoRedoSteps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ## Disable undo redo -You can disable the undo and redo tools from the toolbar menu by using the [UndoRedoSteps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_UndoRedoSteps) property. If you set the `UndoRedoSteps` to `0`, the count of undo history will not be maintained in the UndoRedoManager. So, the undo/redo icons are disabled from the toolbar. +To disable undo and redo functionality, set the [UndoRedoSteps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_UndoRedoSteps) property to `0`. If you set the `UndoRedoSteps` to `0`, the count of undo history will not be maintained in the UndoRedoManager. So, the undo/redo icons are disabled from the toolbar. {% tabs %} {% highlight razor %} @@ -44,7 +44,7 @@ You can disable the undo and redo tools from the toolbar menu by using the [Undo ## Remove undo redo toolbar item -You can remove the undo and redo tools from the toolbar by using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. +To remove undo and redo buttons from the toolbar, configure the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property accordingly. In the following code example, remove the undo and redo tools from the toolbar. @@ -97,9 +97,9 @@ In the following code example, remove the undo and redo tools from the toolbar. {% endhighlight %} {% endtabs %} -## Undo Redo Manager with Custom Toolbar +## Undo redo manager with custom toolbar -The Rich Text Editor allows you to configure custom tools in its toolbar, and any actions performed through these custom tools can be reverted or restored using the Undo/Redo manager by utilizing the [ExecuteCommandOption.Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ExecuteCommandOption.html#Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_Undo) +You can configure custom toolbar tools in the Rich Text Editor. Actions performed using these tools can be tracked by the Undo/Redo manager using the [ExecuteCommandOption.Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ExecuteCommandOption.html#Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_Undo) property. {% tabs %} {% highlight razor %} @@ -141,11 +141,11 @@ The Rich Text Editor allows you to configure custom tools in its toolbar, and an ![Blazor RichTextEditor remove undo/redo tools](./images/blazor-richtexteditor-remove-undo-redo.png) -## Clear Undo/Redo stack +## Clear undo/redo stack The Rich Text Editor automatically maintains an undo/redo stack, allowing users to revert or redo changes made during editing. -To clear the entire undo and redo stack, use the public [ClearUndoRedoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ClearUndoRedoAsync) method. This is helpful when loading new content dynamically or resetting the editor to its initial state. +To reset the undo and redo history, use the [ClearUndoRedoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ClearUndoRedoAsync) public method. This is helpful when loading new content dynamically or resetting the editor to its initial state. {% tabs %} {% highlight razor %} diff --git a/blazor/rich-text-editor/webassembly-performance.md b/blazor/rich-text-editor/webassembly-performance.md index 8bb7061fb1..76efb40aa2 100644 --- a/blazor/rich-text-editor/webassembly-performance.md +++ b/blazor/rich-text-editor/webassembly-performance.md @@ -1,7 +1,7 @@ --- layout: post -title: WebAssembly Performance in Blazor RichTextEditor | Syncfusion -description: This topic helps you to improve the performance of Web Assembly Application when using Syncfusion Blazor RichTextEditor components with some tips. +title: WebAssembly Performance in Blazor Rich Text Editor | Syncfusion +description: This topic helps improve performance of Web Assembly Application when using Syncfusion Blazor RichTextEditor components with some tips. platform: Blazor control: RichTextEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # WebAssembly Performance in Blazor RichTextEditor Component -This section provides performance guidelines for using Syncfusion® RichTextEditor component efficiently in Blazor WebAssembly application. The best practice or guidelines for general framework Blazor WebAssembly performance can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0). +This section outlines performance best practices for using Syncfusion® RichTextEditor component efficiently in Blazor WebAssembly application. The best practice or guidelines for general framework Blazor WebAssembly performance can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0). N> You can refer to our Getting Started with [Blazor Server-Side RichTextEditor](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) and [Blazor WebAssembly RichTextEditor](https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/blazor-web-assembly) documentation pages for configuration specifications. @@ -46,13 +46,13 @@ In the following example: ``` N> * **PreventRender** method accepts the boolean argument that accepts true or false to disable or enable rendering, respectively. -
* **PreventRender** method can be used only after the RichTextEditor component completes initial rendering. Calling this method during initial rendering will not have any effect. +
* **PreventRender** method can be used only after the RichTextEditor component completes initial rendering. Calling this method during initial rendering has no effect. ## Avoid unnecessary component renders after RichTextEditor events When a callback method is assigned to the RichTextEditor events, then the **StateHasChanged** will be called in the parent component of the RichTextEditor automatically once the event is completed. -You can prevent this re-rendering of the RichTextEditor component by calling the **PreventRender** method. +To prevent unnecessary re-rendering of the RichTextEditor component by calling the **PreventRender** method. In the following example: diff --git a/blazor/rich-text-editor/xhtml-validation.md b/blazor/rich-text-editor/xhtml-validation.md index ec3539664b..31c4ecb1b4 100644 --- a/blazor/rich-text-editor/xhtml-validation.md +++ b/blazor/rich-text-editor/xhtml-validation.md @@ -1,7 +1,7 @@ --- layout: post -title: Xhtml validation in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Xhtml validation in Syncfusion Blazor RichTextEditor component and more. +title: Xhtml validation in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Xhtml validation in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug @@ -13,14 +13,14 @@ The Rich Text Editor includes an `EnableXhtml` property that allows for continuo The Rich Text Editor checks the following settings on validation: -## Validating Attributes +## Validating attributes * Case Sensitivity: All attributes must be in lowercase. * Quotation Marks: Proper use of quotation marks around attribute values is enforced. * Validity: Only valid attributes for corresponding HTML elements are allowed. * Required Attributes: All required attributes for HTML elements must be included. -## Validating HTML Elements +## Validating html elements * Case Sensitivity: All HTML tags must be in lowercase. * Proper Closing: All opening tags must have corresponding closing tags. @@ -37,4 +37,4 @@ The Rich Text Editor checks the following settings on validation: {% endhighlight %} {% endtabs %} -N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools. \ No newline at end of file +N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools. \ No newline at end of file From 8c7068d7678364339a19ee69f59eeec65d23532d Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Mon, 6 Oct 2025 13:01:28 +0530 Subject: [PATCH 02/14] 983303: Updated tools folder --- blazor/rich-text-editor/tools/audio.md | 24 ++--- .../rich-text-editor/tools/built-in-tools.md | 20 ++-- blazor/rich-text-editor/tools/code-block.md | 6 +- blazor/rich-text-editor/tools/custom-tool.md | 12 +-- .../rich-text-editor/tools/dialogSettings.md | 22 +++-- .../rich-text-editor/tools/format-painter.md | 22 ++--- blazor/rich-text-editor/tools/insert-image.md | 92 +++++++++++++++---- .../tools/link-manipulation.md | 28 +++--- .../rich-text-editor/tools/styling-tools.md | 12 +-- .../tools/table-manipulation.md | 8 +- blazor/rich-text-editor/tools/video.md | 14 +-- 11 files changed, 160 insertions(+), 100 deletions(-) diff --git a/blazor/rich-text-editor/tools/audio.md b/blazor/rich-text-editor/tools/audio.md index 1efe99d63d..b3e9d17d36 100644 --- a/blazor/rich-text-editor/tools/audio.md +++ b/blazor/rich-text-editor/tools/audio.md @@ -1,13 +1,13 @@ --- layout: post -title: Audio in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about insert audio in Syncfusion Blazor RichTextEditor component and more. +title: How to Insert and Manage Audio in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about insert audio in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Insert Audio in Blazor RichTextEditor Component +# Insert Audio in Blazor Rich Text Editor Component The Rich Text Editor allows inserting audio files from online sources and the local computer where you want to insert the audio in your content. For inserting audio into the Rich Text Editor, the following list of options has been provided in the [RichTextEditorAudioSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorAudioSettings.html). @@ -15,7 +15,7 @@ The Rich Text Editor allows inserting audio files from online sources and the lo |----------------|---------| | [AllowedTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorAudioSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorAudioSettings_AllowedTypes) |Specifies the extensions of the audio types allowed to insert on bowering and passing the extensions with comma separators. For example, pass allowedTypes as `.mp3,` `.wav,` `.m4a,` and `.wma.`| | [LayoutOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_LayoutOption) | Sets the default display for audio when it is inserted into the Rich Text Editor. Possible options are `Inline` and `Break.`| -| [SaveFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_SaveFormat) | Sets the default save format of the video element when inserted. Possible options are `Blob` and `Base64.`| +| [SaveFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_SaveFormat) | Sets the default save format of the audio element when inserted. Possible options are `Blob` and `Base64.`| | [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_SaveUrl) | Provides URL to map the action result method to save the audio.| | [Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_Path) | Specifies the location to store the audio.| @@ -35,9 +35,9 @@ To configure `Audio` toolbar item, refer to the below code. ## Insert audio from web -To insert audio from the hosted link or local machine, you should enable the audio tool on in the editor’s toolbar. +To insert audio from the hosted link or local machine, you should enable the audio tool in the editor's toolbar. -## Insert from web URL +## Insert audio from web URL By default, the audio tool opens the audio dialog, allowing you to insert audio from an online source. Inserting the URL will be added to the `src` attribute of the `` tag. @@ -96,7 +96,7 @@ namespace AudioUpload.Controllers { string targetPath = hostingEnv.ContentRootPath + "\\wwwroot\\Audio"; string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); - // Create a new directory, if it does not exists + // Create a new directory if it does not exist if (!Directory.Exists(targetPath)) { Directory.CreateDirectory(targetPath); @@ -106,7 +106,7 @@ namespace AudioUpload.Controllers filename = targetPath + $@"\{filename}"; if (!System.IO.File.Exists(filename)) { - // Upload a audio, if the same file name does not exist in the directory + // Upload an audio, if the same file name does not exist in the directory using (FileStream fs = System.IO.File.Create(filename)) { file.CopyTo(fs); @@ -169,7 +169,7 @@ In the following illustration, the audio size has been validated before uploadin Once an audio file has been inserted, you can change it using the Rich Text Editor [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) “Replace” option. You can replace the audio file using the web URL or the browse option in the audio dialog. -![Blazor RIchTextEditor replace audio](../images/blazor-richtexteditor-audio-replace.png) +![Blazor Rich Text Editor replace audio](../images/blazor-richtexteditor-audio-replace.png) ## Delete audio @@ -246,7 +246,7 @@ namespace RenameAudio.Controllers string targetPath = hostingEnv.ContentRootPath + "\\wwwroot\\Audio"; string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); - // Create a new directory, if it does not exists + // Create a new directory if it does not exist if (!Directory.Exists(targetPath)) { Directory.CreateDirectory(targetPath); @@ -345,7 +345,7 @@ namespace AudioUpload.Controllers string targetPath = hostingEnv.ContentRootPath + "\\wwwroot\\Audio"; string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); - // Create a new directory, if it does not exists + // Create a new directory if it does not exist if (!Directory.Exists(targetPath)) { Directory.CreateDirectory(targetPath); @@ -356,7 +356,7 @@ namespace AudioUpload.Controllers if (!System.IO.File.Exists(filename)) { - // Upload a audio, if the same file name does not exist in the directory + // Upload an audio, if the same file name does not exist in the directory using (FileStream fs = System.IO.File.Create(filename)) { file.CopyTo(fs); diff --git a/blazor/rich-text-editor/tools/built-in-tools.md b/blazor/rich-text-editor/tools/built-in-tools.md index bff8941b03..a615bf91c8 100644 --- a/blazor/rich-text-editor/tools/built-in-tools.md +++ b/blazor/rich-text-editor/tools/built-in-tools.md @@ -1,13 +1,13 @@ --- layout: post -title: Built-in tools in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Built-in tools in Syncfusion Blazor RichTextEditor component and more. +title: Built-in tools in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about built-in tools in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Built-in Tools in RichTextEditor +# Overview of Built-in Tools in Blazor Rich Text Editor To initialize the tools, use the following code. You can change the tool's name as per your requirements. For your reference, here is the `bold` tool initialized. @@ -88,25 +88,25 @@ The following table lists the tools available in the toolbar.

LowerCase

Lower case in Blazor RichTextEditor -

Change the selected content to lower case.

+

Changes the selected content to lowercase.

UpperCase

Uppercase in Blazor RichTextEditor -

Change the selected content to upper case.

+

Changes the selected content to uppercase.

SubScript

Sub script in Blazor RichTextEditor -

Makes the selected text as subscript (lower).

+

Formats the selected text as subscript (lower).

SuperScript

Super script in Blazor RichTextEditor -

Makes the selected text as superscript (higher).

+

Formats the selected text as superscript (higher).

@@ -172,7 +172,7 @@ The following table lists the tools available in the toolbar.

SourceCode

Source code in Blazor RichTextEditor -

The Rich Text Editor allows users to directly edit HTML code via "Source View." If you make any modifications in the source view directly, synchronise with the design view.

+

Allows users to toggle between design view and HTML source view. Changes made in source view are synchronized with the design view.

@@ -194,9 +194,9 @@ The following table lists the tools available in the toolbar. -The tools order can be customized as your application requirement. If you are not specifying any tools order, the editor will create the toolbar with default items. +Users can customize the order of toolbar tools to suit your application's requirements. If you are not specifying any tools order, the editor will create the toolbar with default items. -## Removing built-in tool from Toolbar +## How to remove built-in tool from toolbar Remove the build-in tools from the toolbar by using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. diff --git a/blazor/rich-text-editor/tools/code-block.md b/blazor/rich-text-editor/tools/code-block.md index 65f46cadf2..fa38ebdd52 100644 --- a/blazor/rich-text-editor/tools/code-block.md +++ b/blazor/rich-text-editor/tools/code-block.md @@ -1,7 +1,7 @@ --- layout: post -title: Code Block in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Code Block in Syncfusion Blazor RichTextEditor component and much more. +title: How to Use Code Block in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Code Block in Syncfusion Blazor Rich Text Editor component and much more. platform: Blazor control: RichTextEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Code Block in Blazor Rich Text Editor Component -The Code Block feature in the Rich Text Editor, enabling users to insert and format code snippets effectively. It covers configuring supported languages, integrating syntax highlighters, editing tips, and enabling tab-based indentation, making it ideal for technical documentation, tutorials, and code-heavy content. While live code block highlighting is not supported during editing, syntax highlighting can be applied when content is displayed on the frontend. +The Code Block feature in the Rich Text Editor enables users to insert and format code snippets effectively. It covers configuring supported languages, integrating syntax highlighters, editing tips, and enabling tab-based indentation, making it ideal for technical documentation, tutorials, and code-heavy content. Live syntax highlighting is not supported during editing, but it can be applied when the content is rendered on the frontend. ## Inserting a code block diff --git a/blazor/rich-text-editor/tools/custom-tool.md b/blazor/rich-text-editor/tools/custom-tool.md index ab6567bfb8..f085e9ca74 100644 --- a/blazor/rich-text-editor/tools/custom-tool.md +++ b/blazor/rich-text-editor/tools/custom-tool.md @@ -1,19 +1,19 @@ --- layout: post -title: Custom tool in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Custom tool in Syncfusion Blazor RichTextEditor component and more. +title: How to Add a Custom Toolbar Tool in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Custom tool in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Add custom tool to Toolbar +# How to Add a Custom Toolbar Tool in Blazor Rich Text Editor The Rich Text Editor allows you to configure your own tools to its toolbar using the [RichTextEditorCustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorCustomToolbarItems.html) tag directive within a [RichTextEditorToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html). The tools can be plain text, icon, or HTML template. Also, define the order and group where the tool should be included. -This sample shows how to add your tools to the toolbar of the Rich Text Editor. The `Ω` command is added to insert special characters in the editor. +The following example demonstrates how to add a custom tool to the Rich Text Editor toolbar. In this example, a custom `Ω` symbol tool is added to insert special characters into the editor content. -Refer to the following code sample for the custom tool with the tooltip text, which will be included in the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. +Refer to the following code sample to configure a custom toolbar item with tooltip text using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. {% tabs %} {% highlight razor %} @@ -57,4 +57,4 @@ Refer to the following code sample for the custom tool with the tooltip text, wh {% endhighlight %} {% endtabs %} -![Blazor RichTextEditor customize toolbar](../images/blazor-richtexteditor-custom-tool.png) +![Custom Toolbar Tool in Blazor Rich Text Editor](../images/blazor-richtexteditor-custom-tool.png) diff --git a/blazor/rich-text-editor/tools/dialogSettings.md b/blazor/rich-text-editor/tools/dialogSettings.md index 254dad652f..a0c11e7dd4 100644 --- a/blazor/rich-text-editor/tools/dialogSettings.md +++ b/blazor/rich-text-editor/tools/dialogSettings.md @@ -1,21 +1,27 @@ --- layout: post -title: Customization of Blazor Rich Text Editor Dialog | Syncfusion -description: Check out and learn here all about DialogSettings in Syncfusion Blazor RichTextEditor component and more. +title: DialogSettings in Blazor Rich Text Editor | Syncfusion +description: Check out and learn here all about DialogSettings in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Customization of Blazor Rich Text Editor Dialog +# Customizing Dialog Behavior in Blazor Rich Text Editor -The Blazor Rich Text Editor allows for improved customization of the dialogs by configuring the RichTextEditorDialogSettings property. This addition enables users to control the behavior and appearance of the underlying dialogs within the RichTextEditor. the following list of options has been provided. +The Blazor Rich Text Editor provides enhanced customization for built-in dialogs through the [RichTextEditorDialogSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorDialogSettings.html) property. This feature allows developers to control the appearance, behavior, and positioning of dialogs such as image, link, and audio insertion dialogs. + +The following table outlines the available configuration options: | Options | Description | -|----------------|---------| -|IsModel|Accepts a boolean value and determines whether the dialog operates in modal or modeless mode.| -|Target|Specifies the target element for the dialog component.| -|ZIndex|Allows adjustment of the Z-index value for the dialog component.| +|---------|-------------| +| `IsModal` | Accepts a boolean value that determines whether the dialog operates in **modal** (true) or **modeless** (false) mode. | +| `Target` | Specifies the target element for the dialog component. | +| `ZIndex` | Sets the z-index value of the dialog, allowing it to appear above or below other UI elements as needed. | + +## Configuring dialog settings + +The following example demonstrates how to configure dialog settings in the Blazor Rich Text Editor: {% tabs %} {% highlight cshtml %} diff --git a/blazor/rich-text-editor/tools/format-painter.md b/blazor/rich-text-editor/tools/format-painter.md index 3f7de5ad56..ef8951ee52 100644 --- a/blazor/rich-text-editor/tools/format-painter.md +++ b/blazor/rich-text-editor/tools/format-painter.md @@ -1,23 +1,23 @@ --- layout: post -title: Format Painter in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Format Painter in Syncfusion Blazor RichTextEditor component and more. +title: How to Use Format Painter in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Format Painter in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Format Painter +# Format Painter in Blazor Rich Text Editor The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or via keyboard shortcuts, allowing the transfer of styles from individual words to entire paragraphs. Customization options are available through the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html) property. -## Configuring format painter tool in toolbar +## How to add format painter tool to the toolbar You can add the `FormatPainter` tool in the Rich Text Editor using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. -By double-clicking the format painter toolbar button, `sticky` mode will be enabled. In sticky mode, the format painter remains active until the `Escape` key is pressed again to disable it. +Double-clicking the Format Painter toolbar button enables **sticky mode**, allowing multiple formatting applications until the `Escape` key is pressed. In sticky mode, the format painter remains active until the `Escape` key is pressed again to disable it. -The following code example shows how to add the format painter tool in the Rich Text Editor. +The following example demonstrates how to add the Format Painter tool to the Rich Text Editor toolbar. {% tabs %} {% highlight razor %} @@ -27,9 +27,9 @@ The following code example shows how to add the format painter tool in the Rich {% endhighlight %} {% endtabs %} -## Customizing copy and paste format +## How to customize format painter copy and paste behavior -You can customize the format painter tool in the Rich Text Editor using the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.html) property. +Users can customize the behavior of the Format Painter tool using the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.html) property. The [AllowedFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorFormatPainterSettings_AllowedFormats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `[p;]` `[h1;]` `[h2;]` `[h3;]` `[div;]` `[ul;]` `[ol;]` `[li;]` `[span;]` `[strong;]` `[em;]` `[code;]`. The following example demonstrates how to customize this functionality. @@ -53,10 +53,10 @@ Below is an example illustrating how to define the `AllowedFormats` and `DeniedF {% endhighlight %} {% endtabs %} -## Shortcut keys for copy and paste format +## Format Painter keyboard shortcut keys for copying and pasting formatting. For more details on keyboard navigation, refer to the [Keyboard support](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support) documentation. -> The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the Alt + Shift + v keyboard shortcut. +> The Format Painter retains formatting after application, allowing you to apply the same styles multiple times by using the Alt + Shift + v keyboard shortcut. -Additionally, You can perform the format painter actions programmatically using the [ExecuteCommandAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ExecuteCommandAsync_Syncfusion_Blazor_RichTextEditor_CommandName_Syncfusion_Blazor_RichTextEditor_FormatPainterParams_Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_) public method. \ No newline at end of file +Additionally, users can perform the format painter actions programmatically using the [ExecuteCommandAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ExecuteCommandAsync_Syncfusion_Blazor_RichTextEditor_CommandName_Syncfusion_Blazor_RichTextEditor_FormatPainterParams_Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_) public method. \ No newline at end of file diff --git a/blazor/rich-text-editor/tools/insert-image.md b/blazor/rich-text-editor/tools/insert-image.md index e734072a89..1c8ae57d3c 100644 --- a/blazor/rich-text-editor/tools/insert-image.md +++ b/blazor/rich-text-editor/tools/insert-image.md @@ -1,27 +1,27 @@ --- layout: post -title: Insert image in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Insert image in Syncfusion Blazor RichTextEditor component and more. +title: Insert image in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Insert image in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Insert image in RichTextEditor +# Insert image in Rich Text Editor -## Insert image from web +## Inserting images from web urls To insert an image from an online source like Google, Ping, and more, enable the images tool on the editor’s toolbar. By default, the images tool opens an image dialog that allows inserting an image from the online source. ![Blazor RichTextEditor inserting image](../images/blazor-richtexteditor-insert-image.png) -## Upload and insert image +## Uploading and inserting images Through the browse option in the image dialog, select the image from the local machine and insert it into the Rich Text Editor content. If the path field is not specified in [RichTextEditorImageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html), the image will be converted to `base64`, and a `blob` url for the image will be created, and the generated url will set as the `src` property of the `` tag as follows: -The image has been loaded from the local machine and it will be saved in the given location. +The image selected from the local machine will be uploaded and saved to the specified location. ``` @@ -34,7 +34,7 @@ N> If you want to insert many tiny images in the editor and don't want a specifi The selected image can be uploaded to the required destination using the controller action below. Map this method name into [RichTextEditorImageSettings.SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_SaveUrl) and provide required destination path through [RichTextEditorImageSettings.Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_Path) property. -N> [Vie sample in Github.](https://github.com/SyncfusionExamples/blazor-richtexteditor-image-upload). +N> [View sample on GitHub.](https://github.com/SyncfusionExamples/blazor-richtexteditor-image-upload). {% tabs %} {% highlight razor %} @@ -221,9 +221,9 @@ By default, the Rich Text Editor inserts the images in [Blob](https://help.syncf {% endhighlight %} {% endtabs %} -## Maximum file size restriction +## Restricting maximum image file size -By using the Rich Text Editor's [RichTextEditorImageSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_MaxFileSize) property, you can get the image size before uploading and restrict the image to upload when the given image size is greater than the allowed size. +Using the Rich Text Editor's [RichTextEditorImageSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_MaxFileSize) property, you can get the image size before uploading and restrict the image to upload when the given image size is greater than the allowed size. In the following code, the image size has been validated before uploading and it has been determined whether the image has been uploaded or not. @@ -264,23 +264,77 @@ In the following code, the image size has been validated before uploading and it N> You can't restrict while uploading an image as a hyperlink in the insert image dialog. When inserting images using the link, the editor does not allow you to limit the image size. You could not identify the image file size when the image was provided as a link. -## Delete image +## Delet image -To remove an image from the Rich Text Editor content, select the image and click the `Remove` tool from the quick toolbar. It will delete the image from the Rich Text Editor content. +To delete an image from the Rich Text Editor, select the image and click the `Remove` tool from the quick toolbar. It will delete the image from the Rich Text Editor content. After selecting the image from the local machine, the URL for the image will be generated. From there also, remove the image from the service location by clicking the cross icon as in the following image. ![Blazor RichTextEditor removing image](../images/blazor-richtexteditor-remove-image.png) -## Dimension +## Deleting images from server using keyboard and quick toolbar actions + +In the Rich Text Editor, deleting images using the `Delete` or `Backspace` keys, or the Quick Toolbar's `Remove` button, removes the image from the editor content not from the server. + +This behavior is intentional, allowing undo/redo operations to function properly without breaking references to previously uploaded images. + +To explicitly remove images from the server, use the [ImageDelete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_ImageDelete) event. This event is triggered after an image is removed from the content and provides the src URL of the image, which can be used to initiate a request to your server for deleting the corresponding file. + +The following sample demonstrates how to use the `ImageDelete` event in Rich Text Editor to delete images from the server after they are removed from the editor content: + +`Index.razor` + +```cshtml + +@using Syncfusion.Blazor.RichTextEditor + + + + + +@code{ + private string SaveURL = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/SaveFile"; + private string Path = "[SERVICE_HOSTED_PATH]/RichTextEditor/"; + private string RemoveURL = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/DeleteFile"; + + public async Task OnImageDeleteHandler(AfterImageDeleteEventArgs args) + { + var imageSrc = args.Src; + var fileName = imageSrc.Split('/').Last(); + var content = new MultipartFormDataContent(); + var dummyFile = new ByteArrayContent(new byte[0]); + content.Add(dummyFile, "UploadFiles", fileName); + try + { + var response = await Http.PostAsync(RemoveURL, content); + if (response.IsSuccessStatusCode) + { + Console.WriteLine($"Image deleted successfully: {fileName}"); + } + else + { + Console.WriteLine($"Image deletion failed: {response.StatusCode}"); + } + } + catch (Exception ex) + { + Console.WriteLine($"Error deleting image: {ex.Message}"); + } + } + +} + +``` + +## Set image dimensions Sets the default width and height of the image when it is inserted in the Rich Text Editor using the [RichTextEditorImageSettings.Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_Width) and [RichTextEditorImageSettings.Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_Height) property. -Through the quickToolbar, also change the width and height using the change size option. After clicking the option, the image size will open as follows. In that, specify the width and height of the image in pixels. +You can also adjust the image dimensions using the `Change Size` option in the quick toolbar. After clicking the option, the image size will open as follows. In that, specify the width and height of the image in pixels. ![Blazor RichTextEditor changing image dimension](../images/blazor-richtexteditor-image-size.png) -## Caption and alt text +## Adding captions and alt text to images The image caption and alternative text can be specified for the inserted image in the Rich Text Editor using the [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html) options such as `Image Caption` and `Alternative Text`. @@ -288,9 +342,9 @@ Through the `Alternative Text` option, set the alternative text for the image w When you click the `Image Caption` button, the image is wrapped in an image element with a caption. Then, type the caption content inside the Rich Text Editor. -## Display position +## Setting image display position -Sets the default display for an image when it is inserted in the Rich Text Editor using the [RichTextEditorImageSettings.Display](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_Display) property. +Configure the default display behavior for inserted images when it is inserted in the Rich Text Editor using the [RichTextEditorImageSettings.Display](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_Display) property. N> It has two possible options: `Inline` and `Break`. @@ -310,19 +364,19 @@ N> It has two possible options: `Inline` and `Break`. {% endhighlight %} {% endtabs %} -## Image with link +## Adding hyperlinks to images The hyperlink itself can be an image in the Rich Text Editor. If the image is given as a hyperlink, the remove, edit, and open links will be added to the quick toolbar of the image as follows. For further details about the link, refer to the [link documentation](#link-manipulation). ![Blazor RichTextEditor image with link](../images/blazor-richtexteditor-image-link.png) -## Resize image +## Resizing images The Rich Text Editor has built-in image inserting support. The resize points will appear on each corner of the image when focused. So, users can easily resize the image using mouse points or their thumbs through the resize points. Also, the resize calculation will be done based on the aspect ratio. ![Image Resizing in Blazor RichTextEditor](../images/blazor-richtexteditor-image-resize.png) -### Rename images before inserting +### Renaming images before inserting By using the `RichTextEditorImageSettings` property, the server handler can be specified to upload and rename the selected image. Then, the `OnImageUploadSuccess` event could be bound, to receive the modified file name from the server and update it in the Rich Text Editor's insert image dialog. diff --git a/blazor/rich-text-editor/tools/link-manipulation.md b/blazor/rich-text-editor/tools/link-manipulation.md index d206d2ab5b..08042c4c05 100644 --- a/blazor/rich-text-editor/tools/link-manipulation.md +++ b/blazor/rich-text-editor/tools/link-manipulation.md @@ -1,13 +1,13 @@ --- layout: post -title: Link manipulation in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Link manipulation in Syncfusion Blazor RichTextEditor component and more. +title: Link manipulation in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Link manipulation in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Link Manipulation in RichTextEditor +# Link Manipulation in Rich Text Editor The hyperlink can be inserted into the editor for quick access to the related information. The hyperlink itself can be text or an image. @@ -15,14 +15,14 @@ The hyperlink can be inserted into the editor for quick access to the related in Point the cursor anywhere within the editor where you want to insert the link. It is also possible to select a text or an image within the editor that can be converted to the hyperlink. Click the insert hyperLink tool on the toolbar. The insert link dialog will open. The dialog has the following options. -![Blazor RichTextEditor insert link](../images/blazor-richtexteditor-insert-link.png) +![Blazor Rich Text Editor insert link](../images/blazor-richtexteditor-insert-link.png) | Options | Description | |----------------|--------------------------------------| -| Web Address | Types or pastes the destination for the link you are creating | -| Display Text | Types or edits the required text that you want to display text for the link | -| Tooltip | Displays additional helpful information when you place the pointer on the hyperlink, type the required text in the `Tooltip` field. | -| Open Link | Specifies whether the given link will open in new window or not | +| Web Address | Enter or paste the destination URL for the hyperlink | +| Display Text | Enter or edit the text that will be displayed for the hyperlink | +| Tooltip |Optional text that appears when hovering over the hyperlink, type the required text in the `Tooltip` field. | +| Open Link | Choose whether the hyperlink should open in a new browser tab or the same tab | N> The Rich Text Editor link tool validates the URLs as you type them in the web address. URLs considered invalid will be highlighted with a red color by clicking the insert button in the [Insert Link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ToolbarCommand_CreateLink) dialog. @@ -34,21 +34,21 @@ N> The Rich Text Editor link tool validates the URLs as you type them in the web {% endhighlight %} {% endtabs %} -![Blazor RichTextEditor displaying link icon](../images/blazor-richtexteditor-link-icon.png) +![Link icon displayed in Blazor Rich Text Editor toolbar](../images/blazor-richtexteditor-link-icon.png) -## Auto link +## Enable auto-linking When you type URL and enter key to the Rich Text Editor, the typed URL will be automatically changed into the hyperlink. -## Auto URL +## Enable auto URL conversion When the [EnableAutoUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableAutoUrl) property is enabled, it will accept the given URL (relative or absolute) without validating it for hyperlinks. Otherwise, the given URL will be automatically converted to absolute path URL by prefixing https:// for hyperlinks, and it defaults to false. -## Edit and remove link +## How to edit or remove a hyperlink Add the custom tools on the selected link inside the Rich Text Editor through the quick toolbar. -![Blazor RichTextEditor with quick toolbar link](../images/blazor-richtexteditor-quick-toolbar-link.png) +![Blazor Rich Text Editor with quick toolbar link](../images/blazor-richtexteditor-quick-toolbar-link.png) {% tabs %} {% highlight razor %} @@ -58,7 +58,7 @@ Add the custom tools on the selected link inside the Rich Text Editor through th {% endhighlight %} {% endtabs %} -![Blazor RichTextEditor link quick toolbar](../images/blazor-richtexteditor-quick-link.png) +![Blazor Rich Text Editor link quick toolbar](../images/blazor-richtexteditor-quick-link.png) ## See also diff --git a/blazor/rich-text-editor/tools/styling-tools.md b/blazor/rich-text-editor/tools/styling-tools.md index cd3ab7ff15..593a921a60 100644 --- a/blazor/rich-text-editor/tools/styling-tools.md +++ b/blazor/rich-text-editor/tools/styling-tools.md @@ -1,13 +1,13 @@ --- layout: post -title: Styling tools in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Styling tools in Syncfusion Blazor RichTextEditor component and more. +title: Styling tools in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Styling tools in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Styling Tools in RichTextEditor +# Styling Tools in Rich Text Editor ## Font family @@ -184,7 +184,7 @@ The Rich Text Editor provides support for custom formats with an existing list. ![Blazor RichTextEditor with Custom Format](../images/blazor-richtexteditor-custom-format.png) -## Font and background color +## Applying font and background colors To apply the font color or background color for a selected content of RTE, use the font color and background color tools. @@ -443,7 +443,7 @@ N> Make sure to add a CSS class `e-rte-content` to the content container. } ``` -## Number and bullet format lists +## Customizing numbered and bulleted lists This feature allows users to change the appearance of the numbered and bulleted lists. Users can also apply different numbering or bullet formats lists such as lowercase greek, upper Alpha, square, and circles. Also, customize the style type of the lists to be populated in the dropdown from the toolbar by using the [NumberFormatList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorNumberFormatList.html) and [BulletFormatList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorBulletFormatList.html) properties in the Rich Text Editor. @@ -459,7 +459,7 @@ This feature allows users to change the appearance of the numbered and bulleted -## Code block +## Formatting code blocks Configure code block formatting as a separate toolbar button by adding the `InsertCode` Command within the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. The `InsertCode` button has a toggle state to apply code block formatting to the editor and remove code block formatting from the editor. diff --git a/blazor/rich-text-editor/tools/table-manipulation.md b/blazor/rich-text-editor/tools/table-manipulation.md index f0603e893f..590ffff59c 100644 --- a/blazor/rich-text-editor/tools/table-manipulation.md +++ b/blazor/rich-text-editor/tools/table-manipulation.md @@ -1,13 +1,13 @@ --- layout: post -title: Table manipulation in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about Table manipulation in Syncfusion Blazor RichTextEditor component and more. +title: Table manipulation in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about Table manipulation in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Table Manipulation in RichTextEditor +# Table Manipulation in Rich Text Editor The Rich Text Editor allows you to insert the table of content in the edit panel and provide options to add, edit, and remove the table as well as to perform other table-related actions. For inserting the table into the Rich Text Editor, the following list of options has been provided in the [RichTextEditorTableSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorTableSettings.html). @@ -218,7 +218,7 @@ The Rich Text Editor provides support to custom styles for tables. If you want t ![Blazor RichTextEditor with custom table styles](../images/blazor-richtexteditor-custom-table-styles.png) -## Cell Color +## Cell color The background color can be set for each table cell through the [TableToolbarCommand.BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_BackgroundColor) command available with the quick toolbar. diff --git a/blazor/rich-text-editor/tools/video.md b/blazor/rich-text-editor/tools/video.md index 267df442aa..79fbda9ef7 100644 --- a/blazor/rich-text-editor/tools/video.md +++ b/blazor/rich-text-editor/tools/video.md @@ -1,15 +1,15 @@ --- layout: post -title: Video in Blazor RichTextEditor Component | Syncfusion -description: Checkout and learn here all about insert video in Syncfusion Blazor RichTextEditor component and more. +title: Video in Blazor Rich Text Editor Component | Syncfusion +description: Checkout and learn here all about insert video in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor documentation: ug --- -# Insert Video in Blazor RichTextEditor Component +# Insert Video in Blazor Rich Text Editor Component -Once a video file has been inserted, replace it using the Rich Text Editor [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) `Replace` option. Replace the video file either by using the embedded URL or the web URL and the browse option in the video dialog. +After inserting a video file, you can replace it using the Rich Text Editor[RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) `Replace` option. Replace the video file either by using the embedded URL or the web URL and the browse option in the video dialog. | Options | Description | |----------------|---------| @@ -55,7 +55,7 @@ By default, the video tool opens the video dialog, allowing you to insert an emb In the video dialog, by using the `browse` option, select the video from the local machine and insert it into the Rich Text Editor content. -If the path field is not specified in the [RichTextEditorVideoSettings]https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorVideoSettings.html), the video will be converted into `Blob` url or `Base64` and inserted inside the Rich Text Editor. +If the path field is not specified in the [RichTextEditorVideoSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorVideoSettings.html), the video will be converted into `Blob` url or `Base64` and inserted inside the Rich Text Editor. ### Server-side action @@ -179,7 +179,7 @@ In the following example, the video size has been validated before uploading and ## Replacing video -Once a video file has been inserted, replace it using the Rich Text Editor [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) `Replace` option. Replace the video file either by using the embedded URL or the web URL and the browse option in the video dialog. +After inserting a video file, you can replace it using the Rich Text Editor [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) `Replace` option. Replace the video file either by using the embedded URL or the web URL and the browse option in the video dialog. ![Blazor RichTextEditor embed video replace](../images/blazor-richtexteditor-video-replace-embed.png) @@ -203,7 +203,7 @@ Change the width and height of the [RichTextEditorQuickToolbarSettings](https:// ## Display Position -Sets the default display for an video when it is inserted in the Rich Text Editor using the [RichTextEditorMediaSettings.layoutOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_LayoutOption). It has two possible options: `Inline` and `Break`. When updating the display positions, it updates the video elements’ layout position. +Sets the default display for a video when it is inserted in the Rich Text Editor using the [RichTextEditorMediaSettings.layoutOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_LayoutOption). It has two possible options: `Inline` and `Break`. When updating the display positions, it updates the video elements’ layout position. N> The default `layoutOption` property is set to `Inline`. From 26aafd7ee9c02ee3cecb9bf89ae2c58c04f17a83 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Mon, 6 Oct 2025 13:05:24 +0530 Subject: [PATCH 03/14] 983303: Updated style.md, table.md, toolbar.md, undo-redo-manager.md, webassembly-performance.md, xhtml-validation.md --- blazor/rich-text-editor/table.md | 42 ++++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/blazor/rich-text-editor/table.md b/blazor/rich-text-editor/table.md index 1357a0a2c8..4ccd353710 100644 --- a/blazor/rich-text-editor/table.md +++ b/blazor/rich-text-editor/table.md @@ -9,19 +9,19 @@ documentation: ug # Table in Blazor RichTextEditor Component -Rich Text Editor allows users to insert tables in edit panel and provide options to add, edit, and remove the table as well as perform other table related action. For inserting the table to the Rich Text Editor, the following list of options are available in the [RichTextEditorTableSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html) +Rich Text Editor allows to insert table of content in edit panel and provide options to add, edit, and remove the table as well as perform other table related action. For inserting the table to the Rich Text Editor, the following list of options have been provided in the `RichTextEditorTableSettings` | Options | Description | Default Value | |----------------|---------|-----------------------------| | MinWidth | Sets the default minWidth of the table. | 0 | | MaxWidth | Sets the default maxWidth of the table. | null | | EnableResize | Enables resize feature in table.| true | -| Styles | This is an array of key value pair, on each pair, key should be name of styling and value is class name. This list appears in the quick toolbar and allows users to apply predefined styles such as dashed borders or alternate row shading. | `List` | +| Styles | This is an array of key value pair, on each pair, key should be name of styling and value is class name. This list will be shown on quick toolbar options to change the styles of table on designing like dashed, double bordered. | `List` | | Width | Sets the default width of the table. | 100% | ## Insert table -Using the `CreateTable` toolbar option, select a number of rows and columns to be inserted over the table grid and insert table into Rich Text Editor content using the mouse. Alternatively, tables can be inserted using the `Insert Table` dialog, where users manually specify the number of rows and columns. This method is commonly used on mobile devices. +Using the `CreateTable` toolbar option, select a number of rows and columns to be inserted over the table grid and insert table into Rich Text Editor content using the mouse. Tables can also be inserted through the `Insert Table` option in the pop-up where the number of rows and columns can be provided manually and this is the default way in devices. In the following sample, the table has been inserted using `CreateTable` toolbar item. @@ -54,51 +54,51 @@ In the following sample, the table has been inserted using `CreateTable` toolbar ![Inserting Table in Blazor RichTextEditor](./images/blazor-richtexteditor-insert-table.png) -## Quick toolbar +## Quick Toolbar -The quick toolbar appears when a user clicks on a table. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily. +Quick toolbar is opened by clicking the table. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily. -## Table header +## Table Header `Table Header` command is available with quick toolbar option through which the header row can be added or removed from the inserted table. The following image illustrates the table header. ![Blazor RichTextEditor with Table Header](./images/blazor-richtexteditor-table-header.png) -## Insert or delete table rows +## Insert Rows `Rows` can be inserted above or below the required table cell through the quick toolbar. Also, focused row can be deleted. The following screenshot shows the available options of the row item. ![Inserting Table Rows in Blazor RichTextEditor](./images/blazor-richtexteditor-insert-table-rows.png) -## Insert or delete table columns +## Insert Columns `Columns` can be inserted to the left or right side of the required table cell through the quick toolbar. Also, the focused column can be deleted. The following screenshot shows the available options of the column item. ![Inserting Table Column in Blazor RichTextEditor](./images/blazor-richtexteditor-insert-table-column.png) -## Set table cell background Color +## Set Color The Background Color can be set for each table cell through the `BackgroundColor` command available with quick toolbar. ![Changing Table Background Color in Blazor RichTextEditor](./images/blazor-richtexteditor-table-background-color.png) -## Delete table +## Delete Table Using the delete item in the quick toolbar, users can delete the entire table. -## Vertical align +## Vertical Align -Text within table cells can be vertically aligned to top, middle, or bottom using the `TableCellVerticalAlign` command of the quick toolbar. +Text inside the table can be aligned to top, middle, or bottom using the `TableCellVerticalAlign` command of the quick toolbar. ![Changing Vertical Alignment in Blazor RichTextEditor Table](./images/blazor-richtexteditor-vertical-alignment.png) -## Horizontal align +## Horizontal Align -Text within table cells can be horizontally aligned to left, center, or right using the `TableCellHorizontalAlign` command of the quick toolbar. +Text inside the table can be aligned left, right, or center using the `TableCellHorizontalAlign` command of the quick toolbar. ![Changing Horizontal Alignment in Blazor RichTextEditor Table](./images/blazor-richtexteditor-horizontal-alignment.png) -## Table styles +## Table Styles Table styles provided for class name should be appended to a table element. It helps to design the table in specific CSS styles when inserting in the editor. @@ -110,9 +110,9 @@ By default, provides `Dashed border` and `Alternate rows`. ![Displaying Table Styles in Blazor RichTextEditor](./images/blazor-richtexteditor-table-style.png) -### Add custom table styles +### Custom Styles -Rich Text Editor supports custom table styles. If you want to add additional styles, pass the styles information as `List` data to the `Styles` field of `RichTextEditorTableSettings` tag. +Rich Text Editor provides support to custom styles for tables. If you want to add additional styles, pass the styles information as `List` data to the `Styles` field of `RichTextEditorTableSettings` tag. ```cshtml @@ -137,7 +137,7 @@ Rich Text Editor supports custom table styles. If you want to add additional sty ![Blazor RichTextEditor with Custom Table Styles](./images/blazor-richtexteditor-custom-table-styles.png) -## Configure table properties +## Table Properties Sets the default width of the table when it is inserted in the Rich Text Editor using the width of `RichTextEditorTableSettings`. @@ -147,19 +147,19 @@ Using the quick toolbar, users can change the width, cell padding, and cell spac N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools. -## Merge and split table cells +## Table cell merge and split The Rich Text Editor allows users to change the appearance of the tables by splitting or merging the table cells. `TableCell` item should be configured in the Table [quickToolbarSettings](../api/rich-text-editor/quickToolbarSettings/#table) property to show the merge/split icons while selecting the table cells. -### Merge table cells +### Table cell merge The table cell merge feature allows to merge two or more row and column cells into a single cell with its contents. ![Table Cell Merging in Blazor RichTextEditor](./images/blazor-richtexteditor-table-cell-merge.png) -### Split table cells +### Table cell split The table cell split feature allows to a selected cell can be split both horizontally and vertically. From b99f2f3de104da3645e125ddfe6f1eacf72952dd Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:07:04 +0530 Subject: [PATCH 04/14] Update xhtml-validation.md --- blazor/rich-text-editor/xhtml-validation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/rich-text-editor/xhtml-validation.md b/blazor/rich-text-editor/xhtml-validation.md index 31c4ecb1b4..342de9c79d 100644 --- a/blazor/rich-text-editor/xhtml-validation.md +++ b/blazor/rich-text-editor/xhtml-validation.md @@ -7,7 +7,7 @@ control: RichTextEditor documentation: ug --- -# Xhtml Validation +# Xhtml validation in Rich Text Editor The Rich Text Editor includes an `EnableXhtml` property that allows for continuous validation of the Rich Text Editor’s source content against the XHTML standard. When content is entered or modified in the editor, this feature ensures ongoing compliance by automatically removing invalid elements and attributes. @@ -37,4 +37,4 @@ The Rich Text Editor checks the following settings on validation: {% endhighlight %} {% endtabs %} -N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools. \ No newline at end of file +N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools. From 901ae7366371aa6e99bc55bcd4f51ece8bdeff01 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:45:55 +0530 Subject: [PATCH 05/14] Update code-block.md --- blazor/rich-text-editor/tools/code-block.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/rich-text-editor/tools/code-block.md b/blazor/rich-text-editor/tools/code-block.md index fa38ebdd52..225d1f0102 100644 --- a/blazor/rich-text-editor/tools/code-block.md +++ b/blazor/rich-text-editor/tools/code-block.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Use Code Block in Blazor Rich Text Editor Component | Syncfusion +title: How to Use Code Block in Blazor RichTextEditor Component | Syncfusion description: Checkout and learn here all about Code Block in Syncfusion Blazor Rich Text Editor component and much more. platform: Blazor control: RichTextEditor From 977ba2f3416d5daa1ccfb97554fc4db5d1cbfaad Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:46:55 +0530 Subject: [PATCH 06/14] Update audio.md --- blazor/rich-text-editor/tools/audio.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/rich-text-editor/tools/audio.md b/blazor/rich-text-editor/tools/audio.md index b3e9d17d36..c5918f2fba 100644 --- a/blazor/rich-text-editor/tools/audio.md +++ b/blazor/rich-text-editor/tools/audio.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Insert and Manage Audio in Blazor Rich Text Editor Component | Syncfusion +title: Using Code Block in Blazor Rich Text Editor | Syncfusion description: Checkout and learn here all about insert audio in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor @@ -387,4 +387,4 @@ namespace AudioUpload.Controllers ## See also * [How to edit the quick toolbar settings](../toolbar#audio-quick-toolbar) -* [How to use link editing option in the toolbar items](../tools#insert-link) \ No newline at end of file +* [How to use link editing option in the toolbar items](../tools#insert-link) From bf22932ba1519a92c62de201b19cdbbf6314f34c Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:47:40 +0530 Subject: [PATCH 07/14] Update custom-tool.md --- blazor/rich-text-editor/tools/custom-tool.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/rich-text-editor/tools/custom-tool.md b/blazor/rich-text-editor/tools/custom-tool.md index f085e9ca74..e47e312ba7 100644 --- a/blazor/rich-text-editor/tools/custom-tool.md +++ b/blazor/rich-text-editor/tools/custom-tool.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Add a Custom Toolbar Tool in Blazor Rich Text Editor Component | Syncfusion +title: How to Add a Custom Tool in Blazor RichTextEditor | Syncfusion description: Checkout and learn here all about Custom tool in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor From 0ae08514dabb1a05f0586feb6586a143709e4654 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:48:09 +0530 Subject: [PATCH 08/14] Update format-painter.md --- blazor/rich-text-editor/tools/format-painter.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/rich-text-editor/tools/format-painter.md b/blazor/rich-text-editor/tools/format-painter.md index ef8951ee52..2656a90c65 100644 --- a/blazor/rich-text-editor/tools/format-painter.md +++ b/blazor/rich-text-editor/tools/format-painter.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Use Format Painter in Blazor Rich Text Editor Component | Syncfusion +title: Using Format Painter in Blazor RichTextEditor | Syncfusion description: Checkout and learn here all about Format Painter in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor @@ -59,4 +59,4 @@ For more details on keyboard navigation, refer to the [Keyboard support](https:/ > The Format Painter retains formatting after application, allowing you to apply the same styles multiple times by using the Alt + Shift + v keyboard shortcut. -Additionally, users can perform the format painter actions programmatically using the [ExecuteCommandAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ExecuteCommandAsync_Syncfusion_Blazor_RichTextEditor_CommandName_Syncfusion_Blazor_RichTextEditor_FormatPainterParams_Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_) public method. \ No newline at end of file +Additionally, users can perform the format painter actions programmatically using the [ExecuteCommandAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ExecuteCommandAsync_Syncfusion_Blazor_RichTextEditor_CommandName_Syncfusion_Blazor_RichTextEditor_FormatPainterParams_Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_) public method. From 91d327147d15a1a31cc517ada3fa76e6386b5d62 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:49:06 +0530 Subject: [PATCH 09/14] Update audio.md --- blazor/rich-text-editor/tools/audio.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/rich-text-editor/tools/audio.md b/blazor/rich-text-editor/tools/audio.md index c5918f2fba..d3b1d392d0 100644 --- a/blazor/rich-text-editor/tools/audio.md +++ b/blazor/rich-text-editor/tools/audio.md @@ -1,6 +1,6 @@ --- layout: post -title: Using Code Block in Blazor Rich Text Editor | Syncfusion +title: Audio in Blazor RichTextEditor Component | Syncfusion description: Checkout and learn here all about insert audio in Syncfusion Blazor Rich Text Editor component and more. platform: Blazor control: RichTextEditor From 4f68ad52a8c3d7a976c4cadd901d6a6c5f6529d0 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:49:33 +0530 Subject: [PATCH 10/14] Update code-block.md --- blazor/rich-text-editor/tools/code-block.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/rich-text-editor/tools/code-block.md b/blazor/rich-text-editor/tools/code-block.md index 225d1f0102..0554e5cc70 100644 --- a/blazor/rich-text-editor/tools/code-block.md +++ b/blazor/rich-text-editor/tools/code-block.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Use Code Block in Blazor RichTextEditor Component | Syncfusion +title: Code Block in Blazor RichTextEditor Component | Syncfusion description: Checkout and learn here all about Code Block in Syncfusion Blazor Rich Text Editor component and much more. platform: Blazor control: RichTextEditor From 759c81f8c23f4d9de714caa217d1eda3e7dec991 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:50:50 +0530 Subject: [PATCH 11/14] Update built-in-tools.md --- blazor/rich-text-editor/tools/built-in-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/rich-text-editor/tools/built-in-tools.md b/blazor/rich-text-editor/tools/built-in-tools.md index a615bf91c8..87fbd54a32 100644 --- a/blazor/rich-text-editor/tools/built-in-tools.md +++ b/blazor/rich-text-editor/tools/built-in-tools.md @@ -198,7 +198,7 @@ Users can customize the order of toolbar tools to suit your application's requir ## How to remove built-in tool from toolbar -Remove the build-in tools from the toolbar by using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. +Remove the built-in tools from the toolbar by using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. {% tabs %} {% highlight razor %} From de36c440a9f5e2bbed5252932823f0f9a8140429 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:51:43 +0530 Subject: [PATCH 12/14] Update insert-image.md --- blazor/rich-text-editor/tools/insert-image.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/rich-text-editor/tools/insert-image.md b/blazor/rich-text-editor/tools/insert-image.md index 1c8ae57d3c..a50b669da1 100644 --- a/blazor/rich-text-editor/tools/insert-image.md +++ b/blazor/rich-text-editor/tools/insert-image.md @@ -264,7 +264,7 @@ In the following code, the image size has been validated before uploading and it N> You can't restrict while uploading an image as a hyperlink in the insert image dialog. When inserting images using the link, the editor does not allow you to limit the image size. You could not identify the image file size when the image was provided as a link. -## Delet image +## Delete image To delete an image from the Rich Text Editor, select the image and click the `Remove` tool from the quick toolbar. It will delete the image from the Rich Text Editor content. @@ -380,7 +380,7 @@ The Rich Text Editor has built-in image inserting support. The resize points wil By using the `RichTextEditorImageSettings` property, the server handler can be specified to upload and rename the selected image. Then, the `OnImageUploadSuccess` event could be bound, to receive the modified file name from the server and update it in the Rich Text Editor's insert image dialog. -N> [View sample in Github.](https://github.com/SyncfusionExamples/blazor-richtexteditor-rename-image) +N> [View sample in GitHub.](https://github.com/SyncfusionExamples/blazor-richtexteditor-rename-image) {% tabs %} {% highlight razor %} @@ -498,4 +498,4 @@ namespace RenameImage.Controllers ## See also -* [How to insert image editing option in the toolbar items](../toolbar#image-quick-toolbar) \ No newline at end of file +* [How to insert image editing option in the toolbar items](../toolbar#image-quick-toolbar) From 3b357bc01a053acae135ce27e4a9a51102da7a7f Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 14:15:53 +0530 Subject: [PATCH 13/14] Update link-manipulation.md --- blazor/rich-text-editor/tools/link-manipulation.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/blazor/rich-text-editor/tools/link-manipulation.md b/blazor/rich-text-editor/tools/link-manipulation.md index 08042c4c05..5485058208 100644 --- a/blazor/rich-text-editor/tools/link-manipulation.md +++ b/blazor/rich-text-editor/tools/link-manipulation.md @@ -48,8 +48,6 @@ When the [EnableAutoUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor Add the custom tools on the selected link inside the Rich Text Editor through the quick toolbar. -![Blazor Rich Text Editor with quick toolbar link](../images/blazor-richtexteditor-quick-toolbar-link.png) - {% tabs %} {% highlight razor %} @@ -58,8 +56,8 @@ Add the custom tools on the selected link inside the Rich Text Editor through th {% endhighlight %} {% endtabs %} -![Blazor Rich Text Editor link quick toolbar](../images/blazor-richtexteditor-quick-link.png) +![Blazor Rich Text Editor link quick toolbar](./images/blazor-richtexteditor-link-quick-toolbar.png) ## See also -* [How to insert link editing option in the toolbar items](../toolbar#link-quick-toolbar) \ No newline at end of file +* [How to insert link editing option in the toolbar items](../toolbar#link-quick-toolbar) From 0a675e09035419da13f4601e2edd46cfd0a1b078 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 14:17:25 +0530 Subject: [PATCH 14/14] Update link-manipulation.md --- blazor/rich-text-editor/tools/link-manipulation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/rich-text-editor/tools/link-manipulation.md b/blazor/rich-text-editor/tools/link-manipulation.md index 5485058208..17bfb2159f 100644 --- a/blazor/rich-text-editor/tools/link-manipulation.md +++ b/blazor/rich-text-editor/tools/link-manipulation.md @@ -56,7 +56,7 @@ Add the custom tools on the selected link inside the Rich Text Editor through th {% endhighlight %} {% endtabs %} -![Blazor Rich Text Editor link quick toolbar](./images/blazor-richtexteditor-link-quick-toolbar.png) +![Blazor Rich Text Editor link quick toolbar](../images/blazor-richtexteditor-link-quick-toolbar.png) ## See also