Skip to content

Commit 82866cd

Browse files
authored
Merge pull request #6636 from syncfusion-content/983303-udated1-4-d
983303: Updated accessibility.md, data-binding.md, editor-modes.md, enter-key.md
2 parents d929edb + 1579703 commit 82866cd

File tree

4 files changed

+56
-49
lines changed

4 files changed

+56
-49
lines changed
Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
layout: post
3-
title: Accessibility in Blazor RichTextEditor Component | Syncfusion
4-
description: Checkout and learn here all about accessibility in Syncfusion Blazor RichTextEditor component and more.
3+
title: Blazor Rich Text Editor Accessibility | Syncfusion
4+
description: Learn about the accessibility features in the Syncfusion Blazor Rich Text Editor component and more.
55
platform: Blazor
66
control: RichTextEditor
77
documentation: ug
88
---
99

10-
# Accessibility in Blazor Rich Text Editor Component
10+
# Blazor Rich Text Editor Accessibility
1111

12-
The [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component has been designed, keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, and applies the WAI-ARIA roles, states, and properties. This component is characterized by complete ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
12+
The [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) is designed in compliance with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, applying the appropriate roles, states, and properties. This ensures that the component is accessible to users who rely on assistive technologies (AT) or keyboard navigation.
1313

14-
The Blazor Rich Text Editor component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
14+
The Blazor Rich Text Editor follows established accessibility guidelines, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
1515

1616
The accessibility compliance for the Blazor Rich Text Editor component is outlined below.
1717

@@ -32,32 +32,32 @@ The accessibility compliance for the Blazor Rich Text Editor component is outlin
3232
margin: 0.5em 0;
3333
}
3434
</style>
35-
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
35+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of a component meet the requirement.</div>
3636

3737
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
3838

3939
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
4040

4141
## WAI-ARIA attributes
4242

43-
* The toolbar of Blazor Rich Text Editor, assigned the role of `Toolbar` and has the following list of [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) attribute.
43+
The toolbar of the Blazor Rich Text Editor is assigned the `toolbar` role and supports the following [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) attributes:
4444

4545
| **Property** | **Functionalities** |
4646
| --- | --- |
4747
| role="toolbar" | This attribute added to the ToolBar element describes the actual role of the element. |
48-
| aria-orientation | Indicates the ToolBar orientation. Default value is `horizontal`. |
49-
| aria-haspopup | Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled, attribute value has to be changed to `true`. | |
50-
| aria-disabled | Indicates the disabled state of the ToolBar. |
48+
| aria-orientation | Indicates the toolbar's orientation. The default value is `horizontal`. |
49+
| aria-haspopup | Indicates if the toolbar has a popup. When popup mode is enabled, this value is set to `true`. The default is `false`. |
50+
| aria-disabled | Indicates the disabled state of the toolbar. |
5151
| aria-owns | Identifies an element to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy cannot represent the relationship. In the Rich Text Editor, the attribute contains the ID of the Rich Text Editor to indicate the popup as a child element. |
5252

53-
For further details of Toolbar ARIA attributes, refer the [`accessibility of Toolbar`](../../toolbar/accessibility) documentation.
53+
For more details on toolbar WAI-ARIA attributes, refer to the [accessibility of Toolbar](https://blazor.syncfusion.com/documentation/toolbar/accessibility) documentation.
5454

55-
The Blazor Rich Text Editor element is assigned the role of `application`.
55+
The Blazor Rich Text Editor element is assigned the `application` role.
5656

5757
| **Property** | **Functionalities** |
5858
| --- | --- |
5959
| role="application" | This attribute added to the Rich Text Editor element describes the actual role of the element. |
60-
| aria-disabled | Indicates the disabled state of the ToolBar. |
60+
| aria-disabled | Indicates the disabled state of the toolbar. |
6161

6262
{% tabs %}
6363
{% highlight cshtml %}
@@ -71,21 +71,21 @@ The Blazor Rich Text Editor element is assigned the role of `application`.
7171

7272
## Keyboard interaction
7373

74-
The Blazor Rich Text Editor component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Rich Text Editor component. 
74+
The Blazor Rich Text Editor component follows [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it easy for people who use assistive technologies (AT) or rely solely on keyboard navigation. The component supports a variety of keyboard shortcuts for common actions.
7575

76-
For more details on keyboard navigation, refer to the [Keyboard support](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support) documentation.
76+
For a complete list of keyboard shortcuts, refer to the [Keyboard Support](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support) documentation.
7777

7878
## Ensuring accessibility
7979

80-
The Blazor Rich Text Editor component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
80+
The Blazor Rich Text Editor component's accessibility is validated using the [axe-core](https://www.npmjs.com/package/axe-core/) software tool during automated testing.
8181

82-
The accessibility compliance of the Rich Text Editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rich-text-editor) in a new window to evaluate the accessibility of the Rich Text Editor component with accessibility tools.
82+
The accessibility compliance of the Rich Text Editor component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rich-text-editor) in a new window to evaluate the component with accessibility tools.
8383

