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
。
Blazor 组件库 BootstrapBlazor 中Editor组件介绍的更多相关文章
- Blazor 组件库 BootstrapBlazor中 Ajax 组件的使用
组件解决的问题 由于Blazor在与服务器连接时使用了Websocket,仅在第一次连接时会走原MVC的连接逻辑.所以,我们无法在这个过程中完成例如身份认证.cookie处理等操作. 此组件即为解决此 ...
- Antd组件库,利用Menu组件模拟一个简单Tree组件
当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...
- Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.example.文档.cli.本文内容是搭建 组件库的开发环境. 1 packages 目录 前面在项目根目录下创建了 ...
- 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep
[Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
- BootstrapBlazor 组件库使用体验---Table篇
原文地址:https://www.cnblogs.com/ysmc/p/13323242.html Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 Ja ...
- BootstrapBlazor 组件库介绍
项目介绍 演示系统地址:https://www.blazor.zone Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富 ...
- Ant Design Blazor 组件库的路由复用多标签页介绍
最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...
- Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)
Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...
随机推荐
- SpringCloudAlibaba 微服务讲解(三)Nacos Discovery-服务治理
3.1 服务治理 先来思考一个问题,通过上一章的操作,我们已经实现微服务之间的调用,但是我们把服务提供者的网络地址(ip,端口)等硬编码到了代码中,这种做法存在许多问题: 一旦服务提供者地址变化,就需 ...
- elasticsearch 了解多少,说说你们公司 es 的集群架构,索 引数据大小,分片有多少,以及一些调优手段 ?
面试官:想了解应聘者之前公司接触的 ES 使用场景.规模,有没有做过比较大 规模的索引设计.规划.调优. 解答: 如实结合自己的实践场景回答即可. 比如:ES 集群架构 13 个节点,索引根据通道不同 ...
- 如何在 Mac 上强制退出 App
同时按住三个按键:Option.Command 和 Esc (Escape) 键.或者,从屏幕左上角的苹果菜单 中选取"强制退出".(这类似于在 PC 上按下 Control- ...
- 描述一下 DispatcherServlet 的工作流程 ?
DispatcherServlet 的工作流程可以用一幅图来说明: 1.向服务器发送 HTTP 请求,请求被前端控制器 DispatcherServlet 捕获. 2. DispatcherServl ...
- 学习saltstack (四)
一.salt常用命令 salt 该命令执行salt的执行模块,通常在master端运行,也是我们最常用到的命令 salt [options] '<target>' <function ...
- 提交Form表单,submit之前做js判断处理
效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...
- scrapy 如何链接有密码的redis scrapy-redis 设置redis 密码 scrapy-redis如何为redis配置密码
# 使用scrapy_redis的调度器SCHEDULER = "scrapy_redis.scheduler.Scheduler"# 使用scrapy_redis的去重机制DUP ...
- (stm32f103学习总结)—stm32外部中断
一.外部中断介绍 1.1 EXTI简介 EXTI简介 STM32F10x外部中断/事件控制器(EXTI)包含多达 20 个用于产生事 件/中断请求的边沿检测器.EXTI的每根输入线都可单独进行配置,以 ...
- 汽车中的低速can和高速can的区别
转自:https://zhuanlan.zhihu.com/p/33212308
- C#编写程序,计算数组中奇数之和和偶数之和
编写程序,计算数组中奇数之和和偶数之和. 代码: using System; using System.Collections.Generic; using System.Linq; using Sy ...