Skip to content

991223: Blazor Documentation cleanup #7086

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: development
Choose a base branch
from
Open

991223: Blazor Documentation cleanup #7086

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
75a4bde
991223: Blazor Documentation cleanup
Kokila13081999 Nov 5, 2025
70f356e
991223: Blazor Documentation cleanup
Kokila13081999 Nov 6, 2025
eb69a5c
Merge branch 'development' into 991223-Blaz-Clean
Kokila13081999 Nov 7, 2025
16919d5
991223: Blazor Documentation cleanup
Kokila13081999 Nov 7, 2025
0bb86b0
Merge branch '991223-Blaz-Clean' of https://github.com/syncfusion-con…
Kokila13081999 Nov 7, 2025
c31329f
Merge branch 'development' into 991223-Blaz-Clean
saravanangn Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 44 additions & 22 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4093,48 +4093,70 @@
<li> <a href="/blazor/rich-text-editor/getting-started-with-maui-app">Blazor Hybrid MAUI App</a></li>
</ul>
</li>
<li>Toolbar
<ul>
<li><a href="/blazor/rich-text-editor/toolbar/toolbar">Toolbar Types</a></li>
<li><a href="/blazor/rich-text-editor/toolbar/toolbar-position">Toolbar Position</a></li>
<li><a href="/blazor/rich-text-editor/toolbar/quick-toolbar">Quick Toolbar</a></li>
</ul>
</li>
<li> <a href="/blazor/rich-text-editor/data-binding">Value Binding</a></li>
<li> <a href="/blazor/rich-text-editor/toolbar">Toolbar</a></li>
<li> <a href="/blazor/rich-text-editor/iframe">IFrame Editor</a></li>
<li> <a href="/blazor/rich-text-editor/inline-mode">Inline Editor</a></li>
<li>
Tools
<ul>
<li><a href="/blazor/rich-text-editor/tools/built-in-tools">Built-in Tools</a></li>
<li><a href="/blazor/rich-text-editor/tools/custom-tool">Custom Tool</a></li>
<li><a href="/blazor/rich-text-editor/tools/text-formatting">Text formatting and structural</a></li>
<li><a href="/blazor/rich-text-editor/tools/styling-tools">Styling Tools</a></li>
<li><a href="/blazor/rich-text-editor/tools/insert-image">Insert image</a></li>
<li><a href="/blazor/rich-text-editor/tools/audio">Insert audio</a></li>
<li><a href="/blazor/rich-text-editor/tools/video">Insert video</a></li>
<li><a href="/blazor/rich-text-editor/tools/link-manipulation">Link manipulation</a></li>
<li><a href="/blazor/rich-text-editor/tools/table-manipulation">Table manipulation</a></li>
<li><a href="/blazor/rich-text-editor/tools/code-block">Code Block</a></li>
<li><a href="/blazor/rich-text-editor/tools/fullscreen-tool">Expanding Editor to Fullscreen View</a></li>
<li><a href="/blazor/rich-text-editor/tools/format-painter">Format Painter</a></li>
<li><a href="/blazor/rich-text-editor/tools/custom-tool">Custom Tool</a></li>
<li><a href="/blazor/rich-text-editor/tools/dialogSettings">Dialog Settings</a></li>
</ul>
</li>
<li> <a href="/blazor/rich-text-editor/enter-key">Enter Key Configuration</a></li>
<li> <a href="/blazor/rich-text-editor/paste-cleanup">Paste Clean-up</a></li>
<li>Editor Types
<ul>
<li><a href="/blazor/rich-text-editor/editor-types/editor-modes">Editor Render Mode</a></li>
<li><a href="/blazor/rich-text-editor/editor-types/iframe">Iframe Editor</a></li>
<li> <a href="/blazor/rich-text-editor/editor-types/inline-mode">Inline Editor</a></li>
<li><a href="/blazor/rich-text-editor/editor-types/resizable-editor">Resizable Editor</a></li>
</ul>
</li>
<li>Insert Image and Media
<ul>
<li><a href="/blazor/rich-text-editor/insert-image-media/insert-image">Insert image</a></li>
<li><a href="/blazor/rich-text-editor/insert-image-media/audio">Insert audio</a></li>
<li><a href="/blazor/rich-text-editor/insert-image-media/video">Insert video</a></li>
</ul>
</li>
<li>Smart Editing
<ul>
<li> <a href="/blazor/rich-text-editor/mention-integration">Mention Integration</a></li>
<li> <a href="/blazor/rich-text-editor/slash-commands">Slash Commands</a></li>
<li> <a href="/blazor/rich-text-editor/smart-editing/mention-integration">Mention Integration</a></li>
<li> <a href="/blazor/rich-text-editor/smart-editing/slash-commands">Slash Commands</a></li>
<li><a href="/blazor/rich-text-editor/smart-editing/mail-merge">Mail Merge Integration</a></li>
</ul>
</li>
<li> <a href="/blazor/rich-text-editor/form-validation">Form Validation</a></li>
<li> <a href="/blazor/rich-text-editor/xhtml-validation">Xhtml Validation</a></li>
<li> <a href="/blazor/rich-text-editor/exec-command">Execute Command</a></li>
<li>Validation and Security
<ul>
<li><a href="/blazor/rich-text-editor/validation-security/form-validation">Forms Support</a></li>
<li><a href="/blazor/rich-text-editor/validation-security/xhtml-validation">Content Validation and Security in XHTML</a></li>
<li><a href="/blazor/rich-text-editor/validation-security/read-only-mode">Controlling Editor Access</a></li>
</ul>
</li>
<li><a href="/blazor/rich-text-editor/link-manipulation">Link manipulation</a></li>
<li><a href="/blazor/rich-text-editor/table-manipulation">Table manipulation</a></li>
<li><a href="/blazor/rich-text-editor/code-block">Code Block</a></li>
<li> <a href="/blazor/rich-text-editor/paste-cleanup">Paste Clean-up</a></li>
<li> <a href="/blazor/rich-text-editor/enter-key">Enter Key Configuration</a></li>
<li> <a href="/blazor/rich-text-editor/undo-redo-manager">Undo Redo Manager</a></li>
<li> <a href="/blazor/rich-text-editor/resizable-editor">Resizable Editor</a></li>
<li> <a href="/blazor/rich-text-editor/import-and-export">Import/Export</a></li>
<li> <a href="/blazor/rich-text-editor/exec-command">Execute Command</a></li>
<li> <a href="/blazor/rich-text-editor/style">Style and Appearance</a></li>
<li> <a href="/blazor/rich-text-editor/style-encapsulation">Style Encapsulation</a></li>
<li> <a href="/blazor/rich-text-editor/globalization">Globalization</a></li>
<li> <a href="/blazor/rich-text-editor/keyboard-support">Keyboard shortcuts</a></li>
<li> <a href="/blazor/rich-text-editor/accessibility">Accessibility</a></li>
<li> <a href="/blazor/rich-text-editor/webassembly-performance">WebAssembly Performance</a></li>
<li> <a href="/blazor/rich-text-editor/import-export">Import and Export</a></li>
<li> <a href="/blazor/rich-text-editor/editor-modes">Editor Modes</a></li>
<li> <a href="/blazor/rich-text-editor/keyboard-support">Keyboard shortcuts</a></li>
<li> <a href="/blazor/rich-text-editor/miscellaneous">Miscellaneous</a></li>
<li> <a href="/blazor/rich-text-editor/import-and-export">Import/Export</a></li>
<li> <a href="/blazor/rich-text-editor/events">Events</a></li>
<li>How To
<ul>
Expand Down
0 blazor/rich-text-editor/tools/code-block.md → blazor/rich-text-editor/code-block.md
View file
Open in desktop
File renamed without changes.
190 changes: 190 additions & 0 deletions blazor/rich-text-editor/code-snippet/mail-merge.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
@using Syncfusion.Blazor.RichTextEditor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SplitButtons
@using Syncfusion.Blazor.DropDowns
@using System.Text.RegularExpressions;
<div class="control-section">
<div class="control-wrapper">
<div class="">
<SfRichTextEditor ID="_mailMergeEditor" @bind-Value="_rteValue" SaveInterval="1" @ref="_mailMergeEditor">
<RichTextEditorToolbarSettings Items="@_tools">
<RichTextEditorEvents OnActionComplete="@OnActionCompleteHandler" />
<RichTextEditorCustomToolbarItems>
<RichTextEditorCustomToolbarItem Name="MergeData">
<Template>
<SfButton CssClass="@_buttonClass" OnClick="OnClickHandler" id="merge_data" tabindex="-1" aria-label="Merge User-specific Data" Disabled="@_sourceCodeEnabled">
<div class="e-tbar-btn-text">Merge Data</div>
</SfButton>
</Template>
</RichTextEditorCustomToolbarItem>
<RichTextEditorCustomToolbarItem Name="InsertField">
<Template>
<SfDropDownButton CssClass="@_dropDownButtonClass" id="insertField" Items="@_items" aria-label="Insert Merge Field" Disabled="@_sourceCodeEnabled">
<ChildContent>
<span style="display:inline-flex;">
<span class="e-rte-dropdown-btn-text">Insert Field</span>
</span>
<DropDownButtonEvents ItemSelected="OnItemSelect" OnOpen="OnDropDownOpen" Closed="OnDropDownClose"></DropDownButtonEvents>
</ChildContent>
</SfDropDownButton>
</Template>
</RichTextEditorCustomToolbarItem>
</RichTextEditorCustomToolbarItems>
</RichTextEditorToolbarSettings>
</SfRichTextEditor>
<SfMention DataSource="_mergeData" TItem="MergeData" Target="#_mailMergeEditor" MentionChar="_mentionChar" AllowSpaces="true" PopupWidth='250px' PopupHeight='200px' @ref="mentionObj">
<DisplayTemplate>
<span>{{@((context as MergeData).Value)}}</span>
</DisplayTemplate>
<ChildContent>
<MentionFieldSettings Text="Text"></MentionFieldSettings>
</ChildContent>
</SfMention>
</div>
</div>
</div>
<style>
.tailwind #insertField,
.tailwind3 #insertField {
font-size: 14px
}
.tailwind3 #merge_data,
.tailwind3-dark #merge_data {
font-weight:400;
}
</style>
@code {
private SfMention<MergeData> mentionObj;
private SfRichTextEditor _mailMergeEditor;
private string _buttonClass = "e-tbar-btn e-tbar-btn-text";
private string _dropDownButtonClass = "e-rte-elements e-rte-dropdown-menu";
private bool _sourceCodeEnabled = false;
private string _rteValue = @"<p>Dear <span contenteditable=""false"" class=""e-mention-chip""><span>{{FirstName}}</span></span> <span contenteditable=""false"" class=""e-mention-chip""><span>{{LastName}}</span></span>,</p>
<p>We are thrilled to have you with us! Your unique promotional code for this month is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{PromoCode}}</span></span>.</p>
<p>Your current subscription plan is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{SubscriptionPlan}}</span></span>.</p>
<p>Your customer ID is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{CustomerID}}</span></span>.</p>
<p>Your promotional code expires on: <span contenteditable=""false"" class=""e-mention-chip""><span>{{ExpirationDate}}</span></span>.</p>
<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href=""mailto:{{SupportEmail}}""><span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportPhoneNumber}}</span></span>.</p>
<p>Best regards,<br>The <span contenteditable=""false"" class=""e-mention-chip""><span>{{CompanyName}}</span></span> Team</p>";
private char _mentionChar = '{';
public class MergeData
{
public string Text { get; set; }
public string Value { get; set; }
}
private List<MergeData> _mergeData = new List<MergeData>
{
new MergeData { Text = "First Name", Value = "FirstName" },
new MergeData { Text = "Last Name", Value = "LastName" },
new MergeData { Text = "Support Email", Value = "SupportEmail" },
new MergeData { Text = "Company Name", Value = "CompanyName" },
new MergeData { Text = "Promo Code", Value = "PromoCode" },
new MergeData { Text = "Support Phone Number", Value = "SupportPhoneNumber" },
new MergeData { Text = "Customer ID", Value = "CustomerID" },
new MergeData { Text = "Expiration Date", Value = "ExpirationDate" },
new MergeData { Text = "Subscription Plan", Value = "SubscriptionPlan" }
};
private List<ToolbarItemModel> _tools = new List<ToolbarItemModel>()
{
new ToolbarItemModel() { Command = ToolbarCommand.Bold },
new ToolbarItemModel() { Command = ToolbarCommand.Italic },
new ToolbarItemModel() { Command = ToolbarCommand.Underline },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.Formats },
new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
new ToolbarItemModel() { Command = ToolbarCommand.Image },
new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Name = "MergeData", TooltipText = "Merge Data" },
new ToolbarItemModel() { Name = "InsertField", TooltipText = "Insert Field" },
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.Undo },
new ToolbarItemModel() { Command = ToolbarCommand.Redo },
};
private List<DropDownMenuItem> _items = new List<DropDownMenuItem>
{
new DropDownMenuItem { Text = "First Name" },
new DropDownMenuItem { Text = "Last Name" },
new DropDownMenuItem { Text = "Support Email" },
new DropDownMenuItem { Text = "Company Name" },
new DropDownMenuItem { Text = "Promo Code" },
new DropDownMenuItem { Text = "Support Phone Number" },
new DropDownMenuItem { Text = "Customer ID" },
new DropDownMenuItem { Text = "Expiration Date" },
new DropDownMenuItem { Text = "Subscription Plan" }
};
private Dictionary<string, string> _placeholderData = new Dictionary<string, string>
{
{ "FirstName", "John" },
{ "LastName", "Doe" },
{ "PromoCode", "ABC123" },
{ "SubscriptionPlan", "Premium" },
{ "CustomerID", "123456" },
{ "ExpirationDate", "2024-12-31" },
{ "SupportEmail", "support@example.com" },
{ "SupportPhoneNumber", "+1-800-555-5555" },
{ "CompanyName", "Example Inc." }
};
public void OnClickHandler()
{
if (this._mailMergeEditor != null)
{
var editorContent = this._mailMergeEditor.Value;
var mergedContent = ReplacePlaceholders(editorContent, this._placeholderData);
_rteValue = mergedContent;
}
}
public async Task OnDropDownOpen()
{
if (this._mailMergeEditor != null)
{
await this._mailMergeEditor.SaveSelectionAsync();
}
}
public async Task OnDropDownClose()
{
if (this._mailMergeEditor != null)
{
await this._mailMergeEditor.RestoreSelectionAsync();
}
}
public async Task OnItemSelect(MenuEventArgs args)
{
if (args.Item.Text != null)
{
var value = _mergeData.FirstOrDefault(md => md.Text == args.Item.Text)?.Value;
string htmlContent = $"<span contenteditable=\"false\" class=\"e-mention-chip\"><span>{{{{{value}}}}}</span></span> ";
var undoOption = new ExecuteCommandOption { Undo = true };
this._mailMergeEditor.ExecuteCommandAsync(CommandName.InsertHTML, htmlContent, undoOption);
await this._mailMergeEditor.SaveSelectionAsync();
}
}
private void OnActionCompleteHandler(Syncfusion.Blazor.RichTextEditor.ActionCompleteEventArgs args)
{
if (args.RequestType == "SourceCode")
{
this._buttonClass = "e-tbar-btn e-tbar-btn-text e-overlay";
this._dropDownButtonClass = "e-rte-elements e-rte-dropdown-menu e-overlay";
this._sourceCodeEnabled = true;
}
if (args.RequestType == "Preview")
{
this._buttonClass = "e-tbar-btn e-tbar-btn-text";
this._dropDownButtonClass = "e-rte-elements e-rte-dropdown-menu";
this._sourceCodeEnabled = false;
}
}
public static string ReplacePlaceholders(string template, Dictionary<string, string> data)
{
return Regex.Replace(template, @"{{\s*(\w+)\s*}}", match =>
{
string key = match.Groups[1].Value.Trim();
return data.TryGetValue(key, out var value) ? value : match.Value;
});
}
}
36 changes: 36 additions & 0 deletions blazor/rich-text-editor/code-snippet/mention-min-length.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.RichTextEditor


