# vditor-blazor
**Repository Path**: daqian-xiaoxiong/vditor-blazor
## Basic Information
- **Project Name**: vditor-blazor
- **Description**: 一款 Blazor markdown 编辑器
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 3
- **Created**: 2022-12-15
- **Last Updated**: 2022-12-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# vditor-blazor
📝 Vditor of blazor
Vditor是一款基于JS超级好用的Markdown前端组件，支持编写Markdown以及渲染Markdown。
本项目是对Js版本的Vditor的封装，以便在Blazor中使用。
# 快速入门指南
## STEP1：
在Nuget包管理器中安装：StardustDL.Razor.Components.Vditors
## STEP2：
### WASM版本：
在_Imports.razorz中添加，如下代码。
`@using Vditor`
在wwwroot/index.html文件下，添加如下内容。
```css
```
### Service版本：
和上面差不多，简单讲讲。
在_Host.cshtml中添加
```css
```
注意修改版本号，和Nuget里面的那个版本要对应起来。就是@x.x.x这几个x，需要修改，看上面的注释。
# 开始使用
## 编辑器
在Razor文件中：
```html
```
对应代码：
```csharp
string mdValue = "";
```
注意：缺少配置Upload，所以不能在Markdown中上传文件，可以看Vditor中的API文档。
下面的小例子，讲解了Upload，以及自定义Toolbar。
## 渲染Markdown文件
```html
```
绑定的`Markdown`是string类型的，里面放的是Markdown字符串。
# 一个小例子
这个小例子，将帮助您更好理解如何使用Vditor。
## 在页面中：
```html
```
## 在代码中：
```csharp
string value = "Hello Blazor!";
string html;
Editor editor;
Toolbar Toolbar = new Toolbar();
Upload upload = new Upload() {
Url = "api/upload",
Max = 2 * 1024 * 1024,
Accept = "image/*,*.doc,*.docx",
Multiple = false,
};
protected override void OnInitialized()
{
string[] keys = { "emoji",
"headings",
"bold",
"italic",
"strike",
"link",
"|",
"list",
"ordered-list",
"check",
"outdent",
"indent",
"|",
"quote",
"line",
"code",
"inline-code",
"insert-before",
"insert-after",
"|"};
Toolbar.Buttons.AddRange(keys.ToList());
CustomToolButton toolbar = new CustomToolButton()
{
ClassName = "right",
Hotkey = "⌘-⇧-S",
Icon = "",
Name = "sponsor",
Tip = "自定义Toolbar",
TipPosition = "n"
};
Toolbar.Buttons.Add(toolbar);
string[] keys2 = {"upload",
"record",
"table",
"|",
"undo",
"redo",
"|",
"fullscreen"};
Toolbar.Buttons.AddRange(keys2.ToList());
base.OnInitialized();
}
async Task Click()
{
var value = await editor.GetValueAsync();
Console.WriteLine(value);
}
void Rendererd()
{
Console.WriteLine("rendererd!");
}
void OnToolbarButtonClick(string name)
{
value += $"\r\ncustom button {name} was clicked.";
}
```
在Razor文件中Vditor.Editor中，`@ref`是对这个组件的应用，之后可以使用editor这个变量进行一些操作了。`Mode`是渲染模式，支持三种模式，和Vditor(JavaScript)版本是一样的。`Toolbar`是自定义的工具栏，请看代码理解，也可以不自定义，这个Toolbar可以不用赋值。`OnToolBarButtonClick`是一个回调函数，当点击Toolbar之后的回调。`@bind-Value`是双向绑定，绑定用户输入到MarkDown的内如，是一个字符串，注意，需要使用@bind-，因为这样才是双向绑定。配置`Upload`是在用户在MarkDown中添加图片，或者DOCX的时候，将资源文件返回给服务器，然后服务器响应数据再回给我们，最后显示在MarkDown中。
我们还可以使用很多回调，比如获得焦点啥的，具体请看Vditor的API：https://ld246.com/article/1549638745630
## 后端DotNet实现Upload：
```csharp
[Route("api")]
public class ValuesController : ApiController
{
[HttpPost("upload")]
public async Task PostUrl()
{
if (Request.Content.IsMimeMultipartContent())
{
string root = System.IO.Path.Combine(Environment.CurrentDirectory, "wwwroot"); //<==Change Content Path
var provider = new MultipartFormDataStreamProvider(root);
await Request.Content.ReadAsMultipartAsync(provider);
Dictionary dict = new Dictionary(); //<==Use A dictionary To differ pictures in vditor upload
foreach (var file in provider.FileData)
{
string filename = file.Headers.ContentDisposition.FileName.Trim('"');
System.IO.FileInfo info = new System.IO.FileInfo(file.LocalFileName);
string savepath = System.IO.Path.Combine(root, filename);
if (!System.IO.File.Exists(savepath))
{
//<== Skip File If Exists
info.MoveTo(savepath);
}
dict.Add(filename, "api/image/" + filename);
}
return new JsonResult(new
{
Msg = "",
Code = 0,
Data = new { SuccMap = dict }
});
}
return new JsonResult(new
{
Msg = "错误",
Code = -1000,
Data = new { }
});
}
[HttpGet("image/{id}")]
public IActionResult GetImage(string id)
{
string path = System.IO.Path.Combine(Environment.CurrentDirectory, "wwwroot", id);
if (System.IO.File.Exists(path))
{
return new PhysicalFileResult(path, "image/png"); //<==Change Media Content Type
}
else
{
return NotFound();
}
}
}
```
负责上传与获取文件。