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

我是13發表於2020-11-02

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

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

相關文章