如何在Blazored TextEditor中加载MudTable行的指定内容

问题根源 #

Blazored TextEditor 不支持标准的 bind-Value 绑定——它是富文本编辑器，专门用 @bind-HTML 来绑定HTML格式的内容，这就是你之前绑定无效的核心原因。

具体实现方案 #

按以下步骤修改代码即可：

1. 声明必要变量：在组件里定义存储当前编辑内容的字符串变量、抽屉开关状态，以及当前编辑的行对象。
2. 点击按钮时赋值并打开抽屉：点击每行的编辑按钮，把该行的AssessmentQuestion内容赋给绑定变量，同时打开抽屉。
3. 编辑器绑定：在抽屉内的Blazored TextEditor上用@bind-HTML绑定到之前的变量。

完整可运行代码示例 #

@* 引入Blazored TextEditor命名空间 *@
@using Blazored.TextEditor

<div>
    <MudTable Items="@assessmentQuestions" Hover="true" Striped="true">
        <HeaderContent>
            <MudTh>问题内容</MudTh>
            <MudTh>操作</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd>@context.AssessmentQuestion</MudTd>
            <MudTd>
                <MudButton Variant="Variant.Filled" Color="Color.Primary" 
                           OnClick="(() => OpenEditDrawer(context))">编辑</MudButton>
            </MudTd>
        </RowTemplate>
    </MudTable>

    <!-- 编辑抽屉 -->
    <MudDrawer @bind-Open="@isDrawerOpen" Anchor="Anchor.Right" Width="400px">
        <MudDrawerHeader>
            <MudTypography Typo="Typo.h6">编辑问题</MudTypography>
        </MudDrawerHeader>
        <MudDrawerContent>
            <!-- 绑定编辑器的HTML内容 -->
            <BlazoredTextEditor @bind-HTML="@currentQuestionContent" />
            <div class="mt-4 d-flex justify-content-end">
                <MudButton Variant="Variant.Outlined" OnClick="(() => isDrawerOpen = false)" 
                           Class="me-2">取消</MudButton>
                <MudButton Variant="Variant.Filled" Color="Color.Primary" 
                           OnClick="SaveChanges">保存</MudButton>
            </div>
        </MudDrawerContent>
    </MudDrawer>
</div>

@code {
    // 模拟你的问题数据模型
    public class AssessmentQuestionModel
    {
        public int Id { get; set; }
        public string AssessmentQuestion { get; set; }
    }

    // 模拟数据源
    private List<AssessmentQuestionModel> assessmentQuestions = new()
    {
        new AssessmentQuestionModel { Id = 1, AssessmentQuestion = "<p>第一个测试问题</p>" },
        new AssessmentQuestionModel { Id = 2, AssessmentQuestion = "<p>第二个测试问题</p>" }
    };

    // 抽屉状态控制
    private bool isDrawerOpen;
    // 编辑器绑定的内容
    private string currentQuestionContent;
    // 当前编辑的行对象
    private AssessmentQuestionModel currentEditingItem;

    // 打开抽屉并赋值
    private void OpenEditDrawer(AssessmentQuestionModel item)
    {
        currentEditingItem = item;
        currentQuestionContent = item.AssessmentQuestion;
        isDrawerOpen = true;
    }

    // 保存修改
    private void SaveChanges()
    {
        if (currentEditingItem != null)
        {
            // 将编辑器内容回写到原数据
            currentEditingItem.AssessmentQuestion = currentQuestionContent;
            // 这里可以添加调用API保存到后端的逻辑
        }
        isDrawerOpen = false;
    }
}

额外注意点 #

• 如果你的AssessmentQuestion存储的是纯文本，需要先转成HTML格式（比如用<p>标签包裹）再赋值给编辑器，否则编辑器可能无法正确渲染。
• 如果需要自定义编辑器工具栏，可以给BlazoredTextEditor添加Toolbar参数，配置你需要的工具按钮。

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