Blazor与JSInterop集成富文本编辑器：常见陷阱与解决方案

本文深入探讨了在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);
            }
        });
    });
}

在这种实现中，我们观察到两个主要问题：

1. 按钮需要点击两次才能生效： 首次点击按钮时，showChange方法被调用，进而执行JavaScript中的buttonPressed函数。此时，buttonPressed函数遍历所有.btn元素，并为它们注册了点击事件监听器。这意味着第一次点击仅仅是注册了监听器，实际的document.execCommand操作并不会立即执行。只有在第二次点击时，之前注册的事件监听器才会被触发，从而执行富文本命令。
2. 图像按钮触发多次提示且无法插入图片： 这个问题是第一个问题的延伸。每次Blazor组件重新渲染并调用showChange时，buttonPressed函数都会被执行，导致为每个按钮重复注册点击事件监听器。如果一个按钮被点击了N次，那么它就会有N个相同的事件监听器。当再次点击该按钮时，所有N个监听器都会被触发，导致prompt对话框弹出N次。更严重的是，即使document.execCommand('insertImage', ...)被调用，Blazor的默认渲染机制可能会在每次交互后重新渲染组件，从而清除contenteditable div中的内容，导致插入的图片瞬间消失。

解决方案：优化JSInterop调用与Blazor渲染行为

要解决上述问题，我们需要从两个方面入手：

1. 避免重复注册事件监听器： 将富文本命令直接从Blazor传递到JavaScript，而不是在JavaScript中再次查找元素并注册监听器。
2. 控制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)：

AI图像编辑器

使用文本提示编辑、变换和增强照片

46

查看详情

修改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集成的功能。

以上就是Blazor与JSInterop集成富文本编辑器：常见陷阱与解决方案的详细内容，更多请关注php中文网其它相关文章！