Skip to content

Commit 3c56a4a

Browse files
authored
Merge pull request #6775 from syncfusion-content/983303-updatedmention-d
983303: Updated mention-integration.md, miscellaneous.md, paste-cleanup.md, resizable-editor.md, slash-commands.md
2 parents fa90c73 + 424f5d1 commit 3c56a4a

File tree

5 files changed

+33
-33
lines changed

5 files changed

+33
-33
lines changed

blazor/rich-text-editor/mention-integration.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ documentation: ug
99

1010
# Mention Integration in Blazor RichTextEditor
1111

12-
By integrating the [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started) component with a Rich Text Editor, users can easily mention or tag other users or objects from the suggested list without having to manually type out their names or other identifying information.
12+
By integrating the [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started) component with a Rich Text Editor, users can easily mention or tag other users or objects from the suggested list without manually typing names or identifiers.
1313

14-
The [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) property of the Mention component allows you to specify the `ID` of the content editable div element within the Rich Text Editor that you want to bind the Mention component to. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text.
14+
The [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) property of the Mention component specifies the `ID` of the content-editable div element in the Rich Text Editor to bind the Mention component. This allows you to enable the Mention functionality within the Rich Text Editor, allowing users to tag items from the suggestion list during text editing.
1515

16-
When the user types the `@` symbol followed by a character, the Rich Text Editor will display a list of suggestions for items that the user can select from. The user can then select an item from the list by clicking on it, or by typing the name of the item they want to tag.
16+
Typing the `@` symbol followed by a character displays a list of suggestions for selection. Users can select an item by clicking or typing its name.
1717

18-
In the following sample, configured the following properties with popup dimensions.
18+
In the following sample, the following properties are configured along with popup dimensions:
1919

2020
* [AllowSpaces](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_AllowSpaces) - Allow to continue search action if user enter space after mention character while searching.
2121
* [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_SuggestionCount) - The maximum number of items that will be displayed in the suggestion list.
22-
* [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) - Used to display the customized appearance in suggestion list.
22+
* [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) - Displays customized appearance in the suggestion list.
2323

2424
{% highlight cshtml %}
2525

@@ -31,6 +31,6 @@ In the following sample, configured the following properties with popup dimensio
3131

