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