Recently, I have published many articles about React, recording new technical points encountered and problems encountered in the coding process, hoping to help students who have encountered the same problems as me.
Today, I want to share a React-based rich text editor - Braft Editor.
Braft Editor official website: https://braft.margox.cn
Github repository: https://github.com/margox/braft-editor
This plugin is very convenient. You only need to download and import it to use it directly. The overall style of the page is fresh and in line with the aesthetics of the majority of people. It supports the insertion of images, audio, and video.
According to the official statement, if you are not satisfied with its functionality and usage, you can completely extend it and write a plugin to enhance it.
After my testing, the functionality is absolutely powerful and can meet the needs of the majority of the market. Next, let me explain how to use this plugin.
1. Installation#
Download the plugin directly 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 in it:
// 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. Running#
After writing the component, run npm start to see the effect.
It looks great, the page is simple. If you don't like the style, you can completely customize it yourself, which is very convenient.
4. Documentation#
If you want to use more features and methods, visit the Braft Editor official documentation for more explanations!
Attributes, methods, and examples are all available.