[javascript] Draft.js에서 텍스트 에디터의 동영상 삽입 기능 추가하기

24 Nov 2023

javascript

이 기술 블로그에서는 Draft.js 텍스트 에디터에 동영상 삽입 기능을 추가하는 방법에 대해 다루겠습니다.

Draft.js는 React 기반의 강력한 텍스트 에디터 라이브러리로, 다양한 기능과 확장성을 제공합니다. 동영상을 삽입하는 기능은 여러 사이트에서 자주 사용되며, 이를 텍스트 에디터에 통합하면 사용자들이 편리하게 동영상을 삽입할 수 있습니다.

1. Draft.js 설치 및 설정

첫 번째로, Draft.js를 설치하고 프로젝트에 추가해야 합니다. 다음 명령을 사용하여 Draft.js를 설치합니다:

npm install draft-js

Draft.js를 프로젝트에 추가한 후에는 필요한 컴포넌트와 스타일을 import 할 수 있습니다.

2. 동영상 삽입 기능 구현

동영상을 삽입하기 위해 사용자가 URL을 입력하면, 해당 URL에 있는 동영상을 가져와서 보여주는 기능을 구현해야 합니다.

아래의 예제 코드를 참고하여 동영상 삽입 기능을 구현해 보세요:

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

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

  const handleVideoInsert = () => {
    const url = prompt('동영상 URL을 입력하세요');
    
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity('VIDEO', 'IMMUTABLE', { src: url });
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

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

    setEditorState(RichUtils.toggleLink(newEditorState, editorState.getSelection(), entityKey));
  };

  return (
    <div>
      <button onClick={handleVideoInsert}>동영상 삽입</button>
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
};

export default VideoEditor;

이 예제에서는 handleVideoInsert 함수를 사용하여 사용자로부터 URL을 입력받고, 해당 URL로부터 동영상을 가져와서 Draft.js 텍스트 에디터에 삽입합니다. 이 때, 동영상은 src 속성을 가지는 VIDEO 엔티티로 저장됩니다.

3. 결과 확인

위의 예제 코드를 사용하여 텍스트 에디터에 동영상 삽입 기능을 추가했다면, 이제 테스트를 해보세요. 버튼을 클릭하여 동영상 URL을 입력하고, 해당 동영상이 텍스트 에디터에 삽입되는지 확인해 보세요.

마무리

이제 Draft.js 텍스트 에디터에 동영상 삽입 기능을 추가하는 방법에 대해 알아보았습니다. 이를 바탕으로 더욱 풍부한 사용자 경험을 제공할 수 있으며, 사용자들이 텍스트 에디터에서 동영상을 쉽게 삽입할 수 있도록 도움이 되었기를 바랍니다.