本文深入探讨了在blazor应用中利用jsinterop构建富文本编辑器时，因事件处理机制和组件重渲染导致的双击、重复提示及内容丢失问题。通过优化jsinterop调用方式，将命令直接从blazor传递给javascript，并利用blazor组件的`shouldrender`生命周期方法来控制`contenteditable`区域的渲染行为，我们能够构建一个高效且稳定的富文本编辑器。
1. 理解Blazor与JSInterop交互的常见陷阱
在Blazor应用中结合javaScript的document.execCommand来创建富文本编辑器时，开发者常常会遇到一些看似棘手的问题，例如按钮需要双击才能生效、图片插入提示重复弹出，以及插入的图片或文本内容在页面刷新后消失。这些问题通常源于对Blazor组件渲染机制和JSInterop事件处理方式的误解。
陷阱一：重复注册事件监听器
原始的javascript代码设计存在一个核心问题：它在每次Blazor的@onclick事件触发时，都会遍历所有按钮并为它们重新注册一个click事件监听器。
// 原始的JSInterop.js function buttonPressed() { const elements = document.querySelectorAll('.btn'); elements.forEach(element => { // 每次调用buttonPressed()都会为每个按钮添加一个新的click监听器 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); } }); }); }
其执行流程如下：
- 首次点击Blazor按钮： Blazor的@onclick事件触发，调用showChange方法，进而通过JSInterop调用buttonPressed()。此时，JavaScript代码为每个.btn元素注册了第一个click事件监听器。但由于是Blazor事件触发的JS调用，这些新注册的JS事件处理器还未被触发。
- 第二次点击同一个Blazor按钮： 此时，Blazor的@onclick再次触发，showChange再次调用buttonPressed()。JavaScript代码会再次为所有.btn元素注册第二个click事件监听器。同时，由于现在按钮上已经有了事件监听器，第一次注册的监听器也会被触发，导致document.execCommand执行。对于insertImage这类需要prompt的命令，就会出现重复提示的问题。
这种重复注册导致了事件处理的混乱和效率低下。
陷阱二：Blazor组件的默认重渲染行为
Blazor组件在检测到其状态发生变化（例如，通过@onclick事件处理程序）时，会默认进行重渲染。这意味着组件的RenderTree会被重新构建，并且对应的dom元素可能会被更新或替换。
<!-- 原始的html结构 --> <div class="main-content"> <!-- ... 按钮 ... --> <div class="content" id="content" contenteditable="true"></div> </div>
对于contenteditable=”true”的div元素，当Blazor组件因按钮点击而重渲染时，这个div的内容可能会被清空，因为它被Blazor的渲染引擎重新创建或更新了。因此，即使document.execCommand成功地插入了图片或文本，这些内容也会在Blazor的下一次渲染周期中被擦除，导致用户看不到任何变化。
2. 优化JSInterop调用：直接传递命令
为了解决重复注册事件监听器的问题，我们应该改变JSInterop的调用模式：让Blazor直接将要执行的命令传递给JavaScript，而不是让JavaScript去查找元素并注册事件。
C# 代码调整
我们将showChange方法修改为接受一个String command参数，并将其直接传递给JavaScript函数。
// Blazor组件的C#代码块 @inject IJSRuntime JsRuntime async Task showChange(string command) { // 直接将命令传递给JavaScript函数 await JsRuntime.InvokeVoidAsync(identifier: "buttonPressed", command); }
HTML 按钮绑定调整
现在，每个按钮的@onclick事件将直接调用showChange方法，并传入其对应的命令字符串。
<div class="text-editor-header"> <button @onclick='@(() => showChange("bold"))' type="button" class="btn" data-element="bold"> <i class="fa fa-bold"></i> </button> <button @onclick='@(() => showChange("justifyFull"))' type="button" class="btn" data-element="justifyFull"> <span class="fa fa-align-justify"></span> </button> <button @onclick='@(() => showChange("insertImage"))' type="button" class="btn" data-element="insertImage"> <span class="fa fa-image"></span> </button> <!-- 其他按钮类似修改 --> </div>
JavaScript 代码调整
buttonPressed函数现在直接接收Blazor传递的command参数，并立即执行document.execCommand。这样就彻底移除了事件监听器的重复注册问题。
// JSInterop.js 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); } }
通过这些修改，每次按钮点击都会直接且唯一地触发JavaScript中的document.execCommand，解决了双击和重复提示的问题。
3. 控制contenteditable区域的渲染行为
即使命令执行正确，Blazor的默认重渲染行为仍然会清除contenteditable区域的内容。为了解决这个问题，我们需要将contenteditable区域封装成一个独立的Blazor组件，并重写其ShouldRender方法来阻止其重渲染。
创建独立的RichTextContent组件
创建一个新的Blazor组件，例如RichTextContent.razor，它只包含contenteditable的div。
<!-- RichTextContent.razor --> <div class="content" id="content" contenteditable="true"></div> @code { // 阻止此组件在父组件或自身状态改变时重渲染 protected override bool ShouldRender() => false; }
重写ShouldRender方法
在RichTextContent.razor组件的@code块中，我们重写ShouldRender()方法并使其返回false。
protected override bool ShouldRender() => false;
ShouldRender()方法的作用：ShouldRender()是Blazor组件生命周期方法的一部分。当它返回false时，Blazor的渲染引擎将跳过此组件及其子组件的渲染过程，即使其父组件或自身状态发生了变化。这确保了contenteditable div的DOM状态（包括用户输入或document.execCommand修改的内容）不会被Blazor的重渲染机制意外清除。
在主组件中使用RichTextContent
现在，在你的主组件中，你可以简单地引用这个新的RichTextContent组件。
<!-- 主组件的HTML --> <div class="main-content"> <!--Text Editor Header--> <div class="text-editor-header"> <!-- ... 按钮 (如上面优化后的代码) ... --> </div> <!-- 使用独立的RichTextContent组件 --> <RichTextContent /> </div>
注意事项： 使用ShouldRender() => false意味着RichTextContent组件将不再响应Blazor的数据绑定或状态更新。如果你的富文本编辑器需要从Blazor端动态加载初始内容或进行其他Blazor驱动的更新，你可能需要通过JSInterop手动将内容注入到contenteditable div中，或者实现更复杂的ShouldRender逻辑，例如只在特定条件满足时才允许渲染。但在大多数document.execCommand驱动的富文本编辑器场景中，这种方法是有效且简化的。
4. 完整示例
将上述所有修改整合后，你的Blazor富文本编辑器将具备稳定且高效的事件处理和内容管理能力。
RichTextEditor.razor (主组件)
@page "/richtexteditor" @inject IJSRuntime JsRuntime <div class="main-content"> <!--Text Editor Header--> <div class="text-editor-header"> <button @onclick='@(() => showChange("bold"))' type="button" class="btn"> <i class="fa fa-bold"></i> </button> <button @onclick='@(() => showChange("italic"))' type="button" class="btn"> <i class="fa fa-italic"></i> </button> <button @onclick='@(() => showChange("underline"))' type="button" class="btn"> <i class="fa fa-underline"></i> </button> <button @onclick='@(() => showChange("strikeThrough"))' type="button" class="btn"> <i class="fa fa-strikethrough"></i> </button> <button @onclick='@(() => showChange("justifyLeft"))' type="button" class="btn"> <span class="fa fa-align-left"></span> </button> <button @onclick='@(() => showChange("justifyCenter"))' type="button" class="btn"> <span class="fa fa-align-center"></span> </button> <button @onclick='@(() => showChange("justifyRight"))' type="button" class="btn"> <span class="fa fa-align-right"></span> </button> <button @onclick='@(() => showChange("justifyFull"))' type="button" class="btn"> <span class="fa fa-align-justify"></span> </button> <button @onclick='@(() => showChange("insertOrderedList"))' type="button" class="btn"> <span class="fa fa-list-ol"></span> </button> <button @onclick='@(() => showChange("insertUnorderedList"))' type="button" class="btn"> <span class="fa fa-list-ul"></span> </button> <button @onclick='@(() => showChange("createLink"))' type="button" class="btn"> <span class="fa fa-link"></span> </button> <button @onclick='@(() => showChange("insertImage"))' type="button" class="btn"> <span class="fa fa-image"></span> </button> <button @onclick='@(() => showChange("undo"))' type="button" class="btn"> <span class="fa fa-undo"></span> </button> <button @onclick='@(() => showChange("redo"))' type="button" class="btn"> <span class="fa fa-redo"></span> </button> </div> <!-- 使用独立的RichTextContent组件来承载可编辑内容 --> <RichTextContent /> </div> @code { async Task showChange(string command) { await JsRuntime.InvokeVoidAsync(identifier: "buttonPressed", command); } }
RichTextContent.razor (内容组件)
<!-- RichTextContent.razor --> <div class="content" id="content" contenteditable="true" style="border: 1px solid #ccc; min-height: 200px; padding: 10px;"> <!-- 初始内容或用户编辑的内容将在此处保留 --> <p>开始在这里输入你的文本...</p> </div> @code { // 阻止此组件在父组件或自身状态改变时重渲染 // 这确保了contenteditable div的DOM状态不会被Blazor意外清除 protected override bool ShouldRender() => false; }
wwwroot/js/JSInterop.js (JavaScript文件)
function buttonPressed(command) { // 确保在执行execCommand前，contenteditable div是焦点 // 这是一个常见的最佳实践，以确保命令作用于正确的位置 const contentDiv = document.getElementById('content'); if (contentDiv) { contentDiv.focus(); } if (command === 'createLink' || command === 'insertImage') { let url = prompt('请输入链接或图片URL:', 'http://'); if (url) { // 只有当用户输入了URL时才执行命令 document.execCommand(command, false, url); } } else { document.execCommand(command, false, null); } }
注意： 确保在_Host.cshtml (Blazor Server) 或 index.html (Blazor WebAssembly) 中正确引用了JSInterop.js文件。
<!-- 例如在_Host.cshtml或index.html中 --> <script src="js/JSInterop.js"></script>
5. 总结与最佳实践
通过上述优化，我们解决了在Blazor中构建富文本编辑器时遇到的核心问题。以下是一些关键的总结和最佳实践：
- 理解Blazor渲染机制： Blazor组件的默认重渲染行为可能会意外地清除或重置由JavaScript直接操作的DOM元素内容。
- 控制组件渲染： 对于需要保留DOM状态的元素（如contenteditable），将其封装为独立组件并重写ShouldRender()方法返回false，是阻止Blazor重渲染的有效策略。
- 优化JSInterop调用： 避免在JSInterop调用的JavaScript函数中重复注册事件监听器。最佳实践是让Blazor直接将操作命令和必要参数传递给JavaScript函数，由JavaScript函数直接执行命令。
- 直接执行命令： JavaScript函数应直接执行document.execCommand，而不是通过额外的DOM事件监听器来间接触发。
- 焦点管理： 在执行document.execCommand之前，确保contenteditable元素获得焦点，以确保命令作用于正确的选区。
- 用户输入验证： 对于createLink或insertImage等需要用户输入的命令，在执行document.execCommand之前，对用户输入进行简单的验证（例如，检查prompt是否返回null或空字符串），可以提升用户体验。
遵循这些原则，你将能够更有效地在Blazor应用中集成JavaScript功能，构建出稳定且功能强大的富文本编辑器。