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 = @"Dear {{FirstName}} {{LastName}},
+ We are thrilled to have you with us! Your unique promotional code for this month is: {{PromoCode}}.
+ Your current subscription plan is: {{SubscriptionPlan}}.
+ Your customer ID is: {{CustomerID}}.
+ Your promotional code expires on: {{ExpirationDate}}.
+ Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at {{SupportEmail}} or call us at {{SupportPhoneNumber}}.
+ Best regards,
The {{CompanyName}} Team
";
+ private char _mentionChar = '{';
+ public class MergeData
+ {
+ public string Text { get; set; }
+ public string Value { get; set; }
+ }
+ private List _mergeData = new List
+ {
+ 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 _tools = new List()
+ {
+ 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 _items = new List
+ {
+ 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 _placeholderData = new Dictionary
+ {
+ { "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 = $"{{{{{value}}}}} ";
+ 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 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;
+ });
+ }
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/mention-min-length.razor b/blazor/rich-text-editor/code-snippet/mention-min-length.razor
new file mode 100644
index 0000000000..b4781ce814
--- /dev/null
+++ b/blazor/rich-text-editor/code-snippet/mention-min-length.razor
@@ -0,0 +1,36 @@
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.RichTextEditor
+
+
+
+
+ Hello
+ @@Maria
+
+ Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.
+
+
+
+
+
+
+
+
+
+
+@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 EmailData = new List {
+ 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" },
+ };
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor b/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
new file mode 100644
index 0000000000..91c6fa0502
--- /dev/null
+++ b/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
@@ -0,0 +1,43 @@
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.RichTextEditor
+
+
+
+
+ Hello
+ @@Maria
+
+ Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.
+
+
+
+
+
+
+
+
+
+
+@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 EmailData = new List {
+ 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" }
+ };
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/nesting-table.razor b/blazor/rich-text-editor/code-snippet/nesting-table.razor
new file mode 100644
index 0000000000..70ca9cde38
--- /dev/null
+++ b/blazor/rich-text-editor/code-snippet/nesting-table.razor
@@ -0,0 +1,63 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+
+
+
+
+ | Department |
+ Details |
+
+
+ | Sales |
+
+
+
+ | Employee |
+ Target |
+
+
+ | John Doe |
+ $50,000 |
+
+
+ | Jane Smith |
+ $60,000 |
+
+
+ |
+
+
+ | Marketing |
+ Campaign planning in progress |
+
+
+
+
+@code{
+ private List Tools = new List()
+ {
+ new ToolbarItemModel() { Command = ToolbarCommand.Bold },
+ new ToolbarItemModel() { Command = ToolbarCommand.Italic },
+ new ToolbarItemModel() { Command = ToolbarCommand.Underline },
+ new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
+ new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.Formats },
+ new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
+ new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
+ new ToolbarItemModel() { Command = ToolbarCommand.Indent },
+ 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() { Command = ToolbarCommand.Undo },
+ new ToolbarItemModel() { Command = ToolbarCommand.Redo }
+ };
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/read-only-mode.razor b/blazor/rich-text-editor/code-snippet/read-only-mode.razor
new file mode 100644
index 0000000000..5a711845ad
--- /dev/null
+++ b/blazor/rich-text-editor/code-snippet/read-only-mode.razor
@@ -0,0 +1,14 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+
+ The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.
+ Key features:
+
+ Provides IFRAME and DIV modes
Capable of handling markdown editing.
Contains a modular library to load the necessary functionality on demand.
Provides a fully customizable toolbar.
Provides HTML view to edit the source directly for developers.
Supports third - party library integration.
+
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/slash-commands.razor b/blazor/rich-text-editor/code-snippet/slash-commands.razor
index 6bf6b68114..0b56e4904b 100644
--- a/blazor/rich-text-editor/code-snippet/slash-commands.razor
+++ b/blazor/rich-text-editor/code-snippet/slash-commands.razor
@@ -11,6 +11,8 @@
{
private SfRichTextEditor richTextEditorObj;
private string editorPlaceholder = "Type \"/\" and choose format";
+ private string horizontalline = @"
";
+ private string checklist = @"";
private string meetingNotes = @"Meeting Notes
| Attendees |
|
| Date & Time |
|
| Agenda |
|
| Discussed Items |
|
| Action Items |
|
";
private string signature = "
Warm regards,
John Doe
Event Coordinator
ABC Company
";
private List tools = new List ()
@@ -70,7 +72,10 @@
new SlashMenuItemModel() {Command = SlashMenuCommand.Link},
new SlashMenuItemModel() {Command = SlashMenuCommand.Table},
new SlashMenuItemModel() { Text="Meeting Notes", GroupBy = "Custom" , IconCss = "e-icons e-description", Description= "Insert a meeting note template." },
- new SlashMenuItemModel() { Text="Signature", GroupBy= "Custom" , IconCss = "e-icons e-signature", Description= "Insert a signature template." }
+ new SlashMenuItemModel() { Text="Signature", GroupBy= "Custom" , IconCss = "e-icons e-signature", Description= "Insert a signature template." },
+ new SlashMenuItemModel() { Text="HorizontalLine", GroupBy = "Custom" , IconCss = "e-icons e-horizontal-line", Description= "Insert a horizontal line" },
+ new SlashMenuItemModel() { Text="CheckList", GroupBy= "Custom" , IconCss = "e-icons e-checklist", Description= "Insert a check list" }
+
};
public async Task OnSlashMenuItemSelect ( SlashMenuSelectEventArgs args )
{
@@ -82,5 +87,13 @@
{
await richTextEditorObj.ExecuteCommandAsync (CommandName.InsertHTML, signature);
}
+ else if (args.ItemData.Text == "HorizontalLine")
+ {
+ await richTextEditorObj.ExecuteCommandAsync (CommandName.InsertHTML, horizontalline);
+ }
+ else if (args.ItemData.Text == "CheckList")
+ {
+ await richTextEditorObj.ExecuteCommandAsync (CommandName.InsertHTML, checklist);
+ }
}
}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/style-encapsulation.razor b/blazor/rich-text-editor/code-snippet/style-encapsulation.razor
new file mode 100644
index 0000000000..5c19cf4b7e
--- /dev/null
+++ b/blazor/rich-text-editor/code-snippet/style-encapsulation.razor
@@ -0,0 +1,94 @@
+@page "/"
+
+@using Syncfusion.Blazor.RichTextEditor
+
+
+
+
+
+
+
+ The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.
Key features:
+
+ -
+
Provides <IFRAME> and <DIV> modes.
+
+ -
+
Bulleted and numbered lists.
+
+ -
+
Handles images, hyperlinks, videos, hyperlinks, uploads, etc.
+
+ -
+
Contains undo/redo manager.
+
+
+
+
+
+
+
+
+
+ The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.
Key features:
+
+ -
+
Provides <IFRAME> and <DIV> modes.
+
+ -
+
Bulleted and numbered lists.
+
+ -
+
Handles images, hyperlinks, videos, hyperlinks, uploads, etc.
+
+ -
+
Contains undo/redo manager.
+
+
+
+
+
+
+