组件介绍

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组件介绍的更多相关文章

  1. Blazor 组件库 BootstrapBlazor中 Ajax 组件的使用

    组件解决的问题 由于Blazor在与服务器连接时使用了Websocket,仅在第一次连接时会走原MVC的连接逻辑.所以,我们无法在这个过程中完成例如身份认证.cookie处理等操作. 此组件即为解决此 ...

  2. Antd组件库,利用Menu组件模拟一个简单Tree组件

    当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...

  3. Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境

    前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.example.文档.cli.本文内容是搭建 组件库的开发环境. 1 packages 目录 前面在项目根目录下创建了 ...

  4. 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep

    [Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...

  5. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  6. BootstrapBlazor 组件库使用体验---Table篇

    原文地址:https://www.cnblogs.com/ysmc/p/13323242.html Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 Ja ...

  7. BootstrapBlazor 组件库介绍

    项目介绍 演示系统地址:https://www.blazor.zone Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富 ...

  8. Ant Design Blazor 组件库的路由复用多标签页介绍

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...

  9. Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)

    Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...

随机推荐

  1. HDFS机架感知

    Hadoop版本:2.9.2 什么是机架感知 通常大型 Hadoop 集群是以机架的形式来组织的,同一个机架上的不同节点间的网络状况比不同机架之间的更为理想,NameNode 设法将数据块副本保存在不 ...

  2. 从字符串某位置开始的递增串(dfs)注意for循环中下标的错误

    #include <iostream> #include <string> using namespace std; char res[50];int tag=1; void ...

  3. JavaScript ajax返回状态

    该内容转自CSDN:http://blog.csdn.net/u013381651/article/details/51261956 xmlhttp.readyState的值及解释: 0:请求未初始化 ...

  4. memcached 是怎么工作的?

    Memcached 的神奇来自两阶段哈希(two-stage hash).Memcached 就像一 个巨大的.存储了很多<key,value>对的哈希表.通过 key,可以存储或查询任意 ...

  5. mybatis的TypeHandler 的使用

    今天看了别人的mybatis的教学视频,自己手写了一个简单的自定义的TypeHandler,有些细节记录一下. 1.定义自己的TypeHandler,代码如下: package com.example ...

  6. vue 初识(基础语法与数据驱动模型)

    1.es6的语法 let 特点: 1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 const 特点: 1.局部作用域 2.不会存在变量提升 3.不能重复声明,只声明常量 不可变的量 模板字 ...

  7. jsp技术之隐藏域

    隐藏域 hidden:隐藏域属性,不显示到页面上,但是会提交的表单项 注意:表单中增加了一个隐藏域,是用户的id.稍后修改联系人信息,提交表单时需要使用到 <!-- hidden:隐藏域,不显示 ...

  8. 攻防世界PHP2

    PHP2 进入环境就一个英文其他啥都没有,英文也没啥提示信息 我们使用dirsearch扫描一下,一开始确实没扫到什么东西,到最后看了wp发现原来源码是在index.phps中,这里只提供一个思路,不 ...

  9. 【STM32】MDK中寄存器地址名称映射分析

    对于MCU,一切底层配置,最终都是在配置寄存器 51单片机访问地址 51单片机经常会引用一个reg51.h的头文件.下面看看它是怎么把名字和寄存器联系在一起的: 1 sfr p0=0x80; 2 p0 ...

  10. MTK平台电路设计01

    一.资料 获取途径MTK官网.一牛网 二.