TinyMCE Blazor Server编辑器间歇性加载问题求助

问题现象 #

在Blazor项目的部分@page页面中，TinyMCE编辑器出现间歇性加载失败：页面首次加载时，编辑器有时无法正确渲染，仅显示无内容的文本框（但绑定的Response.TextResponse已有值）；其他页面使用相同编辑器组件则正常，确定是自身实现问题。

相关代码片段 #

@if (Q.Type == QType.Text)
{
    <TinyMCE.Blazor.Editor @ref="QuestionRef" CloudChannel="6" Conf="editorConf" Disable="@(!IsAssignedTo || IsComplete)" Id="question" @bind-Value="Response.TextResponse" Field="() => Response.TextResponse" ApiKey="" />
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        /* 已移除无关代码 */
        await LoadResponse();
    }
}

private async Task LoadResponse()
{
    /* 已移除无关代码 */
    StateHasChanged();
}

浏览器控制台错误信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at tinymce.min.js:9:26875
at HTMLLinkElement.h (tinymce.min.js:9:26961)

Uncaught TypeError: Cannot read properties of null (reading 'innerWidth')
at jA. (theme.min.js:9:279034)
at hA.dispatch (tinymce.min.js:9:372724)
at jA.dispatch (tinymce.min.js:9:373978)
at Array. (tinymce.min.js:9:400272)
at Ne (tinymce.min.js:9:5303)
at Object.KA (tinymce.min.js:9:400182)
at ia.executeHandlers (tinymce.min.js:9:52234)
at i (tinymce.min.js:9:50072)

排查建议 #

• 确保数据就绪后再渲染编辑器：修改渲染条件，加入Response是否初始化的判断，比如@if (Q.Type == QType.Text && Response != null)，避免编辑器在数据未加载完成时提前初始化。
• 手动控制编辑器内容更新：在LoadResponse完成后，通过编辑器的@ref手动设置内容，比如await QuestionRef.SetContent(Response.TextResponse);，替代单纯调用StateHasChanged。
• 检查Disable状态的波动：Disable绑定的!IsAssignedTo || IsComplete如果在加载过程中频繁变化，可能干扰编辑器初始化。先临时将Disable设为false测试，确认问题是否消失后再逐步恢复逻辑。
• 验证编辑器配置：检查editorConf中是否有自定义插件、主题加载异常的情况，这类问题可能导致内部JS报错，引发加载失败。
• 延迟数据加载时机：在OnAfterRenderAsync中，给编辑器预留初始化时间，比如await Task.Delay(100);后再执行LoadResponse，避免数据加载和编辑器初始化冲突。

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