做block編輯器的基本思路
主要參考兩個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。