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.2.0
PackageReference
<PackageReference Include="BootstrapBlazor.Chart" Version="5.2.0" />
Package Manager
Install-Package BootstrapBlazor.Chart -Version 5.2.0

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 相关代码后,点击下方相关区域显示数据

通过 Webapi 获得 Markdown 显示内容

Demo

更改默认参数

Demo

设置 Markdown 编辑器最小高度 300px,默认高度 500px,提示信息这是 MarkdownTab 方式显示,默认显示所见即所得页面

单纯浏览模式,不可编辑

Demo

设置Markdown 编辑器为纯浏览模式,IsViewer="true"

Attributes

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

<h3>Markdown 编辑器</h3>

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

<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>

<h4>本地化</h4>

<Tips>组件内置中文,切换当前文化信息即可获得中文</Tips>

<Block Title="普通用法" Introduction="默认设置">
    <p>输入 <code>Markdown</code> 相关代码后,点击下方相关区域显示数据</p>
    <div style="width: 100%; height: 300px;">
        <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />
    </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>

<Block Title="异步加载数据" Introduction="通过 <code>Webapi</code> 获得 <code>Markdown</code> 显示内容">
    <Button Text="加载" IsAsync="true" OnClick="GetAsyncString" Icon="fa fa-fa" />
    <Markdown @bind-Value="@AsyncValue"></Markdown>
</Block>

<Block Title="常用属性" Introduction="更改默认参数">
    <p>设置 <code>Markdown</code> 编辑器最小高度 <code>300px</code>,默认高度 <code>500px</code>,提示信息这是 <code>Markdown</code>,<code>Tab</code> 方式显示,默认显示所见即所得页面</p>
    <Markdown Height="500" MinHeight="300" Placeholder="这是 Markdown" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>
</Block>

<Block Title="浏览器模式" Introduction="单纯浏览模式,不可编辑">
    <p>设置<code>Markdown</code> 编辑器为纯浏览模式,<code>IsViewer="true"</code></p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
</Block>

<AttributeTable Items="GetAttributes()"></AttributeTable>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// Markdown 示例代码
    /// </summary>
    public partial class Markdowns
    {
        private string? MarkdownString { get; set; }

        private string? HtmlString { get; set; }

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

        private string? Language { get; set; }

        private string? AsyncValue { get; set; }

        /// <summary>
        /// OnInitializedAsync 方法
        /// </summary>
        /// <returns></returns>
        protected override async Task OnInitializedAsync()
        {
            Language = CultureInfo.CurrentUICulture.Name;
            MarkdownString = "### 测试";
            Version = await VersionManager.GetVersionAsync("bootstrapblazor.markdown");
        }

        private async Task GetAsyncString()
        {
            await Task.Delay(600);
            AsyncValue = $"### {DateTime.Now}";
        }

        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            new AttributeItem(){
                Name = "Height",
                Description = "控件高度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "300"
            },
            new AttributeItem(){
                Name = "MinHeight",
                Description = "控件最小高度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "200"
            },
            new AttributeItem(){
                Name = "InitialEditType",
                Description = "初始化时显示的界面",
                Type = "InitialEditType",
                ValueList = "Markdown/Wysiwyg",
                DefaultValue = "Markdown"
            },
            new AttributeItem(){
                Name = "PreviewStyle",
                Description = "预览模式",
                Type = "PreviewStyle",
                ValueList = "Tab/Vertical",
                DefaultValue = "Vertical"
            },
            new AttributeItem(){
                Name = "Language",
                Description = "UI 语言",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem(){
                Name = "Placeholder",
                Description = "提示信息",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem(){
                Name = "IsViewer",
                Description = "是否为纯浏览模式",
                Type = "bool",
                ValueList = " true/false ",
                DefaultValue = " false "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload