먼저, TinyMCE를 웹 페이지에 통합합니다. 다음과 같이 <script> 태그를 사용하여 TinyMCE 스크립트를 불러옵니다.

<script src="https://cdn.tiny.cloud/1/{YOUR_API_KEY}/tinymce/5/tinymce.min.js"></script>

YOUR_API_KEY 부분에는 본인의 TinyMCE API 키를 넣어야 합니다. TinyMCE 웹 사이트에서 API 키를 생성할 수 있습니다.

다음으로, 텍스트 에디터를 생성하는 JavaScript 코드를 작성합니다. 아래는 파일 첨부 기능을 가진 텍스트 에디터를 생성하는 예시입니다.

tinymce.init({
  selector: '#myTextarea',
  plugins: 'advlist autolink lists link image imagetools',
  toolbar: 'insertfile',
  file_picker_types: 'file image',
  file_picker_callback: function(callback, value, meta) {
    // 파일 첨부 대화상자를 열고 선택한 파일을 콜백 함수로 전달합니다.
    // 파일을 처리하는 로직을 작성합니다.
    // 예시: 파일을 서버로 업로드하고, 첨부된 이미지 파일의 URL을 에디터에 삽입합니다.
  }
});

위 코드에서 selector는 에디터를 표시할 HTML 요소의 ID입니다. plugins는 플러그인을 지정하는데, 파일 첨부 기능을 위해 imagetools 플러그인을 추가하였습니다. toolbar는 툴바에 표시할 아이콘을 지정하는데, insertfile을 추가하여 파일 첨부 아이콘을 표시합니다.

file_picker_types와 file_picker_callback은 파일 첨부 대화상자와 파일 처리 로직을 담당합니다. file_picker_types는 지원할 파일 유형을 설정하는데, file과 image를 지정하였습니다. file_picker_callback은 파일 첨부 대화상자를 열고 파일 선택 시 호출될 콜백 함수입니다. 여기에서 파일을 처리하는 로직을 작성하면 됩니다.

위와 같이 TinyMCE를 사용하면 텍스트 에디터에서 파일 첨부 기능을 간편하게 추가할 수 있습니다. 자세한 내용은 TinyMCE 공식 문서를 참조하시기 바랍니다.