Skip to content

Commit 30dc75c

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3743 doc(#I69NKE): update editor demos
* doc: 精简示例 * update editor demos
1 parent 938fb4e commit 30dc75c

12 files changed

Lines changed: 248 additions & 190 deletions

‎src/BootstrapBlazor.Shared/Demos/Editor/EditorCustomerToolbarButtons.razor‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@inject SwalService SwalService
2+
@inject IStringLocalizer<EditorCustomerToolbarButtons> Localizer
3+
4+
<Editor IsEditor="true" OnClickButton="@PluginClick" CustomerToolbarButtons="@EditorPluginItems" />
5+
6+
@code {
7+
private List<EditorToolbarButton>? EditorPluginItems { get; set; }
8+
9+
private async Task<string?> PluginClick(string pluginItemName)
10+
{
11+
var ret = "";
12+
if (pluginItemName == "plugin1")
13+
{
14+
var op = new SwalOption()
15+
{
16+
Title = Localizer["SwalTitle"],
17+
Content = Localizer["SwalContent"]
18+
};
19+
if (await SwalService.ShowModal(op))
20+
{
21+
ret = Localizer["Ret1"];
22+
}
23+
}
24+
if (pluginItemName == "plugin2")
25+
{
26+
var op = new SwalOption()
27+
{
28+
Title = Localizer["Swal2Title"],
29+
Content = Localizer["Swal2Content"]
30+
};
31+
if (await SwalService.ShowModal(op))
32+
{
33+
ret = Localizer["Ret2"];
34+
}
35+
}
36+
return ret;
37+
}
38+
39+
/// <summary>
40+
/// OnInitialized 方法
41+
/// </summary>
42+
protected override void OnInitialized()
43+
{
44+
base.OnInitialized();
45+
46+
EditorPluginItems = new List<EditorToolbarButton>()
47+
{
48+
new EditorToolbarButton()
49+
{
50+
IconClass = "fa-solid fa-pencil",
51+
ButtonName = "plugin1",
52+
Tooltip = Localizer["ToolTip1"]
53+
},
54+
new EditorToolbarButton()
55+
{
56+
IconClass = "fa-solid fa-house",
57+
ButtonName = "plugin2",
58+
Tooltip = Localizer["ToolTip2"]
59+
}
60+
};
61+
}
62+
}

‎src/BootstrapBlazor.Shared/Demos/Editor/EditorDoMethodAsync.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@inject IStringLocalizer<EditorDoMethodAsync> Localizer
2+
3+
<Editor IsEditor="true" @ref="Editor" />
4+
<div class="mt-3">
5+
<Button OnClick="InsertHtmlAsync">@Localizer["DoMethodAsyncButton1"]</Button>
6+
<Button OnClick="@(() => Editor.DoMethodAysnc("formatH2", ""))">@Localizer["DoMethodAsyncButton2"]</Button>
7+
<Button OnClick="@(() => Editor.DoMethodAysnc("insertImage", "https://www.blazor.zone/_content/BootstrapBlazor.Shared/images/avatars/150-1.jpg", "tree"))">@Localizer["DoMethodAsyncButton3"]</Button>
8+
</div>
9+
10+
@code {
11+
[NotNull]
12+
private Editor? Editor { get; set; }
13+
14+
private async Task InsertHtmlAsync()
15+
{
16+
await Editor.DoMethodAysnc("pasteHTML", $"<h1>{Localizer["DoMethodAsyncPasteHTML"]}</h1>");
17+
}
18+
}

‎src/BootstrapBlazor.Shared/Demos/Editor/EditorHeight.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<Editor IsEditor="true" Height="400" />

‎src/BootstrapBlazor.Shared/Demos/Editor/EditorIsEditor.razor‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<Editor IsEditor="true" />
2+

‎src/BootstrapBlazor.Shared/Demos/Editor/EditorNormal.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<Editor />

‎src/BootstrapBlazor.Shared/Demos/Editor/EditorOnValueChanged.razor‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@inject IStringLocalizer<EditorOnValueChanged> Localizer
2+
3+
<Editor @bind-Value="@EditorValue" OnValueChanged="@OnValueChanged" />
4+
5+
<label class="form-label mt-3">@Localizer["EditorOnValueChangedLabel"]</label>
6+
<textarea class="form-control mt-3">@EditorValue</textarea>
7+
<div class="mt-3">
8+
<Button OnClick="SetValue">Reset</Button>
9+
</div>
10+
11+
@code {
12+
private string? EditorValue { get; set; }
13+
14+
private Task OnValueChanged(string val)
15+
{
16+
EditorValue = val;
17+
return Task.CompletedTask;
18+
}
19+
20+
private void SetValue()
21+
{
22+
EditorValue = Localizer["EditorOnValueChangedUpdateValue"];
23+
}
24+
25+
/// <summary>
26+
/// OnInitialized
27+
/// </summary>
28+
protected override void OnInitialized()
29+
{
30+
base.OnInitialized();
31+
32+
EditorValue = Localizer["EditorOnValueChangedInitValue"];
33+
}
34+
}

‎src/BootstrapBlazor.Shared/Demos/Editor/EditorPlaceholder.razor‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@inject IStringLocalizer<EditorPlaceholder> Localizer
2+
3+
<Editor PlaceHolder="@Localizer["EditorEmptyPlaceholder"]" />

‎src/BootstrapBlazor.Shared/Demos/Editor/EditorToolbarItems.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<Editor IsEditor="true" ToolbarItems="@ToolbarItems" />
2+
3+
@code {
4+
private List<object> ToolbarItems = new List<object>
5+
{
6+
new List<object>
7+
{
8+
"style", new List<string>()
9+
{
10+
"style"
11+
}
12+
},
13+
new List<object>
14+
{
15+
"font", new List<string>()
16+
{
17+
"bold", "underline", "clear"
18+
}
19+
}
20+
};
21+
}

‎src/BootstrapBlazor.Shared/Locales/en.json‎

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2676,52 +2676,62 @@
26762676
"Value.Required": "{0} is required."
26772677
},
26782678
"BootstrapBlazor.Shared.Samples.Editors": {
2679-
"Title": "Editor",
2680-
"H1": "Convert the entered text into <code>html</code> code snippets",
2681-
"P1": "The <code>Editor</code> component is a secondary package of <a href='https://summernote.org/' target='_blank'><code>Summernote component</code></a>, such as If you need to use the localization function, please download the corresponding language pack from the official website and quote it by yourself. <code>zh-CN</code> <code>en-US</code> has been built in；the required <code>css</code> <code>javascript</code> dynamically loaded on demand",
2682-
"Block1Title": "Basic usage",
2683-
"Block1Intro": "The default rendering is <code>div</code> and it becomes a rich text edit box when clicked",
2684-
"P2": "Set the <code>IsEditor</code> attribute value to control whether the component defaults to <code>div</code> or <code>editor</code>",
2685-
"Div1": "I am a normal <code>div</code> click and can’t edit",
2686-
"Block2Title": "Custom prompt message",
2687-
"Block2Intro": "The prompt message when a null value is set by setting the <code>Placeholder</code> attribute",
2688-
"P3": "The default prompt is <b>Edit after clicking</b>",
2689-
"Placeholder1": "Customize the prompt message for empty values",
2690-
"Block3Title": "Display as a rich text edit box by default",
2691-
"Block3Intro": "Set the component to be directly displayed as a rich text edit box by setting the <code>IsEditor</code> property",
2692-
"Block4Title": "Custom height",
2693-
"Block4Intro": "Set the height of the component by setting the <code>Height</code> property",
2694-
"Block5Title": "Two-way binding",
2695-
"Block5Intro": "In actual combat, two-way binding to <code>Value</code> automatically obtains the editing content of the client's rich text box in the background",
2696-
"P4": "Use <code>bind-Value</code> to bind the backend properties of <code>EditorValue</code> in two ways. After editing in the edit box, click the <b>Finish</b> button, and then enter the text box below. Show edited result",
2697-
"Label1": "Show edit content:",
2698-
"Block6Title": "Customize the extended edit box button",
2699-
"Block6Intro": "Customize the extension of the edit box toolbar by setting the <code>CustomerPluginItems</code> property, and do the function by setting the <code>OnClickPluginItem</code> callback delegate",
2700-
"P5": "In this example, two buttons are added to the toolbar by extending the <code>CustomerPluginItems</code> property. Click the button to pop up the <code>SweetAlert</code> modal box, click the modal box confirmation button and insert the text box A piece of content",
2701-
"Block7Title": "Customize the rich text edit box of the toolbar",
2702-
"Block7Intro": "Customize the toolbar content by setting the <code>ToolbarItems</code> property. For the currently supported toolbar values, please refer to <a href='https://summernote.org/' target='_blank'>Summernote</a> Official website",
2703-
"P6": "In this example, by setting the <code>ToolbarItems</code> property, the default available toolbar buttons are changed",
2679+
"EditorsTitle": "Editor",
2680+
"EditorsDescription": "Convert the entered text into <code>html</code> code snippets",
2681+
"EditorsTips": "The <code>Editor</code> component is a secondary package of <a href='https://summernote.org/' target='_blank'><code>Summernote component</code></a>, such as If you need to use the localization function, please download the corresponding language pack from the official website and quote it by yourself. <code>zh-CN</code> <code>en-US</code> has been built in；the required <code>css</code> <code>javascript</code> dynamically loaded on demand",
2682+
"EditorNormalTitle": "Basic usage",
2683+
"EditorNormalIntro": "The default rendering is <code>div</code> and it becomes a rich text edit box when clicked",
2684+
"PEditorNormalDescrption": "Set the <code>IsEditor</code> attribute value to control whether the component defaults to <code>div</code> or <code>editor</code>",
2685+
"EditorNormalDiv": "I am a normal <code>div</code> click and can’t edit",
2686+
"EditorPlaceholderTitle": "Custom prompt message",
2687+
"EditorPlaceholderIntro": "The prompt message when a null value is set by setting the <code>Placeholder</code> attribute",
2688+
"EditorPlaceholderDescription": "The default prompt is <b>Edit after clicking</b>",
2689+
"EditorIsEditorTitle": "Display as a rich text edit box by default",
2690+
"EditorIsEditorIntro": "Set the component to be directly displayed as a rich text edit box by setting the <code>IsEditor</code> property",
2691+
"EditorHeightTitle": "Custom height",
2692+
"EditorHeightIntro": "Set the height of the component by setting the <code>Height</code> property",
2693+
"EditorOnValueChangedTitle": "Two-way binding",
2694+
"EditorOnValueChangedIntro": "In actual combat, two-way binding to <code>Value</code> automatically obtains the editing content of the client's rich text box in the background",
2695+
"EditorOnValueChangedDescription": "Use <code>bind-Value</code> to bind the backend properties of <code>EditorValue</code> in two ways. After editing in the edit box, click the <b>Finish</b> button, and then enter the text box below. Show edited result",
2696+
"EditorCustomerToolbarButtonsTitle": "Customize the extended edit box button",
2697+
"EditorCustomerToolbarButtonsIntro": "Customize the extension of the edit box toolbar by setting the <code>CustomerPluginItems</code> property, and do the function by setting the <code>OnClickPluginItem</code> callback delegate",
2698+
"EditorCustomerToolbarButtonsDescrition": "In this example, two buttons are added to the toolbar by extending the <code>CustomerPluginItems</code> property. Click the button to pop up the <code>SweetAlert</code> modal box, click the modal box confirmation button and insert the text box A piece of content",
2699+
"EditorToolbarItemsTitle": "Customize the rich text edit box of the toolbar",
2700+
"EditorToolbarItemsIntro": "Customize the toolbar content by setting the <code>ToolbarItems</code> property. For the currently supported toolbar values, please refer to <a href='https://summernote.org/' target='_blank'>Summernote</a> Official website",
2701+
"EditorToolbarItemsDescrition": "In this example, by setting the <code>ToolbarItems</code> property, the default available toolbar buttons are changed",
27042702
"Att1": "Prompt message when the value is empty",
27052703
"Att1DefaultValue": "Click to edit",
27062704
"Att2": "Whether to directly display as a rich text edit box",
27072705
"Att3": "Component height",
27082706
"Att4": "Rich Text Box Toolbar Tool",
27092707
"Att5": "Custom button",
2710-
"InitValue": "Initial value <b>Test</b>",
2711-
"UpdateValue": "Changed value",
2708+
"DoMethodAsync": "Instance Method",
2709+
"DoMethodAsyncIntro": "Call the instance method, please refer <a href='https://summernote.org/deep-dive'>summernote api</a>",
2710+
"DoMethodAsyncDescrition": "In this example, by setting the <code>ToolbarItems</code> property, the default available toolbar buttons are changed"
2711+
},
2712+
"BootstrapBlazor.Shared.Demos.Editor.EditorPlaceholder": {
2713+
"EditorEmptyPlaceholder": "Customize the prompt message for empty values"
2714+
},
2715+
"BootstrapBlazor.Shared.Demos.Editor.EditorOnValueChanged": {
2716+
"EditorOnValueChangedLabel": "Show edit content:",
2717+
"EditorOnValueChangedUpdateValue": "Changed value",
2718+
"EditorOnValueChangedInitValue": "Initial value Test"
2719+
},
2720+
"BootstrapBlazor.Shared.Demos.Editor.EditorCustomerToolbarButtons": {
27122721
"ToolTip1": "This is the tip of plugin1",
27132722
"ToolTip2": "This is the tip of plugin2",
27142723
"Swal1Title": "A pop-up window will pop up after clicking the plugin1 button",
27152724
"Swal1Content": "After clicking the plug-in button, the window will pop up and confirm before proceeding to the next step.",
27162725
"Ret1": "<div class='text-danger'>Data returned from plugin1</div>",
27172726
"Swal2Title": "After clicking the plugin2 button, a pop-up window will appear",
27182727
"Swal2Content": "After clicking the plug-in button, the window will pop up and confirm before proceeding to the next step.",
2719-
"Ret2": "Data returned from plugin2",
2720-
"DoMethodAsync": "Instance Method",
2721-
"DoMethodAsyncIntro": "Call the instance method, please refer <a href='https://summernote.org/deep-dive'>summernote api</a>",
2728+
"Ret2": "Data returned from plugin2"
2729+
},
2730+
"BootstrapBlazor.Shared.Demos.Editor.EditorDoMethodAsync": {
27222731
"DoMethodAsyncButton1": "Insert Html",
27232732
"DoMethodAsyncButton2": "Update to H2",
2724-
"DoMethodAsyncButton3": "Insert Image"
2733+
"DoMethodAsyncButton3": "Insert Image",
2734+
"DoMethodAsyncPasteHTML": "Here is the content inserted by the external button"
27252735
},
27262736
"BootstrapBlazor.Shared.Samples.EditorForms": {
27272737
"Title": "EditorForm",

0 commit comments

Comments
 (0)