동작 원리
세 가지만 잡으면 나머지는 따라옵니다. 값은 한 길로만 드나들고, 편집은 한 문으로만 나가며, 층은 아래에서 위로 쌓입니다.
값은 한 길로만 드나듭니다
들어올 때도 나갈 때도 같은 필터를 지납니다.
sourceHtmlhtml 옵션 · setHtml() · 붙여넣기
필터허용 목록
soul문서의 실체
flutter편집 영역의 살아 있는 DOM
flutter지금 화면의 DOM
필터같은 허용 목록
soul다시 뽑은 정본
outputHtmlonChange · getHtml() · 클립보드
이 한 장의 그림에서 나오는 성질이 넷입니다.
getHtml()은 편집하는 동안 브라우저가 남긴 잡다한 마크업을 그대로 내보내지 않습니다. 언제나 지금 DOM 을 다시 필터에 통과시킵니다.- 필터는 멱등입니다.
onChange로 받은 값을 그대로setHtml()에 되돌려도 아무 일도 일어나지 않습니다. - 왕복이 무손실입니다. 나갈 때 입힌 겉옷은 들어올 때 그대로 벗겨집니다.
- 값을 견줄 때는 언제나 정본끼리 견줍니다. 겉옷을 입은 값과 정본을 견주면 늘 다르게 보여서 캐럿이 튑니다.
같은 문서를 자리마다 다르게 부르는 이유와 그 넷의 뜻은 용어 에 정리해 두었습니다.
저장한 HTML 을 다시 그릴 때
getHtml() 이 돌려준 값이 안전하다는 것은 방금 만든 그 문자열 이야기입니다. 저장했다 꺼낸 HTML 을 화면에 그릴 때는 호스트 쪽 sanitize 가 여전히 필요합니다.
편집은 한 문으로 나갑니다
문서를 바꾸는 모든 경로가 같은 관문을 지납니다. 툴바 버튼도, 자동 변환도, 붙여넣기도, setHtml() 도, 되돌리기도 마찬가지입니다.
편집커맨드 · 날개 · 붙여넣기
관문문서를 바꾸는 모든 길이 지납니다
불변식 복구
되돌리기 스냅샷
상태 갱신툴바 · 마크 · 선택
onChange호스트에게
그래서 이 문을 지나지 않은 편집은 되돌릴 수도 없고 값도 나가지 않습니다. 날개가 문서를 직접 고쳤다면 반드시 context.commit() 을 불러야 하는 이유가 이것입니다.
층은 아래에서 위로 쌓입니다
editor파사드와 컨트롤러 — 서로를 모르고 공유 표면 하나만 압니다ui떠 있는 상자 — 위치 계산 · 겹침 순서 · 날개에게 주는 UIwings제공 날개 — 계약과 꽃만 씁니다input브라우저 이벤트를 커맨드로 옮깁니다 — 입력 · 붙여넣기 · 파일 · 자동 변환flower날개가 꿀을 얻는 곳 — 코어 기능으로 통하는 유일한 문commands순수 편집 함수 — 받은 자리에서 문서를 고치고 바꿨는지만 답합니다core순수 문서 로직 — DOM · 선택 · 정규화 · 필터 · 되돌리기contract날개 계약 — 스키마 · 컨텍스트 · 핸들 · 레지스트리 · 로케일 · 아이콘여기서 눈여겨볼 층은 꽃(flower) 입니다. 날개가 코어 기능에 손대는 문은 이 하나뿐이고, 기본으로 딸려 오는 날개도 남이 만든 날개와 같은 문을 씁니다. 그래서 "기본 날개만 쓰는 지름길" 같은 것이 생기지 않습니다.
새 기능은 날개입니다. 코어 파일을 고쳐야 할 것 같다면 그것은 대개 계약이 부족하다는 신호입니다.
다음 문서
- 용어 — 이 문서가 쓰는 말
- 커스텀 날개 만들기 — 없는 서식을 직접 만들기