前言

2023年已過大半，備受關(guān)注的 OpenTiny*開源之夏活動(dòng)也順利結(jié)項(xiàng)。開源之夏由中國(guó)科學(xué)院軟件研究所發(fā)起的計(jì)劃，目的在于鼓勵(lì)在校學(xué)生積極參與開源軟件的開發(fā)維護(hù)，推動(dòng)優(yōu)秀開源軟件社區(qū)的繁榮發(fā)展。該活動(dòng)聯(lián)合各大開源社區(qū)，聚焦于關(guān)鍵開源軟件的開發(fā)與維護(hù)，向全球高校學(xué)生開放報(bào)名。學(xué)生可自主選擇感興趣的項(xiàng)目進(jìn)行申請(qǐng)，一旦中選，他們將在經(jīng)驗(yàn)豐富的項(xiàng)目開發(fā)者（社區(qū)導(dǎo)師）的指導(dǎo)下進(jìn)行開發(fā)。根據(jù)項(xiàng)目的難易程度和完成情況，表現(xiàn)出色的參與者將獲得開源之夏活動(dòng)獎(jiǎng)金和結(jié)項(xiàng)證書。

回顧整個(gè)過程，OpenTiny?項(xiàng)目共建者和導(dǎo)師們共同經(jīng)歷了許多挑戰(zhàn)和困難，但他們始終敢于突破，勇于實(shí)踐，不斷開拓新的思路和想法。最終，他們成功完成了“開發(fā)?OpenTiny?富文本編輯器組件”這一重要項(xiàng)目。

現(xiàn)在，讓我們一起了解開源項(xiàng)目共建者——常浩同學(xué)是如何完成“OpenTiny 富文本組件的開發(fā)”這一任務(wù)的。他的經(jīng)驗(yàn)和思路無疑也對(duì)咱們想要參與開源共建的朋友們提供了寶貴的啟示和思路。

專訪詳情

OpenTiny：?歡迎你加入咱們 OpenTiny 開源社區(qū)，可以先簡(jiǎn)單介紹下你自己?jiǎn)幔?/h1>

常浩：?大家好，我叫常浩，來自西安郵電大學(xué)，我是從大二開始接觸前端的，2023年2月在網(wǎng)易有道有一段實(shí)習(xí)的經(jīng)歷。目前對(duì)于前端屬于一個(gè)初步了解和學(xué)習(xí)的階段。

OpenTiny：?你是從什么時(shí)候開始接觸開源社區(qū)的，你眼中的開源是什么樣的？

常浩：?我是2022年開始接觸開源社區(qū)和開源項(xiàng)目的，主要是從同學(xué)那邊了解到的。由于我去年接觸的時(shí)間比較晚，所以當(dāng)時(shí)沒有選到自己比較感興趣的前端項(xiàng)目，嘗試了一個(gè)非前端領(lǐng)域相關(guān)的基于 python 的一個(gè)自動(dòng)化構(gòu)建的一個(gè)項(xiàng)目。今年由于有了經(jīng)驗(yàn)，就提前做好準(zhǔn)備，就希望在開源之夏找到一些和前端領(lǐng)域相關(guān)的項(xiàng)目。

我眼中的開源就前端領(lǐng)域而言，我覺得是一群技術(shù)非常到位的大佬們，從技術(shù)層面去構(gòu)建一個(gè)項(xiàng)目并達(dá)到一些產(chǎn)出，去幫助到更多人去使用去提效。

OpenTiny：?最開始是如何了解到并決定參與 OpenTiny*開源之夏活動(dòng)的？

常浩：?由于我是學(xué)的是前端，對(duì)前端領(lǐng)域的相關(guān)知識(shí)我是了解的，所以當(dāng)有了開源之夏這個(gè)活動(dòng)后，我就搜索了 Vue 框架、組件庫相關(guān)的內(nèi)容，然后我就看到?OpenTiny。之后我就去官網(wǎng)了解了 OpenTiny 具體是什么，大概結(jié)構(gòu)是什么樣的。除此之外，還有一個(gè)比較吸引我的點(diǎn)是在于“富文本”這三個(gè)字比較吸引我。因?yàn)槲抑笆窃陧?xiàng)目中是使用過富文本。因此這個(gè)富文本的構(gòu)造及一整套流程還是非常吸引我。并且看到 OpenTiny 有富文本組件的項(xiàng)目，當(dāng)時(shí)就決定要去深入學(xué)習(xí)和調(diào)研下。然后根據(jù)?OpenTiny?項(xiàng)目的要求做了基于兩個(gè)代碼庫的 Demo,嘗試去申請(qǐng)報(bào)名。

