「newbee-mall新蜂商城開源啦」 頁面優化，最新版 wangEditor 富文字編輯器整合案例

大家比較關心的新蜂商城 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 是一個很棒的富文字編輯器，如果專案中需要整合富文字編輯器的話，一定要嘗試一下

除註明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。