Draft.js 는 immutable.js 를 기반으로 변경되지 않는 데이터 구조를 구현하고, Draft.js 는 event->; OnChange-& gt；; 상태를 편집합니다
EditorState 를 보여주기 위해 CodePen 에 간단한 데모를 구현했습니다. 너는 위에서 시험해 볼 수 있다.
위 그림은 전체 EditorState 를 보여 줍니다. currentContent 가 현재 편집기에 표시된 내용의 상태를 기록하고, selection 이 현재 선택을 식별하고, redoStack 과 undoStack 이 각각 undo 와 redo stack 인 등 일부 속성의 의미를 쉽게 추측할 수 있습니다.
드래프트는 스타일을 블록 수준 스타일과 인라인 스타일로 나눕니다. 블록 레벨 스타일은 선형으로 정렬되며 중첩할 수 없습니다. 인라인 스타일은 배열에 의해 기록되며 겹칠 수 있습니다.
Draft 에 일부 텍스트를 임의로 입력하면 text 는 텍스트 내용을 기록하며 블록 레벨 스타일을 기록하는 데 사용되는 type 값은 unstyled 입니다.
이제 텍스트에 H 1 (블록 레벨 요소) 을 적용하면 블록 레벨 스타일을 식별하는 데 사용되는 유형 값이 Header-type 으로 변경됩니다. 이 행에 계속 입력하면 동일한 H 1 스타일이 지정됩니다. 위의 데이터 구조를 통해 블록 레벨 스타일이 유형에 의해 지정되므로 블록 레벨 스타일은 중첩될 수 없습니다. 즉, 순서가 지정되지 않은 목록이 정렬된 목록에 중첩되지 않는 경우를 알 수 있습니다.
Draft 는 동일한 블록 레벨 요소 내의 텍스트 내용을 문자로 분할하고 각 문자의 인라인 스타일을 배열로 표시하여 인라인 스타일의 중첩 문제를 해결합니다.
엔티티는 이해할 수 없는 데이터 유형이 아닙니다. 엔티티 데이터는 주로 그림, 감정, 하이퍼링크 등과 같은 분리할 수 없는 데이터 유형을 나타내는 데 사용됩니다.
전형적인 장면은 감정형이다. 자세히 말하자면, 우리는 일상 사용에서 리치 텍스트 편집기의 일부 사람들을 언급할 것이다. @xxx 의 데이터 유형은 통합된 전체가 필요합니다. @xxx 에서 문자를 삭제하면 @ 의 이름이 @ 의 목적어와 일치하지 않을 수 있습니다.
위 그림에서 삽입된 이미지 데이터 구조를 인쇄했습니다. 데이터, 가변성 및 유형, Draft.js 를 기록한 엔티티임을 알 수 있습니다. 최상위 인터페이스를 공개했습니다. 엔티티 데이터를 주입할 때 다음 그림과 같이 이 인터페이스를 통해 데이터 객체가 표시되는 방식을 설계할 수 있습니다.