[javascript] Draft.js에서 텍스트 에디터의 인쇄 기능 추가하기

24 Nov 2023

javascript

Draft.js는 React를 기반으로 한 강력한 텍스트 에디팅 프레임워크입니다. 기본적으로 Draft.js는 사용자가 입력한 텍스트를 다양한 형식으로 표현하고 편집 할 수 있는 기능을 제공합니다. 그러나 Draft.js에는 기본적으로 인쇄 기능이 포함되어 있지 않습니다. 이번 블로그에서는 Draft.js 텍스트 에디터에 인쇄 기능을 추가하는 방법에 대해 알아보겠습니다.

1. 인쇄 버튼 추가하기

첫 번째 단계는 텍스트 에디터 옆에 “인쇄” 버튼을 추가하는 것입니다. 이를 위해 다음과 같은 코드를 작성할 수 있습니다.

class Editor extends React.Component {
  printEditor = () => {
    window.print();
  };

  render() {
    return (
      <div>
        <button onClick={this.printEditor}>인쇄</button>
        <DraftEditor />
      </div>
    );
  }
}

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

위의 코드에서 Editor 클래스는 printEditor 메서드를 가지고 있습니다. 이 메서드는 사용자가 “인쇄” 버튼을 클릭했을 때 호출됩니다. printEditor 메서드 안에서는 window.print()를 호출하여 현재 페이지를 인쇄합니다.

2. 인쇄 스타일 추가하기

텍스트 에디터를 인쇄할 때는 일반적으로 다른 스타일을 적용해야 합니다. 예를 들어 배경색을 제거하거나 텍스트를 더 명확하게 보여줄 수 있습니다. 이를 위해 Draft.js 스타일링을 사용할 수 있습니다.

@media print {
  .Editor-root {
    background-color: white;
  }
  .Editor-content {
    padding: 0;
    font-size: 12pt;
  }
}

위의 CSS 코드는 @media print 미디어 쿼리를 사용하여 인쇄할 때만 적용되는 스타일을 정의합니다. 여기서 .Editor-root와 .Editor-content는 Draft.js 텍스트 에디터에서 사용되는 클래스 이름입니다. 인쇄할 때의 배경색과 패딩, 폰트 크기 등 원하는 스타일을 설정할 수 있습니다.

결과

이제 텍스트 에디터 옆에 “인쇄” 버튼이 추가되었고, 사용자가 버튼을 클릭하면 현재 페이지가 인쇄됩니다. 인쇄할 때는 지정한 스타일이 적용되어 더 적합한 형식으로 텍스트가 표시됩니다.

이러한 인쇄 기능을 추가함으로써 사용자는 텍스트를 Draft.js에서 편집 및 저장한 후 원하는 때에 인쇄할 수 있습니다.

1. 인쇄 버튼 추가하기

2. 인쇄 스타일 추가하기

결과

참고 자료