[javascript] TinyMCE에서 텍스트 에디터에서 텍스트 가운데 정렬을 사용하는 방법은?

24 Nov 2023

javascript

tinymce.init({
  selector: '#myTextarea',
  toolbar: 'aligncenter',
  plugins: 'advlist',
  setup: function(editor) {
    editor.ui.registry.addButton('aligncenter', {
      icon: 'aligncenter',
      tooltip: '가운데 정렬',
      onAction: function() {
        editor.execCommand('JustifyCenter');
      }
    });
  }
});

위 코드는 selector로 지정된 텍스트 에디터에 ‘가운데 정렬’ 버튼을 추가합니다. 버튼을 클릭하면 JustifyCenter 명령이 실행되어 텍스트가 가운데 정렬됩니다. 이 코드는 TinyMCE 버전 5에서 작동합니다.

만약 TinyMCE 버전 4를 사용하고 있다면, 아래의 코드를 사용해주세요.

tinymce.init({
  selector: '#myTextarea',
  toolbar: 'aligncenter',
  plugins: 'aligncenter',
});

위 코드는 ‘aligncenter’ 플러그인을 추가하여 ‘가운데 정렬’ 버튼을 툴바에 표시합니다. 버튼을 클릭하면 텍스트가 가운데 정렬됩니다.

위의 예제 코드를 참고하여 TinyMCE에서 텍스트를 가운데 정렬하는 방법을 쉽게 구현할 수 있습니다.