React如何使用Braft Editor符文本编辑器

2021-08-22   阅读:921   分类:前端    标签: React

Braft Editor符文本编辑器,美观好用的React富文本编辑器。

官网地址:http://braft.margox.cn/

1、安装

使用npm或者yarn来将本编辑器加入到你的项目中:

# 使用npm安装

npm install braft-editor --save

# 使用yarn安装

yarn add braft-editor

2、使用

编辑器支持value和onChange属性,这类似于React中原生的input组件。通常情况下,可以用典型的受控组件的形式来使用本编辑器:

2.1、页面代码部分

<Form.Item>
		<BraftEditor
			value={editorState}
			onChange={(e)=>handleEditorChange(e)}
		/>
</Form.Item>

通过onChange={(e)=>handleEditorChange(e)}绑定方法获取值

2.2、引入编辑器组件

// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

2.3、编辑器值获取和定义

//富文本编辑器
const [editorState, serEditorState] = useState(BraftEditor.createEditorState(""))
const handleEditorChange = values=> {
console.log(values)
 serEditorState(values);
}
const handleSubmit = e =>{
// 获取富文本的内容
console.log(editorState.toHTML())
}

通过editorState.toHTML()还直接获取富文本编辑器内容

实例:

import React, {useEffect, useState} from 'react'
import { Breadcrumb, Form, Image, Button} from 'antd';
 
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
 
 
function Add() {
     //富文本编辑器
     const [editorState, serEditorState] = useState(BraftEditor.createEditorState(""))
     const handleEditorChange = values=> {
       console.log(values)
         serEditorState(values);
     }
     const handleSubmit = e =>{
       // 获取富文本的内容
       console.log(editorState.toHTML())
     }
   return (
       <div>
            <Breadcrumb style={{ margin: '16px 0' }}>
               <Breadcrumb.Item>主页</Breadcrumb.Item>
               <Breadcrumb.Item>文章添加</Breadcrumb.Item>
           </Breadcrumb>
           <Form name="basic "onFinish={handleSubmit}>
       <Form.Item>
               <BraftEditor
                   value={editorState}
                   onChange={(e)=>handleEditorChange(e)}
               />
 
       </Form.Item>
       <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
       <Button type="primary" htmlType="submit">
         保存
       </Button>
     </Form.Item>
       
     </Form>
          
       </div>
   )
}
 
export default Add
【腾讯云】爆款云服务器限时体验20元起,更多上云必备产品低至1元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/795.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×