[javascript] TinyMCE에서 텍스트 에디터에서 문단 스타일을 변경하는 방법은?

TinyMCE에서 문단 스타일을 변경하는 방법은 몇 가지가 있는데요. 가장 간단한 방법은 style_formats 속성을 사용하여 사용자 정의 스타일을 정의하는 것입니다.

먼저, TinyMCE 코드를 초기화할 때 다음과 같이 style_formats 속성을 설정해야 합니다:

tinymce.init({
  selector: '#editor',
  toolbar: 'styleselect',
  style_formats: [
    { title: '본문', format: 'p' },
    { title: '제목 1', format: 'h1' },
    { title: '제목 2', format: 'h2' },
    { title: '제목 3', format: 'h3' }
  ]
});

위의 코드에서 style_formats 배열에는 사용 가능한 스타일을 정의하는 객체들이 포함되어 있습니다. 각각의 객체는 titleformat 속성을 가지고 있는데, title은 스타일이 툴바에서 보여질 이름이고, format은 해당 스타일이 적용될 HTML 요소를 지정합니다.

위의 예제에서는 “본문”, “제목 1”, “제목 2”, “제목 3”의 네 가지 스타일을 정의하였습니다. “본문” 스타일은 <p> 요소에 적용되고, “제목 1”은 <h1> 요소에 적용되는 식입니다.

이제 TinyMCE 텍스트 에디터를 사용할 때, 사용자는 “스타일 선택” 툴바 메뉴에서 정의한 스타일을 선택하여 문단 스타일을 변경할 수 있습니다.

정의한 스타일 외에도 다른 속성을 사용하여 스타일을 사용자 정의할 수도 있습니다. 자세한 내용은 TinyMCE Documentation에서 확인하실 수 있습니다.