[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
배열에는 사용 가능한 스타일을 정의하는 객체들이 포함되어 있습니다. 각각의 객체는 title
과 format
속성을 가지고 있는데, title
은 스타일이 툴바에서 보여질 이름이고, format
은 해당 스타일이 적용될 HTML 요소를 지정합니다.
위의 예제에서는 “본문”, “제목 1”, “제목 2”, “제목 3”의 네 가지 스타일을 정의하였습니다. “본문” 스타일은 <p>
요소에 적용되고, “제목 1”은 <h1>
요소에 적용되는 식입니다.
이제 TinyMCE 텍스트 에디터를 사용할 때, 사용자는 “스타일 선택” 툴바 메뉴에서 정의한 스타일을 선택하여 문단 스타일을 변경할 수 있습니다.
정의한 스타일 외에도 다른 속성을 사용하여 스타일을 사용자 정의할 수도 있습니다. 자세한 내용은 TinyMCE Documentation에서 확인하실 수 있습니다.