React中如何集成添加wangeditor富文本编辑器

 

constructor(props) {
    super(props);
    this.editorElem = React.createRef();
}

react 中 初始化 wangeditor 

componentDidMount() {
    this.initWangEditor();
}

配置wangeditor 

initWangEditor() {
    const elem = this.editorElem.current;
    const editor = new E(elem);
    this.editor = editor;
    editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      // 'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      // 'backColor', // 背景颜色
      // 'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      // 'emoticon', // 表情
      'image', // 插入图片
      // 'table', // 表格
      // 'video', // 插入视频
      // 'code', // 插入代码
      'undo', // 撤销
      'redo', // 重复
    ];
    editor.create();
  }

 如何设置及读取wangeditor编辑内的图文内容：

// 读取文章内容
this.editor.txt.html();

// 设置文章内容
this.editor.txt.html('文章内容')