BootstrapBlazor 實戰 Markdown 編輯器使用

基礎工程使用工程: B08. BootstrapBlazor實戰 Menu 導航選單使用

實戰BootstrapBlazorMenu Markdown 編輯器使用, 以及整合Freesql orm快速製作選單項資料庫後臺維護頁面

BootstrapBlazor 是 Bootstrap 風格的 Blazor UI 元件庫 基於 Bootstrap 樣式庫精心打造，並且額外增加了 100 多種常用的元件，為您快速開發專案帶來非一般的感覺

demo演示的是Sqlite驅動,FreeSql支援多種資料庫，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/達夢/神通/人大金倉/翰高/華為GaussDB/MsAccess

原文連結 https://www.cnblogs.com/densen2014/p/16222741.html

1.Markdown 編輯器簡介

提供 Markdown 語法支援的文字編輯器

https://www.blazor.zone/markdowns

Nuget 包安裝

使用 nuget.org 進行 BootstrapBlazor.Markdown 元件的安裝

.NET CLI

dotnet add package BootstrapBlazor.Markdown

示例

<p>輸入 <code>Markdown</code> 相關程式碼後，點選下方相關區域顯示資料</p>
<div style="width: 100%; height: 300px;">
    <Markdown @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>

@code{
 private string? MarkdownString { get; set; } ="### 測試";
 private string? HtmlString { get; set; }
}

引數	說明	型別	可選值	預設值
Height	控制元件高度	int	—	300
MinHeight	控制元件最小高度	int	—	200
InitialEditType	初始化時顯示的介面	InitialEditType	Markdown/Wysiwyg	Markdown
PreviewStyle	預覽模式	PreviewStyle	Tab/Vertical	Vertical
Language	UI 語言	string	—	—
Placeholder	提示資訊	string	—	—
IsViewer	是否為純瀏覽模式	bool	true/false	false
IsDark	是否為暗黑模式	bool	true/false	false
EnableHighlight	是否啟用程式碼高亮	bool	true/false	false

更多例子參考 https://www.blazor.zone/markdowns

2.實戰

開啟工程 "BootstrapBlazor實戰 Menu 導航選單使用" , 新增 Markdown 庫 BootstrapBlazor.Markdown

dotnet add b08Menu/BootstrapBlazorApp.Shared package BootstrapBlazor.Markdown

注:由於模板使用了共享庫,雙出Server和WebAssembly工程,我們這裡只使用Server工程做演示.

3.左側選單加入頁面編輯功能導航

在BootstrapBlazorApp.Shared/Shared/MainLayout.razor.cs檔案加入程式碼

//在 Menus = fsql.Select<WebPages>().OrderBy(a => a.Code)之前加入程式碼
if (fsql.Select<WebPages>().Where(a => a.PageName == "頁面編輯").Count() == 0)
{
    fsql.Insert(new WebPages("頁面編輯", "editpages", "fa fa-gears", "002_004")).ExecuteAffrows();
}

執行BootstrapBlazorApp.Server工程,截圖如下

4.實體類加入 Markdown 欄位

在BootstrapBlazorApp.Shared/Data/WebPages.cs檔案加入程式碼

    /// <summary>
    /// Markdown內容
    /// </summary>
    [Required(ErrorMessage = "{0}不能為空")]
    [AutoGenerateColumn(Visible = false)]
    [DisplayName("Markdown內容")]
    [Column(StringLength = -2)]
    public string? Markdown { get; set; } = "";

    /// <summary>
    /// Html內容
    /// </summary>
    [Required(ErrorMessage = "{0}不能為空")]
    [AutoGenerateColumn(Visible = false)]
    [DisplayName("Html內容")]
    [Column(StringLength = -2)]
    public string? Html { get; set; } = "";

5.頁面編輯功能

新建BootstrapBlazorApp.Shared/Pages/EditPages.razor檔案

@page "/editpages"
@attribute [TabItemOption(Text = "頁面編輯")]
@using System.Diagnostics.CodeAnalysis

<PageTitle>頁面編輯</PageTitle>

<div class="row">
    <div class="col-6 col-sm-6">
        <Select TValue="string" Color="Color.Primary" Items="GroupItems()" OnSelectedItemChanged="OnItemChanged">
        </Select>
    </div>
    <div class="col-2 col-sm-2">
        <Button Text="儲存" OnClickWithoutRender="Save" Color="Color.Primary" />
    </div>
</div>

@if (TpvPage != null)
{
    <div class="row">
        <h5 class="m-3">頁面說明</h5>
        <div style="width: 100%; height: 500px;">

            <Markdown Height="500" MinHeight="300" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language" @bind-Value="@TpvPage.Markdown" @bind-Html="@TpvPage.Html" />
        </div>
    </div>
}

code如下, 程式碼應該比較簡單,關鍵點註釋在程式裡面

