在 React 中使用 Vditor 的新姿势

又一个新轮子诞生

Vditor 和 Lute 的源代码我都通读过, 每次在 React 项目中使用 Vditor 的姿势都让我觉得蛮麻烦的, 在 npm 上面也看到有老哥给 Vditor 包装了一层 React 组件。为了代码的绝对安全可控, 自己基于 Vditor 的特性实现了 React 组件的包装并拓展了部分常用编辑器语法糖和 props。

HerbertHe/react-vditor: Vditor Components for React! (github.com)

重写了 Vditor 的类型结构

Vditor 的类型定义是与主代码分开的, vscode 总会时不时丢掉类型提示, 就满烦的。react-vditor 参考源代码重写了部分 Vditor 类型定义的结构, 将不同的类型定义区分开, 便于快速定位由类型导致的适配性问题。

具体的类型部分定义参考: react-vditor/src/types at main · HerbertHe/react-vditor (github.com)

Vditor 实例绑定 React state

React 提供了组件内状态 (state) 的特性, react-vditor 通过提供了自定义的 props 之 bindVditor 特性, 绑定返回 Vditor 的实例, 由此支持了 Vditor 所有实例方法的调用。

关于更多

react-vditor 目前发布了一个小版本更新, 目前属于可用的状态并试图提供更多的特性, 从而优化在 React 端的体验, 欢迎使用并 issues 反馈~

体验 Demo：

react-vditor demo (goer.icu)

进一步使用 Vditor

在造此轮子之前, 题主也开始写了另一个项目

HerbertHe/vdok: Vdok is a markdown document tool for generating document based on Vite, React and Vditor (github.com)

Vdok 是一个屏蔽实现层并基于 Vite 的现代 markdown 文档网站生成工具, 使用户不必关注于前端开发实现, 并坚持“用再取”的原则实现前后端分离的文档获取, 进一步提高文档网站首屏渲染速度。更关注于低代码上手, 目标人群主要是几乎完全无经验的有文档需求的人。

Vdok 目前属于开发状态, 由于 npm 一些奇奇怪怪的原因没有完整更新包。Vdok 添加了自定义的 Vditor renderers 和其它可复用特性并且独立分包, 欢迎大家加入开发并且提出建议~