美化RTE验证

Question

我有一个富文本编辑器从blazorise，我正试图验证输入用户正在写。特别是不能是空的。为了获得该消息，我创建了一个TextEdit不可见组件，但似乎没有触发我对TextEdit的验证。我有一个fluentvalidations检查，而不是一个表单。

下面是我正在做的:

<FieldLabel>Viber message:</FieldLabel>
<RichTextEdit @ref="rteViberBody"
ContentChanged="@MyCheckRTEMethod"
PlaceHolder="Type your message here..."
ReadOnly="@readOnly"
SubmitOnEnter="false"
Style="height:80px">
<Editor>

</Editor>
<Toolbar>
<RichTextEditToolbarGroup Float="Float.End">                                               
<RichTextEditToolbarButton Action="RichTextEditAction.Bold" />
<RichTextEditToolbarButton Action="RichTextEditAction.Italic" />
<RichTextEditToolbarButton Action="RichTextEditAction.Strike" />
<RichTextEditToolbarButton Action="RichTextEditAction.Image" />
<RichTextEditToolbarButton Action="RichTextEditAction.Clean" />
</RichTextEditToolbarGroup>
</Toolbar>
</RichTextEdit>
</Field>
</Fields>
<Fields>
<Field>
<Validation AsyncValidator="@ValidateRTEViberInputAsync">
<TextEdit @bind-Text="viberMessageHiddenForValidation" @bind-Text:event="oninput" Visibility="Visibility.Invisible">
<Feedback>
<ValidationError>Please type a message.</ValidationError>
</Feedback>
</TextEdit>
</Validation>
</Field>

是否有人知道需要做什么或改变什么才能使其发挥作用?提前感谢

Answer 1

我刚刚发现这是建议:https://github.com/Megabit/Blazorise/issues/1792

到目前为止，有一个解决方案，但不是很好:

<RichTextEdit @ref="richTextEditRef"
ConfigureQuillJsMethod="blazoriseDemo.configureQuillJs"
ContentChanged="@OnContentChanged"
Border="@( string.IsNullOrWhiteSpace( contentAsText ) ? Border.Danger : null)">
...
</RichTextEdit>
@if ( string.IsNullOrWhiteSpace( contentAsText ) )
{
<Paragraph TextColor="TextColor.Danger">Text is empty</Paragraph>
}
else
{
<Paragraph TextColor="TextColor.Success">Text is valid</Paragraph>
}
@code{
private string contentAsText;
public async Task OnContentChanged()
{
contentAsText = await richTextEditRef.GetTextAsync();
}
}

Answer 2

如果有人面临类似的情况，请查看stsrki发布的GitHub评论，该评论建议以下代码:

<RichTextEdit @ref="richTextEditRef"
ConfigureQuillJsMethod="blazoriseDemo.configureQuillJs"
ContentChanged="@OnContentChanged"
Border="@( string.IsNullOrWhiteSpace( contentAsText ) ? Border.Danger : null)">
...
</RichTextEdit>
@if ( string.IsNullOrWhiteSpace( contentAsText ) )
{
<Paragraph TextColor="TextColor.Danger">Text is empty</Paragraph>
}
else
{
<Paragraph TextColor="TextColor.Success">Text is valid</Paragraph>
}
@code{
private string contentAsText;
public async Task OnContentChanged()
{
contentAsText = await richTextEditRef.GetTextAsync();
}
}