1.0.0 • Published 3 years ago

luat-react-rich-markdown v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

react-ritch-markdown

基于React和antd 的编辑器(同时支持富文本和markdown,基于braft-editor和react-markdown-editor-lite的在封装)

支持参数

名称描述类型默认备注
isRich是否显示富文本Booleanfalsetrue:显示富文本;false:显示markdown
defaultValue默认值stringnull

支持方法

onChange实例

获取编辑器的值

onChange(value) {
	console.log(value)
}

基本使用示例

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            defaultValue: '',
        }
    }
	
    // 获取编辑器的内容
    onChange = (value) => {
        console.log(value)
    }

    refadd = React.createRef();

	// 设置默认值
    componentDidMount() {
        this.setState({ defaultValue: '1236' })
    }

    handleClickLastValue = async () => {
        this.setState({ defaultValue: '7896' })
    }
	
    // 清空编辑器
    handleClear = () => {
        this.refadd.current.clearContent()
    }

    render() {
        const { defaultValue } = this.state
        return <div>
            <Button onClick={() => this.handleClickLastValue()}>
                恢复上一次内容
            </Button>
            <Button onClick={() => this.handleClear()}>
                清除内容
            </Button>
            <Editors
                ref={this.refadd}
                onChange={this.onChange}
                isRich={true}
                defaultValue={defaultValue}
            />
        </div>
    }
}