基于 React 的富文本编辑器－－Braft Editor

子舒

发布于 2022-06-09 14:16:57

3.8K0

发布于 2022-06-09 14:16:57

文章被收录于专栏：子舒的个人博客

最近发了很多关于 React 的文章，记录遇到的新技术点，以及在写代码过程中遇到的问题，希望可以帮助到和我遇到同样问题的同学。

今天分享的是一款基于 React 的富文本编辑器－－Braft Editor。

Braft Editor 官网：https://braft.margox.cn Github 仓库地址：https://github.com/margox/braft-editor

这款插件非常方便，只需要下载然后引入即可直接使用，页面整体风格清新，符合绝大多数人的审美观，支持图片，音视频的插入。

按照官方的说法，假如你对它的功能还不够满意，不够使用，完全可以扩展它，自己写一个插件来强化他。

经过我的测试，功能绝对强大，可以满足市面上绝大多数的需求。接下来就说一下如何使用这款插件。

1.安装

在项目中直接通过 npm 或者 yarn 下载插件：

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

# 使用 yarn 安装
yarn add braft-editor

2.使用

新建一个组件 EditorDemo.js，在里面写入下列代码：

// EditorDemo.js

import React from 'react';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

export default class PageDemo extends React.Component {

  state = {
    editorState: BraftEditor.createEditorState(null)
  }

  render () {
    return (
      <BraftEditor value={this.state.editorState} onChange={this.handleChange}/>
    )
  }

  handleChange = (editorState) => {
    this.setState({ editorState })
  }

}

然后引入到 index.js 中去。