Blazor 組件庫 BootstrapBlazor 中Editor組件介紹

2022 年 4 月 21 日
筆記
BootstrapBlazor

組件介紹

Editor組件是對Summernote 組件的二次封裝。

組件分為div模式和editor模式。

默認狀態下editor模式的組件樣子如下：

其程式碼如下：

<Editor @bind-Value="@EditorValue" IsEditor="true"></Editor>

我們可以通過@bind-Value來綁定到欄位中.

組件的其他屬性

IsEditor：是否默認顯示為編輯器，默認為false，即顯示為一個div，只有在div被點擊時才會顯示編輯器。

Height：組件高度，單位為px。

ToolbarItems：自定義工具欄按鈕，具體的按鈕名參見Summernote的api文檔。

一個例子是

<Editor IsEditor="true" ToolbarItems="@ToolbarItems"></Editor>

private List<object> ToolbarItems { get; } = new List<object>
        {
            new List<object> {"style", new List<string>() {"style"}},
            new List<object> {"font", new List<string>() {"bold", "underline", "clear"}}
        };

在這個例子中，我們只顯示了4個按鈕

CustomerToolbarButtons：自定義按鈕，我們可以自定義工具欄的按鈕，用來完成部分我們自己的需求。

一個例子:

Editor:

<Editor IsEditor="true" OnClickButton="@PluginClick" CustomerToolbarButtons="@EditorPluginItems"></Editor>

EditorPluginItems的設置:

EditorPluginItems = new List<EditorToolbarButton>()
        {
            new EditorToolbarButton()
            {
                IconClass = "fa fa-pencil",
                ButtonName = "plugin1",
                Tooltip = Localizer["ToolTip1"]
            },
            new EditorToolbarButton()
            {
                IconClass = "fa fa-home",
                ButtonName = "plugin2",
                Tooltip = Localizer["ToolTip2"]
            }
        };

這裡我們增加了兩個按鈕，一個叫plugin1，一個叫plugin2。

同時，在按鈕的點擊事件中，我們可以獲取到Plugin的名字，用來區分是點擊了哪個按鈕，並且返回的內容可以插入到Editor的游標對應位置。

private async Task<string?> PluginClick(string pluginItemName)
    {
        var ret = "";
        if (pluginItemName == "plugin1")
        {
            var op = new SwalOption()
            {
                Title = Localizer["SwalTitle"],
                Content = Localizer["SwalContent"]
            };
            if (await SwalService.ShowModal(op))
            {
                ret = Localizer["Ret1"];
            }
        }
        if (pluginItemName == "plugin2")
        {
            var op = new SwalOption()
            {
                Title = Localizer["Swal2Title"],
                Content = Localizer["Swal2Content"]
            };
            if (await SwalService.ShowModal(op))
            {
                ret = Localizer["Ret2"];
            }
        }
        return ret;
    }

添加後的樣子如下

第二行的兩個按鈕即為新增的按鈕，文本中的從plugin1返回的數據即為點擊plugin1並確定後返回的數據。

從外部調用Editor的api

我們可以通過ref拿到Editor的實例，然後從外部直接調用Summernote的api。

拿到引用：

<Editor IsEditor="true" @ref="Editor"></Editor>

然後定義一個按鈕：

<Button OnClick="@(() => Editor.DoMethodAysnc("formatH2", ""))">將段落修改為 H2</Button>

即可將Editor的游標所在段落修改為H2。

Tags: BootstrapBlazor