How to wrap image tag with anchor tag to make it clickable in Blazor RichTextEditor?

[Syncfusion Support]

Answer:

We can wrap the image tag with an anchor tag to make it clickable by using the `imageUploadSuccess`, `actionComplete` events and `JsInterop` concept in Blazor RichTextEditor.

public string currentImageName { get; set; }

public void imageUploadSuccess(ImageSuccessEventArgs args)

{

currentImageName = args.File.Name;

}

[Inject]

IJSRuntime jsRuntime { get; set; }

public void actionComplete(ActionCompleteEventArgs args)

{

if (args.RequestType == "Image")

{

jsRuntime.InvokeAsync("renderRichTextEditor.actionComplete", currentImageName);

}

}

JsInterop File:

window.renderRichTextEditor = {

actionComplete: function (currentImageName) {

var currentImageElement = document.querySelector('img[alt="' + currentImageName + '"]');

if (currentImageElement != null) {

var anchorTag = document.createElement('a');

var currentLink = "www.syncfusion.com";

anchorTag.setAttribute("rel='nofollow' href", currentLink);

currentImageElement.parentElement.insertBefore(anchorTag, currentImageElement);

anchorTag.appendChild(currentImageElement);

}

}

}

Host.cshtml

……

Find the sample for wrap image tag with anchor tag to make it clickable in Blazor RichTextEditor from here.