<SfRichTextEditor ID="mentionIntegration">

<p>Hello
<span contenteditable="false" class="e-mention-chip"><a href="mailto:maria@gmail.com" title="maria@gmail.com">@@Maria</a></span>
</p>
<p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>
</SfRichTextEditor>

<div id="mention_integration">
<SfMention TItem="PersonData" Target="#mentionIntegration_rte-editable" DataSource="@EmailData" MinLength="3">
<ChildContent>
<MentionFieldSettings Text="Name"></MentionFieldSettings>
</ChildContent>
</SfMention>
</div>

@code {
public class PersonData
{
public string Name { get; set; }
public string EmailId { get; set; }
public string EmployeeImage { get; set;}
public string Status { get; set;}
}
List<PersonData> EmailData = new List<PersonData> {
new PersonData() { Name="Selma Rose", EmailId="selma@gmail.com" },
new PersonData() { Name="Russo Kay", EmailId="russo@gmail.com" },
new PersonData() { Name="Camden Kate", EmailId="camden@gmail.com" },
new PersonData() { Name="Garth", EmailId="garth@gmail.com" },
new PersonData() { Name="Ursula Ann", EmailId="ursula@gmail.com" },
};
}
43 changes: 43 additions & 0 deletions blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.RichTextEditor


<SfRichTextEditor ID="mentionIntegration">

