|
1 | 1 | --- |
2 | 2 | title: Get the content of the Editor selected by the user |
3 | | -description: How to get the content of the Editor selected by the user |
| 3 | +description: Learn how to retrieve the selected text from the Telerik Editor using JavaScript to apply custom formatting dynamically. |
4 | 4 | type: how-to |
5 | 5 | page_title: Get the user selection in the Editor |
6 | 6 | slug: editor-kb-get-selection |
7 | | -position: |
8 | | -tags: |
| 7 | +tags: editor, selected, text, highlighted |
9 | 8 | res_type: kb |
10 | 9 | --- |
11 | 10 |
|
@@ -53,23 +52,22 @@ If you want to use it on the .NET (Blazor) side, you need to: |
53 | 52 |
|
54 | 53 | @inject IJSRuntime js |
55 | 54 |
|
56 | | -<TelerikEditor Tools="@Tools" @bind-Value="@TheEditorContent" EditMode="@EditorEditMode.Iframe"> |
| 55 | +<TelerikEditor Tools="@Tools" @bind-Value="@TheEditorContent" EditMode="@EditorEditMode.Div"> |
57 | 56 | <EditorCustomTools> |
58 | 57 | <EditorCustomTool Name="GetSelectedText"> |
59 | 58 | <TelerikButton OnClick="@GetSelectedText">Get selected text</TelerikButton> |
60 | 59 | </EditorCustomTool> |
61 | 60 | </EditorCustomTools> |
62 | 61 | </TelerikEditor> |
63 | 62 |
|
64 | | -
|
65 | 63 | Selected text: @SelectedText |
66 | 64 |
|
67 | 65 | @code { |
68 | | - string TheEditorContent { get; set; } = "<h1>Lorem ipsum</h1><p>Dolor sit amet.</p>"; |
69 | | - List<IEditorTool> Tools { get; set; } |
70 | | - public string SelectedText { get; set; } |
| 66 | + private string TheEditorContent { get; set; } = "<h1>Lorem ipsum</h1><p>Dolor sit amet.</p>"; |
| 67 | + private List<IEditorTool> Tools { get; set; } |
| 68 | + private string SelectedText { get; set; } |
71 | 69 | |
72 | | - async Task GetSelectedText() |
| 70 | + private async Task GetSelectedText() |
73 | 71 | { |
74 | 72 | SelectedText = await js.InvokeAsync<string>("getSelectedText"); |
75 | 73 | } |
@@ -120,15 +118,14 @@ If you want to use it on the .NET (Blazor) side, you need to: |
120 | 118 | </EditorCustomTools> |
121 | 119 | </TelerikEditor> |
122 | 120 |
|
123 | | -
|
124 | 121 | Selected text: @SelectedText |
125 | 122 |
|
126 | 123 | @code { |
127 | | - string TheEditorContent { get; set; } = "<h1>Lorem ipsum</h1><p>Dolor sit amet.</p>"; |
128 | | - List<IEditorTool> Tools { get; set; } |
129 | | - public string SelectedText { get; set; } |
| 124 | + private string TheEditorContent { get; set; } = "<h1>Lorem ipsum</h1><p>Dolor sit amet.</p>"; |
| 125 | + private List<IEditorTool> Tools { get; set; } |
| 126 | + private string SelectedText { get; set; } |
130 | 127 | |
131 | | - async Task GetSelectedText() |
| 128 | + private async Task GetSelectedText() |
132 | 129 | { |
133 | 130 | SelectedText = await js.InvokeAsync<string>("getSelectedText"); |
134 | 131 | } |
|
0 commit comments