OpenTiny：?你覺得 OpenTiny 是什么？你為什么會(huì)選擇參與 OpenTiny 項(xiàng)目呢？

常浩：?其實(shí)在我參與之前，我對(duì)于?OpenTiny?了解并不多，但我知道它是包含有組件庫的。據(jù)我了解?OpenTiny?是一個(gè)新開源的組件庫項(xiàng)目，因?yàn)樵谑袌?chǎng)上已經(jīng)有一些成熟的組件庫了，我認(rèn)為它能再站出來走組件庫這條路，來源于它在技術(shù)層面及內(nèi)容層面是很有特點(diǎn)的。比如說里面組件非常多，比我見過的所有的組件庫的組件都多。除此之外，還包含 Vue2/Vue3 的兼容，還有跨 React?框架這些內(nèi)容，并且還包括了低代碼引擎等內(nèi)容。我就感覺在技術(shù)層面是很有前瞻性的。這些點(diǎn)也激勵(lì)我想來參與?OpenTiny?項(xiàng)目的共建。

對(duì)于 OpenTiny 的多個(gè)項(xiàng)目中我選擇富文本組件，主要是因?yàn)槲覍?duì)于富文本組件還是比較感興趣的。因?yàn)樗m然是嵌套在網(wǎng)頁里的小功能，但我覺得它也是屬于一個(gè)完整的獨(dú)立的項(xiàng)目，能夠從使用它到研發(fā)它，就覺得這個(gè)很吸引我。也希望通過參與項(xiàng)目 push 自己去學(xué)習(xí)探索或者說實(shí)現(xiàn)它，之前可能是停留在好奇的階段。

OpenTiny：?你覺得在 OpenTiny 中寫一個(gè)富文本組件和在 Vue 里面去封裝一個(gè)富文本組件有什么不同？

常浩：?如果是我自己去封裝一個(gè)富文本組件的話，可能在規(guī)范上就比較簡(jiǎn)單了。如果是 OpenTiny 開源項(xiàng)目的話，它會(huì)有一些固定的規(guī)范，這個(gè)對(duì)于我在后續(xù)實(shí)操寫代碼中，讓我對(duì)代碼規(guī)范有了更加清晰和明確的認(rèn)知。比如說：整個(gè)?OpenTiny?是一個(gè)大工程，在這個(gè)大工程之下又有很多子包，每一個(gè)子包又是一個(gè)獨(dú)立的工程，可以單獨(dú)打包發(fā)布。所以在整個(gè)工程下就會(huì)有相應(yīng)的規(guī)范，這個(gè)就讓我了解了一些代碼規(guī)范的原理和邏輯。

OpenTiny：?你可以介紹下你參與 OpenTiny 項(xiàng)目的開發(fā)的內(nèi)容及過程嗎？

常浩：?參與這個(gè)項(xiàng)目，我需要做的是基于 Tiptap 開源無頭編輯器實(shí)現(xiàn)富文本組件的相應(yīng)的一些功能。包含基本的加粗、斜體、顏色、標(biāo)題、行高、列表、引用等格式；插入圖片/視頻及調(diào)整大?。徊迦?編輯超鏈接和鏈接卡片；插入行內(nèi)代碼、代碼塊；撤銷重做、清除樣式；插入/編輯表格等

因此，我首先通過調(diào)查 Tiptap 文檔，掌握 Tiptap 的基本用法，自定義擴(kuò)展用法，實(shí)現(xiàn)本地 Demo,掌握對(duì)齊增加行高功能，增加字號(hào)選擇，增加代碼塊支持高亮，實(shí)現(xiàn) table 交互效果等，完成組件設(shè)計(jì)結(jié)構(gòu)，接著我又開始熟悉 TinyVue 組件庫的項(xiàng)目規(guī)范，進(jìn)行富文本組件開發(fā)，基本實(shí)現(xiàn)預(yù)期功能；再進(jìn)一步進(jìn)行結(jié)構(gòu)的梳理，組件代碼的完善，實(shí)現(xiàn) Vue2/Vue3 版本兼容，主題一致，最終新增組件 rich-text-editor,達(dá)到了最終的實(shí)現(xiàn)效果：

