美文网首页
wangeditor编辑器在react中使用

wangeditor编辑器在react中使用

作者: 贞贞姐 | 来源:发表于2019-08-28 19:55 被阅读0次

    编辑器组件

    import React, { Component } from 'react';
    import WangEditors from 'wangeditor';
    
    export default class WangEditor extends Component {
        state={editorContent:{}}
        componentDidMount() {
            const { value, onChange} = this.props;
            const editor = new WangEditors(this.node);
            editor.customConfig.onchange = html => {
                // 传递html editor.txt.html()
                onChange(html);// 当编辑器内容改变时
                this.setState({
                    editorContent: editor.txt.html() // 存到state里面
                });
            };
            editor.customConfig.uploadImgShowBase64 = true; // 图片base64
            editor.create();
            // 设置初始内容
            editor.txt.html(value);
        }
        render() {
            const { editorContent } = this.state; // 把值传给父组件
            return (
                <div>
                    <div onClick={()=>{this.props.getData(editorContent);}} ref={node => this.node = node} />
                </div>
            );
        }
    }
    
    

    调用

    相关文章

      网友评论

          本文标题:wangeditor编辑器在react中使用

          本文链接:https://www.haomeiwen.com/subject/cxtvectx.html