Braft Editor
1.安装和使用:
# 使用npm安装
npm install braft-editor --save
# 使用yarn安装
yarn add braft-editor
2.使用:
编辑器支持value和onChange属性,这类似于React中原生的input组件。通常情况下,可以用典型的受控组件的形式来使用本编辑器:
import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
组件中先引入antd的form表单
<Form
form={form}
labelAlign="left"
name="idea"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
{...layout}
initialValues={
{
ideaDetails: BraftEditor.createEditorState(modalValue.ideaIntroduction),
}}
>
<Item label='想法详细' name='ideaDetails' rules={[{ required: true, message: '请输入想法详细!' }]}>

本文介绍了如何在React的Form表单中使用Braft Editor作为富文本组件。通过介绍安装、初始化编辑器状态以及如何配合antd的Form组件设置初始值,提供了实现富文本编辑的步骤,并附带了案例说明。
最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



