[javascript] Draft.js와 함께 사용할 수 있는 외부 라이브러리 소개

24 Nov 2023

javascript

Draft.js는 Facebook에서 개발한 React 기반의 리치 텍스트 에디터 라이브러리입니다. Draft.js 자체만으로도 강력한 기능을 제공하지만, 외부 라이브러리를 추가로 사용함으로써 더욱 다양한 기능을 구현할 수 있습니다. 이번 포스트에서는 Draft.js와 함께 사용할 수 있는 몇 가지 인기 있는 외부 라이브러리를 소개하겠습니다.

1. Draft.js Plugins

Draft.js Plugins는 Draft.js와 함께 사용할 수 있는 다양한 플러그인을 제공하는 라이브러리입니다. 이 라이브러리를 사용하면 키워드 강조, 색상 선택, 이미지 삽입 등 다양한 기능을 손쉽게 구현할 수 있습니다. 공식 홈페이지에서 더 많은 정보를 확인할 수 있습니다.

import createHighlightPlugin from 'draft-js-highlight-plugin';
import createColorPickerPlugin from 'draft-js-color-picker-plugin';
import createImagePlugin from 'draft-js-image-plugin';

const highlightPlugin = createHighlightPlugin();
const colorPickerPlugin = createColorPickerPlugin();
const imagePlugin = createImagePlugin();

const plugins = [highlightPlugin, colorPickerPlugin, imagePlugin];

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

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

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

위의 예제 코드에서는 Draft.js Plugins 라이브러리의 플러그인들을 호출하여 plugins 배열에 추가한 후, <Editor> 컴포넌트에 plugins prop으로 전달합니다. 이렇게하면 해당 플러그인들의 기능을 에디터에서 사용할 수 있게 됩니다.

2. Draft.js Exporter

Draft.js Exporter는 Draft.js의 콘텐츠를 다른 포멧으로 변환하기 위한 라이브러리입니다. HTML, 마크다운, JSON 등 다양한 포멧으로 변환할 수 있습니다. 공식 홈페이지에서 더 많은 정보를 확인할 수 있습니다.

import { stateToHTML } from 'draft-js-exporter';

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

  const onExportAsHTML = () => {
    const contentState = editorState.getCurrentContent();
    const html = stateToHTML(contentState);
    console.log(html);
  }

  return (
    <div>
      <Editor
        editorState={editorState}
        onChange={onChange}
      />
      <button onClick={onExportAsHTML}>Export as HTML</button>
    </div>
  );
};

위의 예제 코드에서는 stateToHTML 함수를 사용하여 에디터의 콘텐츠를 HTML로 변환한 후 출력하는 예시입니다. 마찬가지로 다른 포멧으로 변환하는 기능도 제공합니다.

3. Draft.js MathJax

Draft.js MathJax는 수학 수식을 렌더링하기 위한 라이브러리입니다. 공식 홈페이지에서 더 많은 정보를 확인할 수 있습니다.

import { EditorState } from 'draft-js';
import MathjaxPlugin from 'draft-js-mathjax-plugin';

const mathjaxPlugin = MathjaxPlugin();

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

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

  return (
    <Editor
      editorState={editorState}
      onChange={onChange}
      plugins={[mathjaxPlugin]}
    />
  );
};

위의 예제 코드에서는 MathJax 플러그인을 호출하여 mathjaxPlugin 변수에 저장한 후, <Editor> 컴포넌트에 plugins prop으로 전달합니다. 이렇게하면 수식을 입력하고 렌더링하는 기능을 구현할 수 있습니다.

결론

위에서 소개한 Draft.js 외부 라이브러리들은 Draft.js를 확장하여 풍부한 기능을 구현하는 데 도움을 줍니다. 해당 라이브러리들을 사용하면 더욱 다양하고 효율적인 리치 텍스트 에디터를 만들 수 있습니다. 각 라이브러리의 공식 홈페이지나 GitHub 저장소에서 자세한 정보와 사용 방법을 확인할 수 있습니다.