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
頁面內容即時顯示