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

自己的筆記，在使用braft-editor遇到的或感覺(jué)可能別人會(huì)遇到的坑，希望能有一點(diǎn)幫助。

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

這里，我之前按照官網(wǎng)寫(xiě)的，用的null，在結(jié)合antd上傳時(shí)，遇到了Cannot read property 'getSelection' of null的報(bào)錯(cuò)。

image.png

在結(jié)合源碼debugger之后，發(fā)現(xiàn)傳過(guò)去的editorState對(duì)象是空。

其原因?yàn)椋河捎谥癳ditorState初始化是null，其創(chuàng)建是在文本改變之后，第一次在未創(chuàng)建editorState對(duì)象時(shí)，調(diào)用上傳圖片回調(diào)，此時(shí)，必然也是null，故報(bào)錯(cuò)。

2、braft-editor默認(rèn)會(huì)將圖片轉(zhuǎn)為base64，不想轉(zhuǎn)，需要自定義圖片上傳按鈕
extendControls、controls都可以實(shí)現(xiàn)自定義按鈕
上傳可以用antd的upload，braft-editor官網(wǎng)有結(jié)合antd的upload的例子

3、使用官網(wǎng)例子，創(chuàng)建帶antd upload的富文本時(shí)，出現(xiàn)的兩個(gè)常見(jiàn)錯(cuò)誤
（1）沒(méi)有braft-utils、braft-finder包
這兩個(gè)包需要自行安裝，官網(wǎng)文檔沒(méi)提。

  npm i braft-utils --save
  npm install braft-finder --save

安裝包后，我們神奇的發(fā)現(xiàn)，這倆包還是不能使用

image.png

原因：上面裝的兩個(gè)包是js的包，可以自行去裝ts的包或者通過(guò)配置實(shí)現(xiàn)

react配置：在src下，創(chuàng)建或修改react-app-env.d.ts文件

image.png

在文件中添加：

    declare module 'braft-utils'
    declare module 'braft-finder'

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

image.png

【解決方案】ts報(bào)錯(cuò)，在定義extendControls處，加一個(gè)：any
【修改前】

image.png

image.png

以上就是這次總結(jié)的坑。

ps：官網(wǎng)列子中，新增圖片按鈕使用了Icon組建，這個(gè)在現(xiàn)在項(xiàng)目中是沒(méi)有的，自行換一個(gè)圖標(biāo)。