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, ))>插入一张图片</Button> <Button OnClickWithoutRender=@(async () => await Markdown.DoMethodAsync(moveCursorToEnd))>光标移动到最后</Button> </div>我们可以使用DoMethodQAsync来从外部对内容进行进一步操作。