Draft.js는 React 기반의 강력한 텍스트 에디팅 프레임워크입니다. 텍스트를 선택하고 다양한 포맷을 적용하는 기능은 일반적으로 텍스트 에디터에서 매우 중요합니다. 이 문서에서는 Draft.js에서 텍스트를 선택하고 포맷을 적용하는 방법에 대해 알아보겠습니다.

텍스트 선택하기

Draft.js에서 텍스트를 선택하기 위해서는 SelectionState 객체를 사용합니다. SelectionState 객체는 선택된 텍스트의 시작과 끝 인덱스를 나타내는 것으로, 에디터 내에서 특정 텍스트를 선택하려면 해당 텍스트의 인덱스를 알아야 합니다.

아래는 Draft.js에서 텍스트를 선택하는 코드 예시입니다:

// 현재 선택된 텍스트의 시작과 끝 인덱스를 가져오기
const selectionState = editorState.getSelection();
const start = selectionState.getStartOffset();
const end = selectionState.getEndOffset();

// 선택된 텍스트 가져오기
const selectedText = editorState.getCurrentContent().getPlainText().slice(start, end);

포맷 적용하기

Draft.js에서 텍스트에 포맷을 적용하기 위해서는 EditorState 객체의 getCurrentInlineStyle 메서드를 사용합니다. 이 메서드는 현재 텍스트에 적용된 인라인 스타일을 가져옵니다.

아래는 Draft.js에서 텍스트에 포맷을 적용하는 코드 예시입니다:

// 현재 텍스트에 적용된 인라인 스타일 가져오기
const currentStyle = editorState.getCurrentInlineStyle();

// 포맷 적용하기
const newStyle = currentStyle.add('BOLD');
const newEditorState = EditorState.setInlineStyleOverride(editorState, newStyle);

위 코드 예시에서는 현재 텍스트에 ‘BOLD’ 스타일을 적용하는 방법을 보여줍니다. 다른 스타일을 적용하려면 적절한 값을 add 메소드에 전달하면 됩니다.

결론

이 문서에서는 Draft.js에서 텍스트 선택 및 포맷 적용하는 방법에 대해 알아보았습니다. SelectionState와 EditorState 객체를 사용하여 텍스트를 선택하고 포맷을 적용할 수 있습니다. 이를 활용하여 강력하고 유연한 텍스트 에디팅 기능을 개발할 수 있습니다.

더 자세한 정보는 Draft.js 공식 문서를 참조해주세요.