Location of inserted text using InsertHtml for the HtmlEditor

Radzen Studio Blazor WebAssembly
1

Hi! First of all, thanks for the awesome work, I'm very impressed.

I have a question about the HtmlEditor example shown https://blazor.radzen.com/html-editor-custom-tools, in the example:

  • Custom button inserts the date where the cursor is placed
  • Custom tool with template always inserts the date in the beginning of the editor no matter where the cursor is placed.

Is this by design or is it a bug? If it's by design, is there a way of getting the same behaviour (insert at cursor position) for the template as for execute/command way?

Thanks in advance :slight_smile:

2

Hi @Charlie,

This is how the tools is implemented. You can check the third editor - custom dialog - which saves and restores selection to achieve what you want.

   async Task InsertImageFromList(RadzenHtmlEditor editor)
    {
        await editor.SaveSelectionAsync();

        var result = await DialogService.OpenAsync<HtmlEditorCustomDialog>("Select image file"); 

        await editor.RestoreSelectionAsync();

        if (result != null)
        {
            await editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, $"<img style=\"max-width: 100%\" src=\"{result}\">");
        }
    }

The key is that SaveSelectionAsync should be called before the editor loses focus. This can't be done for the DatePicker hence it inserts at the beginning.

3

Thank you! I planned to use a dropdown and insert the text when something in the dropdown was selected at the caret position so when you pointed out the difference in the examples the "why" makes perfect sense in hindsight.

Not optimal, but as a workaround I call SaveSelectionAsync on KeyDown and MouseDown for the editor and then in the Change event for the dropdown I call RestoreSelectionAsync before InsertHtml

Thanks for great and fast response :raised_hands:

1 Like
4

@korchev is there anything new coming up? The workaround as Charlie explained is working but indeed not a nice solution...