[javascript] TinyMCE에서 텍스트 에디터에서 유튜브 동영상 삽입 기능을 추가하는 방법은?

24 Nov 2023

TinyMCE에서 텍스트 에디터에서 유튜브 동영상 삽입 기능 추가하기

TinyMCE는 강력한 WYSIWYG 텍스트 에디터로, 웹 애플리케이션에서 사용자가 텍스트를 편집할 수 있게 해줍니다. 이 기능에 유튜브 동영상 삽입 기능을 추가하고 싶다면, 다음의 단계를 따라하면 됩니다.

먼저, TinyMCE 라이브러리를 다운로드하고 프로젝트에 추가해야 합니다. 다음의 CDN 링크를 사용하여 최신 버전의 TinyMCE를 가져옵니다.

<script src="https://cdn.tiny.cloud/1/myapikey/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

TinyMCE를 사용하기 위해 에디터를 초기화해야 합니다. 아래의 코드를 사용하여 에디터를 생성합니다.

tinymce.init({
  selector: '#editor',
  plugins: 'media',
  toolbar: 'media',
});

위의 코드에서 ‘media’ 플러그인을 추가하고, ‘media’ 툴바에 추가하여 유튜브 동영상 삽입 버튼을 활성화할 수 있습니다. 이를 통해 사용자는 텍스트 편집기에서 유튜브 동영상을 삽입할 수 있습니다.

tinymce.init({
  selector: '#editor',
  plugins: 'media',
  toolbar: 'media',
});

이제 TinyMCE 에디터를 사용하여 유튜브 동영상을 삽입할 수 있습니다. 에디터를 열고 동영상을 삽입하려는 위치에 커서를 놓고, ‘삽입’ 버튼을 클릭한 후, 나타나는 다이얼로그 상자에서 유튜브 동영상의 URL을 입력합니다. 유튜브 동영상은 자동으로 삽입됩니다.

위의 단계를 따라하면 TinyMCE 텍스트 에디터에 유튜브 동영상 삽입 기능을 추가할 수 있습니다. 어렵지 않은 과정이므로 프로젝트에 유용하게 활용해보세요!