[javascript] Draft.js로 구현된 에디터를 이용한 이미지 업로드 기능 구현하기

24 Nov 2023

javascript

이미지 업로드 기능은 웹 앱의 에디터에서 이미지 파일을 선택하고 업로드하여 문서에 삽입하는 기능입니다. 이 기능은 사용자에게 편의성을 제공하며, 웹 앱의 내용을 더욱 풍부하고 다양한 방식으로 표현할 수 있도록 도와줍니다. 이번에는 Draft.js라이브러리를 사용하여 이미지 업로드 기능을 구현하는 방법을 알아보겠습니다.

Draft.js란?

Draft.js는 Facebook에서 개발한 리액트 기반의 리치 텍스트 에디터 라이브러리입니다. Draft.js를 사용하면 사용자가 텍스트를 입력하고 편집하는 데 필요한 다양한 기능과 도구를 사용할 수 있습니다. Draft.js는 에디터의 내용을 상태 객체로 관리하며, 이를 활용하여 텍스트 입력, 텍스트 스타일 적용, 블록 구성 등을 손쉽게 처리할 수 있습니다.

이미지 업로드 기능 구현하기

Draft.js 설치하기

Draft.js를 사용하기 위해서는 먼저 프로젝트에 Draft.js를 설치해야 합니다. 아래 명령어를 사용하여 Draft.js를 설치합니다.

npm install draft-js

이미지 업로드 컴포넌트 생성하기

이미지 업로드 기능을 구현하기 위해 업로드 컴포넌트를 생성합니다. 업로드 컴포넌트는 이미지 파일을 선택하고 서버로 업로드하는 역할을 합니다. 이 때, 사용자가 선택한 이미지 파일은 File 객체로 가져오게 됩니다.

import React from 'react';

function ImageUploader({ onImageUploaded }) {
  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    // 파일 업로드 로직
    onImageUploaded(url); // 업로드된 이미지 URL 전달
  };

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

export default ImageUploader;

Draft.js 에디터에 이미지 삽입 기능 추가하기

Draft.js 에디터에서 이미지를 삽입하는 기능을 추가합니다. 이미지를 삽입하기 위해 EditorState 객체를 업데이트해야 합니다. 아래는 이미지를 삽입하는 함수의 예시 코드입니다.

import { EditorState, Modifier } from 'draft-js';

function insertImage(editorState, imageUrl) {
  const contentState = editorState.getCurrentContent();
  const selectionState = editorState.getSelection();

  const newContentState = Modifier.insertText(
    contentState,
    selectionState,
    ' ',
    undefined,
    inlineStyles,
    entityKey
  );

  const newEditorState = EditorState.push(
    editorState,
    newContentState,
    'insert-characters'
  );

  return EditorState.forceSelection(
    newEditorState,
    newEditorState.getSelection()
  );
}

이미지 업로드와 삽입 기능 통합하기

이미지 업로드 컴포넌트와 Draft.js 에디터를 통합하여 이미지를 업로드하고 삽입하는 기능을 구현합니다. 업로드된 이미지 URL을 ImageUploader 컴포넌트에서 onImageUploaded 콜백 함수로 전달받아, insertImage 함수를 호출하여 에디터에 이미지를 삽입합니다.

import React, { useState } from 'react';
import { Editor, EditorState } from 'draft-js';

import ImageUploader from './ImageUploader';

function RichTextEditor() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const handleImageUploaded = (imageUrl) => {
    const newEditorState = insertImage(editorState, imageUrl);
    setEditorState(newEditorState);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
      />
      <ImageUploader onImageUploaded={handleImageUploaded} />
    </div>
  );
}

export default RichTextEditor;

이렇게 구현된 코드는 사용자가 이미지를 선택하고 업로드하면, Draft.js 에디터의 컨텐츠에 이미지가 삽입됩니다.

마무리

이번에는 Draft.js로 구현된 에디터를 이용하여 이미지 업로드 기능을 구현하는 방법을 알아보았습니다. Draft.js는 리액트 기반의 강력한 리치 텍스트 에디터 라이브러리로, 다양한 기능을 손쉽게 구현할 수 있도록 도와줍니다. 이미지 업로드 기능을 구현하면 사용자에게 더욱 편리한 에디터 환경을 제공할 수 있습니다.

Draft.js란?

이미지 업로드 기능 구현하기

마무리

참고 자료