Blazor 组件库 BootstrapBlazor 中Editor组件介绍

组件介绍

组件是组件的二次封装。

组件分为div模式和模式。

默认状态下的架构组件如下所示:

其代码如下:

我们可以通过@bind-Value 绑定到字段。

组件的其他属性

:是否默认显示编辑器,默认为false,即显示为div,只有点击div时才会显示编辑器。

: 组件高度,以 px 为单位。

:自定义工具栏按钮。具体的按钮名称参见 api 文档。

图片[1]-Blazor 组件库 BootstrapBlazor 中Editor组件介绍-唐朝资源网

一个例子是

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

在此示例中,我们仅显示 4 个按钮

ns:自定义按钮,我们可以自定义工具栏的按钮来完成我们自己的一些需求。

一个例子:

环境:

这里我们添加了两个按钮,一个用于调用,一个用于调用。

同时,在按钮的点击事件中,我们可以获取名称来区分点击的是哪个按钮,返回的内容可以插入到光标对应的位置。

private async Task 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;

    }

添加后是这样的

第二行的两个按钮是新添加的按钮,文本中的文本返回的数据是点击确认后返回的数据。

从外部调用的 api

我们可以通过ref获取实例,然后直接从外部调用api。

获取报价:

然后定义一个按钮:

您可以将光标所在的段落修改为H2。

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片