Recently, I have published many articles about React, documenting new technical points I encountered and the problems I faced while coding, hoping to help classmates who encounter the same issues.
Today, I am sharing a rich text editor based on React - Braft Editor.
Braft Editor Official Website: https://braft.margox.cn
Github Repository: https://github.com/margox/braft-editor
This plugin is very convenient; you just need to download and import it to use it directly. The overall style of the page is fresh and aligns with the aesthetic of the majority, supporting the insertion of images, audio, and video.
According to the official statement, if you are not satisfied with its functionality, you can completely extend it and write your own plugin to enhance it.
Based on my testing, the functionality is absolutely powerful and can meet the vast majority of needs in the market. Next, I will explain how to use this plugin.
1. Installation#
Directly download the plugin in the project using npm or yarn:
# Install using npm
npm install braft-editor --save
# Install using yarn
yarn add braft-editor
2. Usage#
Create a new component EditorDemo.js and write the following code inside:
// 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 })
}
}
Then import it into index.js.
3. Run#
After writing the component, run npm start to see the effect.
Pretty good, the page is very simple. If you don't like the style, you can completely customize it, which is very convenient.
4. Documentation#
If you want to use more features and methods, visit the Braft Editor Official Documentation for more explanations about it!
Attributes, methods, and examples are all included.