From b0c9ed4bc7603be59db9ed5b1442ae1a4c127b6c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 13 Aug 2025 14:06:18 +0300 Subject: [PATCH 1/3] kb(Editor): Add KB for focus event handling --- knowledge-base/editor-focus-event.md | 174 +++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 knowledge-base/editor-focus-event.md diff --git a/knowledge-base/editor-focus-event.md b/knowledge-base/editor-focus-event.md new file mode 100644 index 000000000..c2e6148b0 --- /dev/null +++ b/knowledge-base/editor-focus-event.md @@ -0,0 +1,174 @@ +--- +title: Editor Focus Event +description: Learn how to subscribe to the Editor focus event. +type: how-to +page_title: How to Handle the Editor Focus Event +slug: editor-kb-focus-event +tags: telerik, blazor, editor, events +ticketid: 1695979 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductEditor for Blazor
+ +## Description + +This KB article answers the following questions: + +* How to detect when the user focuses the Editor content? +* How to handle the Editor focus event? +* Is it possible to do a Blazor action on Editor OnFocus? + +## Solution + +The required approach depends on the [Editor `EditMode`](slug:editor-edit-modes-overview), due to the different Editor HTML rendering: + +* [Using `Div` edit mode](#div-editmode) +* [Using `Iframe` edit mode](#iframe-editmode) + +### `Div` EditMode + +1. Learn how to [call JavaScript code from C# code](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet). +1. Wrap the Editor in a container with an `@onfocusin` event handler. +1. Use JavaScript to check if the Editor content `
` is focused. + +>caption Detect Editor focus when using Div EditMode + +````RAZOR +@using Telerik.Blazor.Components.Editor + +@inject IJSRuntime js + +
+ + +
+ +@* Move JavaScript code to a separate JS file *@ + + +@code { + #nullable enable + + private string EditorValue1 { get; set; } = @"

foo 1

bar 1

"; + + private async Task OnEditorFocus1() + { + bool isEditorContentFocused = await js.InvokeAsync("isEditorDivFocused"); + + if (isEditorContentFocused) + { + EditorValue1 = $"

Editor content DIV was focused at {DateTime.Now.ToLongTimeString()}.

"; + } + } +} +```` + +### `Iframe` EditMode + +1. Learn how to [call C# code from JavaScript code](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript) and [vice-versa](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet). +1. Use the first firing of `OnAfterRenderAsync` to: + 1. Obtain the `` element inside the Editor content `iframe`. + 1. [Subscribe](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to the `focusin` event to the `iframe` `body`. +1. In the JavaScript `focusin` handler, call a C# method. + +>caption Detect Editor focus when using Iframe EditMode + +````RAZOR +@using Telerik.Blazor.Components.Editor + +@implements IDisposable + +@inject IJSRuntime js + + + + +@* Move JavaScript code to a separate JS file *@ + + +@code { + #nullable enable + + private string EditorValue2 { get; set; } = @"

foo 2

bar 2

"; + + // Replace __Main with your Razor component type + private DotNetObjectReference<__Main>? DotNetRef { get; set; } + + [JSInvokable("OnEditorFocus2")] + public void OnEditorFocus2() + { + EditorValue2 = $"

Editor content IFRAME was focused at {DateTime.Now.ToLongTimeString()}.

"; + StateHasChanged(); + } + + protected override void OnInitialized() + { + DotNetRef = DotNetObjectReference.Create(this); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await Task.Delay(1); // wait for HTML to render + + await js.InvokeVoidAsync("attachIframeFocusHandler", "editor2", DotNetRef); + } + + await base.OnAfterRenderAsync(firstRender); + } + + public void Dispose() + { + DotNetRef?.Dispose(); + } +} +```` + +## See Also + +* [Editor Events](slug:editor-events) From 8f3f35195a5aef2de5ae779a1b0a079721c4ce5d Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 2 Sep 2025 13:09:33 +0300 Subject: [PATCH 2/3] Update knowledge-base/editor-focus-event.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/editor-focus-event.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/editor-focus-event.md b/knowledge-base/editor-focus-event.md index c2e6148b0..f9a68a623 100644 --- a/knowledge-base/editor-focus-event.md +++ b/knowledge-base/editor-focus-event.md @@ -38,7 +38,7 @@ The required approach depends on the [Editor `EditMode`](slug:editor-edit-modes- ### `Div` EditMode 1. Learn how to [call JavaScript code from C# code](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet). -1. Wrap the Editor in a container with an `@onfocusin` event handler. +1. Wrap the Editor in a container with an `@onfocusin` event. 1. Use JavaScript to check if the Editor content `
` is focused. >caption Detect Editor focus when using Div EditMode From bbc3a61fabe71541abaed96ed27e40c71ca6ced0 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 2 Sep 2025 13:16:32 +0300 Subject: [PATCH 3/3] Polish code examples --- knowledge-base/editor-focus-event.md | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/knowledge-base/editor-focus-event.md b/knowledge-base/editor-focus-event.md index f9a68a623..d57662bc0 100644 --- a/knowledge-base/editor-focus-event.md +++ b/knowledge-base/editor-focus-event.md @@ -48,8 +48,8 @@ The required approach depends on the [Editor `EditMode`](slug:editor-edit-modes- @inject IJSRuntime js -
- + @@ -69,15 +69,15 @@ The required approach depends on the [Editor `EditMode`](slug:editor-edit-modes- @code { #nullable enable - private string EditorValue1 { get; set; } = @"

foo 1

bar 1

"; + private string EditorValue { get; set; } = @"

foo 1

bar 1

"; - private async Task OnEditorFocus1() + private async Task OnDivEditorFocus() { bool isEditorContentFocused = await js.InvokeAsync("isEditorDivFocused"); if (isEditorContentFocused) { - EditorValue1 = $"

Editor content DIV was focused at {DateTime.Now.ToLongTimeString()}.

"; + EditorValue = $"

Editor content DIV was focused at {DateTime.Now.ToLongTimeString()}.

"; } } } @@ -100,9 +100,9 @@ The required approach depends on the [Editor `EditMode`](slug:editor-edit-modes- @inject IJSRuntime js - @@ -133,15 +133,17 @@ The required approach depends on the [Editor `EditMode`](slug:editor-edit-modes- @code { #nullable enable - private string EditorValue2 { get; set; } = @"

foo 2

bar 2

"; + private string EditorValue { get; set; } = @"

foo 2

bar 2

"; + + private const string EditorId = "iframe-editor"; // Replace __Main with your Razor component type - private DotNetObjectReference<__Main>? DotNetRef { get; set; } + private DotNetObjectReference? DotNetRef { get; set; } [JSInvokable("OnEditorFocus2")] public void OnEditorFocus2() { - EditorValue2 = $"

Editor content IFRAME was focused at {DateTime.Now.ToLongTimeString()}.

"; + EditorValue = $"

Editor content IFRAME was focused at {DateTime.Now.ToLongTimeString()}.

"; StateHasChanged(); } @@ -156,7 +158,7 @@ The required approach depends on the [Editor `EditMode`](slug:editor-edit-modes- { await Task.Delay(1); // wait for HTML to render - await js.InvokeVoidAsync("attachIframeFocusHandler", "editor2", DotNetRef); + await js.InvokeVoidAsync("attachIframeFocusHandler", EditorId, DotNetRef); } await base.OnAfterRenderAsync(firstRender);