Blazor 组件库 BootstrapBlazor 中Markdown组件介绍

组件介绍

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来从外部对内容进行进一步操作。