Blazor中contenteditable div数据绑定问题求解决方案

问题背景 #

已知Blazor原生不支持contenteditable div的数据绑定，目前已通过oninput事件结合JS代码实现输入文本的获取，但无法通过更新TODO_TEXT来同步div的显示内容。现有代码如下：

现有Blazor代码 #

<div role="textbox" contentEditable="true" @oninput="(e) => HandleInput(e, item.TODO_ID)">@item.TODO_TEXT</div>

配套JS代码 #

document.addEventListener("input", onInput);
function onInput(e) { 
    let target = e.target; 
    if (target.localName == "div") { 
        if (!target.value && !target.__contenteditable) target.__contenteditable = true; 
        if (target.__contenteditable) target.value = target.innerText; 
    }
}

可行解决方案：完善双向绑定逻辑 #

由于contenteditable会干扰Blazor的DOM diff机制，直接更新TODO_TEXT无法触发div内容刷新，需通过JSInterop配合手动同步：

1. 更新JS代码，添加主动更新方法 #

扩展原有JS逻辑，新增用于从C#端同步div内容的方法：

document.addEventListener("input", onInput);

function onInput(e) {
    let target = e.target;
    if (target.localName === "div" && target.isContentEditable) {
        if (!target.__contenteditable) {
            target.__contenteditable = true;
        }
        target.value = target.innerText;
    }
}

// 用于从C#更新contenteditable div的内容
window.updateContentEditable = (elementId, text) => {
    const element = document.getElementById(elementId);
    if (element && element.isContentEditable) {
        element.innerText = text;
        element.value = text;
        element.__contenteditable = true;
    }
};

2. 调整Blazor组件代码 #

给div添加唯一ID，方便JS定位，并修改输入处理逻辑：

@inject IJSRuntime JSRuntime

<div id="todo-@item.TODO_ID" role="textbox" contentEditable="true" @oninput="(e) => HandleInput(e, item)"></div>

3. 实现输入处理与主动同步 #

// 处理输入事件，更新TODO_TEXT
private void HandleInput(ChangeEventArgs e, TodoItem item)
{
    var newText = e.Value?.ToString();
    if (!string.IsNullOrEmpty(newText))
    {
        item.TODO_TEXT = newText;
        // 可选：添加保存到后端的逻辑
    }
}

// 当需要主动更新div内容时（比如从后端刷新数据）
private async Task RefreshTodoText(TodoItem item)
{
    // 假设此处已从后端获取最新的TODO_TEXT并赋值给item.TODO_TEXT
    await JSRuntime.InvokeVoidAsync("updateContentEditable", $"todo-{item.TODO_ID}", item.TODO_TEXT);
}

支持标记文本的替代控件推荐 #

如果需要更完善的富文本/标记文本编辑能力，推荐以下成熟的Blazor控件：

• Blazored.TextEditor：基于Quill.js的轻量封装，支持双向绑定，自带常用格式化工具（加粗、斜体、列表等），开源免费。
• Radzen Blazor Editor：开源富文本编辑器，集成简单，提供预设工具条，支持自定义格式，适配Blazor Server/WASM。
• Syncfusion Blazor RichTextEditor：功能全面，支持图片上传、自定义工具栏、代码块等，适合复杂编辑场景（注意商业授权限制）。

内容的提问来源于stack exchange，提问作者Farooq