[javascript] TinyMCE에서 텍스트 에디터에 툴바를 추가하는 방법은?

24 Nov 2023

javascript

TinyMCE는 웹 기반의 텍스트 에디터 라이브러리로, 사용자가 텍스트를 편집할 수 있는 다양한 기능을 제공합니다. 툴바는 사용자가 텍스트 스타일을 선택하고 다양한 작업을 수행할 수 있는 버튼들이 있는 공간입니다.

TinyMCE에서 툴바를 추가하는 방법은 다음과 같습니다:

TinyMCE 라이브러리를 웹 페이지에 추가합니다. HTML 파일의 <head> 태그 안에 다음 코드를 추가합니다:

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

텍스트 에디터를 생성할 <textarea> 요소를 HTML 파일에 추가합니다:

<textarea id="myTextarea"></textarea>

JavaScript 코드를 작성하여 툴바를 설정합니다:

tinymce.init({
  selector: '#myTextarea',
  toolbar: 'undo redo | bold italic underline',
  // 추가적인 툴바 옵션들을 설정할 수 있습니다.
});

위 코드에서 selector는 에디터를 생성할 요소의 ID를 지정합니다. toolbar는 툴바에 표시할 버튼들을 설정하는 옵션입니다. 위의 예제에서는 “undo”, “redo”, “bold”, “italic”, “underline” 버튼을 툴바에 추가하였습니다.

위의 단계를 완료하면 웹 페이지에서 툴바가 있는 TinyMCE 텍스트 에디터를 사용할 수 있습니다. 이제 사용자는 텍스트를 편집하고 텍스트 스타일과 기능을 적용할 수 있습니다.

더 많은 툴바 옵션과 세부 설정에 대해서는 TinyMCE의 공식 문서를 참조하시기 바랍니다.

TinyMCE 공식 문서