這個 bug，硬是讓我折騰了一周

愿世間 bug 溫柔對待于我吧，求求了...

大家好，我是 Chocolate。

這一周下來幾乎都在折騰 bug，別說了，有一丟丟寒酸，頭發(fā)那不是一根一根掉，那是一把一把掉落。不過就在今天算是解決了大的問題，只剩下小問題了，后續(xù)優(yōu)化一下就差不多了。

閑聊

開頭還是閑聊會，感覺也挺巧的，上周就收到微信通知晚餐會免費了，這周就為了這個改 bug 加班了幾天，免費的晚餐雖然很香，但剛開始排隊還真的等了接近半個小時才打到飯。

當我端到飯的時候，已經(jīng)處于饑餓狀態(tài)了。連忙干飯，干完飯就回家了。

接到的需求

下面來說說這個困擾我一周的需求吧，當時接到的就是將用戶反饋一些信息的頁面，原本是 textArea 的文本輸入框，發(fā)現(xiàn)用戶需要提供一些圖片輔助說明的時候，不是很方便，原本是采用附件上傳的形式。

原本這個附件上傳的方式有多麻煩呢，直接對比看 QQ 截圖以及微信截圖，我們截圖了之后就可以直接粘貼到輸入框，然后發(fā)送給別人，這樣就很方便。但是附件的話，我截圖了之后還要保存到本地，可能保存在桌面，或者其它地方，然后再點擊附件上傳按鈕上傳圖片或者文件。

對于用戶來說體驗不是很好，還有一點不足的是附件上傳就不能保持排版了，比如用戶輸入了一段文字，然后這段文字是介紹接下來圖片里面的問題，然后接下來又有一段文字，再接下來又要放一張圖片，那么這個顯示圖片就會有排版問題。

因此需求就是轉(zhuǎn)變成 MarkDown 形式，這樣方便圖片粘貼上傳了，配合騰訊云 COS 對象存儲，獲取上傳之后的圖片地址，在輸入框顯示。

遇到的問題

看起來好像上述需求不是很難，關鍵點在于調(diào)用騰訊云那邊的 COS 就好了，返回圖片地址。

但是我還是遇到了問題，首先是我上傳了之后，那個請求會一直 403，我感覺好奇怪，怎么一直 403 呢？

因為在此之前其它項目代碼倉庫有使用過 COS，所以參考了一下，發(fā)現(xiàn)存儲桶的相關配置，比如 SecretId、SecretKey 以及 Bucket 和 Region 等都是從后端接口那邊獲取的，沒有看到相關字符串。

其實這個需求點之前是我工作導師做的，不過做了好久了，他說都忘記怎么做了，當我詢問這個問題的時候，他和我說你可以用你自己的 COS 試一下。

好，試試就試試，我拿著手機掃了騰訊云官網(wǎng)的二維碼，注冊了一個個人的 COS，把所有的訪問權(quán)限都打開了，然后改了改現(xiàn)在的代碼，居然成功實現(xiàn)了！

首先是我在編輯器粘貼之后成功獲取了圖片地址，并且可以顯示出來，不過當我上傳當前表單的時候，又有問題了，在接收方那邊無法正常顯示。

我就奇了怪了，我這邊不是正常顯示出來了嘛，我感覺有點不對勁了，直接上號滴滴組內(nèi)產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理和我導師討論一下這個需求，當時導師就在線上滴滴了我，說這個不能用 MarkDown，因為處理這個需求的那邊頁面不支持，只有我們官網(wǎng)這邊可以正常顯示，并且你提交過去必須按照他們那邊的格式提交，那邊項目比較老，不支持 MarkDown 形式，推薦你用富文本編輯器。

這里補充一下：雖然我已經(jīng)轉(zhuǎn)正成為正式員工了，本文中多次提及了導師這個詞，但是平常我基本上不喊導師的哈哈哈，他是我們組內(nèi)大牛，向大佬學習。

轉(zhuǎn)變需求

于是乎，我之前寫的大部分代碼就需要重寫了，有些包導入的可能要刪去了，把原本使用公司封裝好的 MarkDown 編輯器給刪掉了。

到網(wǎng)上搜了搜關于 React 比較好用的富文本編輯器，當時搜到了 Braft Editor，美觀好用的 React 富文本編輯器，而且是基于 DraftJS，具有強拓展性。

