Blazor Server(ServerPrerendered)模式下EasyMDE编辑器加载异常求助

你的推测完全正确——问题出在ServerPrerendered的双重渲染机制上：服务器先输出静态HTML，你初始化的EasyMDE绑定到了这个静态DOM元素上，但客户端Blazor启动后会重新渲染组件，替换掉原来的textarea，导致编辑器实例关联的DOM被移除，最终只剩原生文本框。

解决步骤如下：

1. 修改Blazor组件，通过JS互操作在客户端渲染完成后初始化 #

更新Index.razor代码，利用Blazor的生命周期方法确保仅在客户端渲染完成后调用初始化逻辑：

@page "/"
@inject IJSRuntime JSRuntime
<PageTitle>Index</PageTitle>
<textarea @ref="editorElement" id="easymdeeditor"></textarea>

@code {
    private ElementReference editorElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 仅在首次客户端渲染时初始化
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initEasyMDE", editorElement);
        }
    }
}

2. 调整_host.cshtml中的JS代码，定义全局初始化函数 #

移除原来直接执行的初始化脚本，改为定义一个全局函数供Blazor调用，确保脚本加载顺序正确：

<head>
    <!-- 保留其他head内容 -->
    <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
</head>
<body>
    <!-- 保留其他body内容 -->
    <script src="_framework/blazor.server.js"></script>
    <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
    <script>
        // 全局函数，接收Blazor传递的元素引用
        window.initEasyMDE = function(element) {
            new EasyMDE({ element: element });
        };
    </script>
</body>

关键原理说明 #

• OnAfterRenderAsync是Blazor组件在客户端渲染完成后触发的生命周期方法，firstRender参数确保初始化仅执行一次。
• 使用ElementReference直接传递DOM元素给JS，比通过ID查找更可靠（避免组件复用导致的ID冲突）。
• 移除服务器端预渲染时的初始化逻辑，避免操作会被替换的静态DOM元素。

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