Change selected text color in RadzenHtmlEditor

Radzen.Blazor Components
1

In RadzenHtmlEditor, I am trying to change the selected text's color programmatically. I use a code like this:

<RadzenHtmlEditor Style="height: 500px;" @ref="_editorRef" @bind-Value=@_html
                  spellcheck="false" Execute="OnExecute" id="vsmEditor">
@code {
private RadzenHtmlEditor _editorRef;

// ... when I need to change color:
await _editorRef.ExecuteCommandAsync(HtmlEditorCommands.Color, "#ff0000");
}

According to the documentation (at https://blazor.radzen.com/docs/api/Radzen.HtmlEditorCommands.html#Radzen_HtmlEditorCommands_Color) this should change the foreground color. Yet, nothing happens, and no error is shown in the console. Can anyone provide a hint?

2

Hi @myrmex,

How do you call this code? There is a chance the editor does not have focus at this time. If you run ExecCommandAsync from the click handler of a button the button is stealing focus and prevent the exec command from working.

3

Thank you, that was it! I was right going to post back what I had found out about this. The problem is that the textarea in the component's DOM loses focus, but the component itself does not, when I click on its toolbar. Thus, handling blur on the component is useless, but I ended up using a keyboard shortcut (via editor's RegisterShortcut method) to toggle a dialog: this way, the focus can be saved before opening the dialog and restored after. This allows me to set some custom colors (programmatically defined) in the control. Still, I am wondering how to keep track of the cursor position (selection) in the textarea, should I want to respond to its movement across a region which was colorized that way; just like the builtin controls do when I move the cursor across a bold section or similar. Do you have any clues about this?

4

The code which does that (command state management) is here:

Commands that have state use the result from the queryCommands JS method.