[javascript] Draft.js의 편집 기능 활용하기

24 Nov 2023

javascript

Draft.js는 React 기반의 강력한 텍스트 편집기 라이브러리입니다. 이 라이브러리를 사용하면 쉽게 텍스트 입력, 텍스트 스타일링, 미디어 삽입 등 다양한 편집 기능을 구현할 수 있습니다.

텍스트 입력

Draft.js는 텍스트 입력을 위한 기능을 제공합니다. Editor 컴포넌트를 사용하여 사용자가 텍스트를 입력할 수 있도록 만들 수 있습니다. 아래의 예제는 Draft.js를 사용하여 간단한 텍스트 입력 기능을 구현하는 예제입니다.

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

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

  const handleEditorChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

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

export default MyEditor;

위의 예제에서는 useState를 사용하여 editorState를 관리하고, handleEditorChange 함수를 통해 텍스트 입력이 변경될 때마다 editorState를 업데이트하고 있습니다.

텍스트 스타일링

Draft.js는 텍스트 스타일링을 위한 다양한 기능을 제공합니다. 예를 들어, 텍스트에 스타일을 적용하거나, 텍스트의 포맷을 변경하는 기능을 사용할 수 있습니다. 아래의 예제는 Draft.js를 사용하여 텍스트 스타일링을 구현하는 예제입니다.

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

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

  const handleEditorChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  const handleBoldClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
  };

  return (
    <div>
      <button onClick={handleBoldClick}>Bold</button>
      <Editor editorState={editorState} onChange={handleEditorChange} />
    </div>
  );
}

export default MyEditor;

위의 예제에서는 “Bold” 버튼을 클릭하면 handleBoldClick 함수가 호출되며, 해당 함수에서 RichUtils.toggleInlineStyle 메서드를 사용하여 선택된 텍스트에 ‘BOLD’ 스타일을 적용하고 있습니다.

미디어 삽입

Draft.js는 이미지, 동영상 등 다양한 미디어를 삽입할 수 있는 기능도 제공합니다. AtomicBlockUtils를 사용하여 미디어를 삽입할 수 있습니다. 아래의 예제는 Draft.js를 사용하여 이미지 삽입 기능을 구현하는 예제입니다.

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

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

  const handleEditorChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  const handleImageUpload = () => {
    const contentState = editorState.getCurrentContent();

    const file = /* get selected image file */;
    const reader = new FileReader();

    reader.onloadend = () => {
      const imageContent = `
        <img src="${reader.result}" alt="uploaded image" />`;

      const contentStateWithEntity = contentState.createEntity(
        'atomic',
        'IMMUTABLE',
        { src: reader.result }
      );

      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
      const newEditorState = EditorState.set(editorState, {
        currentContent: contentStateWithEntity
      });

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

    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" onChange={handleImageUpload} />
      <Editor editorState={editorState} onChange={handleEditorChange} />
    </div>
  );
}

export default MyEditor;

위의 예제에서는 “Image Upload” 인풋 태그의 변경 이벤트가 발생하면 handleImageUpload 함수가 호출되며, 해당 함수에서 FileReader를 사용하여 이미지 파일을 읽은 후 AtomicBlockUtils.insertAtomicBlock 메서드를 사용하여 이미지를 삽입하고 있습니다.

결론

Draft.js는 편집 기능을 쉽게 구현할 수 있는 강력한 라이브러리입니다. 텍스트 입력, 텍스트 스타일링, 미디어 삽입 등 다양한 기능을 활용하여 원하는 편집 환경을 구현할 수 있습니다. 자세한 내용은 Draft.js 공식 문서를 참고하시기 바랍니다.