doc: 增加方法示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Vditors.razor

@@ -1,26 +1,39 @@
 @page "/vditors"
 @inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 
-<h3>@Localizer["Header"]</h3>
-<h4>@Localizer["Tip"]</h4>
+<h3>@Localizer["VditorTitle"]</h3>
+
+<h4>@Localizer["VditorSubTitle"]</h4>
 
 <PackageTips Name="BootstrapBlazor.Vditor" />
 
 <p>@((MarkupString)Localizer["MarkdownsNote"].Value)</p>
 
 <Pre class="no-highlight">builder.Services.Configure&lt;HubOptions&gt;(option => option.MaximumReceiveMessageSize = null);</Pre>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
-    <section ignore>
-        <BootstrapInputGroup>
-            <BootstrapInputGroupLabel DisplayText="Mode"></BootstrapInputGroupLabel>
-            <Segmented Value="_mode" OnValueChanged="OnModeChanged">
-                @foreach (var item in Enum.GetValues(typeof(VditorMode)).Cast<VditorMode>())
-                {
-                    <SegmentedItem Value="@item" Text="@item.ToString()" />
-                }
-            </Segmented>
-        </BootstrapInputGroup>
+<DemoBlock Title="@Localizer["BaseUsageTitle"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Normal">
+    <section ignore class="row g-3">
+        <div class="col-12">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="Mode"></BootstrapInputGroupLabel>
+                <Segmented Value="_mode" OnValueChanged="OnModeChanged">
+                    @foreach (var item in Enum.GetValues(typeof(VditorMode)).Cast<VditorMode>())
+                    {
+                        <SegmentedItem Value="@item" Text="@item.ToString()" />
+                    }
+                </Segmented>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12">
+            <Button Text="GetValue" OnClick="OnTriggerGetValueAsync"></Button>
+            <Button Text="InsertValue" OnClick="OnTriggerInsertValueAsync"></Button>
+            <Button Text="GetHtml" OnClick="OnTriggerGetHtmlAsync"></Button>
+            <Button Text="GetSelection" OnClick="OnTriggerGetSelectionAsync"></Button>
+            <Button Text="Enable" OnClick="OnTriggerEnableAsync"></Button>
+            <Button Text="Disable" OnClick="OnTriggerDisableAsync"></Button>
+            <Button Text="Focus" OnClick="OnTriggerFocusAsync"></Button>
+            <Button Text="Blur" OnClick="OnTriggerBlurAsync"></Button>
+        </div>
     </section>
     <Vditor Value="@_vditorValueString" Options="_vditorOptions" @ref="_vditor"
             OnRenderedAsync="OnRenderAsync"

src/BootstrapBlazor.Server/Components/Samples/Vditors.razor.cs

@@ -63,7 +63,6 @@ private async Task OnBlurAsync(string value)
         _vditorValueString = value;
         _logger.Log($"Trigger OnBlurAsync");
 
-        // 手动获取 HTML 代码
         _htmlString = await _vditor.GetHtmlAsync();
         StateHasChanged();
     }
@@ -98,6 +97,47 @@ private async Task OnCtrlEnterAsync(string value)
         StateHasChanged();
     }
 
+    private async Task OnTriggerGetValueAsync()
+    {
+        _vditorValueString = await _vditor.GetValueAsync() ?? "";
+    }
+
+    private async Task OnTriggerInsertValueAsync()
+    {
+        await _vditor.InsertValueAsync("光标处插入当前值");
+    }
+
+    private async Task OnTriggerGetHtmlAsync()
+    {
+        _htmlString = await _vditor.GetHtmlAsync();
+    }
+
+    private async Task OnTriggerGetSelectionAsync()
+    {
+        var selection = await _vditor.GetSelectionAsync() ?? "";
+        _logger.Log($"Trigger OnTriggerGetSelectionAsync: {selection}");
+    }
+
+    private async Task OnTriggerEnableAsync()
+    {
+        await _vditor.EnableAsync();
+    }
+
+    private async Task OnTriggerDisableAsync()
+    {
+        await _vditor.DisableAsync();
+    }
+
+    private async Task OnTriggerFocusAsync()
+    {
+        await _vditor.FocusAsync();
+    }
+
+    private async Task OnTriggerBlurAsync()
+    {
+        await _vditor.BlurAsync();
+    }
+
     private static AttributeItem[] GetAttributes() =>
     [
         new()