Blazor 组件库 BootstrapBlazor 中Editor组件介绍
组件介绍
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
。
分类:
BootstrapBlazor
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!