English version | 简体中文
Vditor 是由 B3log 开发并开源的面向未来的 Markdown 编辑器。这个项目是它的 React 封装。
npm install vditor-react --save
import ReactDOM from 'react-dom'
import Vditor from 'react-vditor'
ReactDOM.render(
<Vditor height={700} />,
document.getElementById('node')
);
然后在 HTML 文件中加入对应的 div
标签:
<div id="node" />
大部分 props
会被作为 options
用于初始化 Vditor 实例。你可以在 这里 查看 Vditor 提供的 API。
特别地,vditor-react
提供了一部分经过封装的 props
,如下表所示:
名称 | 定义 | 默认值 | 描述 | 对应的 Vditor 接口 |
---|---|---|---|---|
onInit | (text: String) => {} | () => {} | 在编辑器加载完成后的回调,用于获取编辑器文本的初始值 | options.after |
onSelect | (selection: String, text: String) => {} | () => {} | 文本选中情况变更时触发的回调,用户获取当前选中的文本(和当前编辑器文本) | options.select |
onInput | (text: String) => {} | () => {} | 用户输入一段文本后的回调,有一定延迟,且 IME 输入法状态下不会触发 | options.input |
darkMode | Boolean | false | 是否启用编辑器的暗黑模式 | options.theme |
disabled | Boolean | false | 是否锁定编辑器区域 | disabled() enable() |
你还可以继承这一类型并通过 this.editor
访问原始的 Vditor 实例。
在 demo/
目录下提供了一个完整的使用范例,利用 React Hooks 实现了跟随系统 Dark Mode 和一键锁定/解锁编辑器的功能。你可以通过如下指令构建这一范例:
npm run dev
然后在 http://127.0.0.1:8081
查看。