前言

2023年已過大半，備受關注的 OpenTiny*開源之夏活動也順利結項。開源之夏由中國科學院軟件研究所發起的計劃，目的在於鼓勵在校學生積極參與開源軟件的開發維護，推動優秀開源軟件社區的繁榮發展。該活動聯合各大開源社區，聚焦於關鍵開源軟件的開發與維護，向全球高校學生開放報名。學生可自主選擇感興趣的項目進行申請，一旦中選，他們將在經驗豐富的項目開發者（社區導師）的指導下進行開發。根據項目的難易程度和完成情況，表現出色的參與者將獲得開源之夏活動獎金和結項證書。

回顧整個過程，OpenTiny 項目共建者和導師們共同經歷了許多挑戰和困難，但他們始終敢於突破，勇於實踐，不斷開拓新的思路和想法。最終，他們成功完成了“開發 OpenTiny 富文本編輯器組件”這一重要項目。

現在，讓我們一起了解開源項目共建者——常浩同學是如何完成“OpenTiny 富文本組件的開發”這一任務的。他的經驗和思路無疑也對咱們想要參與開源共建的朋友們提供了寶貴的啓示和思路。

專訪詳情

OpenTiny： 歡迎你加入咱們 OpenTiny 開源社區，可以先簡單介紹下你自己嗎？

常浩： 大家好，我叫常浩，來自西安郵電大學，我是從大二開始接觸前端的，2023年2月在網易有道有一段實習的經歷。目前對於前端屬於一個初步瞭解和學習的階段。

OpenTiny： 你是從什麼時候開始接觸開源社區的，你眼中的開源是什麼樣的？

常浩： 我是2022年開始接觸開源社區和開源項目的，主要是從同學那邊瞭解到的。由於我去年接觸的時間比較晚，所以當時沒有選到自己比較感興趣的前端項目，嘗試了一個非前端領域相關的基於 python 的一個自動化構建的一個項目。今年由於有了經驗，就提前做好準備，就希望在開源之夏找到一些和前端領域相關的項目。

我眼中的開源就前端領域而言，我覺得是一羣技術非常到位的大佬們，從技術層面去構建一個項目並達到一些產出，去幫助到更多人去使用去提效。

OpenTiny： 最開始是如何瞭解到並決定參與 OpenTiny*開源之夏活動的？

常浩： 由於我是學的是前端，對前端領域的相關知識我是瞭解的，所以當有了開源之夏這個活動後，我就搜索了 Vue 框架、組件庫相關的內容，然後我就看到 OpenTiny。之後我就去官網瞭解了 OpenTiny 具體是什麼，大概結構是什麼樣的。除此之外，還有一個比較吸引我的點是在於“富文本”這三個字比較吸引我。因為我之前是在項目中是使用過富文本。因此這個富文本的構造及一整套流程還是非常吸引我。並且看到 OpenTiny 有富文本組件的項目，當時就決定要去深入學習和調研下。然後根據 OpenTiny 項目的要求做了基於兩個代碼庫的 Demo,嘗試去申請報名。

OpenTiny： 你覺得 OpenTiny 是什麼？你為什麼會選擇參與 OpenTiny 項目呢？

常浩： 其實在我參與之前，我對於 OpenTiny 瞭解並不多，但我知道它是包含有組件庫的。據我瞭解 OpenTiny 是一個新開源的組件庫項目，因為在市場上已經有一些成熟的組件庫了，我認為它能再站出來走組件庫這條路，來源於它在技術層面及內容層面是很有特點的。比如説裏面組件非常多，比我見過的所有的組件庫的組件都多。除此之外，還包含 Vue2/Vue3 的兼容，還有跨 React 框架這些內容，並且還包括了低代碼引擎等內容。我就感覺在技術層面是很有前瞻性的。這些點也激勵我想來參與 OpenTiny 項目的共建。

對於 OpenTiny 的多個項目中我選擇富文本組件，主要是因為我對於富文本組件還是比較感興趣的。因為它雖然是嵌套在網頁裏的小功能，但我覺得它也是屬於一個完整的獨立的項目，能夠從使用它到研發它，就覺得這個很吸引我。也希望通過參與項目 push 自己去學習探索或者説實現它，之前可能是停留在好奇的階段。

