1.0.0 • Published 3 years ago
luat-react-rich-markdown v1.0.0
react-ritch-markdown
基于React和antd 的编辑器(同时支持富文本和markdown,基于braft-editor和react-markdown-editor-lite的在封装)
支持参数
名称 | 描述 | 类型 | 默认 | 备注 |
---|---|---|---|---|
isRich | 是否显示富文本 | Boolean | false | true:显示富文本;false:显示markdown |
defaultValue | 默认值 | string | null |
支持方法
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>
}
}
1.0.0
3 years ago