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的选项卡组件 |
| 大麻的世界图 | 论坛 | 用您的数据显示世界地图 |
