1. TinyMCE를 웹 페이지에 추가합니다. TinyMCE를 사용하기 위해 먼저 스크립트 파일을 웹 페이지에 추가해야 합니다. 해당 스크립트는 다음과 같은 방법으로 추가할 수 있습니다.

<script src="https://cdn.tiny.cloud/1/{your-api-key}/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

위의 코드에서 {your-api-key}는 본인의 TinyMCE API 키로 대체해야 합니다.

1. 텍스트 에디터를 초기화하고 설정합니다. TinyMCE를 초기화하고 원하는 설정을 적용하기 위해 tinymce.init() 함수를 사용합니다. 아래 예제는 TinyMCE를 초기화하고 기본 설정을 적용하는 예제입니다.

tinymce.init({
  selector: 'textarea', // 텍스트 에디터로 사용할 textarea의 선택자
  toolbar: 'alignright', // 툴바에 오른쪽 정렬 아이콘만 표시
  plugins: 'textcolor', // 텍스트 색상을 변경할 수 있는 플러그인 사용
  toolbar_text_colors: '000000', // 툴바에 텍스트 색상을 설정
});

위의 코드에서 selector는 텍스트 에디터로 사용할 textarea의 선택자입니다. toolbar는 툴바에 표시될 아이콘을 설정하는 부분이고, plugins는 사용할 플러그인을 설정하는 부분입니다. 여기서는 textcolor 플러그인을 사용하여 텍스트 색상을 변경할 수 있도록 설정했습니다. toolbar_text_colors는 툴바에 표시될 텍스트 색상을 설정하는 부분입니다.

1. 오른쪽 정렬 아이콘을 추가합니다. TinyMCE에 텍스트를 오른쪽으로 정렬하는 아이콘을 추가하려면, toolbar 속성에 'alignright'를 추가하십시오. 이렇게 하면 툴바에 오른쪽 정렬 아이콘이 표시됩니다.

위의 예제 코드에서는 'alignright' 하나만 추가했지만, 다른 아이콘과 조합하여 원하는 툴바를 만들 수도 있습니다. 예를 들어 'alignleft aligncenter alignright'와 같이 여러 아이콘을 공백으로 구분하여 추가할 수 있습니다.

위의 단계를 따라가면 텍스트 에디터에서 텍스트를 오른쪽으로 정렬하는 기능을 사용할 수 있습니다. TinyMCE 공식 문서에서 더 많은 설정과 기능을 확인할 수 있으므로, 필요하다면 참고할 것을 권장합니다.

참고 사이트:

• TinyMCE 공식 문서
• TinyMCE API 키