블록 편집기를 만드는 기본 아이디어

작가:네오양 시간:2021/12/12 읽다: 3880

---

주로 두 개의 블록 편집기를 참조하십시오.

WordPress용 구텐베르크 편집자: https://wordpress.org/gutenberg/

editorjs 편집기: https://editorjs.io/

1. 건축

MVVM 아키텍처

M 레이어: 순수 json, 이 점에 대해서는 editorjs를 참조하세요. Gutenberg의 M 레이어는 WordPress 자체(주석 + 단축 코드)에 강하게 묶여 있으므로 참조할 가치가 없습니다.

레이어 V: 구텐베르그의 방법이 더 적합합니다.

VM 계층: 없음.

2. 블록

모든 블록에는 표시와 편집이라는 두 가지 상태가 있습니다.

블록 편집기로 생성된 콘텐츠를 볼 때 블록 상태가 표시됩니다.

블록 편집기를 사용하여 콘텐츠를 편집하는 경우 블록 상태는 편집입니다.

두 가지 상태의 표시는 일관되게 유지되어 "보이는 대로 얻는다"를 달성합니다.

편집 상태 블록은 기본 블록 위에 구성됩니다.

3. 기본 블록

모든 블록은 이 기본 블록을 기반으로 합니다.

블록 편집 상태의 주요 상호 작용은 여기에 있습니다.

4. 에디터 페이지

편집기의 메인 페이지는 데이터 및 데이터 변경 사항을 기반으로 블록을 렌더링합니다.

5. 블록 렌더러

블록 편집기로 생성된 콘텐츠를 볼 때 json 데이터를 구문 분석하고 json 데이터를 기반으로 블록을 렌더링해야 합니다.