TinyMCE只读模式下根据内容动态调整编辑器高度问题求助

方案1：优化Autoresize插件配置 #

Autoresize插件在只读模式下的默认高度计算逻辑可能存在偏差，添加明确的参数可以减少随机截断问题：

修改你的配置字典，补充高度相关参数：

private readonly Dictionary<string, object> _editorReadOnlyConfig = new()
{
    { "plugins", new string[] { "autoresize" } },
    { "toolbar", false },
    { "menubar", false },
    { "statusbar", false },
    { "min_height", 200 }, // 设置最小高度，避免初始渲染高度过低
    { "autoresize_bottom_margin", 20 }, // 增加底部边距，防止内容被截断
    { "autoresize_on_init", true }, // 强制初始化时自动适配内容高度
};

方案2：手动触发编辑器Resize（适配Blazor渲染时序） #

Blazor组件渲染和TinyMCE初始化的时序差可能导致autoresize未正确触发，可在组件渲染完成后手动调用resize方法：

1. 注入IJSRuntime到组件：

[Inject]
private IJSRuntime JsRuntime { get; set; }

2. 重写OnAfterRenderAsync方法，触发Resize：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && !string.IsNullOrEmpty(_html))
    {
        // 等待TinyMCE完全初始化
        await Task.Delay(100);
        await JsRuntime.InvokeVoidAsync("tinymce.activeEditor.resize");
    }
    await base.OnAfterRenderAsync(firstRender);
}

方案3：禁用Autoresize，手动计算内容高度（只读模式专用） #

只读场景下无需依赖插件，直接计算内容高度并设置编辑器尺寸，稳定性更高：

1. 在wwwroot/index.html中添加JS函数：

window.setTinyMceContentHeight = () => {
    const editor = tinymce.activeEditor;
    if (editor) {
        // 获取内容实际高度，增加额外边距避免截断
        const contentHeight = editor.getBody().scrollHeight;
        editor.setHeight(contentHeight + 20);
    }
};

2. 在Blazor组件中调用该函数：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && !string.IsNullOrEmpty(_html))
    {
        await Task.Delay(100);
        await JsRuntime.InvokeVoidAsync("setTinyMceContentHeight");
    }
    await base.OnAfterRenderAsync(firstRender);
}

3. 修改配置，移除autoresize插件并设置初始高度：

private readonly Dictionary<string, object> _editorReadOnlyConfig = new()
{
    { "toolbar", false },
    { "menubar", false },
    { "statusbar", false },
    { "height", 100 }, // 初始占位高度，后续会被JS覆盖
};

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