You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
5
5
platform: Blazor
6
6
control: RichTextEditor
7
7
documentation: ug
8
8
---
9
9
10
-
# Accessibility in Blazor Rich Text Editor Component
10
+
# Blazor Rich Text Editor Accessibility
11
11
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 designedin 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.
13
13
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.
15
15
16
16
The accessibility compliance for the Blazor Rich Text Editor component is outlined below.
17
17
@@ -32,32 +32,32 @@ The accessibility compliance for the Blazor Rich Text Editor component is outlin
32
32
margin: 0.5em0;
33
33
}
34
34
</style>
35
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
35
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of a component meet the requirement.</div>
36
36
37
37
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
38
38
39
39
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
40
40
41
41
## WAI-ARIA attributes
42
42
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:
44
44
45
45
|**Property**|**Functionalities**|
46
46
| --- | --- |
47
47
| 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. |
51
51
| 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. |
52
52
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.
54
54
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.
56
56
57
57
|**Property**|**Functionalities**|
58
58
| --- | --- |
59
59
| 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. |
61
61
62
62
{% tabs %}
63
63
{% highlight cshtml %}
@@ -71,21 +71,21 @@ The Blazor Rich Text Editor element is assigned the role of `application`.
71
71
72
72
## Keyboard interaction
73
73
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.
75
75
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.
77
77
78
78
## Ensuring accessibility
79
79
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.
81
81
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.
83
83
84
84
### Custom key configuration
85
85
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.
87
87
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 italicactions are customized to use **Ctrl+1** and **Ctrl+2**, respectively.
89
89
90
90
{% tabs %}
91
91
{% highlight cshtml %}
@@ -95,9 +95,8 @@ In the following code block, customize the bold and italic, toolbar actions with
95
95
{% endhighlight %}
96
96
{% endtabs %}
97
97
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.
100
99
101
100
## See also
102
101
103
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](../common/accessibility)
102
+
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](../common/accessibility)
Copy file name to clipboardExpand all lines: blazor/rich-text-editor/data-binding.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,15 @@
1
1
---
2
2
layout: post
3
3
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.
5
5
platform: Blazor
6
6
control: RichTextEditor
7
7
documentation: ug
8
8
---
9
9
10
10
# Value Binding in Blazor RichTextEditor
11
11
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.
13
13
14
14
{% tabs %}
15
15
{% highlight razor %}
@@ -19,13 +19,15 @@ You can bind the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
19
19
{% endhighlight %}
20
20
{% endtabs %}
21
21
22
-
## Autosave
22
+
## Auto-save
23
23
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.
25
25
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).
27
27
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.
29
31
30
32
{% tabs %}
31
33
{% highlight razor %}
@@ -53,9 +55,7 @@ The Rich Text Editor saves its content automatically when you focus out the edit
53
55
54
56
## Get editor content
55
57
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.
59
59
60
60
{% tabs %}
61
61
{% highlight razor %}
@@ -65,4 +65,4 @@ When the user changes the content, the `ValueChange` event is invoked on every [
65
65
{% endhighlight %}
66
66
{% endtabs %}
67
67
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 configurethe 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 configurethe component and its tools.
Copy file name to clipboardExpand all lines: blazor/rich-text-editor/editor-modes.md
+17-9Lines changed: 17 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,24 @@
1
1
---
2
2
layout: post
3
-
title: Editor Modes in Blazor RichTextEditor Component | Syncfusion
3
+
title: Editor Modes in Blazor Rich Text Editor Component | Syncfusion
4
4
description: Checkout and learn here all about Editor Modes in Syncfusion Blazor RichTextEditor component and more.
5
5
platform: Blazor
6
6
control: RichTextEditor
7
7
documentation: ug
8
8
---
9
9
10
-
# Editor Modes in Blazor RichTextEditor Component
10
+
# Editor Modes in Syncfusion Blazor Rich Text Editor
11
11
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:
13
13
14
14
* HTML Editor
15
15
* Markdown Editor
16
16
17
17
## HTML editor
18
18
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`.
20
22
21
23
```cshtml
22
24
@@ -41,10 +43,16 @@ Rich Text Editor is a [WYSIWYG Editor](https://www.syncfusion.com/blazor-compone
41
43
42
44
## Markdown editor
43
45
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.
@@ -70,8 +78,8 @@ Set the `EditorMode` property to `Markdown` to create or edit the content and ap
70
78
71
79
For further details on Markdown editing, refer to the [Markdown](./markdown) section.
72
80
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.
0 commit comments