如何在TinyMCE Blazor中设置防抖/延迟以避免每次按键更新模型？

因为TinyMCE原有的防抖相关功能已被弃用，你可以通过以下两种方式实现延迟更新模型的效果：

方案一：Blazor端手动实现防抖逻辑 #

取消组件的双向绑定，自己处理内容变化事件并添加延迟：

1. 在Razor组件中定义变量和计时器

@implements IDisposable

@code {
    [Parameter]
    public string Value { get; set; } = string.Empty;

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private string _editorContent;
    private Timer _debounceTimer;
    private const int _debounceDelay = 500; // 延迟500毫秒，可根据需求调整

    protected override void OnInitialized()
    {
        _editorContent = Value;
        base.OnInitialized();
    }

    private async Task HandleEditorValueChanged(string newValue)
    {
        _editorContent = newValue;
        // 清除之前的计时器
        _debounceTimer?.Dispose();

        _debounceTimer = new Timer(async _ =>
        {
            await InvokeAsync(async () =>
            {
                await ValueChanged.InvokeAsync(newValue);
                _debounceTimer.Dispose();
                _debounceTimer = null;
            });
        }, null, _debounceDelay, Timeout.Infinite);
    }

    public void Dispose()
    {
        _debounceTimer?.Dispose();
    }
}

2. 修改编辑器调用代码
   去掉@bind-Value，改用手动绑定和事件处理：

<TinyMCE.Blazor.Editor 
    Value="@_editorContent" 
    ValueChanged="@HandleEditorValueChanged"
    ScriptSrc="/js/tinymce/tinymce.min.js" 
    Conf="@config" 
    Inline="@Inline" />

方案二：通过TinyMCE配置在JS层实现防抖 #

在TinyMCE的配置中添加setup项，监听输入事件并延迟触发更新：

1. 更新TinyMCE配置

new Dictionary<string, object>
{
    { "menubar", false },
    { "toolbar", "undo redo styleselect forecolor bold italic alignleft aligncenter alignright alignjustify outdent indent" },
    { "toolbar_location", "top" },
    { "toolbar_mode", "scrolling" },
    { "statusbar", false },
    { "placeholder", "Type here..."},
    { "content_style", "body { margin: 0px 3px 0px 13px; line-height:0.9; }" },
    { "height", "110" },
    { "setup", @"function(editor) {
        let debounceTimer;
        // 监听编辑器输入事件
        editor.on('input', function(e) {
            clearTimeout(debounceTimer);
            // 延迟500毫秒后触发change事件
            debounceTimer = setTimeout(function() {
                editor.dispatch('change');
            }, 500);
        });
    }" }
};

2. 保持编辑器调用不变
   继续使用@bind-Value，此时组件会在防抖后的change事件触发时更新模型，而非每次按键：

<TinyMCE.Blazor.Editor @bind-Value=Value ScriptSrc="/js/tinymce/tinymce.min.js" Conf="@config" Inline="@Inline" />

两种方案都能有效减少模型更新频率，方案一更适合完全在Blazor端控制逻辑，方案二则减少JS与Blazor的交互次数，可根据实际场景选择。

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