如何在TinyMCE Blazor中配置paste_preprocess回调？

要在C#中实现TinyMCE的paste_preprocess预处理，需要通过Blazor的JS互操作桥接C#方法和TinyMCE的JS回调，具体步骤如下：

1. 准备JS桥接代码 #

在项目wwwroot目录下（比如index.html中添加<script>标签，或单独创建JS文件引入），添加以下代码用于连接TinyMCE回调和C#方法：

let _tinyMCEPreprocessDotNetRef;

// 注册C#引用并定义paste_preprocess回调函数
function setupTinyMCEPastePreprocess(dotNetRef) {
    _tinyMCEPreprocessDotNetRef = dotNetRef;
    window.tinymcePastePreprocess = function(plugin, args) {
        // 同步调用C#预处理方法，直接修改args.content
        args.content = _tinyMCEPreprocessDotNetRef.invokeMethodSync('ProcessPasteContent', args.content);
    };
}

// 清理引用，避免内存泄漏
function cleanupTinyMCEPastePreprocess() {
    _tinyMCEPreprocessDotNetRef = null;
    delete window.tinymcePastePreprocess;
}

如果需要异步预处理（比如调用后端API处理内容），可修改JS函数为异步版本：

window.tinymcePastePreprocess = async function(plugin, args) {
    args.content = await _tinyMCEPreprocessDotNetRef.invokeMethodAsync('ProcessPasteContentAsync', args.content);
};

2. 在Blazor组件中实现C#逻辑 #

在使用TinyMCE的Blazor组件中，注入IJSRuntime，注册JS桥接并实现预处理方法：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<TinyMCE @bind-Value="@EditorContent" Config="@EditorConfig" />

@code {
    private string EditorContent { get; set; } = string.Empty;
    private Dictionary<string, object> EditorConfig { get; set; } = new();
    private DotNetObjectReference<YourComponentName>? _dotNetComponentRef;

    protected override async Task OnInitializedAsync()
    {
        // 创建当前组件的DotNet引用，供JS调用
        _dotNetComponentRef = DotNetObjectReference.Create(this);
        
        // 初始化JS桥接
        await JSRuntime.InvokeVoidAsync("setupTinyMCEPastePreprocess", _dotNetComponentRef);

        // 配置TinyMCE，指定paste_preprocess为我们定义的JS函数
        EditorConfig = new Dictionary<string, object>
        {
            ["plugins"] = "paste", // 必须启用paste插件
            ["paste_preprocess"] = "tinymcePastePreprocess",
            // 其他TinyMCE配置项
            ["toolbar"] = "undo redo | bold italic | paste",
            ["height"] = 400
        };
    }

    // 标记为可被JS调用的同步预处理方法
    [JSInvokable]
    public string ProcessPasteContent(string rawContent)
    {
        // 在这里编写你的C#预处理逻辑
        // 示例：清理多余标签、替换内容格式
        var processed = rawContent
            .Replace("<p>", "<div class=\"custom-paragraph\">")
            .Replace("</p>", "</div>")
            .Replace("&nbsp;", " ");
        
        return processed;
    }

    // 异步版本的预处理方法（配合异步JS回调使用）
    [JSInvokable]
    public async Task<string> ProcessPasteContentAsync(string rawContent)
    {
        // 示例：调用后端API处理内容
        // var processed = await _apiService.CleanPasteContent(rawContent);
        await Task.Delay(50); // 模拟异步操作
        return rawContent.Replace("<p>", "<div>");
    }

    // 清理资源，避免内存泄漏
    public async ValueTask DisposeAsync()
    {
        _dotNetComponentRef?.Dispose();
        await JSRuntime.InvokeVoidAsync("cleanupTinyMCEPastePreprocess");
    }
}

关键注意事项 #

• 必须启用paste插件：TinyMCE的paste_preprocess依赖paste插件，配置中必须包含["plugins"] = "paste"。
• 资源清理：组件销毁时必须调用Dispose()并清理JS引用，防止内存泄漏。
• 内容修改逻辑：TinyMCE的paste_preprocess回调中，直接修改args.content即可改变最终插入编辑器的内容。

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