[javascript] Draft.js에서 텍스트 에디터의 사진 갤러리 추가하기

24 Nov 2023

javascript

이번 포스트에서는 Draft.js라는 JavaScript 라이브러리를 사용하여 텍스트 에디터에 사진 갤러리 기능을 추가하는 방법을 알아보겠습니다.

Draft.js 소개

Draft.js는 React 기반의 강력한 텍스트 에디터 라이브러리로, Facebook에서 개발하고 유지보수하고 있습니다. 이 라이브러리를 사용하면 텍스트 입력, 텍스트 스타일링, 첨부 파일 등 다양한 기능을 가진 텍스트 에디터를 손쉽게 개발할 수 있습니다.

사진 갤러리 구현하기

사진 갤러리를 구현하기 위해 다음과 같은 단계를 따릅니다:

Draft.js 패키지 설치하기:
```
npm install draft-js
```

Draft.js 컴포넌트 생성하기:

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

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

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

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

export default MyEditor;

사진 갤러리 컴포넌트 생성하기:

import React from 'react';

class Gallery extends React.Component {
  render() {
    return (
      <div>
        // 사진 갤러리 구현 코드
      </div>
    );
  }
}

export default Gallery;

사진 업로드 기능 추가하기:

import React from 'react';

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [],
    };
  }

  handleImageUpload(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
      const image = event.target.result;
      this.setState((prevState) => ({
        images: [...prevState.images, image],
      }));
    };
    reader.readAsDataURL(file);
  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleImageUpload.bind(this)} />
        {this.state.images.map((image) => (
          <img src={image} alt="gallery-image" />
        ))}
      </div>
    );
  }
}

export default Gallery;

Draft.js 에디터에 사진 갤러리 삽입 기능 추가하기:

import React from 'react';
import { Editor, EditorState, ContentState, AtomicBlockUtils } from 'draft-js';
import Gallery from './Gallery';

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

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

  insertGallery() {
    const { editorState } = this.state;
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', { src: 'gallery' });
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
    this.setState({ editorState: newState });
  }

  blockRenderer(block) {
    if (block.getType() === 'atomic') {
      return {
        component: Gallery,
        editable: false,
      };
    }
    return null;
  }

  render() {
    return (
      <div>
        <button onClick={this.insertGallery.bind(this)}>Add Gallery</button>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange.bind(this)}
          blockRendererFn={this.blockRenderer}
        />
      </div>
    );
  }
}

export default MyEditor;

위의 코드를 사용하여 Draft.js 에디터에 사진 갤러리를 추가할 수 있습니다. 갤러리를 추가하려면 “Add Gallery” 버튼을 클릭하면 됩니다.

이제 여러분은 Draft.js를 사용하여 텍스트 에디터에 사진 갤러리를 손쉽게 추가할 수 있게 되었습니다. 이를 바탕으로 더욱 다양한 기능을 추가해보세요!

Draft.js 소개

사진 갤러리 구현하기

참고 자료