Skip to content

doc(Editor): add sample code for GetCode method #4813

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

Merged
merged 2 commits into from
Dec 10, 2024
Merged

doc(Editor): add sample code for GetCode method #4813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a6433d
chore: 更新 Editor 依赖包
ArgoZhang Dec 10, 2024
8c04237
doc(Editor): 增加直接代码获得组件内容方法
ArgoZhang Dec 10, 2024
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
4 changes: 2 additions & 2 deletions src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.FontAwesome" Version="9.0.1" />
<PackageReference Include="BootstrapBlazor.Gantt" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.Holiday" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.Holiday" Version="9.0.1" />
<PackageReference Include="BootstrapBlazor.Html2Pdf" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.IconPark" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.0" />
Expand All @@ -53,7 +53,7 @@
<PackageReference Include="BootstrapBlazor.Sortable" Version="9.0.1" />
<PackageReference Include="BootstrapBlazor.Splitting" Version="9.0.1" />
<PackageReference Include="BootstrapBlazor.SvgEditor" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.1" />
<PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.2" />
<PackageReference Include="BootstrapBlazor.TableExport" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.Topology" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.VideoPlayer" Version="9.0.2" />
Expand Down
47 changes: 28 additions & 19 deletions src/BootstrapBlazor.Shared/Components/Samples/Editors.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,24 @@
<PackageTips Name="BootstrapBlazor.SummerNote" />

<DemoBlock Title="@Localizer["EditorNormalTitle"]" Introduction="@Localizer["EditorNormalIntro"]" Name="Normal">
<p>@((MarkupString)Localizer["EditorNormalDescription"].Value)</p>
<div class="form-control mb-3">@((MarkupString)Localizer["EditorNormalDiv"].Value)</div>
<section ignore>
<p>@((MarkupString)Localizer["EditorNormalDescription"].Value)</p>
<div class="form-control mb-3">@((MarkupString)Localizer["EditorNormalDiv"].Value)</div>
</section>
<Editor />
</DemoBlock>

<DemoBlock Title="@Localizer["EditorSubmitTitle"]" Introduction="@Localizer["EditorSubmitIntro"]" Name="Submit">
<p>@((MarkupString)Localizer["EditorSubmitDescription"].Value)</p>
<Button Text="@ButtonText" OnClick="ShowSubmit" class="mb-3"></Button>
<section ignore>
<p>@((MarkupString)Localizer["EditorSubmitDescription"].Value)</p>
<Button Text="@ButtonText" OnClick="ShowSubmit" class="mb-3"></Button>
<textarea class="form-control mt-3">@EditorValue</textarea>
</section>
<Editor @bind-Value="@EditorValue" IsEditor="true" ShowSubmit="ShowSubmitButton" />
<textarea class="form-control mt-3">@EditorValue</textarea>
</DemoBlock>

<DemoBlock Title="@Localizer["EditorPlaceholderTitle"]" Introduction="@Localizer["EditorPlaceholderIntro"]" Name="Placeholder">
<p>@((MarkupString)Localizer["EditorPlaceholderDescription"].Value)</p>
<section ignore>@((MarkupString)Localizer["EditorPlaceholderDescription"].Value)</section>
<Editor PlaceHolder="@Localizer["EditorEmptyPlaceholder"]" />
</DemoBlock>

Expand All @@ -42,34 +46,39 @@
</DemoBlock>

<DemoBlock Title="@Localizer["EditorOnValueChangedTitle"]" Introduction="@Localizer["EditorOnValueChangedIntro"]" Name="OnValueChanged">
<p>@((MarkupString)Localizer["EditorOnValueChangedDescription"].Value)</p>
<section ignore>@((MarkupString)Localizer["EditorOnValueChangedDescription"].Value)</section>
<Editor @bind-Value="@ValueChangedValue" />

<label class="form-label mt-3">@Localizer["EditorOnValueChangedLabel"]</label>
<textarea class="form-control mt-3">@ValueChangedValue</textarea>
<div class="mt-3">
<Button OnClick="SetValue">Reset</Button>
</div>
<section ignore>
<label class="form-label mt-3">@Localizer["EditorOnValueChangedLabel"]</label>
<textarea class="form-control mt-3">@ValueChangedValue</textarea>
<div class="mt-3">
<Button OnClick="SetValue">Reset</Button>
</div>
</section>
</DemoBlock>

<DemoBlock Title="@Localizer["EditorCustomerToolbarButtonsTitle"]" Introduction="@Localizer["EditorCustomerToolbarButtonsIntro"]" Name="CustomerToolbarButtons">
<p>@((MarkupString)Localizer["EditorCustomerToolbarButtonsDescription"].Value)</p>
<section ignore>@((MarkupString)Localizer["EditorCustomerToolbarButtonsDescription"].Value)</section>
<Editor IsEditor="true" OnClickButton="@PluginClick" CustomerToolbarButtons="@EditorPluginItems" />
</DemoBlock>

