[javascript] TinyMCE에서 텍스트 에디터를 수정하는 방법은?

24 Nov 2023

javascript

TinyMCE를 패키지로 설치하기

먼저, TinyMCE를 웹 애플리케이션에 통합하기 위해 패키지를 다운로드 및 설치해야 합니다. 다음 명령어를 사용하여 NPM을 통해 패키지를 설치할 수 있습니다.

npm install @tinymce/tinymce-react

TinyMCE 초기화

TinyMCE를 사용하려면 먼저 초기화해야 합니다. 이를 위해 다음과 같은 단계를 따릅니다.

tinymce-react 패키지를 가져옵니다.

import { Editor } from '@tinymce/tinymce-react';

TinyMCE Editor 컴포넌트를 만듭니다.

const MyEditor = () => {
  return (
    <Editor
      apiKey="YOUR_API_KEY"
      initialValue="<p>This is the initial content of the editor</p>"
      init={{
        height: 500,
        width: 800,
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
      }}
    />
  );
}

MyEditor 컴포넌트를 원하는 페이지에 렌더링합니다.

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

TinyMCE 커스터마이징

TinyMCE를 사용자 정의하려면 init 객체 내부의 속성들을 수정하면 됩니다. 예를 들어, 다음과 같이 커스텀 툴바를 만들 수 있습니다.

init={{
  height: 500,
  width: 800,
  toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code | customButton',
  toolbar_buttons: {
    customButton: {
      text: 'Custom Button',
      icon: 'custom-icon',
      onclick: function () {
        // 버튼 동작 구현
      }
    }
  }
}}

위 코드에서 toolbar_buttons 객체를 사용하여 커스텀 버튼을 추가할 수 있습니다. 버튼의 텍스트, 아이콘 및 클릭 이벤트를 정의할 수 있습니다.

이외에도 init 객체의 다양한 속성을 조정하여 툴바, 색상 선택, 이미지 업로드 등 다양한 기능을 추가하고 제어할 수 있습니다. tinymce-react 문서를 참조하여 원하는 기능을 구현하세요.

텍스트 에디터를 자신의 웹 애플리케이션에 통합하고 수정하는 방법에 대해 알아보았습니다. TinyMCE의 다양한 기능과 옵션을 활용하여 사용자 친화적인 텍스트 편집 환경을 만들어 보세요. Happy coding!