TinyMCE는 웹 페이지에 텍스트 에디터를 쉽게 구현할 수 있는 강력한 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 웹 페이지에서 텍스트를 편집하고 서식을 지정할 수 있습니다. 이제 TinyMCE를 사용하여 웹 페이지에 텍스트 에디터를 구현하는 방법을 알아보겠습니다.

준비하기

먼저, 웹 페이지에 TinyMCE를 추가하기 위해 라이브러리를 다운로드하고 웹 페이지에 <script> 태그를 추가해야 합니다. 다음은 CDN을 통해 TinyMCE를 추가하는 예시입니다.

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

위에서 YOUR_API_KEY를 자신의 TinyMCE API 키로 대체해야 합니다. API 키는 TinyMCE 무료 버전을 사용할 때 자동으로 제공됩니다.

텍스트 에디터 추가하기

TinyMCE 스크립트를 웹 페이지에 추가하면, 텍스트 에디터를 추가하는 것은 매우 간단합니다. 텍스트 에디터를 적용할 <textarea> 요소에 tinymce.init() 함수를 호출하여 텍스트 에디터를 초기화하면 됩니다. 다음은 텍스트 에디터를 추가하는 예시입니다.

tinymce.init({
  selector: 'textarea',
  plugins: 'advlist autolink lists link image charmap print preview',
  toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image',
  height: 300
});

위 예시에서 selector는 텍스트 에디터를 적용할 <textarea> 요소의 선택자입니다. plugins는 사용할 TinyMCE 플러그인 목록을 지정하고, toolbar는 에디터에 표시될 툴바의 버튼들을 지정합니다. height는 텍스트 에디터의 높이를 설정합니다.

결과 확인하기

텍스트 에디터를 웹 페이지에 추가한 후, 텍스트 영역을 클릭하면 TinyMCE 텍스트 에디터가 나타납니다. 에디터를 사용해 텍스트를 편집하고, 서식을 지정해 보세요.

결론

이제 TinyMCE를 사용하여 웹 페이지에 텍스트 에디터를 구현하는 방법을 알게 되었습니다. TinyMCE는 간편한 사용법과 다양한 기능을 제공하기 때문에 웹 페이지에서 텍스트 편집 기능을 구현하려는 경우 유용하게 사용할 수 있습니다. 자세한 내용은 TinyMCE 공식 문서를 참조하시기 바랍니다.