antd 中使用富文本编辑器

您所在的位置：网站首页 › 怪怪守护神漫画哪里买 › antd 中使用富文本编辑器

antd 中使用富文本编辑器

2023-12-14 22:23| 来源: 网络整理| 查看: 265

每个react开发者都会使用过antd,antd这个玩意美中不足的就是没有富文本编辑器,因项目需要,故鼓捣一下

BRAFT EDITOR官网 BRAFT EDITOR-GitHub BRAFT EDITOR-语雀文档

这个富文本编辑器是完完全全可以直接拿到使用antd的项目中的,需要修改的地方很少很少,而且很友好上波图先新增

编辑数据回填

# 使用npm安装 npm install braft-editor --save # 使用yarn安装 yarn add braft-editor

封装组件

import 'braft-editor/dist/index.css' import React from 'react' import PropTypes from 'prop-types'; import BraftEditor from 'braft-editor' import styles from './index.less' export default class BasicDemo extends React.Component { static propTypes = { // uploadUrl: PropTypes.string, onChange: PropTypes.func, echoData: PropTypes.string } static defaultProps = { onChange() { }, } state = { editorState: BraftEditor.createEditorState('') } componentDidMount() { this.isLivinig = true this.setState({ editorState: BraftEditor.createEditorState(this.props.echoData ? this.props.echoData : '

') }) } componentWillUnmount() { this.isLivinig = false } handleChange = (editorState) => { this.setState({ editorState: editorState }) // 因为要做必填校验,默认的是会有一对p标签,所以封装的时候直接就给过滤掉 this.props.onChange(editorState.toHTML() !== '

' ? editorState.toHTML() : '') } // 异步数据回填 setEditorContentAsync = () => { if (this.isLivinig) { this.setState({ editorState: BraftEditor.createEditorState('我是显示的内容') }) } return null } render() { const { editorState } = this.state return ( ) } }

页面引用

// 这里设置了在onFinsh的时候做表单校验,antd默认的是onChange的时候做校验,这样就会导致刚刚进入页面什么都没操作就会触发校验规则,很难看 ... history.goBack()}>取消保存

以上就是我的一些使用方法,如果有更优雅的欢迎留言

【本文地址】

antd 中使用富文本编辑器

antd 中使用富文本编辑器

今日新闻

推荐新闻