[javascript] Draft.js에서 텍스트 에디터의 퀵 편집 기능 구현하기

24 Nov 2023

javascript

소개

Draft.js는 React와 함께 사용되는 강력한 텍스트 에디터 라이브러리입니다. 이 라이브러리는 텍스트 편집을 위한 다양한 기능을 제공하며, 커스터마이징이 용이합니다.

이번 블로그에서는 Draft.js를 사용하여 텍스트 에디터에 퀵 편집 기능을 구현하는 방법에 대해 알아보겠습니다. 퀵 편집 기능은 사용자가 특정 단어나 구문을 빠르게 변경하거나 서식을 적용할 수 있는 기능을 말합니다.

구현 방법

1. 에디터 컴포넌트 생성하기

첫 번째 단계는 Draft.js 에디터 컴포넌트를 생성하는 것입니다. Draft.js 에디터 컴포넌트를 생성하고 필요한 형식 변환을 위한 상태와 이벤트 핸들러를 추가합니다.

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

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

  const handleChange = (newState) => {
    setEditorState(newState);
  };

  const handleKeyCommand = (command) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      handleChange(newState);
      return 'handled';
    }
    return 'not-handled';
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onChange={handleChange}
        handleKeyCommand={handleKeyCommand}
      />
    </div>
  );
};

export default TextEditor;

2. 퀵 편집 기능 추가하기

두 번째 단계는 Draft.js 에디터에 퀵 편집 기능을 추가하는 것입니다. handleKeyCommand 함수에서 사용자가 입력한 키보드 명령에 따라 특정 단어나 구문을 변경하거나 서식을 적용합니다.

const handleKeyCommand = (command) => {
  const newState = RichUtils.handleKeyCommand(editorState, command);
  if (newState) {
    handleChange(newState);
    return 'handled';
  }
  if (command === 'bold') {
    handleChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
    return 'handled';
  }
  if (command === 'italic') {
    handleChange(RichUtils.toggleInlineStyle(editorState, 'ITALIC'));
    return 'handled';
  }
  return 'not-handled';
};

3. 툴바 추가하기

마지막 단계는 편집기 위에 툴바를 추가하는 것입니다. 툴바에는 퀵 편집 기능을 수행하는 버튼이 포함됩니다. 각 버튼은 특정 명령을 실행하도록 이벤트 핸들러를 추가해야 합니다.

const TextEditor = () => {
  // ...

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

  const handleItalicClick = () => {
    handleChange(RichUtils.toggleInlineStyle(editorState, 'ITALIC'));
  };

  return (
    <div>
      <div>
        <button onClick={handleBoldClick}>Bold</button>
        <button onClick={handleItalicClick}>Italic</button>
      </div>
      <Editor
        editorState={editorState}
        onChange={handleChange}
        handleKeyCommand={handleKeyCommand}
      />
    </div>
  );
};

결론

위의 방법을 따라 하면 Draft.js를 사용하여 텍스트 에디터에 퀵 편집 기능을 구현할 수 있습니다. Draft.js는 커스터마이징이 용이하고 다양한 텍스트 편집 기능을 제공하므로 효율적인 텍스트 에디터 개발에 활용할 수 있습니다.

참고 링크: