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"
                />