diff --git a/knowledge-base/editor-focus-event.md b/knowledge-base/editor-focus-event.md new file mode 100644 index 000000000..d57662bc0 --- /dev/null +++ b/knowledge-base/editor-focus-event.md @@ -0,0 +1,176 @@ +--- +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. +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 EditorValue { get; set; } = @"

foo 1

bar 1

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

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 EditorValue { get; set; } = @"

foo 2

bar 2

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

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", EditorId, DotNetRef); + } + + await base.OnAfterRenderAsync(firstRender); + } + + public void Dispose() + { + DotNetRef?.Dispose(); + } +} +```` + +## See Also + +* [Editor Events](slug:editor-events)