最近發了很多關於 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 官方文檔吧，還有更多關於它的講解！
屬性、方法、示例，一應俱全。