react-vditor

Vditor Components for React! Vditor的React封装!
forked from react-vditor

React 开发中使用的 Vditor 组件

关于 Vditor 的细节 Vanessa219/vditor

使用方法

• 安装依赖

npm install vditor @kakuilan/react-vditor
# or
yarn add vditor @kakuilan/react-vditor
# or
pnpm install vditor @kakuilan/react-vditor

• 引入组件

import React, {FC, useState, useEffect} from "react"
import Vditor from "vditor"
import {VditorEditor} from "@kakuilan/react-vditor"

const TestVditorEditor: FC = () => {
    const [vditor, setVditor] = useState<Vditor>()
    useEffect(() => {
        if (!!vditor) {
            console.log(`Update Default Vditor:`)
            console.log(vditor)
        }
    }, [vditor])
    return <VditorEditor keyID = "base-editor"
    bindVditor = {setVditor}
    />
}

export default TestVditorEditor

参考 demo

什么是 react-vditor?

react-vditor 是一个 Vditor 的包装器。由于 Vditor 与框架无关, 使用 Vditor 的时候需要在特定的生命周期初始化操作, 重复的操作总会使人厌烦。react-vditor 提供了一组 Vditor 组件, 涵盖常用的 Vditor 编辑器, 使 Vditor 在 React 框架开发内的易用性提高, 在全面兼容 Vditor 的基础上提供了自定义 props 等新特性提高开发体验。

react-vditor 提供的组件

组件	说明
<VditorEditor />	基础 Vditor 编辑器
<VditorIREditor />	Vditor 即时渲染 (IR) 编辑器 (语法糖)
<VditorSVEditor />	Vditor 分屏渲染 (SV) 编辑器 (语法糖)
<VditorWYSIWYGEditor />	Vditor 所见即所得 (WYSIWYG) 编辑器 (语法糖)
<VditorPreview />	Vditor markdown预览组件

react-vditor 组件提供的 props

属性	类型	必填	说明
keyID	string	是	编辑器唯一标识
options	IOptions	否	Vditor 配置项
bindVditor	(vditor: Vditor): void	否	绑定 Vditor 实例到 state

• VditorPreview 的 props

属性	类型	必填	说明
markdown	string	是	markdown 文本内容
options	IPreviewOptions	否	Vditor 预览配置项
customClass	string	否	自定义预览组件 class

react-vditor 开发指南

项目依赖由 pnpm 管理

npm install -g pnpm

pnpm install

# for dev
pnpm dev

# for build
pnpm build

• 预览更改

cd __test__

pnpm install

pnpm link ..