最近发了很多关于 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 中去。 3.运行 写完组件之后，npm start 运行看看效果 相当不错，页面很简洁，如果觉得样式不喜欢，完全可以自己重新定制风格，非常方便。 4.文档 如果想使用更多功能、方法，进入 Braft Editor 官方文档吧，还有更多关于它的讲解！ 属性、方法、示例，一应俱全。