@kakuilan/react-vditor v0.2.4

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 提供的组件

react-vditor 组件提供的 props

• VditorPreview 的 props

react-vditor 开发指南

项目依赖由 pnpm 管理

npm install -g pnpm

pnpm install

# for dev
pnpm dev

# for build
pnpm build

• 预览更改

cd __test__

pnpm install

pnpm link ..