Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Markdown

A text editor that provides support for the Markdown syntax

Precautions :

This component relies on BootstrapBlazor.Markdown, which needs to reference its component package when using this component

Nuget package installation

Install the components of BootstrapBlazor.Markdown using nuget.org

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

CSS file

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

JS file

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

Localization

The default setting

Demo

Once you Markdown code, click on the relevant area below to display the data

Get Markdown display with Webapi

Demo

Change the default parameters

Demo

Set the minimum height of the Markdown Editor 300px, the default height 500px, indicating that this is the Markdown, tab display, the default display of the WYSIWYG page

Simple browsing mode, not editable

Demo

Set the markdown editor to browse-only mode, IsViewer='true'

Attributes

Loading...
@page "/markdowns"
@using Microsoft.Extensions.DependencyInjection
@inject VersionService VersionManager
@inject IStringLocalizer<Markdowns> Localizer

<h3>Markdown</h3>

<h4>A text editor that provides support for the Markdown syntax</h4>

<p><b>Precautions :</b></p>

<p>This component relies on <a href='https://www.nuget.org/packages?q-BootstrapBlazor.Markdown' target'_blank'><code>BootstrapBlazor.Markdown</code></a>, which needs to reference its component package when using this component</p>

<p><b>Nuget package installation</b></p>

<p>Install the</code> components of <code>BootstrapBlazor.Markdown using <a href='https://www.nuget.org/packages?q-BootstrapBlazor.Markdown' target'_blank'>nuget.org</a></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"><PackageReference Include="BootstrapBlazor.Chart" Version="@Version" /></Pre>

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

<h4>CSS file</h4>

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

<h4>JS file</h4>

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

<h4>Localization</h4>

<Tips>The component has a built-in Chinese to switch between current cultural information for Chinese</Tips>

<DemoBlock Title="Common usage" Introduction="The default setting" Name="Normal">
    <p>Once you <code>Markdown</code> code, click on the relevant area below to display the data</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>
</DemoBlock>

<DemoBlock Title="Load the data asynchronously" Introduction="Get <code>Markdown</code> display with <code>Webapi</code>" Name="Async">
    <Button Text="load" IsAsync="true" OnClick="GetAsyncString" Icon="fa fa-fa" />
    <Markdown @bind-Value="@AsyncValue"></Markdown>
</DemoBlock>

<DemoBlock Title="Common properties" Introduction="Change the default parameters" Name="CommonProperty">
    <p>Set the minimum height of the <code>Markdown</code> Editor <code>300px</code>, the default height <code>500px</code>, indicating that this is the <code>Markdown</code>, <code>tab</code> display, the default display of the WYSIWYG page</p>
    <Markdown Height="500" MinHeight="300" Placeholder="This is Markdown" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>
</DemoBlock>

<DemoBlock Title="Browser mode" Introduction="Simple browsing mode, not editable" Name="Browser">
    <p>Set the <code>markdown</code> editor to browse-only mode, <code>IsViewer='true'</code></p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
</DemoBlock>

<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.Samples;

/// <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 = $"### {Localizer["MarkdownString"]}";
        Version = await VersionManager.GetVersionAsync("bootstrapblazor.markdown");
    }

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

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            new AttributeItem(){
                Name = "Height",
                Description = Localizer["Att1"],
                Type = "int",
                ValueList = " — ",
                DefaultValue = "300"
            },
            new AttributeItem(){
                Name = "MinHeight",
                Description = Localizer["Att2"],
                Type = "int",
                ValueList = " — ",
                DefaultValue = "200"
            },
            new AttributeItem(){
                Name = "InitialEditType",
                Description = Localizer["Att3"],
                Type = "InitialEditType",
                ValueList = "Markdown/Wysiwyg",
                DefaultValue = "Markdown"
            },
            new AttributeItem(){
                Name = "PreviewStyle",
                Description = Localizer["Att4"],
                Type = "PreviewStyle",
                ValueList = "Tab/Vertical",
                DefaultValue = "Vertical"
            },
            new AttributeItem(){
                Name = "Language",
                Description = Localizer["Att5"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem(){
                Name = "Placeholder",
                Description = Localizer["Att6"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem(){
                Name = "IsViewer",
                Description = Localizer["Att7"],
                Type = "bool",
                ValueList = " true/false ",
                DefaultValue = " false "
            }
    };
}

B 站相关视频链接

暂无

交流群

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