[javascript] Draft.js에서 텍스트 에디터의 드롭다운 메뉴 추가하기

24 Nov 2023

javascript

Draft.js는 텍스트 에디터를 구축하기 위한 강력하고 유연한 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 텍스트를 작성하고 편집할 수 있는 기능을 쉽게 추가할 수 있습니다. 이번 글에서는 Draft.js를 사용하여 텍스트 에디터에 드롭다운 메뉴를 추가하는 방법에 대해 알아보겠습니다.

드롭다운 메뉴 추가하기

먼저, Draft.js를 설치합니다. 다음 명령어를 사용하여 Draft.js를 프로젝트에 추가합니다.

npm install draft-js

다음으로, Draft.js의 Editor 컴포넌트를 생성하여 텍스트 에디터를 만듭니다.

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

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };

    this.onChange = (editorState) => {
      this.setState({ editorState });
    };
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
      />
    );
  }
}

export default MyEditor;

이제 드롭다운 메뉴를 추가해 보겠습니다. Editor 컴포넌트 안에 draft-js-plugins-editor 패키지의 Editor 컴포넌트를 사용하여 드롭다운 메뉴를 추가할 수 있습니다.

import React from 'react';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createToolbarPlugin, { Separator } from 'draft-js-static-toolbar-plugin';

const toolbarPlugin = createToolbarPlugin();
const { Toolbar } = toolbarPlugin;

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };

    this.onChange = (editorState) => {
      this.setState({ editorState });
    };
  }

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div onClick={this.focus}>
        <Toolbar>
          {
            (externalProps) => (
              <div>
                <div>
                  <BoldButton {...externalProps} />
                  <ItalicButton {...externalProps} />
                  <UnderlineButton {...externalProps} />
                  <Separator {...externalProps} />
                </div>
              </div>
            )
          }
        </Toolbar>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={[toolbarPlugin]}
          ref={(element) => { this.editor = element; }}
        />
      </div>
    );
  }
}

export default MyEditor;

이제 텍스트 에디터에는 드롭다운 메뉴가 추가되었습니다. 사용자는 이 메뉴를 사용하여 텍스트를 굵게, 이탤릭체로, 밑줄을 긋거나 분리선을 추가할 수 있습니다.

마무리

이번 글에서는 Draft.js를 사용하여 텍스트 에디터에 드롭다운 메뉴를 추가하는 방법을 알아보았습니다. Draft.js의 강력한 기능을 활용하여 다양한 텍스트 편집 기능을 쉽게 구현할 수 있습니다.