vditor

从后端获取数据传输到前端进行显示(cpp-httplib+Vditor+Handlebars)在之前的文章中，笔者实现了一个渲染 Markdown 格式文章的网页前端 Vite 项目（参看《给 Markdown 渲染网页增加一个目录组件(Vite+Vditor+Handlebars)》）,以及一个支持 Markdown格式数据的静态文件服务的后端项目（参看《使用cpp-httplib发布静态文件服务》）。在这里，就将前端与后端打通，通过 cpp-httplib 提供的 API 接口动态返回 Markdown 文章数据，由前端 Vite 项目利用 Handlebars 模板与 Vditor 渲染引擎

给Markdown渲染网页增加一个目录组件(Vite+Vditor+Handlebars)(上)在上一篇文章《解决Vditor加载Markdown网页很慢的问题(Vite+JS+Vditor)》中，我们通过设置域内CDN的方式解决Vditor加载Markdown网页很慢的问题。而在这篇文章中，笔者将会开发实现一个前端中很常见的需求：给基于Markdown渲染的文档网页增加一个目录组件。

解决Vditor加载Markdown网页很慢的问题(Vite+JS+Vditor)在上一篇文章《使用Vditor将Markdown文档渲染成网页(Vite+JS+Vditor)》中，详细介绍了通过Vditor将Markdown格式文档渲染成Web网页的过程，并且实现了图片格式居中以及图片源更换的功能。不过，笔者发现在加载这个渲染Markdown网页的时候特别慢，本文就总结一下这个问题。

使用Vditor将Markdown文档渲染成网页(Vite+JS+Vditor)编写Markdown文档现在可以说是程序员的必备技能了，因为Markdown很好地实现了内容与排版分离，可以让程序员更专注于内容的创作。现在很多技术文档，博客发布甚至AI文字输出的内容都是以Markdown格式的形式输出的。那么，Markdown文档如何渲染成标准的Web网页呢？这就要借助于一些支持Markdown格式的编辑器组件了。开源的Markdown编辑器组件有不少，Vditor是笔者认为功能比较全的一款，在这里本文就通过Vditor来实现将一个Markdown文档渲染成网页的具体案例。

vue3中通过vditor插件实现自定义上传图片、录入echarts、脑图、markdown语法的编辑器我的vditor版本是3.10.2，大家可以自行选择下载最新版本官网：Vditor 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏 - 链滴

vue项目中使用开源VditorVditor 是一款所见即所得编辑器，支持 Markdown。更多细节和用法请参考 Vditor - 浏览器端的 Markdown 编辑器，谢谢 ❤️

我是有底线的