@code {

    /// <summary>
    /// 獲取並設定Markdown語言
    /// </summary>
    private string? Language { get; set; }

    [Inject]
    [NotNull]
    private ToastService? ToastService { get; set; }


    /// <summary>
    /// 注入fsql服務
    /// </summary>
    [Inject]
    [NotNull]
    IFreeSql? fsql { get; set; }

    [NotNull]
    List<WebPages>? Items { get; set; } = new List<WebPages>();

    [NotNull]
    WebPages? TpvPage { get; set; }

    protected override void OnInitialized()
    {
        Language = CultureInfo.CurrentUICulture.Name;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            //讀取頁面資料,顯示第一頁到編輯器
            Items = fsql.Select<WebPages>().OrderBy(a => a.Code).ToList();
            TpvPage = Items?.First();
            StateHasChanged();
        }
    }

    Task Save()
    {
        var res = fsql.Update<WebPages>().SetSource(TpvPage).ExecuteAffrows();
        if (res > 0)
        {
            ToastService.Success("儲存成功");
        }
        return Task.CompletedTask;
    }

    /// <summary>
    /// Select 元件資料來源
    /// </summary>
    /// <returns></returns>
    private IEnumerable<SelectedItem> GroupItems()
    {
        if (Items == null)
        {
            return new List<SelectedItem>();
        }
        var list = new List<SelectedItem>();
        foreach (var item in Items)
        {
            list.Add(new SelectedItem() { Value = item.Code ?? "", Text = item.PageName ?? "", GroupName = item.ParentCode ?? "" });
        }
        return list;
    }

    /// <summary>
    /// 下拉選項改變時呼叫此方法
    /// </summary>
    /// <param name="item"></param>
    private Task OnItemChanged(SelectedItem item)
    {
        TpvPage = Items.Where(a => a.Code == item.Value).First();
        System.Console.WriteLine($"SelectedItem Text: {item.Text} Value: {item.Value} Selected");
        StateHasChanged();
        return Task.CompletedTask;
    }
}

執行BootstrapBlazorApp.Server工程,截圖如下

6.加入兩個演示頁面

在BootstrapBlazorApp.Shared/Shared/MainLayout.razor.cs檔案加入程式碼

//在 Menus = fsql.Select<WebPages>().OrderBy(a => a.Code)之前加入程式碼

if (fsql.Select<WebPages>().Where(a => a.PageName == "關於我們").Count() == 0)
{
    fsql.Insert(new WebPages("關於我們", "AboutUs", "fa fa-gears", "006")).ExecuteAffrows();
    fsql.Insert(new WebPages("隱私政策", "PrivacyPolicy", "fa fa-gears", "007")).ExecuteAffrows();
}

執行BootstrapBlazorApp.Server工程, 開啟頁面編輯, 下拉選擇隱私政策 , 寫入Markdown程式碼試試

## **本隱私政策將幫助您瞭解以下內容：**

1. 如何收集和使用您的個人資訊
2. 如何共享、轉讓、公開披露您的個人資訊

截圖如下

7.新建展示頁面 Htmls.razor

新建BootstrapBlazorApp.Shared/Pages/Htmls.razor檔案

@page "/{PageName}"
<PageTitle>@(TpvPage?.PageName??"Home")</PageTitle>
<div style="background-color:white">
    @if (TpvPage != null)
    {
        <Markdown Value="@TpvPage.Markdown" IsViewer="true" />        
    }
    else
    {
        <p>您訪問的頁面不存在</p>
    }
</div>

8.新建展示頁面程式碼 Htmls.razor.cs

新建BootstrapBlazorApp.Shared/Pages/Htmls.razor.cs檔案

using BootstrapBlazor.Components;
using BootstrapBlazorApp.Shared.Data;
using Microsoft.AspNetCore.Components;
using System.Diagnostics.CodeAnalysis;
using System.Globalization;

namespace BootstrapBlazorApp.Shared.Pages;

/// <summary>
/// 
/// </summary>
public partial class Htmls
{
    [Parameter]
    public string? PageName { get; set; }

    [Parameter]
    public string? Language { get; set; }

    [Inject]
    [NotNull]
    private ToastService? ToastService { get; set; }

    [Inject]
    [NotNull]
    IFreeSql? fsql { get; set; }

    [NotNull]
    WebPages? TpvPage { get; set; }

    string? pageName;

    protected override void OnInitialized()
    {
        Language = CultureInfo.CurrentUICulture.Name;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        PageName ??= "Index";
        if (firstRender || pageName != PageName)
        {
            TpvPage = fsql.Select<WebPages>().Where(a => a.Url == PageName).First();
            pageName = PageName;
            StateHasChanged();
        }
    }

}

執行BootstrapBlazorApp.Server工程, 開啟隱私政策, 截圖如下

9.總結

Blazor 這個新鮮事物, 加上 BootstrapBlazor 元件庫 100 多種常用的元件，真的可以為您快速開發專案帶來非一般的感覺, 一起試試吧.

---

專案原始碼

Github | Gitee

關聯專案

FreeSql QQ群：4336577(已滿)、8578575(已滿)、52508226(線上)

BA & Blazor QQ群：795206915、675147445

知識共享許可協議

本作品採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名AlexChow（包含連結： https://github.com/densen2014 ），不得用於商業目的，基於本文修改後的作品務必以相同的許可釋出。如有任何疑問，請與我聯絡 。

AlexChow

今日頭條 | 部落格園 | 知乎 | Gitee | GitHub