富文字編輯器

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'));