大家比較關心的新蜂商城 Vue3 版本目前已經開發了大部分內容，相信很快就能夠開源出來讓大家嘗鮮了，先讓大家看看當前的開發進度：
開源倉庫地址為 https://github.com/newbee-ltd/newbee-mall-vue3-app，升級完成后，代碼會全部放在這個倉庫中，感興趣的可以先關注一下。不過還有些東西需要再完善一下，所以這篇文章就寫點兒其他內容了。
正文
在開源項目達到一定規模時，社區就會給出非常多的反饋，想要開源保持長久的生命力和正向的影響力，定期維護和更新是十分必要的。同時，從另一個角度來說，這也是對該開源項目使用者負責。
新蜂商城 項目自 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 編輯器的 開源倉庫提交記錄 看一看，已經是一個長時間無維護更新的狀態了，看了更新記錄，很多都是 2016 年和 2017 年的更新，開發 newbee-mall 項目的時候是 2018 年底，所以當時也沒有覺得特別別扭。
而現在，是在 2020 年底，這個時間跨度有點長了。
- 收到了很多關於編輯器的問題反饋
長時間未更新、各種瀏覽器卻一直進行版本更新、再加上現在有些瀏覽器默認也不再開啟 Flash，導致現在使用 KindEditor 編輯器會出現一些奇怪的問題。
我也修改過一部分問題，但是新的問題依然存在，兼容問題、圖片上傳問題等等，每過一段時間就會有使用 newbee-mall 項目的朋友向我反饋問題。
- wangEditor 富文本編輯器重啟更新，V4 版本發布
問題很多，導致我之前也想過使用其他編輯器，但是並沒有找到特別合適的，幾個好用的編輯器也是和 KindEditor 一樣的狀態，很久不更新了，所以就沒有更改。剛好前幾天看到 wangEditor 編輯器的作者發文【長文】wangEditor V4.0 探索以團隊的形式做開源項目，才知道 2020 年 wangEditor 編輯器又重啟更新，因此決定更新一下 newbee-mall 項目的商品詳情編輯器。
之前 wangEditor 也是很久沒維護更新，看到作者的文章才知道又開始維護了，以下是作者的敘述：
特別是到了 2017 - 2018 年，自己實在是沒有業余時間，所以就停止維護了。所以，在 V4 沒有發布之前，大家看 github 代碼的更新時間，都在 2 年之前了。對此我只能表示很無奈，不甘心，但又沒辦法。
2020 年春天，我從滴滴離職，業余時間就多一些了。我就想着把這個項目再重新做起來，於是就這樣做了幾個月，才有了現在的 V4 版本發布。
看到文章的當天下午，我就去看了一下 wangEditor 項目的開源倉庫和使用文檔，之后就把 wangEditor 整合進 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
wangEditor 編輯器的作者 @wangfupeng 也很快回復了這條 issue：
想要渲染進編輯器中，必須要使用標簽包裹，否則可能會出現額外的問題，暫時不支持該功能。
得到這個回復之后，我也就沒繼續追問下去，已經說得很清楚了，為了避免出現其他問題，所以要遵循一些規則，在 wangEditor 富文本編輯器支持該功能之前，我們盡量把需要初始化到編輯器中的內容字段，保證用 html 標簽包裹。
而新蜂商城項目中的商品詳情字段有很多都是純字符串內容，由於項目中使用了 wangEditor 富文本編輯器，所以要對這些內容做一些修改去“適配”，於是我重新修改了 SQL 文件中的商品詳情字段，對沒有標簽的數據進行修改，加上 html 標簽:
這也是為什么在修改了代碼之后，還要修改 SQL 語句的原因：
總結
好的，本次更新相關事宜已經介紹的差不多了，大家有什么問題也可以給我留言。后面有時間的話，我會繼續整理一些 wangEditor 富文本編輯器的使用事項分享給大家。
另外，也有一點點小感慨，分享一下，勿噴，哈哈哈哈。
- 越來越覺得做開源不是一個很輕松的活兒，甚至覺得有些繁瑣有些麻煩
- 能堅持維護更新開源項目的作者都值得一個大拇指，希望我也能一直堅持下去
- wangEditor 是一個很棒的富文本編輯器，如果項目中需要集成富文本編輯器的話，一定要嘗試一下
除注明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利。