8484
### Custom key configuration
8585

86-
Customize the key configuration for the keyboard interaction of the Rich Text Editor using the [KeyConfigure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_KeyConfigure) property.
86+
You can customize the key configurations for keyboard interactions in the Rich Text Editor using the [KeyConfigure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_KeyConfigure) property.
8787

88-
In the following code block, customize the bold and italic, toolbar actions with **ctrl+1**, **ctrl+2** respectively.
88+
In the following example, the bold and italic actions are customized to use **Ctrl+1** and **Ctrl+2**, respectively.
8989

9090
{% tabs %}
9191
{% highlight cshtml %}
@@ -95,9 +95,8 @@ In the following code block, customize the bold and italic, toolbar actions with
9595
{% endhighlight %}
9696
{% endtabs %}
9797

98-
99-
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 knows how to render and configure the rich text editor tools.
98+
N> You can explore the [Blazor Rich Text Editor feature tour page](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) to see its capabilities. You can also refer to the [Blazor Rich Text Editor demo](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) to learn how to render and configure the component and its tools.
10099

101100
## See also
102101

103-
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](../common/accessibility)
102+
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](../common/accessibility)

blazor/rich-text-editor/data-binding.md

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

1010
# Value Binding in Blazor RichTextEditor
1111

12-
You can bind the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) to the editor component, by using the `@bind-Value` attribute and it supports string type. If component value has been changed, it will affect all the places where you bind the variable for the **bind-Value** attribute.
12+
The Blazor Rich Text Editor supports two-way data binding to its [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property using the `@bind-Value` attribute. The `Value` property accepts a `string` type. When the editor's content is modified, the bound variable is automatically updated. Likewise, any changes to the variable will be reflected in the editor's content.
1313

1414
{% tabs %}
1515
{% highlight razor %}
@@ -19,13 +19,15 @@ You can bind the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
1919
{% endhighlight %}
2020
{% endtabs %}
2121

22-
## Auto save
22+
## Auto-save
2323

24-
The Rich Text Editor saves its content automatically when you focus out the editor, and you can save its content automatically at regular intervals based on the [SaveInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_SaveInterval) and [AutoSaveOnIdle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_AutoSaveOnIdle) properties while editing.
24+
The Rich Text Editor can automatically save its content based on the configuration of the [SaveInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_SaveInterval) and [AutoSaveOnIdle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_AutoSaveOnIdle) properties. By default, the content is saved when the editor loses focus.
2525

26-
* If `AutoSaveOnIdle` is set to true, the content is saved if the editor is idle for the number of milliseconds specified in the `SaveInterval` property.
26+
* When `AutoSaveOnIdle` is `true`, the content is saved if the editor remains idle for the duration specified in the `SaveInterval` property (in milliseconds).
2727

28-
* If `AutoSaveOnIdle` is set to false, the editor saves the content at the regular interval of milliseconds specified in the `SaveInterval` property.
28+
* When `AutoSaveOnIdle` is `false`, the content is saved at the regular interval defined by the `SaveInterval` property.
29+
30+
The following example demonstrates how to use the `ValueChange` event to get a notification when the content is saved.
2931

3032
{% tabs %}
3133
{% highlight razor %}
@@ -53,9 +55,7 @@ The Rich Text Editor saves its content automatically when you focus out the edit
5355

5456
## Get editor content
5557

56-
You can get the RichTextEditor's edited content by using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_ValueChange) event.
57-
58-
When the user changes the content, the `ValueChange` event is invoked on every [SaveInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_SaveInterval) time or when the editor loses focus.
58+
You can retrieve the editor's content using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_ValueChange) event. This event is triggered either when the editor loses focus or at the specified [SaveInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_SaveInterval), allowing you to capture the latest content.
5959

6060
{% tabs %}
6161
{% highlight razor %}
@@ -65,4 +65,4 @@ When the user changes the content, the `ValueChange` event is invoked on every [
6565
{% endhighlight %}
6666
{% endtabs %}
6767

68-
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.
68+
N> To explore the Rich Text Editor's features, visit the [feature tour page](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor). You can also refer to the [Blazor Rich Text Editor demo](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) to learn how to render and configure the component and its tools.

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

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

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

12-
The [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component is used to create and edit the content and return valid HTML markup or markdown (MD) of the content. It supports the following two editing formations:
12+
The [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component allows users to create and edit content, returning valid HTML markup or Markdown (MD). It supports two editing modes:
1313

1414
* HTML Editor
1515
* Markdown Editor
1616

1717
## HTML editor
1818

19-
Rich Text Editor is a [WYSIWYG Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component for formatting the word content as HTML. The HTML editing mode is the default mode in Rich Text Editor to format the content through the available toolbar items to return the valid HTML markup. Set the `EditorMode` property to `HTML`.
19+
The Rich Text Editor is a [WYSIWYG Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) that enables users to format content as HTML. This is the default editing mode, allowing content formatting through toolbar options and returning valid HTML markup.
20+
21+
To enable HTML mode, set the [EditorMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.EditorMode.html) property to `HTML`.
2022

2123
```cshtml
2224
@@ -41,10 +43,16 @@ Rich Text Editor is a [WYSIWYG Editor](https://www.syncfusion.com/blazor-compone
4143

4244
## Markdown editor
4345

44-
Set the `EditorMode` property to `Markdown` to create or edit the content and apply formatting to view markdown formatted content. The third-party library such as `Marked` or any other library is used to convert markdown into HTML content.
46+
To enable Markdown editing, set the [EditorMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.EditorMode.html#Syncfusion_Blazor_RichTextEditor_EditorMode_Markdown) property to `Markdown`. This mode allows users to create and format content using Markdown syntax. A third-party library such as `Marked` is used to convert Markdown into HTML.
47+
48+
**Supported Tags:**
49+
50+
- Headings: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
51+
- Block elements: `blockquote`, `pre`, `p`, `OL`, `UL`
52+
53+
**Supported Selection Tags:**
4554

46-
* The Supported Tags are `h6`,`h5`,`h4`,`h3`,`h2`,`h1`,`blockquote`,`pre`,`p`,`OL`,`UL`.
47-
* The Supported Selection Tags are `Bold`, `Italic`, `StrikeThrough`, `InlineCode`, `SubScript`, `SuperScript`, `UpperCase` and `LowerCase`.
55+
- `Bold`, `Italic`, `StrikeThrough`, `InlineCode`, `SubScript`, `SuperScript`, `UpperCase`, `LowerCase`
4856

4957
```cshtml
5058
@@ -70,8 +78,8 @@ Set the `EditorMode` property to `Markdown` to create or edit the content and ap
7078

7179
For further details on Markdown editing, refer to the [Markdown](./markdown) section.
7280

73-
N> 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.
81+
N> You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) demo to learn how to render and configure the editor tools.
7482

7583
## See also
7684

77-
* [How to render the iframe](./iframe)
85+
* [How to render the iframe](./iframe)

0 commit comments

Comments
 (0)