OpenTiny： 你覺得在 OpenTiny 中寫一個富文本組件和在 Vue 裏面去封裝一個富文本組件有什麼不同？

常浩： 如果是我自己去封裝一個富文本組件的話，可能在規範上就比較簡單了。如果是 OpenTiny 開源項目的話，它會有一些固定的規範，這個對於我在後續實操寫代碼中，讓我對代碼規範有了更加清晰和明確的認知。比如説：整個 OpenTiny 是一個大工程，在這個大工程之下又有很多子包，每一個子包又是一個獨立的工程，可以單獨打包發佈。所以在整個工程下就會有相應的規範，這個就讓我瞭解了一些代碼規範的原理和邏輯。

OpenTiny： 你可以介紹下你參與 OpenTiny 項目的開發的內容及過程嗎？

常浩： 參與這個項目，我需要做的是基於 Tiptap 開源無頭編輯器實現富文本組件的相應的一些功能。包含基本的加粗、斜體、顏色、標題、行高、列表、引用等格式；插入圖片/視頻及調整大小；插入/編輯超鏈接和鏈接卡片；插入行內代碼、代碼塊；撤銷重做、清除樣式；插入/編輯表格等

因此，我首先通過調查 Tiptap 文檔，掌握 Tiptap 的基本用法，自定義擴展用法，實現本地 Demo,掌握對齊增加行高功能，增加字號選擇，增加代碼塊支持高亮，實現 table 交互效果等，完成組件設計結構，接着我又開始熟悉 TinyVue 組件庫的項目規範，進行富文本組件開發，基本實現預期功能；再進一步進行結構的梳理，組件代碼的完善，實現 Vue2/Vue3 版本兼容，主題一致，最終新增組件 rich-text-editor,達到了最終的實現效果：

OpenTiny： 在開發過程中有遇到什麼困難或者挑戰嗎？你是如何克服的呢？導師和社區成員有為你提供幫助嗎

常浩： 在開發過程中確實會遇到一些問題，但我們導師是非常熱心幫我解答，並且一起參與討論。

問題1：之前在對 tiptap/core 包的引入問題，基於 Vue 2還是 Vue 3版本需要引入不同的代碼存在疑惑
結論：初期討論，寫一個 virtual-template，利用 vite 的 rollup 提供的 transfrom 在代碼編譯階段，利用環境變量進行導入語句確定
最終採用別名映射也能達到同樣效果，代碼量小，且不會影響其他模塊

問題2：樣式衝突問題，已有的樣式會對目標構建樣式產生影響，例如無序列表沒有符號，任務列表沒有符號
結論：在控制枱拿到樣式表，在 style 文件進行逐一覆蓋

問題3：通過 v-if 實現簡單字符串匹配參數，來固定顯示靜態資源裏的 icon，大量的v-if使得代碼不優雅，然後要實現可以讀取使用者傳入的參數的 icon 靜態資源，所以需要重構代碼。

結論：將對應功能對應的事件和 icon 保存到 map 對象裏，在模版處會用字符串參數去拿對應的 map 裏存入的事件及 icon，使用者傳入的 props 裏是對象數組，則會使用對象裏的 icon，沒有對應 icon 則使用默認的 map 對象中保存的 icon

OpenTiny： 你認為在開發 OpenTiny 項目的過程中，最有意思的地方是什麼？

常浩： 我認為比較有意思的地方在於在打包項目時需要完成 Vue2/Vue3的兼容，這個時候我是用到了一個基於 vite 的虛擬模板的插件，基於插件做判斷引入哪個包，因此我又瞭解 vite 是基於 Rollup 的打包工具，從中又瞭解到 transform 的一個鈎子函數，又瞭解鈎子函數的用法，相當於是從編譯之後的打包那一步起，在打包過程中去確定引入哪個包，我覺得這個機制是蠻有意思的。

當然除此之外，在我剛接觸項目時，把項目克隆下來，發現項目很大並且很多文件都不認識，然後導師帶着我去閲讀每個工程項目是什麼，講的非常詳細。這個也是我覺得比較有意思的地方，因此我也學到了很多。

