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

ArgoZhang · web-flow · commit a85cd0c9f42e · 2024-12-10T04:45:26.000Z
* chore: 更新 Editor 依赖包

* doc(Editor): 增加直接代码获得组件内容方法
diff --git a/src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj b/src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj
@@ -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" />
@@ -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" />
diff --git a/src/BootstrapBlazor.Shared/Components/Samples/Editors.razor b/src/BootstrapBlazor.Shared/Components/Samples/Editors.razor
@@ -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>
 
@@ -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()" />
diff --git a/src/BootstrapBlazor.Shared/Components/Samples/Editors.razor.cs b/src/BootstrapBlazor.Shared/Components/Samples/Editors.razor.cs
@@ -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()
diff --git a/src/BootstrapBlazor.Shared/Locales/en-US.json b/src/BootstrapBlazor.Shared/Locales/en-US.json
@@ -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",
@@ -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": {
diff --git a/src/BootstrapBlazor.Shared/Locales/zh-CN.json b/src/BootstrapBlazor.Shared/Locales/zh-CN.json
@@ -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": "自定义空值的提示信息",
@@ -2615,6 +2615,7 @@
     "DoMethodAsyncButton1": "插入一段 Html",
     "DoMethodAsyncButton2": "将段落修改为 H2",
     "DoMethodAsyncButton3": "添加一张图片",
+    "DoMethodAsyncButton4": "获得组件内容",
     "DoMethodAsyncPasteHTML": "这里是外部按钮插入的内容"
   },
   "BootstrapBlazor.Shared.Components.Samples.EditorForms": {

Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,13 @@ private async Task InsertHtmlAsync()`
`111`	`111`	`await Editor.DoMethodAsync("pasteHTML", $"<h1>{Localizer["DoMethodAsyncPasteHTML"]}</h1>");`
`112`	`112`	`}`
`113`	`113`
	`114`	`+ private string? _editorCode;`
	`115`	`+`
	`116`	`+ private async Task OnGetCode()`
	`117`	`+ {`
	`118`	`+ _editorCode = await Editor.GetCode();`
	`119`	`+ }`
	`120`	`+`
`114`	`121`	`private AttributeItem[] GetAttributes() =>`
`115`	`122`	`[`
`116`	`123`	`new()`