Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Markdown 编辑器

提供 Markdown 语法支持的文本编辑器

注意事项:

本组件依赖于 BootstrapBlazor.Markdown,使用本组件时需要引用其组件包

Nuget 包安装

使用 nuget.org 进行 BootstrapBlazor.Markdown 组件的安装

.NET CLI
dotnet add package BootstrapBlazor.Chart --version 5.0.8-beta01
PackageReference
<PackageReference Include="BootstrapBlazor.Chart" Version="5.0.8-beta01" />
Package Manager
Install-Package BootstrapBlazor.Chart -Version 5.0.8-beta01

CSS 文件

<link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" />

JS 文件

<script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"></script>

普通用法

Demo

输入 Markdown 相关代码后,点击下方相关按钮查看数据

@page "/markdowns"
@using Microsoft.Extensions.DependencyInjection
@inject NugetVersionService VersionManager

<h3>Markdown 编辑器</h3>

<h4>提供 Markdown 语法支持的文本编辑器</h4>

<Alert ShowBar="true" Color="Color.Info">Markdown 组件是网友封装 editor.md 提交 PR 而来,使用本组件时,需要手动拷贝相关依赖文件到项目文件夹中,相关文档请查看 <a href="https://gitee.com/LongbowEnterprise/BootstrapBlazor/wikis/Markdown%20%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3?sort_id=2368826" target="_blank">[传送门]</a></Alert>

<p><b>注意事项:</b></p>

<p>本组件依赖于 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Markdown" target="_blank"><code>BootstrapBlazor.Markdown</code></a>,使用本组件时需要引用其组件包</p>

<p><b>Nuget 包安装</b></p>

<p>使用 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Markdown" target="_blank">nuget.org</a> 进行 <code>BootstrapBlazor.Markdown</code> 组件的安装</p>

<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.Chart --version @Version</Pre>

<div class="code-label">PackageReference</div>
<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.Chart" Version="@Version" /&gt;</Pre>

<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.Chart -Version @Version</Pre>

<h4>CSS 文件</h4>

<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" /&gt;</Pre>

<h4>JS 文件</h4>

<Pre>&lt;script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"&gt;&lt;/script&gt;</Pre>

<Block Title="普通用法" Introduction="">
    <p>输入 Markdown 相关代码后,点击下方相关按钮查看数据</p>
    <div style="width: 100%; height: 300px;">
        <Markdown @ref="MarkdownElement" Value="# 这里是Markdown测试" />
    </div>
    <div class="mt-3">
        <div class="btn-group">
            <Button Text="Markdown 源码" OnClick="@GetMarkdownString"></Button>
            <Button Text="HTML 源码" OnClick="@GetHTMLString"></Button>
        </div>
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @MarkdownString
        </textarea>
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @HtmlString        
        </textarea>
    </div>
</Block>

@code {
    private string? MarkdownString { get; set; }

    private string? HtmlString { get; set; }

    private Markdown? MarkdownElement { get; set; }

    private async Task GetMarkdownString()
    {
        if (MarkdownElement != null) MarkdownString = await MarkdownElement.GetMarkdownString();
    }

    private async Task GetHTMLString()
    {
        if (MarkdownElement != null) HtmlString = await MarkdownElement.GetMarkdownHtmlString();
    }

    /// <summary>
    /// 获得/设置 版本号字符串
    /// </summary>
    private string Version { get; set; } = "fetching";

    /// <summary>
    /// OnInitializedAsync 方法
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        Version = await VersionManager.GetVersionAsync("bootstrapblazor.markdown");
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload