本文深入探讨了在blazor应用中使用jsinterop构建富文本编辑器时常见的两个问题：事件监听器重复注册导致的双击和多重提示，以及blazor组件重渲染导致的内容丢失。通过优化jsinterop调用方式和利用blazor的`shouldrender()`生命周期方法，文章提供了清晰的解决方案，旨在帮助开发者实现blazor与javascript的无缝高效集成，避免潜在的运行时问题。
Blazor中JSInterop集成富文本编辑器的挑战
在Blazor应用中集成富文本编辑器时，开发者常会遇到需要与底层JavaScript API（如document.execCommand）进行交互的场景。JSInterop是实现这一目标的关键机制。然而，不当的JSInterop使用方式可能导致一些难以察觉的问题，尤其是在处理事件监听和DOM元素状态时。本教程将深入分析两个常见问题：按钮点击需要两次才能生效，以及图像插入功能触发多次提示且无法显示图片。
初始实现与潜在问题分析
假设我们有一个Blazor组件，其中包含一个可编辑的div和一个工具栏，工具栏上的按钮通过@onclick事件触发C#方法，进而调用JSInterop来执行相应的富文本命令。
初始HTML结构：
<div class="main-content">
<div class="text-editor-header">
<button @onclick="showChange" type="button" class="btn" data-element="bold">
<i class="fa fa-bold"></i>
</button>
<button @onclick="showChange" type="button" class="btn" data-element="justifyFull">
<span class="fa fa-align-justify"></span>
</button>
<button @onclick="showChange" type="button" class="btn" data-element="insertImage">
<span class="fa fa-image"></span>
</button>
</div>
<div class="content" id="content" contenteditable="true"></div>
</div>C#代码：
@inject IJSRuntime JsRuntime
// ... 其他代码 ...
async Task showChange()
{
await JsRuntime.InvokeVoidAsync(identifier: "buttonPressed");
}JavaScript代码 (JSInterop.js)：
function buttonPressed() {
const elements = document.querySelectorAll('.btn');
elements.forEach(element => {
element.addEventListener('click', () => { // 问题所在：重复注册事件监听器
let command = element.dataset['element'];
if (command == 'createLink' || command == 'insertImage') {
let url = prompt('Enter the link here:', 'http://');
document.execCommand(command, false, url);
} else {
document.execCommand(command, false, null);
}
});
});
}在这种实现中，我们观察到两个主要问题：
- 按钮需要点击两次才能生效： 首次点击按钮时，showChange方法被调用，进而执行JavaScript中的buttonPressed函数。此时，buttonPressed函数遍历所有.btn元素，并为它们注册了点击事件监听器。这意味着第一次点击仅仅是注册了监听器，实际的document.execCommand操作并不会立即执行。只有在第二次点击时，之前注册的事件监听器才会被触发，从而执行富文本命令。
- 图像按钮触发多次提示且无法插入图片： 这个问题是第一个问题的延伸。每次Blazor组件重新渲染并调用showChange时，buttonPressed函数都会被执行，导致为每个按钮重复注册点击事件监听器。如果一个按钮被点击了N次，那么它就会有N个相同的事件监听器。当再次点击该按钮时，所有N个监听器都会被触发，导致prompt对话框弹出N次。更严重的是，即使document.execCommand('insertImage', ...)被调用，Blazor的默认渲染机制可能会在每次交互后重新渲染组件，从而清除contenteditable div中的内容，导致插入的图片瞬间消失。
解决方案：优化JSInterop调用与Blazor渲染行为
要解决上述问题，我们需要从两个方面入手：
- 避免重复注册事件监听器： 将富文本命令直接从Blazor传递到JavaScript，而不是在JavaScript中再次查找元素并注册监听器。
- 控制Blazor的渲染行为： 确保由JavaScript直接操作的DOM元素不会被Blazor意外地重新渲染。
1. 优化JSInterop调用：直接传递命令
最佳实践是让Blazor组件直接知道要执行什么命令，并将该命令作为参数传递给JavaScript函数。这样，JavaScript函数只需要执行传入的命令，而不需要关心事件注册。
更新C#代码：
修改showChange方法，使其接受一个command字符串参数，并将其传递给JavaScript。
async Task showChange(string command)
{
await JsRuntime.InvokeVoidAsync(identifier: "buttonPressed", command);
}更新JavaScript代码 (JSInterop.js)：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
修改buttonPressed函数，使其直接接收command参数，并根据该参数执行相应的document.execCommand。
function buttonPressed(command) {
if (command == 'createLink' || command == 'insertImage') {
let url = prompt('Enter the link here:', 'http://');
document.execCommand(command, false, url);
} else {
document.execCommand(command, false, null);
}
}更新HTML中的按钮绑定：
现在，每个按钮的@onclick事件可以直接调用showChange并传递其对应的命令。
<button @onclick='@(() => showChange("bold"))' type="button" class="btn">
<i class="fa fa-bold"></i>
</button>
<button @onclick='@(() => showChange("justifyFull"))' type="button" class="btn">
<span class="fa fa-align-justify"></span>
</button>
<button @onclick='@(() => showChange("insertImage"))' type="button" class="btn">
<span class="fa fa-image"></span>
</button>通过这些修改，现在每次点击按钮时，Blazor会直接调用JavaScript中的buttonPressed函数，并传入正确的命令。JavaScript函数会立即执行该命令，而不会重复注册事件监听器，从而解决了双击和多重提示的问题。
2. 控制Blazor的渲染行为：使用ShouldRender()
即使解决了事件监听器的问题，Blazor的默认渲染行为仍可能导致contenteditable div中的内容在每次组件状态更新时被清除。为了防止这种情况，我们可以将contenteditable div封装在一个独立的Blazor组件中，并重写其ShouldRender()方法。
创建独立的EditableContent组件 (EditableContent.razor)：
<!-- EditableContent.razor -->
<div class="content" id="content" contenteditable="true"></div>
@code {
protected override bool ShouldRender()
{
// 阻止Blazor重新渲染此组件，因为其内容将由JavaScript直接管理
return false;
}
}在主组件中使用EditableContent组件：
<div class="main-content">
<!--Text Editor Header-->
<div class="text-editor-header">
<!-- ... 你的按钮代码 ... -->
</div>
<EditableContent /> <!-- 使用新的独立组件 -->
</div>通过将contenteditable div放入一个独立的组件，并设置ShouldRender() => false，我们告诉Blazor：一旦这个组件被添加到DOM中，就不要再对其进行任何渲染更新。这样，JavaScript对div内容的修改将不会被Blazor的后续渲染操作所覆盖。
总结与最佳实践
在Blazor应用中利用JSInterop与JavaScript进行交互时，尤其是在构建富文本编辑器这类需要频繁操作DOM的场景，遵循以下最佳实践至关重要：
- 单一职责原则： 明确JSInterop调用的目的。如果JavaScript函数是为了执行一个命令，那么它就应该只执行这个命令，而不是同时负责事件监听器的注册。
- 避免重复事件注册： 永远不要在每次JSInterop调用时重复注册相同的事件监听器。这会导致性能问题和不可预测的行为（如多次触发）。
- 数据流清晰： 将所有必要的数据（如富文本命令、URL等）从Blazor传递给JavaScript，而不是让JavaScript尝试从DOM中重新获取。
- 控制Blazor渲染： 对于那些内容完全由JavaScript管理的DOM元素，考虑将其封装在独立的Blazor组件中，并重写ShouldRender()方法，返回false以防止Blazor意外地清除或重置其内容。
- 组件化思维： 将复杂的UI功能分解为更小的、可管理的Blazor组件，有助于更好地隔离问题和管理渲染行为。
通过遵循这些原则，您可以有效地利用Blazor的JSInterop功能，构建出稳定、高效且用户体验良好的富文本编辑器或其他需要深度JavaScript集成的功能。
