Blazor中JSInterop富文本编辑器OnClick事件问题的解决方案-js教程-PHP中文网

Blazor中JSInterop富文本编辑器OnClick事件问题的解决方案

本文旨在解决在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; }

    /// <summary>
    /// 异步方法，用于将富文本编辑命令传递给JavaScript。
    /// </summary>
    /// <param name="command">要执行的编辑命令，例如"bold", "insertImage"等。</param>
    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 按钮代码：

AI图像编辑器

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

查看详情

每个按钮的@onclick事件现在使用Lambda表达式直接调用ExecuteEditorCommand方法并传递相应的命令字符串。

<div class="main-content">
    <!--Text Editor Header-->
    <div class="text-editor-header">
        <button @onclick='@(() => ExecuteEditorCommand("bold"))' type="button" class="btn" title="加粗">
            <i class="fa fa-bold"></i>
        </button>
        <button @onclick='@(() => ExecuteEditorCommand("justifyFull"))' type="button" class="btn" title="两端对齐">
            <span class="fa fa-align-justify"></span>
        </button>
        <button @onclick='@(() => ExecuteEditorCommand("insertImage"))' type="button" class="btn" title="插入图片">
            <span class="fa fa-image"></span>
        </button>
        <button @onclick='@(() => ExecuteEditorCommand("createLink"))' type="button" class="btn" title="插入链接">
            <span class="fa fa-link"></span>
        </button>
        <!-- 其他按钮 -->
    </div>
    <!-- contenteditable div 将被移至单独组件 -->
    <div id="editorContentContainer"></div> 
</div>

登录后复制

通过这种方式，每次点击按钮，Blazor只会调用一次JSInterop，JavaScript也只会执行一次document.execCommand，彻底解决了双击和重复弹窗的问题。

2. 控制Blazor组件渲染：隔离contenteditable区域

为了防止Blazor在每次按钮点击后重新渲染并清空contenteditable区域的内容，我们需要将contenteditable的div封装到一个独立的Blazor组件中，并控制其渲染行为。

创建 EditorContent 组件：

首先，创建一个新的Blazor组件，例如EditorContent.razor。

<!-- EditorContent.razor -->
<div id="content" contenteditable="true" @ref="contentElement"></div>

@code {
    private ElementReference contentElement;

    /// <summary>
    /// 覆写ShouldRender方法，防止Blazor重新渲染此组件。
    /// 这对于由JavaScript直接操作DOM的元素至关重要。
    /// </summary>
    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。

<!-- 主富文本编辑器组件 (例如 RichTextEditor.razor) -->
<div class="main-content">
    <!--Text Editor Header-->
    <div class="text-editor-header">
        <!-- 按钮部分，如上所示 -->
        <button @onclick='@(() => ExecuteEditorCommand("bold"))' type="button" class="btn" title="加粗">
            <i class="fa fa-bold"></i>
        </button>
        <!-- ... 其他按钮 ... -->
    </div>

    <!-- 使用新的 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，构建稳定且功能强大的富文本编辑功能。

以上就是Blazor中JSInterop富文本编辑器OnClick事件问题的解决方案的详细内容，更多请关注php中文网其它相关文章！