English version | 简体中文
Vditor is the next-generation Markdown editor open-sourced by B3log. This project is the React wrapper of it.
npm install vditor-react --save
import ReactDOM from 'react-dom'
import Vditor from 'react-vditor'
ReactDOM.render(
<Vditor height={700} />,
document.getElementById('node')
);
Then include the specific div
tag in the HTML file:
<div id="node" />
vditor-react
maps most of its props
into options
of the original Vditor APIs, which you can access here (Chinese version only).
vditor-react
also provides some props
to improve the React practice, which are as follow:
Name | Definition | Default | Description | Deprecated Vditor API |
---|---|---|---|---|
onInit | (text: String) => {} | () => {} | Called after the editor UI has been loaded, with the initial text. | options.after |
onSelect | (selection: String, text: String) => {} | () => {} | Called when the text selection is updated, with the selected text and the full text. | options.select |
onInput | (text: String) => {} | () => {} | Called shortly after text inputs, with the full text. It won’t be called during an IME composition. | options.input |
darkMode | Boolean | false | Whether the editor UI is in dark mode. | options.theme |
disabled | Boolean | false | Whether to disable the editor. | disabled() enable() |
You can also extend this component and access the Vditor instance as this.editor
.
There is a demo under demo/
with full functionalities of vditor-react
, and it also implements system-wide (browser-wide) Dark Mode support and an 'Enable/Disable' switch with React Hooks.
You can start the demo by the following command:
npm run dev
Then open the browser and check it out in http://127.0.0.1:8081
.