<DemoBlock Title="@Localizer["EditorToolbarItemsTitle"]" Introduction="@Localizer["EditorToolbarItemsIntro"]" Name="ToolbarItems">
<p>@((MarkupString)Localizer["EditorToolbarItemsDescription"].Value)</p>
<section ignore>@((MarkupString)Localizer["EditorToolbarItemsDescription"].Value)</section>
<Editor IsEditor="true" ToolbarItems="@ToolbarItems" />
</DemoBlock>

<DemoBlock Title="@Localizer["DoMethodAsync"]" Introduction="@Localizer["DoMethodAsyncIntro"]" Name="DoMethodAsync">
<p>@((MarkupString)Localizer["DoMethodAsyncDescription"].Value)</p>
<DemoBlock Title="@Localizer["DoMethodAsyncTitle"]" Introduction="@Localizer["DoMethodAsyncIntro"]" Name="DoMethodAsync">
<section ignore>@((MarkupString)Localizer["DoMethodAsyncDescription"].Value)</section>
<Editor IsEditor="true" @ref="Editor" />
<div class="mt-3">
<section ignore class="mt-3">
<Button OnClick="InsertHtmlAsync">@Localizer["DoMethodAsyncButton1"]</Button>
<Button OnClick="@(async () => await Editor.DoMethodAsync("formatH2", ""))">@Localizer["DoMethodAsyncButton2"]</Button>
<Button OnClick="@(async () => await Editor.DoMethodAsync("insertImage", "https://www.blazor.zone/images/avatars/150-1.jpg", "tree"))">@Localizer["DoMethodAsyncButton3"]</Button>
</div>
<Button OnClick="@OnGetCode">@Localizer["DoMethodAsyncButton4"]</Button>
</section>
<section ignore>
<textarea class="form-control" rows="3" readonly>@_editorCode</textarea>
</section>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
7 changes: 7 additions & 0 deletions src/BootstrapBlazor.Shared/Components/Samples/Editors.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,13 @@ private async Task InsertHtmlAsync()
await Editor.DoMethodAsync("pasteHTML", $"<h1>{Localizer["DoMethodAsyncPasteHTML"]}</h1>");
}

private string? _editorCode;

private async Task OnGetCode()
{
_editorCode = await Editor.GetCode();
}

private AttributeItem[] GetAttributes() =>
[
new()
Expand Down
3 changes: 2 additions & 1 deletion src/BootstrapBlazor.Shared/Locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2597,7 +2597,7 @@
"Att3": "Component height",
"Att4": "Rich Text Box Toolbar Tool",
"Att5": "Custom button",
"DoMethodAsync": "Instance Method",
"DoMethodAsyncTitle": "Instance Method",
"DoMethodAsyncIntro": "Call the instance method, please refer <a href='https://summernote.org/deep-dive'>summernote api</a>",
"DoMethodAsyncDescription": "In this example, by setting the <code>ToolbarItems</code> property, the default available toolbar buttons are changed",
"EditorEmptyPlaceholder": "Customize the prompt message for empty values",
Expand All @@ -2615,6 +2615,7 @@
"DoMethodAsyncButton1": "Insert Html",
"DoMethodAsyncButton2": "Update to H2",
"DoMethodAsyncButton3": "Insert Image",
"DoMethodAsyncButton4": "Get Code",
"DoMethodAsyncPasteHTML": "Here is the content inserted by the external button"
},
"BootstrapBlazor.Shared.Components.Samples.EditorForms": {
Expand Down
3 changes: 2 additions & 1 deletion src/BootstrapBlazor.Shared/Locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2597,7 +2597,7 @@
"Att3": "组件高度",
"Att4": "富文本框工具栏工具",
"Att5": "自定义按钮",
"DoMethodAsync": "实例方法",
"DoMethodAsyncTitle": "实例方法",
"DoMethodAsyncIntro": "使用实例方法从外部操作 <code>Editor</code>，具体的参数参照 <a href='https://summernote.org/deep-dive'>summernote api</a>",
"DoMethodAsyncDescription": "本例中通过设置 <code>ToolbarItems</code> 属性，更改默认可用的工具栏按钮",
"EditorEmptyPlaceholder": "自定义空值的提示信息",
Expand All @@ -2615,6 +2615,7 @@
"DoMethodAsyncButton1": "插入一段 Html",
"DoMethodAsyncButton2": "将段落修改为 H2",
"DoMethodAsyncButton3": "添加一张图片",
"DoMethodAsyncButton4": "获得组件内容",
"DoMethodAsyncPasteHTML": "这里是外部按钮插入的内容"
},
"BootstrapBlazor.Shared.Components.Samples.EditorForms": {
Expand Down
Loading