大家比較關心的新蜂商城 Vue3 版本目前已經開發了大部分內容，相信很快就能夠開源出來讓大家嚐鮮了，先讓大家看看當前的開發進度：  開源倉庫地址為 [https://github.com/newbee-ltd/newbee-mall-vue3-app](https://github.com/newbee-ltd/newbee-mall-vue3-app)，升級完成後，程式碼會全部放在這個倉庫中，感興趣的可以先關注一下。不過還有些東西需要再完善一下，所以這篇文章就寫點兒其他內容了。 ## 正文 在開源專案達到一定規模時，社群就會給出非常多的反饋，想要開源保持長久的生命力和正向的影響力，定期維護和更新是十分必要的。同時，從另一個角度來說，這也是對該開源專案使用者負責。 [新蜂商城 ](https://github.com/newbee-ltd/newbee-mall)專案自 2019 年 10 月開源到 GitHub 後已經取得了挺多的關注，直接已獲得 5k+ star 和 1.3k 的 fork 數量，過程中也一直修改該開源專案存在的問題，很多問題其實都是使用者提出來的，之後我再去進行修復和優化，此次修改的是商品詳情編輯器。  新蜂商城開源專案的重要節點： --- #### 2020.3 ~ 2020.5 前後端分離版本開源 - 開發 newbee-mall 前後端分離版本，前端為 Vue 技術棧 - newbee-mall-vue-app 專案正式開源 - 修復了部分 bug #### 2019.11 ~ 2020.2 程式碼優化及 bug 處理 - 修復 SQL 注入問題 - 修復“訂單相關的請求未攔截登陸狀態”的問題 - 程式碼及註釋的整理 - 新增全域性異常處理 - 購物項數量驗證邏輯修改 - 下架商品的訪問限制和下單限制 #### 2019.8 ~ 2019.10 新蜂商城正式開源 - 開發 newbee-mall 專案 - newbee-mall 專案正式開源 #### 2018.10 構思新蜂商城專案 --- ## 本次更新內容 更新記錄大家可以在倉庫的提交歷史中檢視：  此次更新主要是商品編輯頁面的修改，包括頁面排版更新、KindEditor 富文字編輯器刪除和 wangEditor 富文字編輯器引入、後端圖片上傳介面修改和 SQL 檔案的調整。 原編輯頁面如下圖所示：  更新後商品編輯頁面如下圖所示：  更換富文字編輯器，其實只修改程式碼就可以，為什麼 SQL 語句也要更改，後面我會解釋。 ## 為什麼做這次更新？  主要有以下三個原因： - **KindEditor 富文字編輯器長時間沒有維護更新** 大家可以點開 KindEditor 編輯器的[ 開源倉庫提交記錄 ](https://github.com/kindsoft/kindeditor/commits/master)看一看，已經是一個長時間無維護更新的狀態了，看了更新記錄，很多都是 2016 年和 2017 年的更新，開發 [newbee-mall](https://github.com/newbee-ltd/newbee-mall) 專案的時候是 2018 年底，所以當時也沒有覺得特別彆扭。 而現在，是在 2020 年底，這個時間跨度有點長了。 - **收到了很多關於編輯器的問題反饋** 長時間未更新、各種瀏覽器卻一直進行版本更新、再加上現在有些瀏覽器預設也不再開啟 Flash，導致現在使用 KindEditor 編輯器會出現一些奇怪的問題。 我也修改過一部分問題，但是新的問題依然存在，相容問題、圖片上傳問題等等，每過一段時間就會有使用 [newbee-mall](https://github.com/newbee-ltd/newbee-mall) 專案的朋友向我反饋問題。 - **wangEditor 富文字編輯器重啟更新，V4 版本釋出** 問題很多，導致我之前也想過使用其他編輯器，但是並沒有找到特別合適的，幾個好用的編輯器也是和 KindEditor 一樣的狀態，很久不更新了，所以就沒有更改。剛好前幾天看到 wangEditor 編輯器的作者發文[【長文】wangEditor V4.0 探索以團隊的形式做開源專案](https://juejin.im/post/6882522512861691912)，才知道 2020 年 wangEditor 編輯器又重啟更新，因此決定更新一下 [newbee-mall](https://github.com/newbee-ltd/newbee-mall) 專案的商品詳情編輯器。 之前 wangEditor 也是很久沒維護更新，看到作者的文章才知道又開始維護了，以下是作者的敘述： > 特別是到了 2017 - 2018 年，自己實在是沒有業餘時間，所以就停止維護了。所以，在 V4 沒有釋出之前，大家看 github 程式碼的更新時間，都在 2 年之前了。對此我只能表示很無奈，不甘心，但又沒辦法。 > 2020 年春天，我從滴滴離職，業餘時間就多一些了。我就想著把這個專案再重新做起來，於是就這樣做了幾個月，才有了現在的 V4 版本釋出。 看到文章的當天下午，我就去看了一下 wangEditor 專案的開源倉庫和使用文件，之後就把 wangEditor 整合進 [newbee-mall](https://github.com/newbee-ltd/newbee-mall) 專案裡，速度也算是比較快的了，測試完成後，於 2020.10.14 號將所有修改後的程式碼上傳至 GitHub 開源倉庫。 ## wangEditor 富文字編輯器的一個小問題 整合過程還是比較順利的，因為使用文件比較清晰，主要是兩個問題花了些時間： - 一是檔案上傳程式碼需要重新寫 - 二是編輯器在初始化時只會處理帶有 html 標籤的字串，無 html 標籤的字串不會初始化到編輯器中 這裡主要說一下第二個問題，如下圖所示：  我們需要將 div1 初始化為編輯器模組，div1 中有兩個字串，一個帶有 p 標籤，一個不帶 p 標籤，初始化後只有帶著 p 標籤的字串出現在編輯器中，而不帶有 p 標籤的字串則出現在編輯器外。 對應到 newbee-mall 的商品詳情編輯頁面，就會出現下圖中的情況：  想要編輯商品詳情時，有些內容會出現在編輯器的外面。 我一開始以為我程式碼寫錯了，找問題找了一會兒，但是沒發現哪裡寫錯了。後面點了幾個其他商品詳情，我發現有的是正常的，有的是不正常的，而正常的就是有 html 標籤的，不正常的都是這種純字串的，於是我把幾個有問題的字串包上 p 標籤之後，一切正常了。 這個時候，我就想到，可能是 wangEditor 編輯器可能不支援這種純字串的內容，於是我到 wangEditor 的開源倉庫中提了一個 issue：  該 issue 地址為：[https://github.com/wangeditor-team/wangEditor/issues/2283](https://github.com/wangeditor-team/wangEditor/issues/2283) wangEditor 編輯器的作者 @wangfupeng 也很快回復了這條 issue：  想要渲染進編輯器中，必須要使用標籤包裹，否則可能會出現額外的問題，暫時不支援該功能。 得到這個回覆之後，我也就沒繼續追問下去，已經說得很清楚了，為了避免出現其他問題，所以要遵循一些規則，在 wangEditor 富文字編輯器支援該功能之前，我們儘量把需要初始化到編輯器中的內容欄位，保證用 html 標籤包裹。 而新蜂商城專案中的商品詳情欄位有很多都是純字串內容，由於專案中使用了 wangEditor 富文字編輯器，所以要對這些內容做一些修改去“適配”，於是我重新修改了 SQL 檔案中的商品詳情欄位，對沒有標籤的資料進行修改，加上 html 標籤:  這也是為什麼在修改了程式碼之後，還要修改 SQL 語句的原因：  ## 總結 好的，本次更新相關事宜已經介紹的差不多了，大家有什麼問題也可以給我留言。後面有時間的話，我會繼續整理一些 wangEditor 富文字編輯器的使用事項分享給大家。 另外，也有一點點小感慨，分享一下，勿噴，哈哈哈哈。 - 越來越覺得做開源不是一個很輕鬆的活兒，甚至覺得有些繁瑣有些麻煩 - 能堅持維護更新開源專案的作者都值得一個大拇指，希望我也能一直堅持下去 - [wangEditor](https://github.com/wangeditor-team/wangEditor) 是一個很棒的富文字編輯器，如果專案中需要整合富文字編輯器的話，一定要嘗試一下 >除註明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的