[javascript] Draft.js에서 이미지 추가 기능 구현하기

24 Nov 2023

javascript

이미지를 텍스트 에디터인 Draft.js에 추가하는 기능은 많은 웹 애플리케이션에서 필요한 기능입니다. 이 기능을 구현하기 위해서는 Draft.js의 내장된 API와 함께 몇 가지 추가 작업을 수행해야 합니다.

Draft.js란?

Draft.js는 Facebook에서 개발한 React 기반의 텍스트 에디팅 라이브러리입니다. 풍부한 기능을 가지고 있으며, 커스터마이징이 용이하다는 장점이 있습니다.

이미지 추가 기능 구현하기

1. Draft.js 설치 및 초기 설정

Draft.js를 사용하기 위해서는 프로젝트에 Draft.js 패키지를 추가해야 합니다.

npm install draft-js

또한, Draft.js에서 이미지를 표시하기 위해 이미지를 로드하는 데 사용되는 Entity 타입인 ‘atomic’을 지원해야 합니다.

import { EditorState, ContentState, convertToRaw, convertFromRaw, AtomicBlockUtils } from 'draft-js';
import { Editor } from 'draft-js';
import 'draft-js/dist/Draft.css';

const MyEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  const handleImageUpload = (e) => {
    e.preventDefault();
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
      const contentState = editorState.getCurrentContent();
      const contentStateWithEntity = contentState.createEntity(
        'atomic',
        'IMMUTABLE',
        { src: e.target.result }
      );
      
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
      const newEditorState = EditorState.set(
        editorState,
        { currentContent: contentStateWithEntity }
      );

      setEditorState(AtomicBlockUtils.insertAtomicBlock(
        newEditorState,
        entityKey,
        ' '
      ));
    };

    reader.readAsDataURL(file);
  };

  return (
    <>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      <Editor editorState={editorState} onChange={setEditorState} />
    </>
  );
};

2. 이미지 업로드 처리

사용자가 이미지를 업로드하면, handleImageUpload 함수가 호출됩니다. 이 함수에서는 FileReader를 사용하여 이미지 파일을 읽고, 로드된 이미지를 Draft.js Entity에 추가합니다.

3. 이미지 보여주기

Draft.js에서 Entity를 사용하여 이미지를 표시할 수 있습니다. atomic Entity 타입을 사용하면 Draft.js 에디터 내에서 이미지를 보여줄 수 있습니다.

이미지가 추가되면, AtomicBlockUtils.insertAtomicBlock 함수를 사용하여 콘텐츠에 이미지를 삽입합니다.

4. 에디터 출력하기

마지막으로, Editor 컴포넌트를 사용하여 Draft.js 에디터를 화면에 렌더링합니다. editorState 상태를 사용하여 에디터의 내용을 관리하고, onChange 핸들러를 통해 사용자의 입력을 처리합니다.

결론

Draft.js에서 이미지를 추가하는 기능을 구현하는 방법을 알아보았습니다. 이를 활용하여 웹 애플리케이션에서 텍스트 에디터에 이미지를 쉽게 추가할 수 있습니다.

참고 자료:

이번 글이 여러분에게 도움이 되길 바랍니다. 감사합니다! ```