@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.RichTextEditor
@using Syncfusion.Blazor.Buttons
<SfToolbar>
<ToolbarEvents Clicked="OnClicked"></ToolbarEvents>
<ToolbarItems>
<ToolbarItem CssClass="@boldCss" PrefixIcon="e-icons e-bold" TooltipText="Bold"></ToolbarItem>
<ToolbarItem CssClass="@italicCss" PrefixIcon="e-icons e-italic" TooltipText="Italic"></ToolbarItem>
<ToolbarItem CssClass="@underlineCss" PrefixIcon="e-icons e-underline" TooltipText="Underline"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-justifyLeft" TooltipText="JustifyLeft"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-justifyRight" TooltipText="JustifyRight"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-justifyFull" TooltipText="JustifyFull"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-justifyCenter" TooltipText="JustifyCenter"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-super-script" TooltipText="Superscript"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-sub-script" TooltipText="Subscript"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-redo" TooltipText="Redo"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-undo" TooltipText="Undo"></ToolbarItem>
</ToolbarItems>
</SfToolbar>
<br />
<SfCheckBox @bind-Checked="@isChecked" TChecked="bool" ValueChange="@OnChange"></SfCheckBox>
<br />
<p>Field 1</p>
<SfRichTextEditor @ref="rteInstance1">
<p>
The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
</p>
<RichTextEditorToolbarSettings Enable="true" />
<RichTextEditorEvents UpdatedToolbarStatus="OnUpdate" ></RichTextEditorEvents>
</SfRichTextEditor>
<br />
<p>Field 2</p>
<SfRichTextEditor @ref="rteInstance2">
<p>
The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
</p>
<RichTextEditorToolbarSettings Enable="true" />
<RichTextEditorEvents UpdatedToolbarStatus="OnUpdate"></RichTextEditorEvents>
</SfRichTextEditor>
@code {
SfRichTextEditor rteInstance1;
SfRichTextEditor rteInstance2;
private string boldCss { get; set; }
private string italicCss { get; set; }
private string underlineCss { get; set; }
private bool isChecked = true;
private void OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
boldCss = italicCss = underlineCss = string.Empty;
}
private async Task OnClicked(ClickEventArgs args)
{
var currentEditor = isChecked ? rteInstance1 : rteInstance2;
var command = (CommandName)System.Enum.Parse(typeof(CommandName), args.Item.TooltipText);
await currentEditor.ExecuteCommandAsync(command);
boldCss = underlineCss = italicCss = string.Empty;
switch (args.Item.TooltipText)
{
case "Bold":
boldCss = "highlight";
break;
case "Italic":
italicCss = "highlight";
break;
case "Underline":
underlineCss = "highlight";
break;
}
}
private void OnUpdate(ToolbarStatusEventArgs args)
{
boldCss = args.Html.Bold ? "highlight" : string.Empty ;
italicCss = args.Html.Italic ? "highlight" : string.Empty;
underlineCss = args.Html.Underline ? "highlight" : string.Empty;
}
}
