[javascript] TinyMCE에서 텍스트 에디터에서 사운드 삽입 기능을 추가하는 방법은?

24 Nov 2023

javascript

TinyMCE 라이브러리를 프로젝트에 추가합니다. 다운로드 링크: TinyMCE 다운로드 페이지
TinyMCE를 HTML 페이지에 추가합니다. 아래는 기본적인 구성 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="path/to/tinymce.min.js"></script>
  <script>
    tinymce.init({
      selector: 'textarea'
    });
  </script>
</head>
<body>
  <textarea></textarea>
</body>
</html>

사운드 삽입 버튼을 추가하기 위해 toolbar 속성을 설정합니다. 아래는 툴바에 사운드 삽입 버튼을 추가하는 예시입니다.

tinymce.init({
  selector: 'textarea',
  toolbar: 'insertfile'
});

사운드 삽입 기능을 추가하기 위해서는 TinyMCE 플러그인 중 하나인 “SouncCloud” 플러그인을 추가해야 합니다. 이를 위해 plugins 속성에 “soundcloud” 플러그인을 추가합니다.

tinymce.init({
  selector: 'textarea',
  toolbar: 'insertfile',
  plugins: 'soundcloud'
});

이제 menubar 속성을 설정하여 메뉴 바에서 사운드 삽입 툴을 사용할 수 있도록 해야 합니다.

tinymce.init({
  selector: 'textarea',
  toolbar: 'insertfile',
  plugins: 'soundcloud',
  menubar: 'insert'
});

위의 단계를 따르면 TinyMCE 에디터에 사운드 삽입 기능이 추가되었습니다. 이제 해당 기능을 사용할 수 있습니다.

TinyMCE 공식 문서에서 다양한 플러그인과 설정 옵션을 확인하실 수 있으며, 필요에 따라 추가 기능을 구현해 나갈 수 있습니다. 상세한 내용을 확인하려면 TinyMCE 공식 문서를 참고하시기 바랍니다.