robertu

fork the world a better place.

Matters 編輯器是如何運作的?

發布於

編輯器是 Matters 的核心,承載著數萬創作者的創作心血。產品開發團隊意在打造一個易用、可靠的編輯器。

本文將從技術的角度,向大家介紹 Matters 編輯器的運作原理,以及面臨的挑戰。

核心

目前 Matters 的所見即所得(WYSIWYG)編輯器應用在文章草稿和評論兩個地方,核心基於 Quill 實現。Quill 的數據結構是 Delta,以約定的規範記錄著每句話所包含的文本和格式,從而構成一個段落、一篇文章。

如上一句話以 Deltas 描述會是:

contents = {
  "ops": [
    {
      "insert": "Quill 的數據結構是 "
    },
    {
      "insert": "Delta",
      "attributes": {
        "link": "https://github.com/quilljs/delta/"
      }
    },
    {
      "insert": ",以約定的規範記錄著每句話所包含的文本和格式,從而構成一個段落、一篇文章。\n"
    }
  ]
}

每次輸入和修改同樣以 Delta 記錄,為多人協作的支持留了想像空間。假如我們對「Quill」一詞進行加粗:

change = {
  "ops": [
    {
      "retain": 5,
      "attributes": {
        "bold": true
      }
    }
  ]
}

為避免直接操作 DOM 所帶來的性能問題和複雜性,Quill 有平行於 DOM 的模型 Parchment,由類似 DOM Node 的 Blot 構成,提供 API 和對生命週期(lifecycle)進行管理。

在此基礎上,Quill 有一套完整的 Module 系統,內建的 Toolbar 提供諸如加粗斜體下劃線等格式的支持、History 管理撤回(Undo)和重做(Redo),同時也允許開發者對編輯器進行客製化。

如 Matters 的文章編輯器在 Quill 基礎上加入了圖片拖拽上傳軟換行(Soft Line Break,Shift + Enter)、連結自動轉換、圖片音頻上傳、嵌入 YouTube 等功能。

thematters/matters-editor

相比後輩 Draft.jsSlate ,Quill 更穩定和扁平的底層結構,對性能有極大的好處,也給開發者留足了客製化的空間。但不依附 React、Vue 等主流框架所構建的獨立生態,對社區活躍度的維持也充滿挑戰。

考慮到未來的可維護性,我們已將編輯器核心抽離出單獨的 React 組件並在 GitHub 開源,可到 thematters/matters-editor 查看。

一致性

打造一個所見即所得(WYSIWYG)的編輯器,不僅在於創作者的直觀和易用,也在於與閱讀者、乃至代碼層面保持的一致性。

創作者在編輯器編寫的文章,在排版上與閱讀者所看到的會保持一致。

而在代碼層面,無論是在編輯器和文章頁的渲染層,還是數據庫存儲和 API 傳輸的數據層,也都保持了一致。

同時,輸出的語意化 HTML 標籤(Semantic HTML),對無障礙性(A11Y, Accessibility)也極有好處,讓使用了 VoiceOver 等閱讀器(Screen Reader)的用戶也有相似的體驗。

編輯器的簡單和一致性,也影響了我們對草稿保存的機制對設計。

生命週期

輸入、同步和發佈,是一篇文章從編輯器到出現在 Matters 和 IPFS 所經歷的主要過程。而文章草稿的同步功能,讓創作者可以隨時隨地、在任意設備上,保持創作的連續性。

Matters 上年改版時設計的草稿同步機制沿用至今——每當編輯器監測到有任何改動,都會調用傳入到編輯器的 editorUpdate ,將草稿保存到遠端的數據庫;當重新打開草稿時,便從遠端讀取到編輯器裡。而同步到數據庫的正文,並非 Quill 的 Delta 結構,而是上文提到 HTML 字串。

版本管理的缺失、編輯器崩潰導致草稿丟失……是目前設計下會遇到的問題。

七月,Matters 開源計畫正式啟動,目前在與部分開發者進行小範圍磨合測試,對協作流程和文檔進行完善,為接下來全面開放做準備。同時,我們也計畫推出獎賞計畫,對開源社區貢獻者進行激勵,讓大家參與進來,一起討論、解決馬特市發展中遇到的問題,敬請期待!

喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明

Matters開源計畫啟動 🚀 | 邀請你來共建馬特市

Matters 的架構與技術棧

​​社區開放一小步:Matters API

2

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區