TinyMCE는 매우 유용한 WYSIWYG(What You See Is What You Get) 텍스트 에디터입니다. HTML 컨텐츠를 손쉽게 편집하고 포맷팅할 수 있는 기능을 제공합니다. 텍스트의 글자 색상을 변경하는 기능도 간단히 구현할 수 있습니다. 아래의 코드를 사용하여 TinyMCE에서 텍스트의 글자 색상을 변경하는 방법을 알아보겠습니다.

tinymce.init({
  selector: 'textarea',
  toolbar: 'forecolor',
  setup: function(editor) {
    editor.ui.registry.addMenuButton('forecolor', {
      text: '글자색',
      fetch: function(callback) {
        var items = [
          {text: '빨강', value: 'red'},
          {text: '파랑', value: 'blue'},
          {text: '녹색', value: 'green'}
        ];
        callback(items);
      },
      onAction: function(value) {
        editor.execCommand('ForeColor', false, value);
      }
    });
  }
});

위의 코드에서 tinymce.init 함수로 TinyMCE를 초기화합니다. selector 속성을 사용하여 텍스트 에디터를 지정하고, toolbar 속성을 'forecolor'로 설정하여 글자 색상 선택 기능을 추가합니다.

setup 속성을 사용하여 사용자 정의 설정을 추가합니다. editor.ui.registry.addMenuButton 함수를 사용하여 글자색 선택 기능을 메뉴 버튼으로 추가합니다. "forecolor"와 같은 아이디를 가진 메뉴 버튼을 설정합니다. 메뉴 버튼의 텍스트는 “글자색”으로 지정하고, fetch 속성에서 사용 가능한 색상 목록을 정의합니다.

사용 가능한 색상 목록은 해당 색상의 텍스트와 값을 포함하는 객체의 배열로 구성됩니다. 위의 예시에서는 빨강, 파랑, 녹색의 세 가지 색상을 지정하였습니다.

onAction 속성에서는 선택한 값을 이용하여 ForeColor 명령을 실행하여 선택한 색상을 적용합니다.

위의 코드를 사용하면 TinyMCE 텍스트 에디터에서 텍스트의 글자 색상을 변경할 수 있습니다.