原创 Canvas圖形編輯器-數據結構與History(undo/redo)

Canvas圖形編輯器-數據結構與History(undo/redo) 這是作爲 社區老給我推Canvas，於是我也學習Canvas做了個簡歷編輯器 的後續內容，主要是介紹了對數據結構的設計以及History能力的實現。 在線編輯: ht

2024-04-16 14:05:23

原创 基於Canvas實現的簡歷編輯器

基於Canvas實現的簡歷編輯器 大概一個月前，我發現社區老是給我推薦Canvas相關的內容，比如很多 小遊戲、流程圖編輯器、圖片編輯器 等等各種各樣的項目，不知道是不是因爲我某一天點擊了相關內容觸發了推薦機制，還是因爲現在Canvas比較

2024-04-15 14:08:31

原创 基於OT與CRDT協同算法的文檔劃詞評論能力實現

基於OT與CRDT協同算法的文檔劃詞評論能力實現 當我們實現在線文檔平臺時，劃詞評論的功能是非常必要的，特別是在重文檔管理流程的在線文檔產品中，文檔反饋是非常重要的一環，這樣可以幫助文檔維護者提高文檔質量。而即使是單純的將劃詞評論作爲討論區

2024-04-10 14:06:44

原创 深入在線文檔系統的 MarkDown/Word/PDF 導出能力設計

深入在線文檔系統的 MarkDown/Word/PDF 導出能力設計 當我們實現在線文檔的系統時，通常需要考慮到文檔的導出能力，特別是對於私有化部署的複雜ToB產品來說，文檔的私有化版本交付能力就顯得非常重要，此外成熟的在線文檔系統還有很多

2024-03-27 14:12:30

原创 畢業半年多了，回顧從大學到現在搞過的很有意思的開源項目

畢業半年多了，回顧從大學到現在搞過的很有意思的開源項目 回想當年，在高考結束後我的分數並不高，然後被調劑到了工業設計，再到後來感覺對計算機更感興趣，於是對了很久的線努力轉專業到了計算機，之後廢了九牛二虎之力在大二一年修完了計算機專業大一大二

2024-03-11 14:05:25 1

原创 初探富文本之文檔diff算法

初探富文本之文檔diff算法 當我們實現在線文檔的系統時，通常需要考慮到文檔的版本控制與審覈能力，並且這是這是整個文檔管理流程中的重要環節，那麼在這個環節中通常就需要文檔的diff能力，這樣我們就可以知道文檔的變更情況，例如文檔草稿與線上文

2024-02-21 14:06:04

原创 初探webpack之單應用多端構建

初探webpack之單應用多端構建 在現代化前端開發中，我們可以藉助構建工具來簡化很多工作，單應用多端構建就是其中應用比較廣泛的方案，webpack中提供了loader與plugin來給予開發者非常大的操作空間來操作構建過程，通過操作中間產

2023-12-02 14:06:25

原创 從零實現的瀏覽器Web腳本

從零實現的瀏覽器Web腳本 在之前我們介紹了從零實現Chrome擴展，而實際上瀏覽器級別的擴展整體架構非常複雜，儘管當前有統一規範但不同瀏覽器的具體實現不盡相同，並且成爲開發者並上架Chrome應用商店需要支付5$的註冊費，如果我們只是希望

2023-11-04 14:16:29 9

原创 初探富文本之React實時預覽

初探富文本之React實時預覽 在前文中我們探討了很多關於富文本引擎和協同的能力，在本文中我們更偏向具體的應用組件實現。在一些場景中比如組件庫的文檔編寫時，我們希望能夠有實時預覽的能力，也就是用戶可以在文檔中直接編寫代碼，然後在頁面中實時預

2023-10-15 14:08:01 4

原创 ReactPortals傳送門

ReactPortals傳送門 React Portals提供了一種將子節點渲染到父組件以外的DOM節點的解決方案，即允許將JSX作爲children渲染至DOM的不同部分，最常見用例是子組件需要從視覺上脫離父容器，例如對話框、浮動工具欄、

2023-09-29 14:05:06

原创 SVG與foreignObject元素

SVG與foreignObject元素 可縮放矢量圖形Scalable Vector Graphics - SVG基於XML標記語言，用於描述二維的矢量圖形。作爲一個基於文本的開放網絡標準，SVG能夠優雅而簡潔地渲染不同大小的圖形，並和CS

2023-08-12 14:10:45 3

原创 從零實現的Chrome擴展

從零實現的Chrome擴展 Chrome擴展是一種可以在Chrome瀏覽器中添加新功能和修改瀏覽器行爲的軟件程序，例如我們常用的TamperMonkey、Proxy SwitchyOmega、AdGuard等等，這些拓展都是可以通過WebE

2023-07-17 14:11:10 1

原创 基於drawio構建流程圖編輯器

基於drawio構建流程圖編輯器 drawio是一款非常強大的開源在線的流程圖編輯器，支持繪製各種形式的圖表，提供了Web端與客戶端支持，同時也支持多種資源類型的導出。 描述 在我們平時寫論文、文檔時，爲了更好地闡述具體的步驟和流程，我們經

2023-06-24 14:05:16 1

原创 React閉包陷阱

React閉包陷阱 React Hooks是React 16.8引入的一個新特性，其出現讓React的函數組件也能夠擁有狀態和生命週期方法，其優勢在於可以讓我們在不編寫類組件的情況下，更細粒度地複用狀態邏輯和副作用代碼，但是同時也帶來了額外

2023-05-21 14:21:48 1

原创 Hooks與事件綁定

Hooks與事件綁定 在React中，我們經常需要爲組件添加事件處理函數，例如處理表單提交、處理點擊事件等。通常情況下，我們需要在類組件中使用this關鍵字來綁定事件處理函數的上下文，以便在函數中使用組件的實例屬性和方法。React Hoo

2023-04-16 14:10:55 1