Blazor 组件库 BootstrapBlazor 中Markdown组件介绍
2022-04-25 22:19
931 查看
组件介绍
Markdown组件是
tui.editor的封装,所以所有内容均基于
tui.editor。
默认状态下样子如下所示:
其代码如下:
<Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />
我们有两个内容可以绑定,一个是
Value,绑定的内容为
Markdown字段。一个是
Html,绑定的内容为渲染出的
Html。
组件的其他属性
Height:组件高度,单位为
px,默认值为300。
MinHeight:组件最小高度,单位为
px,默认值为200。
InitialEditType:初始化的界面,类型为
InitialEditType,可选值为
Markdown/Wysiwyg,
Wysiwyg即所见即所得界面。默认值为
Markdown。
PreviewStyle:预览模式,类型为
PreviewStyle,可选值为
Tab/Vertical,默认为
Vertical。
Language:界面语言,默认为
en,内置了
zh中文模式。
Placeholder:提示信息。
IsViewer:是否以纯浏览器的模式显示。
IsDark:是否使用暗黑主题。
EnableHighlight:是否启用代码高亮插件。
外部操作Markdown数据
<Markdown @ref="Markdown"></Markdown> <div class="mt-3"> <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", "# test"))">插入一行文字</Button> <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", "![椰子树](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)"))">插入一张图片</Button> <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("moveCursorToEnd"))">光标移动到最后</Button> </div>
我们可以使用
DoMethodQAsync来从外部对内容进行进一步操作。
相关文章推荐
- Blazor 组件库 BootstrapBlazor 中EditorForm组件介绍
- Blazor 组件库 BootstrapBlazor 中Button组件介绍
- Blazor 组件库 BootstrapBlazor 中Carousel组件介绍
- Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
- Blazor 组件库 BootstrapBlazor 中AutoFill组件介绍
- Blazor 组件库 BootstrapBlazor 中Tag组件介绍
- Blazor 组件库 BootstrapBlazor 中CheckboxList组件介绍
- Bootstrap Blazor 组件介绍
- Blazor 组件库 BootstrapBlazor 中Row组件介绍
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
- Blazor 组件库 BootstrapBlazor 中Circle组件介绍
- Twitter-bootstrap-typeahead——一款模糊查询的jQuery支持ajax的组件介绍
- BootstrapBlazor--Input 组件
- docfx组件介绍--MarkdownLite
- BootstrapBlazor 智能生成神器(一)AutoGenerateColumnAttribute 特性介绍
- Bootstrap分布组件使用介绍
- Blazor Bootstrap 组件库建立工程快速上手
- 创建vue项目步骤、项目目录介绍、es6语法之导入导出、定义并使用组件、集成bootstrap,jQuery,elementui、与后端交互
- Bootstrap Blazor Cascader 级联选择组件
- Bootstrap组件介绍