개요
리치 텍스트 에디터를 만드는 것은 단순히 contenteditable을 사용하는 것 이상입니다. 문서 모델, 스키마 설계, 위치 관리, 그리고 내부 데이터 모델과 DOM 표현 사이의 분리를 이해해야 합니다.
현대적인 에디터들인 ProseMirror, Slate, Lexical은 모두 관심사를 분리하고 에디터를 유지보수 가능하고 확장 가능하게 만드는 유사한 아키텍처 패턴을 따릅니다.
핵심 원칙: 모델-뷰 분리
근본적인 원칙은 문서 모델(내부 표현)과 뷰(DOM)를 분리하는 것입니다. 모델이 진실의 원천이고, 뷰는 단지 투영일 뿐입니다.
- 추상적, 스키마 검증, 프레임워크 독립적
- 뷰: HTML 표현, 사용자 입력 처리, 브라우저 특정
핵심 개념
상세 가이드
위치 & 선택 관리
모델에서 위치와 선택 관리: 경로 기반 위치, 선택 표현, DOM 변환.
- 경로 기반 위치 표현
- 모델 선택 구조
- DOM에서 모델로 변환
- 모델에서 DOM으로 변환
- 선택 정규화
HTML 매핑
모델과 HTML 간 변환: 직렬화, 역직렬화, 증분 업데이트.
- 모델에서 HTML로 직렬화
- HTML에서 모델로 역직렬화
- 엣지 케이스 처리
- 증분 DOM 업데이트
- 마크 및 속성 보존
시작하기
권장 학습 경로:
- 아키텍처부터 시작: 모델-뷰 분리와 그 중요성 이해
→ 에디터 아키텍처 읽기 - 모델 & 스키마 학습: 문서 구조와 검증 규칙 설계
→ 모델 & 스키마 읽기 - 위치 & 선택 마스터: 모델에서 위치를 표현하고 관리하는 방법 이해
→ 위치 & 선택 읽기 - HTML 매핑 구현: 모델과 HTML 간 직렬화 및 역직렬화 구축
→ HTML 매핑 읽기 - contenteditable API 추가: 뷰 레이어에서 Selection API, Range API, 이벤트 사용
→ 문서 둘러보기
관련 리소스
- 실용적인 패턴 - 일반적인 패턴에 대한 코드 예제
- 팁 - 프레임워크 통합 및 모범 사례
- Selection API - 브라우저 선택 작업
- Range API - DOM 범위 조작