BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
這是使用.NET8的大型WebAssembly和Blazor Server的降價編輯器組件。該組件基於EASYMDE版本1.0.x來創建編輯器。我決定為JavaScript庫創建我的存儲庫，因為我想控制更新和更改。該組件是JavaScript庫周圍的包裝器，它是一款javaScript庫，它允許您在Glazor應用程序中使用Markdown Editor。
有關更多文檔並幫助此組件，請訪問我在此處創建的帖子。
嘗試在線Markdown編輯器（未啟用上傳）
將編輯器添加到您的_Imports.razor
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
然後，在您的index.html中， host.html或App.razor添加這些行：
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
請記住，還需要jQuery 。該組件包含簡單的Markdown編輯器腳本1.0.x版本，該版本也由我自己維護。您可以在項目中添加此腳本，但是如果您在組件中使用腳本，則可以確定它可以正常工作並且所有功能都將進行測試。
CSS markdowneditor.css包含我在Markdown編輯器中添加的新標籤的樣式，例如att ， note ，Tip， tip ， warn和video 。
在Razor頁面中，我們可以使用這些行添加組件
<div class="col-md-12">
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged" />
<hr />
<h3>Result</h3>
@((MarkupString)markdownHtml)
</div>
@code {
string markdownValue = "#Markdown EditornThis is a test";
string markdownHtml;
Task OnMarkdownValueChanged(string value)
{
return Task.CompletedTask;
}
Task OnMarkdownValueHTMLChanged(string value)
{
markdownHtml = value;
return Task.CompletedTask;
}
}
value和ValueHTMLChanged之間的主要不同是， Value返回編輯器中寫入的文本為字符串，而ValueHTMLChanged返回文本的渲染HTML代碼。 ValueHTMLChanged包括用於在SVG標籤中顯示美人魚圖的代碼。
結果是一個不錯的標記編輯器，如以下屏幕截圖。這是該存儲庫中演示的屏幕截圖。
在您的Markdown編輯器中添加以下代碼
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false"
CustomButtonClicked="@OnCustomButtonClicked">
<Toolbar>
<MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa fa-bolt" Title="Bold" />
<MarkdownToolbarButton Separator Name="Custom button"
Value="@("Hello from your custom Toolbar Button")"
Icon="fa fa-star"
Title="A Custom Button" />
<MarkdownToolbarButton Separator Name="https://github.com/erossini/BlazorMarkdownEditor"
Icon="fa fab fa-github" Title="A Custom Link" />
</Toolbar>
</MarkdownEditor>
@code {
// omitted code...
Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs)
{
Console.WriteLine("OnCustomButtonClicked -> " + eventArgs.Value);
buttonText += "OnCustomButtonClicked -> " + eventArgs.Value + "<br />";
return Task.CompletedTask;
}
}
在標籤MarkdownEditor中，您添加了包含一個或多個MarkdownToolbarButton的新的TAB Toolbar 。
每個MarkdownToolbarButton都可以具有默認Action之一（請參見下表）或一個自定義值，例如指向網站的鏈接。如果要在MarkdownToolbarButton之前顯示垂直線，請在MarkdownToolbarButton中添加屬性Separator 。
在同一情況下，您想在第一個初始化之後刷新Markdown編輯器的內容，因為您的應用程序必須從API讀取值，並且需要時間。為此，您必須在MarkdownEditor中添加ref ，然後使用它來調用SetValueAsync屬性，如以下代碼
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
為了在組件中添加更多功能，它包括Mermaid.js 10.2.1的版本，該版本允許在Markdown組件中添加令人印象深刻的圖表和圖表
要將此功能添加到Markdown編輯器中，足以添加index.html此腳本
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >腳本將檢查此庫是否被調用。如果將其添加到頁面上，則降價編輯器會自動在工具欄中添加一個按鈕，以插入美人魚的標籤。那個標籤是
```mermaid
```
在組件中使用此腳本
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
或CDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
美人魚渲染將行不通。錯誤是
E.Replace不是功能
因此，我建議按照以下段落描述的那樣，用新腳本來升級腳本。
使用10.9.1的新版本的美人魚需要在index.html ， host.html或App.razor中添加此代碼
<script type="module">
import mermaid
from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
目前，我正在嘗試找到一種方法將此腳本包含在markdownEditor.js中，但我不確定它是否有效。
### An example of the mermaid graphs
A ** Sequence diagram ** is an interaction diagram that shows how processes operate with one another and in what order .序列化愛麗絲 - >>約翰：你好約翰，你好嗎？約翰 - >>愛麗絲：太好了！愛麗絲 - ）約翰：稍後再見！
A **Gantt chart** is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
gantt標題a gantt圖dayformat yyyy-mm-dd部分A部分A任務：A1，2014-01-01，30D另一個任務：A1，20d Sec中的另一個任務：2014-01-12，12D另一個任務：24d
An **entity–relationship model** (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types).
erdiagram客戶|| -O {訂單：plots訂單|| - | {line-item：包含customer} | .. | | {velivery-address：用途
## Add Highlight.js
This script is not included in the component but the component can detect if _Highlight.js_ is loaded. In this case, the Markdown Editor renders also the code in one of the supported languages.
To enable this function, add the script in your project and then in the `index.html` add the following lines
如果兩個庫都加載在index.html中，則美人魚渲染將不起作用。
在Markdown中，有一些缺少的標籤可以在頁面上顯示一些有用的信息，例如高光註釋，提示，警告或註意消息。因此，我將它們添加到此Markdown編輯器中。此實現結果的一個示例是在以下屏幕截圖中。
要添加消息，請單擊編輯器工具欄中的圖標，或添加這些命令：
| 命令 | 顏色 | 描述 |
|---|---|---|
| ````ATT | 紅色的 | 展示注意力 |
| ``注意 | azure | 在文檔中添加註釋 |
| ``提示 | 綠色的 | 顯示提示消息 |
| ``警告 | 橘子 | 這是一個警告信息 |
在Markdown編輯器組件中，有一個稱為alert.css的CSS ，如果您沒有添加markdowneditor.css ，則可以將其添加到index.html中。
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
默認情況下，Markdown編輯器將文本保存在瀏覽器本地存儲中。
AutoSaveEnabled是True ，並且設置為AutoSaveSubmitDelay 5000 。這意味著文本每5秒保存一次。
如果要清潔保存的文本，則可以使用以下代碼
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
在Markdown編輯器中，您可以在文本中添加視頻。該視頻可以來自YouTube，Vimeo或任何其他視頻提供商。該視頻顯示在編輯器和渲染的HTML代碼中。
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
Blazor的Markdown編輯器具有一系列屬性集合，可以映射JavaScript版本中的所有功能。在此存儲庫中，有兩個項目：
Index.razor ，我在其中顯示如何使用基本函數和Upload.razor組件，Razor表示如何應對圖像上傳。要測試上傳，項目MarkdownEditorDemo.Api必須運行| 姓名 | 描述 | 類型 | 預設 |
|---|---|---|---|
| AutoSaveEnabled | 獲取或設置自動保存的設置。保存正在編寫的文本，並將在將來加載。當提交包含的表格時，它將忘記文本。建議為Markdown編輯器選擇唯一的ID。 | 布爾 | 錯誤的 |
| Autosaveid | 獲取或設置自動保存標識符。您必須設置一個唯一的字符串標識符，以便組件可以自動執行。將其與網站其他地方的其他組件的其他實例分開的東西。 | 細繩 | 預設值 |
| AutoSavedelay | 節省之間的延遲，以毫秒為單位。默認為10000（10s）。 | int | 10000（10s） |
| AutoSavesubmitdelay | 假設表格提交失敗並以毫秒為單位保存文本之前，請延遲。 | int | 5000（5s） |
| AutoSaveText | Autosave的文字 | 細繩 | 自動保存： |
| AutoSavetimeFormatLocale | 設置DateTime顯示的格式。有關更多信息，請參閱JavaScript文檔DateTimeFormat實例 | 細繩 | En-us |
| autosavetimeformatear | 設置一年的格式 | 細繩 | 數字 |
| AutoSavetimeFormatMonth | 設置該月的格式 | 細繩 | 長的 |
| AutoSavetimeFormatday | 設置一天的格式 | 細繩 | 2位數 |
| AutoSavetimeFormathour | 設置一個小時的格式 | 細繩 | 2位數 |
| AutoSavetimeFormatminute | 設置分鐘的格式 | 細繩 | 2位數 |
| AutodownloadFontawesome | 如果設置為真，則強制下載字體很棒（用於圖標）。如果設置為false，則可以防止下載。 | 布爾？ | 無效的 |
| targureStatustext | 設置要在角色計數的狀態欄中顯示的單詞 | 細繩 | characters: |
| CustomButtonClicked | 在單擊自定義工具欄按鈕之後發生。 | EventCallback | |
| customimageupload | 設置自定義圖像上傳處理程序 | ||
| 方向 | RTL或LTR。更改文本方向以支持向右的語言。默認為LTR。 | 細繩 | ltr |
| 錯誤 | 使用ErrorCallback選項顯示給用戶的錯誤，其中image_name ， image_size和image_max_size將被各自的值代替，可用於自定義或國際化。 | Markdownerrormessages | |
| 菲達斯 | 一系列圖標名稱要隱藏。可以用於隱藏默認情況下顯示的特定圖標，而無需完全自定義工具欄。 | 細繩[] | “並排”，“全屏” |
| 成像感 | 上載之前，用於檢查圖像類型的MIME類型列表（注意：永遠信任客戶端，始終在服務器端檢查文件類型）。默認為圖像/png，image/jpeg，image/jpg，image.gif。 | 細繩 | 圖像/png，圖像/jpeg，image/jpg，image.gif |
| Imagecsrftoken | csrf令牌包含AJAX調用以上傳圖像。例如，與Django後端一起使用。 | 細繩 | |
| ImageMaxSize | 最大圖像大小在字節中，在上傳之前檢查（注意：永遠信任客戶端，始終在服務器端檢查圖像大小）。默認為1024 * 1024 * 2（2MB）。 | 長的 | 1024 * 1024 * 2（2MB） |
| ImagePathabsolute | 如果設置為true，將從imageuploadfunction和從imageuploadendpoint返回的filepath視為絕對而不是相對路徑的fileepath，即不prepend window.location.origin。 | 細繩 | |
| Imagetexts | 向用戶顯示的文本（主要是在狀態欄上）的導入圖像功能，其中image_name ， image_size和image_max_size將被其各自的值代替，可用於自定義或國際化。 | markdownimageTexts | 無效的 |
| ImageUploAdauthenticationschema | 如果需要對API進行身份驗證，請將用於使用的模式分配。 Bearer是常見的。 | 細繩 | 空的 |
| ImageuploAadauthenticationToken | 如果需要對API進行身份驗證，請將其分配給該屬性 | 細繩 | 空的 |
| 亞麻家 | 如果設置為true，則可以在編輯器中啟用行號。 | 布爾 | 錯誤的 |
| linesstatustext | 將單詞設置在狀態欄中的單詞以進行計數 | 細繩 | lines: |
| 線條包裝 | 如果設置為false，請禁用行包裹。默認為true。 | 布爾 | 錯誤的 |
| Markdownurl | 設置Markdown指南的URL。 | 鏈接到Markdown指南 | |
| 麥克海 | 設置組成區域的固定高度。 Minheight選項將被忽略。應該是包含有效CSS值的字符串，例如“ 500px”。默認為未定義。 | 細繩 | |
| maxuploadimagemessagesize | 上傳文件時獲取或設置最大消息大小。 | 長的 | 20 * 1024 |
| Minheight | 在開始自動增長之前，請設置構圖區域的最小高度。應該是包含有效CSS值的字符串，例如“ 500px”。默認為“ 300px”。 | 細繩 | 300px |
| 土著人 | 在編輯器中啟用（true）或禁用（false）咒語檢查 | 布爾 | 真的 |
| 佔位符 | 如果設置，請顯示自定義佔位符消息。 | 細繩 | 無效的 |
| sementfetchTimeOut | 上傳文件時獲取或設置段獲取超時。 | 時間潘 | 1分鐘 |
| 陳列室 | 要顯示的一系列圖標名稱。可用於顯示默認情況下隱藏的特定圖標，而無需完全自定義工具欄。 | 細繩[] | “代碼”，“表” |
| 拼寫檢查員 | 在編輯器中啟用（true）或禁用（false）咒語檢查 | 布爾 | 真的 |
| tabsize | 如果設置，請自定義標籤大小。默認為2。 | int | 2 |
| 主題 | 超越主題。默認為Easymde。 | 細繩 | Easymde |
| 工具欄 | [可選]獲取或設置工具欄的內容。 | 渲染範圍 | |
| 工具欄 | 如果設置為false，請禁用工具欄按鈕提示。默認為true。 | 布爾 | 真的 |
| 上傳圖 | 如果設置為true，請啟用圖像上傳功能，該功能可以由拖放，複製式 - 仿製和通過瀏覽文件窗口觸發（當用戶單擊上傳圖像圖標時打開）。默認為false。 | 布爾 | 錯誤的 |
| 價值 | 獲取或設置降價值。 | 細繩 | 無效的 |
| ValueHtml | 從Markdown值獲取HTML。 | 細繩 | 無效的 |
| WordStatustext | 設置單詞在狀態欄中顯示單詞計數的單詞 | 細繩 | words: |
| 姓名 | 描述 | 類型 |
|---|---|---|
| errorcallback | 用於定義如何顯示錯誤消息的回調函數。默認為（errorMessage）=> alert（errormessage）。 | func <字符串，任務> |
| ImageUploadchanged | 每當選定的圖像發生變化時都會發生。 | func <filechangedeventargs，任務> |
| ImageUploaded | 當單個圖像上傳結束時，就會發生。 | func <FileDendedEventargs，任務> |
| imageuploadendpoint | 通過異步郵政請求發送圖像數據的終點。服務器應該保存此圖像，並返回JSON響應。 | 細繩 |
| imageuploadproged | 通知將圖像寫入目標流的進度。 | func <fileProgressedEventargs，任務> |
| imageuploadstarted | 當單個圖像上傳開始時，就會發生。 | func <filestartedeventargs，任務> |
| 估值 | 在降價值發生變化之後發生的事件。 | EventCallback |
| valuehtmlchanged | 在更改降級值並提供新的HTML代碼之後發生的事件。 | EventCallback |
Blazor的Markdown編輯器可以負責上傳文件，並在編輯器中添加相對的Markdown代碼。為此，屬性UploadImage必須設置為true 。另外，必須在屬性ImageUploadEndpoint中指定上傳API。在某些情況下，API需要身份驗證。屬性ImageUploadAuthenticationSchema和ImageUploadAuthenticationToken可以使您傳遞正確的模式和令牌，以在呼叫中使用。
這些值將被添加到標題中的HttpClient POST請求中。只有兩個屬性都不為空，則將它們添加到標題中。
如果您想更好地理解如何為上傳創建API，我已經在Puresourcecode上創建了一個特定的帖子。
以下是內置工具欄圖標（默認情況下僅啟用了其中一些），可以根據您的意願進行重新組織。 “名稱”是js中引用的圖標的名稱。 “動作”是要打開的函數或URL。 “類”是給出圖標的類。 “工具提示”是通過title=""屬性出現的小工具提示。請注意，快捷方式提示將自動添加並反映指定的操作，如果它具有鍵綁定為鍵的鍵綁定（即，將action值設置為bold ，而tooltip設置為Bold ，則用戶將看到的最終文本將是“ BOLD（CTRL-B）”）。
此外，您可以通過添加"|"在任何圖標之間添加一個分離器到工具欄陣列。
| 姓名 | 行動 | 工具提示 班級 |
|---|---|---|
| 大膽的 | togglebold | 大膽的 fa fa-bold |
| 斜體 | 切換 | 斜體 fa fa-itteric |
| 罷工 | togglestrikeThrough | 罷工 fa fa-trikethrough |
| 標題 | ToggleHeadingsMaller | 標題 FA FA-HEADER |
| 標題小人 | ToggleHeadingsMaller | 較小的標題 FA FA-HEADER |
| 頭彎 | ToggleHeadingBigger | 更大的標題 FA FA-LG FA頭 |
| 頭1 | toggleheading1 | 大標題 FA FA-HEADER標頭1 |
| 標題-2 | toggleheading2 | 中型標題 FA FA-HEADER標頭2 |
| 頭3 | toggleheading3 | 小標題 FA FA-HEADER HEADER-3 |
| 代碼 | togglecodeblock | 代碼 FA FA代碼 |
| 引用 | toggleBlockQuote | 引用 fa fa-Quote-Left |
| 無序列表 | toggleunorderedlist | 通用列表 fa fa-list-ul |
| 有序列表 | toggleorderedlist | 編號列表 fa fa-list-ol |
| 乾淨的塊 | 乾淨 | 乾淨的塊 FA FA-ERASER |
| 關聯 | 繪製鏈接 | 創建鏈接 fa fa-link |
| 圖像 | 抽籤 | 插入圖像 fa fa-picture-o |
| 桌子 | 可繪製 | 插入表 fa fa-table |
| 水平規則 | drawhorizontalrule | 插入水平線 FA FA-Minus |
| 預覽 | togglePreview | 切換預覽 fa fa-eye不可能 |
| 並排 | togglesidebyside | 並排切換 FA FA-COLLOMES無易於的無動 |
| 全螢幕 | togglefullscreen | 切換全屏 fa fa-arrows-alt notable no-bobile |
| 指導 | 此鏈接 | 降價指南 fa fa question circle |
EASYMDE帶有一系列預定義鍵盤快捷鍵，但可以使用配置選項更改它們。默認列表如下：
| 快捷方式（Windows / Linux） | 快捷方式（MACOS） | 行動 |
|---|---|---|
| ctrl-' | cmd-' | “ ToggleBlockQuote” |
| ctrl-b | CMD-B | “ togglebold” |
| ctrl-e | CMD-E | “ CleanBlock” |
| Ctrl-H | CMD-H | “ ToggleHeadingsMaller” |
| Ctrl-i | cmd-i | “切換” |
| ctrl-k | CMD-K | “ DrawLink” |
| ctrl-l | CMD-L | “ toggleunorderedlist” |
| ctrl-p | CMD-P | “ TogglePreview” |
| ctrl-alt-c | cmd-alt-c | “ togglecodeblock” |
| ctrl-alt-i | cmd-alt-i | “抽籤” |
| ctrl-alt-l | cmd-alt-l | “ ToggleOrderedList” |
| SHIFT-CTRL-H | SHIFT-CMD-H | “ ToggleHeadingBigger” |
| F9 | F9 | “ togglesidebyside” |
| F11 | F11 | “ togglefullscreen” |
很多人向我發送了同樣的問題。我的組件（Markdowneditor，DataTable，SVG圖標和您在我的GitHub上找到的其他）是免費軟件。
我要求您以以下方式為該項目做出貢獻：
如果您不知道該怎麼做或您：
然後，您可以購買我創建的支持許可證之一。有不同的價格。金額是您的決定。您會發現在Puresourcecode商店有一個完整的列表
貢獻為您提供了：
| 組件名稱 | 論壇 | 描述 |
|---|---|---|
| 可數據摘要 | 論壇 | julazor WebAssembly和Blazor Server的可數據組件 |
| 大華人的降價編輯 | 論壇 | 這是用於大麻的降價編輯器。它包含實時預覽以及用戶的嵌入式幫助指南。 |
| 瀏覽器檢測到大麻 | 論壇 | 瀏覽器檢測大華WebAssembly和Blazor Server |
| 大餐的代碼 | 論壇 | 用243種樣式的196個編程語言中的196個編程語言中添加代碼片段 |
| 複製到剪貼板 | 論壇 | 添加一個按鈕以在剪貼畫中復製文本 |
| SVG圖標和旗幟的旗幟 | 論壇 | 帶有許多SVG圖標和SVG標誌的庫 |
| 烈酒的模態對話框 | 論壇 | 簡單的模態對話框 |
| psc.extensions | 論壇 | Nuget軟件包中的.net5功能很多，您可以免費下載。我們在此包裝功能中收集了日常工作的功能，以幫助您進行索賠，字符串，枚舉，日期和時間，表達式... |
| Quill for Blazor | 論壇 | Quill組件是一個可重複使用的控件，它使我們可以輕鬆消耗quill並將其多個實例放在我們的大型應用程序中的一個頁面上 |
| 大麻的細分市場 | 論壇 | 這是大型Web總成和Blazor Server的片段組件 |
| 大華的標籤 | 論壇 | 這是大型Web總成和Blazor Server的選項卡組件 |
| 大麻的世界圖 | 論壇 | 用您的數據顯示世界地圖 |
