editor富文本編譯器

㈠ 記一下在react中使用braft-editor富文本編輯器踩的坑

【react】、【ts】、【braft-editor】
最近有一個需要使用富文本的需求，在網上找到了braft-editor，這是一個文檔比較全面，使用靈活、簡單的富文本編輯器。具體使用可以參考官方文檔。
braft-editor官網：
https://braft.margox.cn/
集成Ant Design上傳組件：
https://braft.margox.cn/demos/antd-upload

自己的筆記，在使用braft-editor遇到的或感覺可能別人會遇到的坑，希望能有一點幫助。

1、初始化的時候最好創建一個富文本對象，別用null代替
editorState: BraftEditor.createEditorState('<p></p>'), // 富文本對象

這里，我之前按照官網寫的，用的null，在結合antd上傳時，遇到了Cannot read property 'getSelection' of null的報錯。

在結合源碼debugger之後，發現傳過去的editorState對象是空。

其原因為：由於之前editorState初始化是null，其創建是在文本改變之後，第一次在未創建editorState對象時，調用上傳圖片回調，此時，必然也是null，故報錯。

2、braft-editor默認會將圖片轉為base64，不想轉，需要自定義圖片上傳按鈕
extendControls、controls都可以實現自定義按鈕
上傳可以用antd的upload，braft-editor官網有結合antd的upload的例子

3、使用官網例子，創建帶antd upload的富文本時，出現的兩個常見錯誤
（1）沒有braft-utils、braft-finder包
這兩個包需要自行安裝，官網文檔沒提。

安裝包後，我們神奇的發現，這倆包還是不能使用

原因：上面裝的兩個包是js的包，可以自行去裝ts的包或者通過配置實現

在文件中添加：

（2）'{ key: string; type: string; component: Element; }[]' is not assignable to type 'ExtendControlType[]'

【解決方案】ts報錯，在定義extendControls處，加一個：any
【修改前】

以上就是這次總結的坑。

ps：官網列子中，新增圖片按鈕使用了Icon組建，這個在現在項目中是沒有的，自行換一個圖標。