【react】 wangEditor 富文本編輯器 筆記

https://www.kancloud.cn/wangfupeng/wangeditor3/335769 官網

   "wangeditor": "^3.1.1", 版本

1. 黑窗口 cnpm install wangeditor

2.項目中  import E from 'wangeditor';

this.state = {
                editorContent: "<div></div>",
                activeKey: "01",
                arr:[]
            }

　　

editorContent 默認顯示空內容

3.創建富文本編輯器 並進行個性化界面功能設置

componentDidMount  組件第一次渲染完成，此時dom節點已經生成，可以在這里調用ajax請求，返回數據setState后組件會重新渲染

    componentDidMount() {
            const elem = this.refs.editorElem
            const editor = new E(elem)
            editor.customConfig.onchange = html => {
                this.setState({
                    editorContent: html
                },()=>{
                })
            }
            editor.customConfig.menus = [
                'head',  // 標題
                'bold',  // 粗體
                'fontSize',  // 字號
                'fontName',  // 字體
                'italic',  // 斜體
                'underline',  // 下划線
                'foreColor',  // 文字顏色
                'list',  // 列表
                'justify',  // 對齊方式
                'quote',  // 引用
                'emoticon',  // 表情
                'undo',  // 撤銷
                'redo'  // 重復
            ]
            editor.create()
            this.editor = editor
            this.getFindDate()
        }

　　4.設置文本內容

 this.editor.txt.html(this.state.editorContent)

 this.editor 在構建完富文本后 作為一個變量存儲 可在當前頁面全局訪問到

this.editor.txt.html(內容)
每次設置會觸發 editor.customConfig.onchange
頁面內容即時顯示