前言
咱们在开发后台的过程当中，用antd的组件时，发现其并没有富文本编辑器这个组件，但是业务又需要咱们去使用，这个时候就得自行封装一个使用的组件。
在官方文档的社区精选组件中，就可以找到两个富文本编辑器的组件，本文以及我个人使用的是braft-editor这个组件
安装和使用
插件的官方地址：https://braft.margox.cn/demos/basic
安装
使用npm或者yarn来将本编辑器加入到你的项目中：
# 使用npm安装
npm install braft-editor --save
# 使用yarn安装
yarn add braft-editor
注意：对于传统的scrpt标签引入方式，本项目暂未进行充分测试
使用
编辑器支持value和onChange属性，这类似于React中原生的input组件。通常情况下，可以用典型的受控组件的形式来使用本编辑器：
封装组件，
components/Editor文件夹下创建index.jsx，内容如下：
import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
export default class EditorDemo extends React.Component {
state = {
// 创建一个空的editorState作为初始值
// this.props.content接收父组件的值，渲染富文本
editorState: BraftEditor.createEditorState(this.props.content ?? null)
}
handleEditorChange = (editorState) => {
// 更新编辑器的状态
this.setState({ editorState })
// 判断输入的内容，如果有内容，设置输入的内容；如果没有内容，设置为空字符串 ''
if (!editorState.isEmpty()) { // 如此判断的原因，因为即使是没有内容 editorState.toHTML() 是一对空标签，不能直接给表单使用。
// 可直接调用editorState.toHtml()来获取HTML格式的内容
const content = editorState.toHTML()
// 调用父组件的函数，将编辑器输入的内容传递回去
this.props.setDetails(content)
} else {
// 调用父组件的函数，没有内容设置成空字符串 ''
this.props.setDetails('')
}
}
render () {
const { editorState } = this.state
return (
<div className="my-component">
<BraftEditor
value={editorState}
onChange={this.handleEditorChange}
/>
</div>
)
}
}
表单页面使用
import React, {useState} from 'react';
import ProForm from '@ant-design/pro-form';
import {Modal} from 'antd';
import {infoContent} from '@/services/cms';
import Editor from '@/components/Editor';
const Edit = (props) => {
const {isModalVisible, isShowModal, editId} = props;
const [contentData, setContentData] = useState(undefined); // 富文本数据
// 定义form的实例
const [formObj] = ProForm.useForm()
const title = editId === null ? '添加内容' : '编辑内容'
const getData = async () => {
const res = await infoContent({
content_id: editId,
})
// 给编辑器赋值
setContentData(res.data.content)
return res.data
}
/**
* 提交按钮
*/
const handleSubmit = async values => {
const data = values
}
// 通过组件传回来的值，设置组件的值
const setDetails = content => formObj.setFieldsValue({'content': content})
return (
<Modal
title={title}
visible={isModalVisible}
onCancel={() => isShowModal(false)}
footer={null}
destroyOnClose={true}
width={750}
>
<ProForm
form={formObj}
onFinish={values => handleSubmit(values)}
request={editId == null ? '' : () => getData()}
>
<ProForm.Item
name="content"
label="详情"
rules={[
{required: true, message: '请输入详情'}
]}
>
<Editor
setDetails={setDetails}
content={contentData}
/>
</ProForm.Item>
</ProForm>
</Modal>
);
};
export default Edit;
小结
- 页面效果
- 本文主要是在
Modal里使用，样式就是默认宽度填充的，如果是在其它场景的话，使用方式是一样的，可以对样式进行简单调整。
