편집 기본 스타일 지정

각 편집 요소마다 기본 스타일을 지정하면 인라인 스타일로 렌더링됩니다. 편집에 필요한 기본 스타일을 정의하거나 상위 CSS의 영향을 초기화하는 데 사용됩니다.

스타일 지정 방법

'editor.defaultStyle': 지정하려는 모델 요소 타입에 대해 기본 스타일을 지정할 수 있습니다.

  • 스타일은 지원되는 모델 요소 타입에만 지정할 수 있습니다.
  • 스타일은 cssText 문자열 형식으로 지정할 수 있습니다.

기본 스타일 지정 예시

// synapeditor.config.js
'editor.defaultStyle': {
    'Body': 'font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;',
    'Paragraph': 'line-height: 1.4'
},

기본 스타일 지정 결과

<div class="se-contents" style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2; padding: 25px;">
    <p style="margin-right: 0px; margin-bottom: 16px; margin-left: 0px; display: block;">
        <span>Default style specification</span>
    </p>
    <p style="margin-right: 0px; margin-bottom: 16px; margin-left: 0px; display: block;">
        <span>Default style specification</span>
    </p>
</div>

지원되는 모델 요소 타입

모델 요소 타입설명
Body편집 영역(div.se-contents)을 나타냅니다.
Paragraph<p> 태그를 나타냅니다.
TextRun<span> 태그를 나타냅니다.
Div<div> 태그를 나타냅니다.
Image<img> 태그를 나타냅니다.
Video<video> 태그를 나타냅니다.
List<ul> 태그를 나타냅니다.
ListItem<li> 태그를 나타냅니다.
Quote<blockquote> 태그를 나타냅니다.
Table<table> 태그를 나타냅니다.
TableRow<tr> 태그를 나타냅니다.
TableCell<td> 태그를 나타냅니다.
HorizontalLine<hr> 태그를 나타냅니다.
Iframe<iframe> 태그를 나타냅니다.

관련 정보