Skip to content

Commit 0435820

Browse files
marin-bratanovsvdimitr
marin-bratanov
and
svdimitr
authored
Editor - initial docs (#108)
* docs(editor): validation * docs(editor): add to kbd nav article * chore(editor): skeleton * docs(editor): first look snippet * chore(editor): ToC * docs(editor): deps * docs(editor): get/set value (wip) * chore(editor): getting and setting content improvements, validation sync with code * docs(editor): executeasync overview and paste at cursor pos snippet * docs(editor): built-in tools * chore(editor): rename toolbar article * chore(editor): toolbar screenshot and ToC * chore(editor): remove unnecessary editor content render * chore(editor): Format supports only tags * chore(editor): remove id-label, that does not owrk for html editors * docs(editor): custom tool (wip) * chore(editor): custom tool article examples, readability, toc * docs(editor): events * chore(editor): builtin tools initial commit * docs(editor): edit modes overview * docs(editor): idrame and div content area specifics and examples * chore(editor): usability explanations on built-in tools article * chore(editor): explain away the presence of OnChange * chore(editor): onchange was successfully hidden * docs(editor): import-export, minor tweaks in overview * chore(editor): improvements on built-in tools article * chore(editor): ToC for built in tools * chore(editor): improvements to the built-in tools article * chore(editor): fixed slug in Toolbar article * chore(editor): fixed typo in built-in-tools article * chore(editor): removed OnChange event mention from overview article * chore(editor): fixed typo in events article * chore(editor): added deleteTable to built in tools article * chore(contextMenu): typo * chore(contextMenu): typo Co-authored-by: Svetoslav Dimitrov <[email protected]>
1 parent bdbb6fa commit 0435820

File tree

15 files changed

+1358
-34
lines changed

15 files changed

+1358
-34
lines changed

‎_config.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,9 @@ navigation:
128128
"*components/scheduler/views":
129129
title: "Views"
130130
position: 5
131+
"*components/editor/edit-modes":
132+
title: "Edit Modes"
133+
position: 80
131134

132135
## List helpers directory names and order here, like this:
133136
"*appearance":
@@ -340,6 +343,7 @@ intro_columns:
340343
"AutoComplete": "autocomplete-overview"
341344
"MultiSelect": "multiselect-overview"
342345
"CheckBox": "checkbox-overview"
346+
"HTML Editor": "editor-overview"
343347

344348
-
345349
categories:

‎accessibility/keyboard-navigation.md

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,63 +18,65 @@ By default, users can only navigate to links, buttons, and form controls with a
1818

1919
The following list shows the Telerik components that support specific keyboard combinations and links to live demos where you can see the behavior in action, together with the available keyboard shortcuts:
2020

21-
* [AutoComplete](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation)
21+
* [AutoComplete](https://demos.telerik.com/blazor-ui/autocomplete/keyboard-navigation)
2222

23-
* [Button](https://demos.telerik.com/blazor-ui/button/keyboard-navigation)
23+
* [Button](https://demos.telerik.com/blazor-ui/button/keyboard-navigation)
2424

25-
* [ButtonGroup](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation)
25+
* [ButtonGroup](https://demos.telerik.com/blazor-ui/buttongroup/keyboard-navigation)
2626

27-
* [Calendar](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation)
27+
* [Calendar](https://demos.telerik.com/blazor-ui/calendar/keyboard-navigation)
2828

29-
* Chart - not applicable, the chart is a visualization component only.
29+
* Chart - not applicable, the chart is a visualization component only.
3030

31-
* Checkbox - not applicable, it is a simple input with the standard behavior.
31+
* Checkbox - not applicable, it is a simple input with the standard behavior.
3232

33-
* [Context Menu](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation)
33+
* [Context Menu](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation)
3434

35-
* [ComboBox](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation)
35+
* [ComboBox](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation)
3636

37-
* [DateInput](https://demos.telerik.com/blazor-ui/dateinput/keyboard-navigation)
37+
* [DateInput](https://demos.telerik.com/blazor-ui/dateinput/keyboard-navigation)
3838

39-
* [DatePicker](https://demos.telerik.com/blazor-ui/datepicker/keyboard-navigation)
39+
* [DatePicker](https://demos.telerik.com/blazor-ui/datepicker/keyboard-navigation)
4040

41-
* [DateRangePicker](https://demos.telerik.com/blazor-ui/daterangepicker/keyboard-navigation)
41+
* [DateRangePicker](https://demos.telerik.com/blazor-ui/daterangepicker/keyboard-navigation)
4242

43-
* [DateTimePicker](https://demos.telerik.com/blazor-ui/datetimepicker/keyboard-navigation)
43+
* [DateTimePicker](https://demos.telerik.com/blazor-ui/datetimepicker/keyboard-navigation)
4444

45-
* [Drawer](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation)
45+
* [Drawer](https://demos.telerik.com/blazor-ui/drawer/keyboard-navigation)
4646

47-
* [DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/keyboard-navigation)
47+
* [DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/keyboard-navigation)
4848

49-
* [Grid](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation) (set `Navigable="true"`)
49+
* Editor - will have keyboard navigation in an upcoming release.
5050

51-
* [Menu](https://demos.telerik.com/blazor-ui/menu/keyboard-navigation)
51+
* [Grid](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation) (set `Navigable="true"`)
5252

53-
* ListView - not applicable, its entire rendering is up to the app. Its pager is a separate component that offers accessibility and keyboard navigation.
53+
* [Menu](https://demos.telerik.com/blazor-ui/menu/keyboard-navigation)
5454

55-
* [MultiSelect](https://demos.telerik.com/blazor-ui/multiselect/keyboard-navigation)
55+
* ListView - not applicable, its entire rendering is up to the app. Its pager is a separate component that offers accessibility and keyboard navigation.
5656

57-
* [NumericTextBox](https://demos.telerik.com/blazor-ui/numerictextbox/keyboard-navigation)
57+
* [MultiSelect](https://demos.telerik.com/blazor-ui/multiselect/keyboard-navigation)
5858

59-
* [Pager](https://demos.telerik.com/blazor-ui/pager/keyboard-navigation)
59+
* [NumericTextBox](https://demos.telerik.com/blazor-ui/numerictextbox/keyboard-navigation)
6060

61-
* Scheduler - will have keyboard navigation in an upcoming release.
61+
* [Pager](https://demos.telerik.com/blazor-ui/pager/keyboard-navigation)
6262

63-
* [TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/keyboard-navigation)
63+
* Scheduler - will have keyboard navigation in an upcoming release.
6464

65-
* Textbox - not applicable, it is a simple input with the standard behavior.
65+
* [TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/keyboard-navigation)
6666

67-
* [TimePicker](https://demos.telerik.com/blazor-ui/timepicker/keyboard-navigation)
67+
* Textbox - not applicable, it is a simple input with the standard behavior.
6868

69-
* [ToggleButton](https://demos.telerik.com/blazor-ui/togglebutton/keyboard-navigation)
69+
* [TimePicker](https://demos.telerik.com/blazor-ui/timepicker/keyboard-navigation)
7070

71-
* TreeList - will have keyboard navigation in an upcoming release.
71+
* [ToggleButton](https://demos.telerik.com/blazor-ui/togglebutton/keyboard-navigation)
7272

73-
* [TreeView](https://demos.telerik.com/blazor-ui/treeview/keyboard-navigation)
73+
* TreeList - will have keyboard navigation in an upcoming release.
7474

75-
* [Upload](https://demos.telerik.com/blazor-ui/upload/keyboard-navigation)
75+
* [TreeView](https://demos.telerik.com/blazor-ui/treeview/keyboard-navigation)
7676

77-
* [Window](https://demos.telerik.com/blazor-ui/window/keyboard-navigation)
77+
* [Upload](https://demos.telerik.com/blazor-ui/upload/keyboard-navigation)
78+
79+
* [Window](https://demos.telerik.com/blazor-ui/window/keyboard-navigation)
7880

7981

8082

‎common-features/input-validation.md

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ tags: telerik,blazor,validation,data,annotation,form
77
published: True
88
position: 2
99
---
10-
1110
# Input Validation
1211

1312
The UI for Blazor suite supports and integrates seamlessly into Blazor's Forms and Validation infrastructure. All Telerik UI for Blazor Input components work out of the box when placed inside an `EditForm`, respond to `EditContext` changes and provide default invalid styles.
@@ -27,6 +26,7 @@ This article provides examples of validating the Telerik Blazor components. The
2726
* [ComboBox](#combobox)
2827
* [MultiSelect](#multiselect)
2928
* [DateRangePicker](#daterangepicker)
29+
* [Editor](#editor)
3030

3131

3232

@@ -320,7 +320,7 @@ The ComboBox works with the `Value` of the selected item (through its `ValueFiel
320320

321321
The MultiSelect has a value that is a `List` and the validation attributes must take that into account (for example, a regular expression attribute cannot work).
322322

323-
>caption How to validated a MultiSelect
323+
>caption How to validate a MultiSelect
324324
325325
````CSHTML
326326
@using System.ComponentModel.DataAnnotations
@@ -353,7 +353,7 @@ The MultiSelect has a value that is a `List` and the validation attributes must
353353
Person person = new Person();
354354
355355
List<string> DevSkills = new List<string>
356-
{
356+
{
357357
"Blazor", "C#", "Python", "C", "C++", "Assembler", "Ruby", "Java", "JavaScript", "HTML", "CSS", "SQL", "PHP"
358358
};
359359
@@ -446,6 +446,47 @@ There is no built-in provision in the framework for validating a field value bas
446446
````
447447

448448

449+
## Editor
450+
451+
The Editor produces an HTML string in the field you bind its `Value` to. Thus, while the user may see a certain amount of content, the actual content may have more symbols, because the HTML tags count towards the total string length, but the user does not see them.
452+
453+
Unlike other components, the editor does not trigger form validation on every keystroke, because it is expected to require a lot of content and that would be bad for performance. Validation is still triggered upon the `ValueChanged` event, but that fires with a delay - the `UpdateInterval` parameter which defaults to 100ms.
454+
455+
>caption How to validate the Editor component
456+
457+
````CSHTML
458+
@using System.ComponentModel.DataAnnotations
459+
@* This Using is for the model class attributes only *@
460+
461+
<EditForm Model="@theProduct" OnValidSubmit="@HandleValidSubmit">
462+
<DataAnnotationsValidator />
463+
<ValidationSummary />
464+
465+
<TelerikEditor @bind-Value="@theProduct.Description">
466+
</TelerikEditor>
467+
468+
<TelerikButton ButtonType="@ButtonType.Submit">Submit</TelerikButton>
469+
</EditForm>
470+
471+
@code {
472+
public class Product
473+
{
474+
[Required(ErrorMessage = "Description is required")]
475+
[MaxLength(100, ErrorMessage = "The max allowed length of the content is 100 symbols")]
476+
[MinLength(20, ErrorMessage = "The min allowed length of the content is 20 symbols")]
477+
public string Description { get; set; }
478+
}
479+
480+
Product theProduct = new Product();
481+
482+
void HandleValidSubmit()
483+
{
484+
Console.WriteLine("OnValidSubmit");
485+
}
486+
}
487+
````
488+
489+
449490

450491
## See Also
451492

‎components/contextmenu/overview.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,9 @@ A menu is often used to list pages, views or sections in an application so the u
153153
154154
## Know The Target And Adjust Items
155155

156-
Using the simple `Selector` paramter to attach the context menu to one or more targets at a time is simple, and can be useful when you want the same menu for many elements, but it does not matter which one the user clicked.
156+
Using the simple `Selector` parameter to attach the context menu to one or more targets at a time is simple, and can be useful when you want the same menu for many elements, but it does not matter which one the user clicked.
157157

158-
In some cases, you may need to know which element the user clicked so you can use it in the command handling. You may also want to adjust the menu contentes based on which element the user clicked (e.g., disable or entirely remove some items from the menu based on a condition).
158+
In some cases, you may need to know which element the user clicked so you can use it in the command handling. You may also want to adjust the menu contents based on which element the user clicked (e.g., disable or entirely remove some items from the menu based on a condition).
159159

160160
To achieve such flexibility and granularity, you can:
161161

0 commit comments

Comments
 (0)