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文件下，添加如下内容。

<!-- ⚠️Please specify the version number in the production environment, such as https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.8.7/dist/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor@3.8.7/dist/index.min.js" defer></script>

<script src="_content/Vditor/vditor-blazor.js"></script>

Service版本：

和上面差不多，简单讲讲。

在_Host.cshtml中添加

<!-- ⚠️Please specify the version number in the production environment, such as https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/index.css" />
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/css/content-theme/ant-design.css" />-->
    <script src="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/index.min.js" defer></script>
    <script src="_content/Vditor/vditor-blazor.js"></script>

注意修改版本号，和Nuget里面的那个版本要对应起来。就是@x.x.x这几个x，需要修改，看上面的注释。

开始使用

编辑器

在Razor文件中：

<Vditor.Editor Mode="wysiwyg" Height="300" MinHeight="200" @bind-Value="@mdValue"></Vditor.Editor>

对应代码：

string mdValue = "";

注意：缺少配置Upload，所以不能在Markdown中上传文件，可以看Vditor中的API文档。下面的小例子，讲解了Upload，以及自定义Toolbar。

渲染Markdown文件

<Vditor.Preview Anchor Markdown="@value" OnRendered="Rendererd" />

绑定的Markdown是string类型的，里面放的是Markdown字符串。

一个小例子

这个小例子，将帮助您更好理解如何使用Vditor。

在页面中：

<Vditor.Editor @ref="editor" @bind-Value="value" @bind-Html="html" Mode="wysiwyg" Height="500" MinHeight="500" Toolbar="Toolbar" OnToolbarButtonClick="OnToolbarButtonClick" Upload="upload" />

在代码中：

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 = "<svg><use xlink:href=\"#vditor-icon-export\"></use></svg>",
            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：

[Route("api")]
    public class ValuesController : ApiController
    {
        [HttpPost("upload")]
        public async Task<IActionResult> 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<string, string> dict = new Dictionary<string, string>(); //<==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();
            }
        }
    }

负责上传与获取文件。

大前小熊 / vditor-blazor

vditor-blazor

快速入门指南

STEP1：

STEP2：

WASM版本：

Service版本：

开始使用

编辑器

渲染Markdown文件

一个小例子

在页面中：

在代码中：

后端DotNet实现Upload：

简介

发行版

贡献者

近期动态

大前小熊 / vditor-blazor .gitee-modal { width: 500px !important; }

vditor-blazor

快速入门指南

STEP1：

STEP2：

WASM版本：

Service版本：

开始使用

编辑器

渲染Markdown文件

一个小例子

在页面中：

在代码中：

后端DotNet实现Upload：

简介

发行版

贡献者

近期动态

搜索帮助

大前小熊 / vditor-blazor