[javascript] TinyMCE에서 텍스트 에디터에서 텍스트 정렬을 조정하는 방법은?

24 Nov 2023

javascript

TinyMCE 텍스트 정렬을 조정하는 방법은 매우 간단합니다. textAlign 속성을 사용하여 텍스트 정렬을 설정할 수 있습니다. 가능한 정렬 값은 “left”, “center”, “right”, “justify” 입니다. 이를 아래와 같이 코드에서 사용할 수 있습니다.

tinymce.init({
  selector: 'textarea', // 에디터가 적용될 텍스트 영역 선택자
  toolbar: 'alignleft aligncenter alignright alignjustify', // 툴바에 정렬 버튼 표시
  setup: function (editor) {
    editor.on('init', function () {
      editor.execCommand('justifyLeft'); // 기본 텍스트 정렬 값 설정
    });

    editor.on('toolbarButtonClick', function (e) {
      if (e.button === 'alignleft') {
        editor.execCommand('justifyLeft'); // 왼쪽 정렬
      } else if (e.button === 'aligncenter') {
        editor.execCommand('justifyCenter'); // 가운데 정렬
      } else if (e.button === 'alignright') {
        editor.execCommand('justifyRight'); // 오른쪽 정렬
      } else if (e.button === 'alignjustify') {
        editor.execCommand('justifyFull'); // 양쪽 정렬
      }
    });
  }
});

위의 코드에서 selector는 편집기가 적용될 텍스트 영역을 선택하는 역할을 합니다. toolbar는 툴바에 정렬 버튼을 표시합니다. setup 함수는 초기화 및 툴바 버튼 클릭 이벤트를 처리합니다. editor.execCommand 함수를 사용하여 텍스트 정렬 값을 변경할 수 있습니다.

위의 코드 예제를 사용하면 TinyMCE에서 텍스트를 쉽게 정렬할 수 있습니다. 자세한 내용은 TinyMCE 공식 문서를 참조하시기 바랍니다.