OpenTiny：?在開發(fā)過程中有遇到什么困難或者挑戰(zhàn)嗎？你是如何克服的呢？導(dǎo)師和社區(qū)成員有為你提供幫助嗎

常浩：?在開發(fā)過程中確實(shí)會(huì)遇到一些問題，但我們導(dǎo)師是非常熱心幫我解答，并且一起參與討論。

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

問題2：樣式?jīng)_突問題，已有的樣式會(huì)對(duì)目標(biāo)構(gòu)建樣式產(chǎn)生影響，例如無序列表沒有符號(hào)，任務(wù)列表沒有符號(hào)
結(jié)論：在控制臺(tái)拿到樣式表，在 style 文件進(jìn)行逐一覆蓋

問題3：通過 v-if 實(shí)現(xiàn)簡(jiǎn)單字符串匹配參數(shù)，來固定顯示靜態(tài)資源里的 icon，大量的v-if使得代碼不優(yōu)雅，然后要實(shí)現(xiàn)可以讀取使用者傳入的參數(shù)的 icon 靜態(tài)資源，所以需要重構(gòu)代碼。

?結(jié)論：將對(duì)應(yīng)功能對(duì)應(yīng)的事件和 icon 保存到 map 對(duì)象里，在模版處會(huì)用字符串參數(shù)去拿對(duì)應(yīng)的 map 里存入的事件及 icon，使用者傳入的 props 里是對(duì)象數(shù)組，則會(huì)使用對(duì)象里的 icon，沒有對(duì)應(yīng) icon 則使用默認(rèn)的 map 對(duì)象中保存的 icon

OpenTiny：?你認(rèn)為在開發(fā) OpenTiny 項(xiàng)目的過程中，最有意思的地方是什么？

常浩：?我認(rèn)為比較有意思的地方在于在打包項(xiàng)目時(shí)需要完成 Vue2/Vue3的兼容，這個(gè)時(shí)候我是用到了一個(gè)基于 vite 的虛擬模板的插件，基于插件做判斷引入哪個(gè)包，因此我又了解 vite 是基于 Rollup 的打包工具，從中又了解到 transform 的一個(gè)鉤子函數(shù)，又了解鉤子函數(shù)的用法，相當(dāng)于是從編譯之后的打包那一步起，在打包過程中去確定引入哪個(gè)包，我覺得這個(gè)機(jī)制是蠻有意思的。

當(dāng)然除此之外，在我剛接觸項(xiàng)目時(shí)，把項(xiàng)目克隆下來，發(fā)現(xiàn)項(xiàng)目很大并且很多文件都不認(rèn)識(shí)，然后導(dǎo)師帶著我去閱讀每個(gè)工程項(xiàng)目是什么，講的非常詳細(xì)。這個(gè)也是我覺得比較有意思的地方，因此我也學(xué)到了很多。

OpenTiny：?你眼中的 OpenTiny 是個(gè)什么樣的開源社區(qū)？

常浩：?首先我感覺社區(qū)成員和導(dǎo)師是非常有活力的，我能從導(dǎo)師身上感受到活力，以前我也沒有想過自己能成為某個(gè)開源項(xiàng)目的共建者，因?yàn)樽约阂策€是一個(gè)初出茅廬的學(xué)生，但現(xiàn)在在某個(gè)層面有感受到被重視的感覺。然后我覺得 OpenTiny 社區(qū)里面有很多技術(shù)比較厲害的人，我能加入進(jìn)來，感覺很榮幸?？傮w而言，我感覺 OpenTiny 社區(qū)是非常有活力的并且有想法的。進(jìn)到咱們的官網(wǎng)也能看到，里面組件非常多非常豐富，大家就是會(huì)想方設(shè)法去提供一個(gè)非常全面的功能，我感覺是很好的。

OpenTiny：?那你之后是否打算繼續(xù)參與開源社區(qū)或者開源項(xiàng)目？

