[javascript] TinyMC에서 텍스트 에디터의 스타일을 커스터마이징하는 방법은?

24 Nov 2023

javascript

1. 테마 변경하기

TinyMCE에는 다양한 테마가 제공됩니다. 테마를 변경하여 에디터의 스타일을 바꿀 수 있습니다. 테마는 TinyMCE의 스타일 시트(CSS) 파일에 정의된 스타일을 사용하여 에디터를 꾸밀 수 있습니다. 사용 가능한 테마는 TinyMCE 공식 웹사이트에서 확인할 수 있습니다.

이하는 TinyMCE에 테마를 적용하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/API_KEY_HERE/tinymce/5/tinymce.min.js"></script>
  <script>
    tinymce.init({
      selector: 'textarea',
      theme: 'THEME_NAME_HERE' // 테마 이름 설정
    });
  </script>
</head>
<body>
  <textarea></textarea>
</body>
</html>

위 예제에서 “API_KEY_HERE”와 “THEME_NAME_HERE”를 각각 실제 API 키와 원하는 테마 이름으로 변경해야 합니다.

2. 사용자 정의 스타일 적용하기

TinyMCE에서는 사용자 정의 CSS 파일을 사용하여 에디터의 스타일을 변경할 수도 있습니다. 다음은 사용자 정의 CSS 파일을 적용하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/API_KEY_HERE/tinymce/5/tinymce.min.js"></script>
  <script>
    tinymce.init({
      selector: 'textarea',
      content_css: 'PATH_TO_CUSTOM_CSS_FILE' // 사용자 정의 CSS 파일 경로 설정
    });
  </script>
</head>
<body>
  <textarea></textarea>
</body>
</html>

위 예제에서 “API_KEY_HERE”와 “PATH_TO_CUSTOM_CSS_FILE”를 각각 실제 API 키와 사용자 정의 CSS 파일의 경로로 변경해야 합니다.

TinyMCE는 텍스트 에디터의 스타일을 커스터마이징할 수 있는 다양한 옵션과 기능을 제공합니다. 사용자는 자신의 요구에 맞게 스타일을 변경하고 에디터를 원하는 대로 꾸밀 수 있습니다.