3232
> [View Sample](https://blazor.syncfusion.com/demos/rich-text-editor/mention-integration?theme=bootstrap5)
3333
34-
## See Also
34+
## See also
3535

3636
* [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started)

blazor/rich-text-editor/miscellaneous.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
---
22
layout: post
3-
title: Miscellaneous in Blazor RichTextEditor Component | Syncfusion
4-
description: Checkout and learn here all about Miscellaneous in Syncfusion Blazor RichTextEditor component and more.
3+
title: Miscellaneous in Blazor Rich Text Editor Component | Syncfusion
4+
description: Checkout and learn here all about Miscellaneous in Syncfusion Blazor Rich Text Editor component and more.
55
platform: Blazor
66
control: RichTextEditor
77
documentation: ug
88
---
99

10-
# Miscellaneous in Blazor RichTextEditor Component
10+
# Miscellaneous in Blazor Rich Text Editor Component
1111

12-
## Placeholder
12+
## Placeholder Text Customization
1313

14-
Specifies the placeholder for the Rich Text Editor’s content used when the Rich Text Editor body is empty through the `Placeholder` property.
14+
Defines placeholder text for the Rich Text Editor when the content area is empty using the `Placeholder` property.
1515

16-
Use the `e-rte-placeholder` class to define the custom font family, font color, and styles to the placeholder text.
16+
Customize the placeholder's font style and color using the `e-rte-placeholder` CSS class.
1717

1818
```css
1919

@@ -41,11 +41,11 @@ The following sample demonstrates the placeholder option in Rich Text Editor.
4141

4242
![Blazor RichTextEditor with Placeholder](./images/blazor-richtexteditor-placeholder.png)
4343

44-
## Character count
44+
## Character count and limit enforcement
4545

46-
The Rich Text Editor automatically counts the number of characters in the content while typing, using the `ShowCharCount` property. The characters count displayed at the bottom of the editor. You can limit the number of characters in your content using the `MaxLength` property. By default, the editor sets the characters limit value to infinity.
46+
The Rich Text Editor automatically counts the number of characters in the content while typing, using the [ShowCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ShowCharCount) property. The characters count displayed at the bottom of the editor. You can limit the number of characters in your content using the [MaxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_MaxLength) property. By default, the editor sets the characters limit value to infinity.
4747

48-
The character count color will be modified based on the characters in the Rich Text Editor.
48+
The character count indicator changes color based on usage thresholds:
4949

5050
| Status | Description |
5151
|----------------|---------|
@@ -72,7 +72,7 @@ The character count color will be modified based on the characters in the Rich T
7272

7373
## Code view
7474

75-
Rich Text Editor includes the ability for users to directly edit HTML code via `Source View` in the text area. If you made any modification in Source view directly, the changes will be reflected in the Rich Text Editor's content. So, the users will have more flexibility over the content they have created.
75+
The Rich Text Editor includes the ability for users to directly edit HTML code via `Source View` in the text area. If you made any modification in Source view directly, the changes will be reflected in the Rich Text Editor's content. So, the users will have more flexibility over the content they have created.
7676

7777
```cshtml
7878

blazor/rich-text-editor/paste-cleanup.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
layout: post
3-
title: Paste Clean-up in Blazor RichTextEditor | Syncfusion
4-
description: Checkout and learn here all about Paste from MS Word in Syncfusion Blazor RichTextEditor component and more.
3+
title: Paste Clean-up in Blazor Rich Text Editor | Syncfusion
4+
description: Checkout and learn here all about Paste from MS Word in Syncfusion Blazor Rich Text Editor component and more.
55
platform: Blazor
66
control: RichTextEditor
77
documentation: ug
88
---
99

10-
# Paste Clean-up in Blazor RichTextEditor
10+
# Paste Clean-up in Blazor Rich Text Editor
1111

12-
The Rich Text Editor offers a built-in option to paste content from Microsoft Word, Microsoft Outlook, Microsoft Excel, and other websites by filtering out tags, attributes, and styles. Copy content from Microsoft Office or other websites and paste it into the editor, where it is cleaned up and pasted based on the settings in the [PasteCleanupSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorPasteCleanupSettings.html) property values.
12+
The Rich Text Editor provides built-in option to paste content from Microsoft Word, Microsoft Outlook, Microsoft Excel, and other websites by filtering out tags, attributes, and styles. Copy content from Microsoft Office or other websites and paste it into the editor, where it is cleaned up and pasted based on the settings in the [PasteCleanupSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorPasteCleanupSettings.html) property values.
1313

14-
## Paste settings
14+
## Paste cleanup settings
1515

1616
When pasting content into the editor, you can control the formatting and styles by using the [PasteCleanupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorPasteCleanupSettings.html) property. The following settings are available to clean up the content:
1717

@@ -24,7 +24,7 @@ When pasting content into the editor, you can control the formatting and styles
2424
| [DeniedAttributes](#denied-attributes) | To paste the content by filtering out these attributes from the content. | null | string[] |
2525
| [AllowedStyleProperties](#allowed-style-properties) | To paste the content by accepting these style attributes and removing other style attributes. | [background, background-color, border, border-bottom, border-left, border-radius, border-right, border-style, border-top, border-width, clear, color, cursor, direction, display, float, font, font-family, font-size, font-weight, font-style, height, left, line-height, margin, margin-top, margin-left, margin-right, margin-bottom, max-height, max-width, min-height, min-width, overflow, overflow-x, overflow-y, padding, padding-bottom, padding-left, padding-right, padding-top, position, right, table-layout, text-align, text-decoration, text-indent, top, vertical-align, visibility, white-space, width] | string[] |
2626

27-
## Paste options in prompt dialog
27+
## Prompt dialog options
2828

2929
When [Prompt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorPasteCleanupSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorPasteCleanupSettings_Prompt) is set to true, pasting the content in the editor opens a dialog box with three options as radio buttons: keep, clean, and plain text.
3030

@@ -180,7 +180,7 @@ await builder.Build().RunAsync();
180180
{% endhighlight %}
181181
{% endtabs %}
182182

183-
## Get pasted content
183+
## Accessing pasted content programmatically
184184

185185
You can get the pasted text as HTML text using the [AfterPasteCleanup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_AfterPasteCleanup) event argument value.
186186

@@ -202,4 +202,4 @@ You can get the pasted text as HTML text using the [AfterPasteCleanup](https://h
202202
{% endtabs %}
203203

204204

205-
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.
205+
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 know how to render and configure the rich text editor tools.

blazor/rich-text-editor/resizable-editor.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Resizable Rich Text Editor
1111

12-
The Rich Text Editor can be dynamically resized, allowing users to change the size of the editor based on their needs. You can enable or disable this feature using the [EnableResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableResize) property. If `EnableResize` is set to true, the editor component creates a grip at the bottom right corner, which allows resizing the component in the diagonal direction.
12+
The Rich Text Editor supports dynamic resizing, allowing users to adjust the editor's dimensions based on their needs. You can enable or disable this feature using the [EnableResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableResize) property. When `EnableResize` is set to `true`, a resize handle appears at the bottom-right corner of the editor, enabling diagonal resizing.
1313

1414
{% tabs %}
1515
{% highlight cshtml %}
@@ -23,7 +23,7 @@ The Rich Text Editor can be dynamically resized, allowing users to change the si
2323

2424
## Restrict resize
2525

26-
To have a restricted resizable area for the Rich Text Editor, you need to specify the `min-width`, `max-width`, `min-height`, and `max-height` CSS properties for the component’s container element. By default, the editor is capable of resizing up to the current viewport. The `e-richtexteditor` CSS class will be available in the component's container and can be used for applying the bellow mentioned styles.
26+
To restrict the resizable area of the Rich Text Editor, define the `min-width`, `max-width`, `min-height`, and `max-height` CSS properties on the editor's container element. By default, the editor can be resized up to the limits of the current viewport. Use the `e-richtexteditor` CSS class to apply the following styles and control the resizing boundaries.
2727

2828
```css
2929
<style>

blazor/rich-text-editor/slash-commands.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Slash Commands in Blazor RichTextEditor | Syncfusion
4-
description: Checkout and learn here all about Slash Commands in Syncfusion Blazor RichTextEditor component and much more.
3+
title: Slash Commands in Blazor Rich Text Editor | Syncfusion
4+
description: Checkout and learn here all about Slash Commands in Syncfusion Blazor Rich Text Editor component and much more.
55
platform: Blazor
66
control: RichTextEditor
77
documentation: ug
88
---
99

10-
# Slash Commands in Blazor RichTextEditor
10+
# Slash Commands in Blazor Rich Text Editor
1111

12-
The slash menu in the Rich Text Editor provides users with an efficient way to apply formatting, insert elements, and execute custom commands by simply typing the “/” character. This feature enhances the user experience by offering quick access to common editing actions within the editor.
12+
The slash menu in the Rich Text Editor offers users a streamlined way to apply formatting, insert elements, and execute custom commands by simply typing the “/” character. This feature enhances the user experience by offering quick access to common editing actions within the editor.
1313

1414
## Enabling the slash menu
1515

@@ -37,7 +37,7 @@ This list can include various formatting options such as paragraph and heading l
3737

3838
The size of the slash menu popup can be customized using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_PopupWidth) and [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_PopupHeight) properties within [RichTextEditorSlashMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html). Adjusting these values allows for control over the dimensions of the menu.
3939

40-
Below is an code snippet showing how to customize both the width and height of the popup:
40+
Below is a code snippet showing how to customize both the width and height of the popup:
4141

4242
{% tabs %}
4343
{% highlight cshtml %}
@@ -49,10 +49,10 @@ Below is an code snippet showing how to customize both the width and height of t
4949

5050
## Adding custom slash menu items
5151

52-
Custom items can be added by defining the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_Items) property within the [RichTextEditorSlashMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html). This property should be a list of [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_SlashMenuItemModel) objects, which represent custom menu items. Each [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_SlashMenuItemModel) can be configured to include details such as text labels, icons, descriptions, and grouping information, providing users with a tailored set of commands when they use the slash (/) functionality in the Rich Text Editor.
52+
Custom items can be added by defining the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_Items) property within the [RichTextEditorSlashMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html). This property should be a list of [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_SlashMenuItemModel) objects, which represent custom menu items. Each [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_SlashMenuItemModel) can be configured to include details such as text labels, icons, descriptions, and grouping information, allowing users to access tailored commands quickly using the slash (/) functionality in the Rich Text Editor.
5353

5454

55-
Each custom item object can include the following properties:
55+
Each custom slash menu item can include the following properties:
5656

5757
| API | Description |
5858
|:----------------:|:---------:|

0 commit comments

Comments
 (0)