From d43f048a1f150c5fa75a63861311789d365f83dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E5=89=8D=E5=B0=8F=E7=86=8A?=
<12214080+daqian-xiaoxiong@user.noreply.gitee.com>
Date: Thu, 15 Dec 2022 12:02:30 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20READ?=
=?UTF-8?q?ME.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 2 --
1 file changed, 2 deletions(-)
delete mode 100644 README.md
diff --git a/README.md b/README.md
deleted file mode 100644
index 67de2ee..0000000
--- a/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# vditor-blazor
-📝 Vditor of blazor
--
Gitee
From acfc5ebb2e0b9e9cb331e3e67765d72f95d5a521 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E5=89=8D=E5=B0=8F=E7=86=8A?=
<12214080+daqian-xiaoxiong@user.noreply.gitee.com>
Date: Thu, 15 Dec 2022 12:03:14 +0000
Subject: [PATCH 2/2] =?UTF-8?q?add=20README.md.=20=E6=B7=BB=E5=8A=A0?=
=?UTF-8?q?=E4=BA=86=E4=B8=80=E4=B8=AAReadMe=E6=96=87=E4=BB=B6=EF=BC=8C?=
=?UTF-8?q?=E4=BB=A5=E4=BE=9B=E9=98=85=E8=AF=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 大前小熊 <12214080+daqian-xiaoxiong@user.noreply.gitee.com>
---
README.md | 200 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 200 insertions(+)
create mode 100644 README.md
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e659520
--- /dev/null
+++ b/README.md
@@ -0,0 +1,200 @@
+# 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();
+ }
+ }
+ }
+```
+负责上传与获取文件。
\ No newline at end of file
--
Gitee