【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
页面内容即时显示