本文旨在解决在blazor应用中使用jsinterop构建富文本编辑器时遇到的`onclick`事件双击、重复触发及内容丢失等问题。核心解决方案包括优化jsinterop调用，避免重复注册事件监听器，并利用blazor组件的渲染控制机制来防止`contenteditable`区域的内容被意外重置。通过这些方法，可以实现更稳定、高效的富文本编辑功能。
背景与问题分析
在Blazor应用中，当需要与JavaScript进行深度交互，例如构建一个依赖浏览器原生document.execCommand的富文本编辑器时，JSInterop是不可或缺的工具。然而，不恰当的JSInterop使用方式可能导致一系列难以预料的问题。
初始实现中，开发者可能会遇到以下问题：
- 按钮需要双击才能生效： 首次点击按钮无响应，第二次点击才执行预期操作。
- prompt框重复弹出： 特别是插入图片或链接时，点击一次按钮会弹出多个输入框。
- 编辑内容丢失： 即使通过JavaScript成功插入了图片或文本，Blazor组件重新渲染后，contenteditable区域的内容会消失。
这些问题的根源在于对Blazor组件生命周期、事件处理机制以及JSInterop调用方式的误解。
根源剖析
-
事件监听器重复注册： 原始的JavaScript函数buttonPressed()在每次被Blazor调用时，都会遍历所有.btn元素并为它们重新注册一个click事件监听器。
- 第一次Blazor showChange()调用：JS函数执行，为每个按钮注册了第一个click监听器。此时，按钮的Blazor @onclick事件已触发，但JS注册的监听器尚未被触发。
- 第二次Blazor showChange()调用：JS函数再次执行，为每个按钮注册了第二个click监听器。现在每个按钮都有两个监听器。当用户点击按钮时，Blazor的@onclick首先触发，然后之前注册的监听器也会被触发。
- 这解释了为什么首次点击无响应（Blazor触发JSInterop，JS注册监听器，但JS监听器未立即执行），而后续点击则会触发多次（Blazor触发JSInterop，JS注册更多监听器，同时之前注册的监听器也执行）。
Blazor组件的重新渲染： 当Blazor组件中的任何@onclick事件被触发时，Blazor的渲染引擎默认会尝试重新渲染该组件及其子组件，以反映任何状态变化。对于contenteditable的div，如果它直接位于父组件中，Blazor的重新渲染会将其DOM内容重置为组件的初始状态，从而抹去JavaScript通过document.execCommand所做的修改。这导致了插入的图片或文本立即消失的问题。
解决方案
解决这些问题需要从两个核心方面入手：优化JSInterop的调用模式，以及控制Blazor组件的渲染行为。
1. 优化JSInterop调用：直接传递命令
为了避免重复注册事件监听器，我们应该让Blazor直接将所需执行的命令传递给JavaScript函数，而不是让JavaScript函数自己去查找DOM元素并注册监听器。
修改 Blazor C# 代码：
showChange方法现在接受一个字符串参数command，并将其直接传递给JavaScript函数。
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.Threading.Tasks;
public partial class RichTextEditor
{
[Inject]
public IJSRuntime JsRuntime { get; set; }
///
/// 异步方法，用于将富文本编辑命令传递给JavaScript。
///
/// 要执行的编辑命令，例如"bold", "insertImage"等。
async Task ExecuteEditorCommand(string command)
{
await JsRuntime.InvokeVoidAsync(identifier: "editorCommand", command);
}
}修改 JavaScript 代码：
editorCommand函数现在直接接收命令并执行document.execCommand，无需注册任何事件监听器。
/**
* 执行富文本编辑器的指定命令。
* @param {string} command - 要执行的编辑命令。
*/
function editorCommand(command) {
if (command === 'createLink' || command === 'insertImage') {
let url = prompt('请输入链接或图片URL:', 'http://');
if (url) { // 确保用户输入了内容
document.execCommand(command, false, url);
}
} else {
document.execCommand(command, false, null);
}
}修改 Blazor HTML 按钮代码：
每个按钮的@onclick事件现在使用Lambda表达式直接调用ExecuteEditorCommand方法并传递相应的命令字符串。
通过这种方式，每次点击按钮，Blazor只会调用一次JSInterop，JavaScript也只会执行一次document.execCommand，彻底解决了双击和重复弹窗的问题。
2. 控制Blazor组件渲染：隔离contenteditable区域
为了防止Blazor在每次按钮点击后重新渲染并清空contenteditable区域的内容，我们需要将contenteditable的div封装到一个独立的Blazor组件中，并控制其渲染行为。
创建 EditorContent 组件：
首先，创建一个新的Blazor组件，例如EditorContent.razor。
@code {
private ElementReference contentElement;
///
/// 覆写ShouldRender方法，防止Blazor重新渲染此组件。
/// 这对于由JavaScript直接操作DOM的元素至关重要。
///
protected override bool ShouldRender() => false;
// 如果需要，可以在这里添加其他生命周期方法或JSInterop，例如初始化内容
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
// 可以在这里通过JSInterop初始化contenteditable div的内容
// 例如：await JSRuntime.InvokeVoidAsync("initializeEditorContent", contentElement, "初始内容");
}
}
}在主组件中使用 EditorContent：
现在，在你的主富文本编辑器组件中，用EditorContent组件替换原来的div。
通过将contenteditable区域封装到EditorContent组件中，并覆写ShouldRender()方法返回false，我们告诉Blazor：这个组件的内容完全由JavaScript管理，Blazor不需要关心它的状态变化，也不应该重新渲染它。这样，document.execCommand对DOM的修改将得以保留。
总结与注意事项
通过以上两步优化，我们解决了Blazor中JSInterop富文本编辑器遇到的所有核心问题：
- 消除双击和重复触发： 通过直接传递命令，避免了JavaScript中事件监听器的重复注册。
- 保留编辑内容： 通过隔离contenteditable区域并禁用其Blazor渲染，确保JavaScript对DOM的修改不会被Blazor意外重置。
注意事项：
- document.execCommand的局限性： document.execCommand是一个较老的API，功能相对有限且在不同浏览器中行为可能存在细微差异。对于更复杂的富文本编辑器，可能需要考虑使用更现代的库（如Quill, TinyMCE, ProseMirror等）或更细粒度的DOM操作。
- 状态同步： 如果富文本编辑器的内容需要在Blazor状态中反映（例如，保存到数据库），你需要通过JSInterop将contenteditable区域的最终内容回传给Blazor组件。例如，可以在Blur事件或保存按钮点击时，通过JSInterop获取contenteditable.innerHTML。
- 安全性： 当使用contenteditable时，务必对用户输入的内容进行适当的清理和验证，以防止跨站脚本攻击（XSS）。
- 可访问性： 确保你的富文本编辑器按钮和交互元素具有良好的可访问性，例如提供title属性或aria-label。
遵循这些最佳实践，可以帮助你在Blazor应用中更有效地利用JSInterop，构建稳定且功能强大的富文本编辑功能。