<p>Hello
<span contenteditable="false" class="e-mention-chip"><a href="mailto:maria@gmail.com" title="maria@gmail.com">@@Maria</a></span>
</p>
<p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>
</SfRichTextEditor>

<div id="mention_integration">
<SfMention TItem="PersonData" Target="#mentionIntegration_rte-editable" DataSource="@EmailData" SuggestionCount="5">
<ChildContent>
<MentionFieldSettings Text="Name"></MentionFieldSettings>
</ChildContent>
</SfMention>
</div>

@code {
public class PersonData
{
public string Name { get; set; }
public string EmailId { get; set; }
public string EmployeeImage { get; set;}
public string Status { get; set;}
}
List<PersonData> EmailData = new List<PersonData> {
new PersonData() { Name="Selma Rose", EmailId="selma@gmail.com" },
new PersonData() { Name="Russo Kay", EmailId="russo@gmail.com" },
new PersonData() { Name="Camden Kate", EmailId="camden@gmail.com" },
new PersonData() { Name="Garth", EmailId="garth@gmail.com" },
new PersonData() { Name="Ursula Ann", EmailId="ursula@gmail.com" },
new PersonData() { Name="Margaret", EmailId="margaret@gmail.com" },
new PersonData() { Name="Laura Grace", EmailId="laura@gmail.com" },
new PersonData() { Name="Robert", EmailId="robert@gmail.com" },
new PersonData() { Name="Albert", EmailId="albert@gmail.com" },
new PersonData() { Name="Michale", EmailId="michale@gmail.com" },
new PersonData() { Name="Andrew James", EmailId="james@gmail.com" },
new PersonData() { Name="William", EmailId="william@gmail.com" }
};
}
Loading