.NET 8下TinyMCE.Blazor编辑器仅首次加载，返回后消失的解决办法

核心原因 #

Blazor Server交互式组件在页面导航返回时，DOM会重建但TinyMCE的JS初始化逻辑未被重新触发，导致编辑器无法加载；组件级与页面级渲染模式冲突也会引发仅显示HTML文本框的问题。

解决方法 #

方法1：通过@key强制组件重新渲染

给TinyMCE Editor组件绑定@key属性到当前页面Uri，每次导航返回时Uri变化会触发组件重新实例化，从而重新初始化编辑器：

1. 注入NavigationManager：

@inject NavigationManager NavigationManager

2. 修改Editor组件标签：

<TinyMCE.Blazor.Editor 
    @rendermode="InteractiveServer" 
    @key="@NavigationManager.Uri"
    ApiKey="@_apikey" 
    Conf="@_conf" 
    Value="@_initialValue" />

方法2：统一页面级渲染模式

移除组件上的@rendermode="InteractiveServer"，改为在页面顶部设置全局交互式渲染模式，避免渲染模式冲突：

@page "/weather"
@rendermode InteractiveServer
@attribute [StreamRendering]

<div class="row">
    <div class="col-md-12">
        <TinyMCE.Blazor.Editor 
            ApiKey="@_apikey" 
            Conf="@_conf" 
            Value="@_initialValue" />
    </div>
</div>

方法3：手动控制编辑器生命周期（进阶）

通过Blazor组件生命周期方法，手动管理TinyMCE的初始化与销毁，确保每次页面加载都能正确初始化：

@page "/weather"
@attribute [StreamRendering]
@implements IAsyncDisposable
@inject IJSRuntime JSRuntime

<div class="row">
    <div class="col-md-12">
        <div @ref="_editorContainer"></div>
    </div>
</div>

@code {
    private ElementReference _editorContainer;
    private object? _editorInstance;
    private readonly string _initialValue = "Welcome to TinyMCE Blazor";
    private readonly string _apikey = "";
    private Dictionary<string, object> _conf = new Dictionary<string, object> {
        { "height", 500},
        { "toolbar", "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist checklist outdent indent | removeformat | advcode table help"},
        { "plugins", "mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount"},
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (_editorInstance != null)
        {
            await JSRuntime.InvokeVoidAsync("tinymce.remove", _editorInstance);
            _editorInstance = null;
        }

        _editorInstance = await JSRuntime.InvokeAsync<object>(
            "tinymce.init", 
            new
            {
                target = _editorContainer,
                api_key = _apikey,
                height = _conf["height"],
                toolbar = _conf["toolbar"],
                plugins = _conf["plugins"],
                initial_value = _initialValue
            }
        );
        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync()
    {
        if (_editorInstance != null)
        {
            await JSRuntime.InvokeVoidAsync("tinymce.remove", _editorInstance);
        }
    }
}

额外注意事项 #

• 若保留StreamRendering，需确保在OnAfterRenderAsync中执行初始化，避免DOM未就绪导致失败；
• 确认TinyMCE ApiKey有效，空ApiKey可能引发功能受限或加载异常。

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