登入

做block編輯器的基本思路

作者:neo yang 時間:2021/12/12 讀: 4211
主要參考兩個block編輯器: wordpress的古騰堡編輯器:https://wordpress.org […]

主要參考兩個block編輯器:

wordpress的古騰堡編輯器: https://wordpress.org/gutenberg/

editorjs編輯器:https://editorjs.io/

一、架構

MVVM架構

M層:純json,這點參考editorjs。古騰堡的M層是和wordpress本身有比較重的綁定,(註+短碼),不值得參考。

V層:古騰堡的方式比較適合一些。

VM層:無。

二、blocks

所有的block都有兩種狀態:show和edit。

查看block編輯器所建立的內容時,block的狀態為show。

使用block編輯器編輯內容時,block的狀態為edit。

兩種狀態的展示保持一致,實現「所見即所得」。

edit狀態的block建立在basic block上。

三、basic block

所有的block都建立在這個basic block的基礎上。

block的edit狀態下的主要互動都在這裡。

四、editor page

編輯器主頁面,根據資料和資料變化渲染block。

五、block渲染器

查看block編輯器所建立的內容時,需要解析json資料並根據json資料渲染blocks。

標籤:


copyright © www.lyustu.com all rights reserve.
Theme: TheMoon V3.0. Author:neo yang