[javascript] Draft.js에서 텍스트 에디터의 커스텀 블록 및 스타일링하기

24 Nov 2023

javascript

Draft.js는 React 기반의 웹 텍스트 에디터 라이브러리로, 컨텐츠를 표현하고 편집하는 데 사용됩니다. 이 라이브러리를 사용하여 텍스트 에디터를 만들 때, 커스텀 블록과 스타일링을 적용하면 에디터의 외관을 원하는 대로 변경할 수 있습니다.

커스텀 블록 생성하기

Draft.js에서 커스텀 블록을 생성하려면 다음과 같은 단계를 따르면 됩니다.

새로운 블록 유형을 정의합니다. 예를 들어, ‘이미지 블록’이라는 새로운 유형을 만들고 싶다면 다음과 같이 정의할 수 있습니다.

const ImageBlock = (props) => {
  return (
    <div className="image-block">
      <img src={props.data.url} alt={props.data.caption} />
    </div>
  );
};

커스텀 블록을 사용할 수 있도록 Draft.js의 ContentBlockRendererFn을 확장합니다. 이 함수에서 해당 블록 유형에 대한 렌더링 로직을 정의할 수 있습니다.

const blockRendererFn = (block, { getEditorState }) => {
  if (block.getType() === 'image') {
    return {
      component: ImageBlock,
      editable: false,
    };
  }
  return null;
};

에디터 컴포넌트에서 blockRendererFn을 등록하고 사용합니다.

const MyEditor = () => {
  const editorState = // 에디터 상태를 가져옴

  return (
    <Editor
      editorState={editorState}
      blockRendererFn={blockRendererFn}
    />
  );
};

이제 ‘image’라는 유형의 블록이 생성됐으며, 에디터에서 해당 블록을 추가할 수 있습니다.

스타일링 적용하기

Draft.js에서 텍스트 블록의 스타일을 적용하려면 다음과 같은 단계를 따르면 됩니다.

스타일을 적용할 CSS 클래스를 만듭니다.
```
.highlighted {
  background-color: yellow;
}
```

ContentBlockRendererFn 함수 내에서 스타일 클래스를 적용하는 로직을 작성합니다.

const blockRendererFn = (block, { getEditorState }) => {
  const contentState = getEditorState().getCurrentContent();
  const blockKey = block.getKey();
  const currentBlock = contentState.getBlockForKey(blockKey);
  const isHighlighted = currentBlock.getData().get('highlighted');

  if (isHighlighted) {
    return {
      component: DefaultDraftBlockRenderMap.get(block.getType()),
      editable: true,
      props: {
        className: 'highlighted',
      },
    };
  }
  return null;
};

에디터 컴포넌트에서 blockRendererFn을 등록하고 사용합니다.

const MyEditor = () => {
  const editorState = // 에디터 상태를 가져옴

  return (
    <Editor
      editorState={editorState}
      blockRendererFn={blockRendererFn}
    />
  );
};

이제 highlighted 클래스가 있는 텍스트 블록을 강조 표시할 수 있습니다.

마치며

Draft.js를 사용하여 텍스트 에디터를 만들 때, 커스텀 블록과 스타일링을 통해 에디터의 외관을 지정할 수 있습니다. 위에서 설명한 방법을 사용하여 원하는 스타일과 블록을 생성하고, 에디터에 적용해 보세요.

참고 자료:

Draft.js 공식 문서: https://draftjs.docs.apiary.io/

React 공식 문서: https://ko.reactjs.org/