React 富文本编辑器

富文本编辑器

react-quill  安装 npm i quill react-quill

import React, {Component} from 'react';
import {render} from 'react-dom';
import ReactQuill from 'react-quill';

// 引入样式文件
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: ''
        }
    }
    render() {
        return (
            <div>
                <h1>app part</h1>
                {/* 可以实现数据双向绑定,通过value绑定状态数据,在onChnage事件中更新状态 */}
                {/* <ReactQuill value={this.state.msg} onChange={e => console.log(e)}></ReactQuill> */}
                <ReactQuill value={this.state.msg} onChange={msg => this.setState({msg})}></ReactQuill>
                {/* 符文编译器要渲染标签 */}
                 {/* <div>{this.state.msg}</div> */}
                 <div dangerouslySetInnerHTML={{__html: this.state.msg}}></div>
            </div>
        )
    }
}
render(<App></App>, document.getElementById('app'));