wangEditor富文本编辑器使用

官网链接 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

由于使用公司封装的富文本编辑器不太好使（小声bb），摸索了一个好用的富文本编辑器

npm install wangeditor --save

在componentDidMount中声明使用

    const elemMenu = document.getElementById('editorElemMenu');
    const elemBody = document.getElementById('editorElemBody');
    const editor = new Editor(elemMenu, elemBody);
    (editor as any).config.zIndex = 0;
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    editor.config.onchange = () => {
      const kmContent = editor.txt.html();
      const kmContentText = editor.txt.text();
    };
    editor.config.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'video', // 插入视频
      'code', // 插入代码
      'undo', // 撤销
      'redo', // 重复
    ];
    editor.config.uploadImgShowBase64 = true;
    editor.create();

在组件中使用

                <div
                  id="editorElemMenu"
                  style={{ backgroundColor: '#f1f1f1', border: '1px solid #ccc' }}
                  className="editorElemMenu"
                />
                <div
                  style={{
                    height: 270,
                    border: '1px solid #ccc',
                    borderTop: 'none',
                  }}
                  id="editorElemBody"
                  className="editorElem-body"
                />