Blazor中如何使用TinyMCE的OnKeyDown事件？求实现示例

因为Blazor版TinyMCE的配置依赖C#字典，没法直接像JS版那样写setup回调逻辑，得靠JS互操作衔接，下面是完整的可运行实现方案：

1. Razor组件代码 #

@page "/tinymce-key-demo"
@inject IJSRuntime JSRuntime

<TinyMCE.Blazor.TinyEditor
    Id="demo-editor"
    Config="@EditorSettings"
/>

@code {
    private Dictionary<string, object> EditorSettings { get; set; }

    protected override void OnInitialized()
    {
        EditorSettings = new Dictionary<string, object>
        {
            ["height"] = 400,
            // 将setup回调以字符串形式传入配置字典
            ["setup"] = @"function(editor) {
                editor.on('keydown', function(e) {
                    // 调用全局JS中转函数，传递事件参数
                    window.sendKeydownToBlazor(e.keyCode, e.key, e.shiftKey, e.ctrlKey);
                });
            }"
        };

        // 注册Blazor组件引用给JS，让JS能调用C#方法
        _ = JSRuntime.InvokeVoidAsync("registerBlazorKeydownHandler", DotNetObjectReference.Create(this));
    }

    // 标记为允许JS调用的方法
    [JSInvokable]
    public void ProcessKeydown(int keyCode, string key, bool shiftPressed, bool ctrlPressed)
    {
        // 这里编写你的按键处理逻辑，示例如下：
        Console.WriteLine($"按下按键: {key} (编码: {keyCode}), Shift: {shiftPressed}, Ctrl: {ctrlPressed}");
        
        // 比如拦截Ctrl+S触发保存操作
        if (ctrlPressed && key.Equals("s", StringComparison.OrdinalIgnoreCase))
        {
            // 调用你的业务方法，比如SaveEditorContent();
        }
    }
}

2. 全局JS中转代码 #

在项目的wwwroot/index.html（WebAssembly项目）或Pages/_Host.cshtml（Server项目）中添加以下JS代码，用于衔接TinyMCE的JS事件和Blazor的C#方法：

<script>
    let blazorComponentRef;

    function registerBlazorKeydownHandler(component) {
        blazorComponentRef = component;
    }

    function sendKeydownToBlazor(keyCode, key, shiftKey, ctrlKey) {
        blazorComponentRef.invokeMethodAsync('ProcessKeydown', keyCode, key, shiftKey, ctrlKey);
    }
</script>

核心逻辑说明 #

• Blazor版TinyMCE的Config字典仅支持简单类型，因此将JS的setup回调以字符串形式传入
• 通过DotNetObjectReference把Blazor组件实例传递给JS，实现JS对C#方法的调用
• 可根据需求调整事件参数，比如增加altKey等属性，只需在JS中传递对应参数即可

内容的提问来源于stack exchange，提问作者MassiveMelon