OpenTiny： 你眼中的 OpenTiny 是個什麼樣的開源社區？

常浩： 首先我感覺社區成員和導師是非常有活力的，我能從導師身上感受到活力，以前我也沒有想過自己能成為某個開源項目的共建者，因為自己也還是一個初出茅廬的學生，但現在在某個層面有感受到被重視的感覺。然後我覺得 OpenTiny 社區裏面有很多技術比較厲害的人，我能加入進來，感覺很榮幸。總體而言，我感覺 OpenTiny 社區是非常有活力的並且有想法的。進到咱們的官網也能看到，裏面組件非常多非常豐富，大家就是會想方設法去提供一個非常全面的功能，我感覺是很好的。

OpenTiny： 那你之後是否打算繼續參與開源社區或者開源項目？

常浩： 嗯，這個會的，其實我對開源這個羣體還是很敬佩的，他們屬於技術的頂尖，也站在精神的頂尖。我希望之後還是能持續在前端組件庫這個領域去做開源貢獻。其實比如説市面上的組件庫 elementUI 等，它們已經比較成熟了，但在使用過程中還是會出現二次封裝的需求。然後我覺得 OpenTiny 的 TinyVue 組件庫的話會想着無限接近於我想要的二次封裝之後的要求。當我在需要用到某個組件時，我發現 OpenTiny 社區裏有二次封裝之後能達到我功能預期的一些組件，我覺得這個是很好的。

OpenTiny： 你參與了 OpenTiny 項目共建之後，你覺得你有什麼收穫呢？

常浩： 我覺得主要是有兩個方面，第一個是從前端組件庫整體結構的一個層面，讓我瞭解了這些前端技術從如何構建、打包、發佈等的一整套流程。也讓我學到了 TinyVue 組件庫的整體架構，比如某個文件夾內容放什麼，順序怎麼樣，怎麼做調整都是很巧妙和精彩的。第二個在技術層面，也讓我對於富文本更加了解了，包含代碼庫的整體的模式，以及怎樣通過一些 render 函數、一些 options 等等方法設置快捷鍵的技術知識等等。

OpenTiny： 根據你的經驗，你覺得怎樣才能更好的融入開源社區呢？

常浩： 就我自己的經驗而言，由於我之前對於這個項目是比較期待的，並且內心期望希望能把這個項目做好。所以我剛開始進度是比較緩慢的，因為我開始確實想了很多，並且我也是很費盡心思的去想，同時由於我也是學生，當前的能力也有限，所以我想的和實際能做好的可能並不能很一致。當時進度就比較慢，後面導師告訴我一句話——“完成比完美更重要”。這句話確實讓我印象非常深刻，並且在當時的情況下，我自己的狀態並不是太好，就是因為導師告訴我的這句話，對我有一個開導作用，調整了我的狀態。所以很快，我也進入了開發狀態，根據自己制定的項目規劃時間表，一步一步去完成我的項目。

所以我覺得這句話也可以送給大家——“完成比完美更重要”，只要有想法了，就可以先行動，一步一步來總會達到你想要的效果。

關於 OpenTiny

OpenTiny 是一套企業級 Web 前端開發解決方案，提供跨端、跨框架、跨版本的 TinyVue 組件庫，包含基於 Angular+TypeScript 的 TinyNG 組件庫，擁有靈活擴展的低代碼引擎 TinyEngine，具備主題配置系統TinyTheme / 中後台模板 TinyPro/ TinyCLI 命令行等豐富的效率提升工具，可幫助開發者高效開發 Web 應用。

歡迎加入 OpenTiny 開源社區。添加微信小助手：opentiny-official 一起參與交流前端技術～更多視頻內容也可關注B站、抖音、小紅書、視頻號

OpenTiny 也在持續招募貢獻者，歡迎一起共建

OpenTiny 官網：https://opentiny.design/

OpenTiny 代碼倉庫：https://github.com/opentiny/

TinyVue 源碼：https://github.com/opentiny/tiny-vue

TinyEngine 源碼： https://github.com/opentiny/tiny-engine

歡迎進入代碼倉庫 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以進入代碼倉庫，找到 good first issue標籤，一起參與開源貢獻~