常浩：?嗯，這個(gè)會(huì)的，其實(shí)我對(duì)開源這個(gè)群體還是很敬佩的，他們屬于技術(shù)的頂尖，也站在精神的頂尖。我希望之后還是能持續(xù)在前端組件庫這個(gè)領(lǐng)域去做開源貢獻(xiàn)。其實(shí)比如說市面上的組件庫 elementUI 等，它們已經(jīng)比較成熟了，但在使用過程中還是會(huì)出現(xiàn)二次封裝的需求。然后我覺得 OpenTiny 的?TinyVue 組件庫的話會(huì)想著無限接近于我想要的二次封裝之后的要求。當(dāng)我在需要用到某個(gè)組件時(shí)，我發(fā)現(xiàn) OpenTiny 社區(qū)里有二次封裝之后能達(dá)到我功能預(yù)期的一些組件，我覺得這個(gè)是很好的。

OpenTiny：?你參與了 OpenTiny 項(xiàng)目共建之后，你覺得你有什么收獲呢？

常浩：?我覺得主要是有兩個(gè)方面，第一個(gè)是從前端組件庫整體結(jié)構(gòu)的一個(gè)層面，讓我了解了這些前端技術(shù)從如何構(gòu)建、打包、發(fā)布等的一整套流程。也讓我學(xué)到了?TinyVue 組件庫的整體架構(gòu)，比如某個(gè)文件夾內(nèi)容放什么，順序怎么樣，怎么做調(diào)整都是很巧妙和精彩的。第二個(gè)在技術(shù)層面，也讓我對(duì)于富文本更加了解了，包含代碼庫的整體的模式，以及怎樣通過一些 render 函數(shù)、一些 options 等等方法設(shè)置快捷鍵的技術(shù)知識(shí)等等。

OpenTiny：?根據(jù)你的經(jīng)驗(yàn)，你覺得怎樣才能更好的融入開源社區(qū)呢？

常浩：?就我自己的經(jīng)驗(yàn)而言，由于我之前對(duì)于這個(gè)項(xiàng)目是比較期待的，并且內(nèi)心期望希望能把這個(gè)項(xiàng)目做好。所以我剛開始進(jìn)度是比較緩慢的，因?yàn)槲议_始確實(shí)想了很多，并且我也是很費(fèi)盡心思的去想，同時(shí)由于我也是學(xué)生，當(dāng)前的能力也有限，所以我想的和實(shí)際能做好的可能并不能很一致。當(dāng)時(shí)進(jìn)度就比較慢，后面導(dǎo)師告訴我一句話——“完成比完美更重要”。這句話確實(shí)讓我印象非常深刻，并且在當(dāng)時(shí)的情況下，我自己的狀態(tài)并不是太好，就是因?yàn)閷?dǎo)師告訴我的這句話，對(duì)我有一個(gè)開導(dǎo)作用，調(diào)整了我的狀態(tài)。所以很快，我也進(jìn)入了開發(fā)狀態(tài)，根據(jù)自己制定的項(xiàng)目規(guī)劃時(shí)間表，一步一步去完成我的項(xiàng)目。

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

關(guān)于 OpenTiny

OpenTiny?是一套企業(yè)級(jí) Web 前端開發(fā)解決方案，提供跨端、跨框架、跨版本的?TinyVue 組件庫，包含基于 Angular+TypeScript 的?TinyNG 組件庫，擁有靈活擴(kuò)展的低代碼引擎?TinyEngine，具備主題配置系統(tǒng)TinyTheme?/ 中后臺(tái)模板?TinyPro/?TinyCLI?命令行等豐富的效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。

歡迎加入?OpenTiny 開源社區(qū)。添加微信小助手：opentiny-official 一起參與交流前端技術(shù)～更多視頻內(nèi)容也可關(guān)注B站、抖音、小紅書、視頻號(hào)

OpenTiny?也在持續(xù)招募貢獻(xiàn)者，歡迎一起共建

OpenTiny 官網(wǎng)：https://opentiny.design/

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

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

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

歡迎進(jìn)入代碼倉庫 Star??TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以進(jìn)入代碼倉庫，找到?good first issue標(biāo)簽，一起參與開源貢獻(xiàn)~