React: 富文本

项目使用的是React,所以用的react-quill组件

1、安装

npm install react-quill
yarn add react-quill

2、导入组件

import ReactQuill from 'react-quill'; // ES6
import * as ReactQuill from 'react-quill'; // Typescript
const ReactQuill = require('react-quill'); // CommonJS

3、导入样式

require('react-quill/dist/quill.snow.css'); // CommonJS
import 'react-quill/dist/quill.snow.css'; // ES6

4、使用组件

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { text: '' } // You can also pass a Quill Delta here
    this.handleChange = this.handleChange.bind(this)
  }
 
  handleChange(value) {
    this.setState({ text: value })
  }
 
  render() {
    return (
      <ReactQuill value={this.state.text}
                  onChange={this.handleChange} />
    )
  }
}

页面中展示富文本

<div dangerouslySetInnerHTML={{ __html: text }} />

image.png

参考文章 https://zhuanlan.zhihu.com/p/375896194
参考文章https://www.csdn.net/tags/Mtjacg1sMTU3OTMtYmxvZwO0O0OO0O0O.html