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

24 Nov 2023

javascript

마크업 기능이 있는 텍스트 에디터를 구현하는 것은 웹 애플리케이션 개발에서 자주 사용되는 과제입니다. 이번 블로그 포스트에서는 Draft.js 라이브러리를 사용하여 마크업 기능이 있는 에디터를 구현하는 방법에 대해 알아보겠습니다.

Draft.js란?

Draft.js는 Facebook에서 개발한 웹 기반 리액트 에디터 프레임워크입니다. 이 프레임워크를 사용하면 마크다운 또는 HTML과 같은 마크업 기능을 지원하는 에디터를 구현할 수 있습니다. Draft.js는 자유도가 높고 커스터마이징이 용이하며, 리액트 컴포넌트와 함께 사용하기에 적합합니다.

Draft.js를 사용한 마크업 기능 구현하기

먼저, Draft.js를 프로젝트에 추가해야 합니다. 다음 명령을 사용하여 필요한 패키지를 설치할 수 있습니다.

npm install draft-js react-dom

이제 마크업 기능이 있는 에디터를 만들기 위해 필요한 구성 요소를 생성할 수 있습니다. 먼저, 다음과 같이 Editor 컴포넌트를 정의합니다.

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

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

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

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

  render() {
    return (
      <div>
        <button onClick={() => this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'))}>
          B
        </button>
        <button onClick={() => this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'ITALIC'))}>
          I
        </button>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          handleKeyCommand={this.handleKeyCommand}
        />
      </div>
    );
  }
}

위의 코드에서는 Editor 컴포넌트를 만들고, editorState와 onChange 메서드를 설정합니다. handleKeyCommand 메서드는 단축키를 처리하는 데 사용됩니다.

render 메서드에서는 Bold와 Italic 스타일을 적용하는 버튼을 추가하고, Editor 컴포넌트를 렌더링합니다.

이제 만든 MyEditor 컴포넌트를 웹 페이지에 추가해보겠습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import MyEditor from './MyEditor';

ReactDOM.render(<MyEditor />, document.getElementById('root'));

마크업 기능이 있는 에디터가 성공적으로 구현되었습니다! 사용자는 텍스트를 선택하고 Bold와 Italic 버튼을 클릭하여 해당 스타일을 적용할 수 있습니다.

결론

이번 포스트에서는 Draft.js를 사용하여 마크업 기능이 있는 에디터를 구현하는 방법에 대해 알아보았습니다. Draft.js는 강력하면서도 유연한 기능을 제공하므로, 다양한 종류의 텍스트 에디터를 만들 수 있습니다. 응용 프로그램에 따라 필요한 기능을 추가하여 Draft.js를 사용하여 맞춤형 마크업 에디터를 만들어 보세요.