[javascript] TinyMCE에서 텍스트 에디터에서 문자 배경색을 변경하는 방법은?

24 Nov 2023

javascript

tinymce.init({
  selector: 'textarea',
  toolbar: 'backcolor',
  plugins: 'textcolor',
  toolbar_mode: 'floating',
  toolbar_location: 'bottom',
  menubar: false,
  setup: function (editor) {
    editor.ui.registry.addButton('backcolor', {
      icon: 'backcolor',
      onAction: function () {
        editor.execCommand('hilitecolor', false, '#FFFF00');
      }
    });
  }
});

위의 코드는 TinyMCE 에디터를 초기화하기 위한 설정 정의 부분입니다. toolbar 속성에서 backcolor를 추가하여 툴바에 배경색 버튼을 표시하도록 설정하였습니다. 또한, plugins 속성에 ‘textcolor’를 추가하여 해당 플러그인을 사용하도록 설정하였습니다.

setup 함수를 사용하여 backcolor 버튼을 초기화하고, 클릭 이벤트에서 editor.execCommand를 사용하여 hilitecolor 명령을 실행하여 배경색을 변경할 수 있습니다. 본 예제에서는 노란색(#FFFF00)으로 배경색을 변경하도록 설정되어 있습니다.

이와 같이 TinyMCE에서 텍스트 에디터에서 문자의 배경색을 변경할 수 있습니다.

참고 문서:

TinyMCE - Text Color Plugin