https://braft.margox.cn/

當時看到了強拓展性和基于 DraftJS，我覺得就已經(jīng)可以了，因為對于我這個需求來說的話，不需要很多其它按鈕，比如下劃線呀，加粗，字體變大變小，插入其它等等。

另外一點是， 我看到了這個基于 DraftJS，因為看了之前 MarkDown 也是基于 DraftJS 這個來做的，我想應該還可以的。

不過在做的時候發(fā)現(xiàn)，我上傳的圖片和文字會有排版問題，而這個庫對于這個轉(zhuǎn)換不是很好（或許也是我自己找不到解決方式），并且這個文檔總感覺差點味道，折騰兩天樣子還是沒有結(jié)果，想了想，還是不能卡在這里了。

于是我又換了思路，在網(wǎng)上繼續(xù)搜索有沒有比較好的富文本編輯器，文檔也會更加全面的，我記得是從掘金的一篇文章了解到的，好像正是這個富文本編輯器作者發(fā)布的。官網(wǎng)地址如下：

https://www.wangeditor.com/

爭做國內(nèi)使用體驗Z好的開源 Web 富文本編輯器！

上面是官網(wǎng)看到的一句話，而且這個編輯器是有團隊來開發(fā)的，很有開源精神！

最后到周五的時候，我總算是解決了難點問題，具體情況如下：

最開始看那個封裝好的 COS 代碼，在上傳之前有 getAuthorization 這個操作，需要獲取簽名，但是當我們調(diào)用 cos.putObject 方法上傳文件的時候，我發(fā)現(xiàn)居然是 XML 形式，這個上傳地址無法在富文本編輯器正確顯示，但是又能在處理這個需求的那邊頁面正確顯示。

于是，我得解決當前輸入框內(nèi)粘貼圖片之后的顯示問題。后面了解到，可以根據(jù) key 獲取對應的真實圖片 Url，倒是解決了這個問題。

再遇問題

可怕，又遇到了問題，雖然這個圖片能夠在發(fā)送方和接收方正確顯示了，但是當我在提交之后的顯示詳情頁面，點擊我之前上傳的圖片的時候，發(fā)現(xiàn)會有跳轉(zhuǎn)一個新的瀏覽器標簽頁，我以為是正常的預覽圖片頁，但沒想到的是居然是下載的形式。

我百思不解，于是去了騰訊云官網(wǎng)瞧了瞧，發(fā)現(xiàn)運維那邊配置的存儲桶域名格式是為 JSON 版本域名。

鏈接如下：

https://cloud.tencent.com/document/product/436/30740而這個 JSON 版本域名生成的鏈接就是會訪問彈出下載的窗口，官網(wǎng)也是強烈推薦升級到最新版的控制臺，看來這個問題得找運維來解決了。

思考

也許這個問題找運維可能一下就解決了，但是可能又解決不了，就是我目前不清楚是否可以得到允許升級這個控制臺，另外要考慮的是這個升級會不會對其它已經(jīng)生成的圖片有影響等等，如果就為了我這個小點而升級卻不兼容以前版本的話，估計不會讓我升級。

不是上文有提及說這個可以通過 key 來獲取對應的真實圖片地址嘛，那么是不是可以這樣解決呢？

本周關于這個需求是做到這個點了，還有的事情就下周再說啦。

周五準備部門的團建，出發(fā)去珠海海洋王國游玩兩天~

不過到今天我也是游玩回來了，現(xiàn)在正是補充之前還未寫完的這篇博客，下一篇會聊聊在珠海游玩的一些想法，還有一些照片啦。

結(jié)尾

本篇文章就到此結(jié)束啦，每隔一段時間寫寫隨筆，如果你有觸動的話，可以幫我點點贊，這樣我就知道有一批默默關注著我的小伙伴啦。

喜歡我的文章可以點點關注，下次我們還能遇見，關注就是最大的動力啦。

我是「一百個Chocolate」，一位獅子座的程序員，堅持寫博客的第 4 年，座右銘：學如逆水行舟，不進則退。

今天是 1024，就祝各位程序員們少點 bug，升職加薪，遇到心儀的另一半，走上人生巔峰！