Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


각 편집요소에 기본 스타일을 지정하여 inline-style로 랜더링 합니다. 편집에 필요한 기본 스타일을 정의하거나 상위 CSS 영향을 초기화하는데 사용합니다.

스타일 지정 방법

'editor.defaultStyle': 지정하고싶은 Model Element Type에 기본 스타일을 지정할 수 있습니다.

  • 지정된 Model Element Type에만 스타일 지정이 가능합니다. 
  • 스타일은 cssText 문자열 형태로 지정 할 수 있습니다.

기본 스타일 지정 예시

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
'editor.defaultStyle': {
    'Body': 'font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;',
    'Paragraph': 'line-height: 1.4'
},

기본 스타일 지정 결과

Code Block
languagexml
themeEmacs
<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>기본 스타일 지정</span>
	</p>
	<p style="margin-right: 0px; margin-bottom: 16px; margin-left: 0px; display: block;">
		<span>기본 스타일 지정</span>
	</p>
</div>


지원 Model Element Type

Model Element Type설명
Body편집영역(div.se-contents)을 의미합니다.
Paragraph<p> tag를 의미합니다.
TextRun<span> tag를 의미합니다.
Div<div> tag를 의미합니다.
Image<img> tag를 의미합니다.
Video<video> tag를 의미합니다.
List<ul> tag를 의미합니다.
ListItem<li> tag를 의미합니다.
Quote<blockquote> tag를 의미합니다.
Table<table> tag를 의미합니다.
TableRow<tr> tag를 의미합니다.
TableCell<td> tag를 의미합니다.
HorizontalLine<hr> tag를 의미합니다.
Iframe<iframe> tag를 의미합니다.



관련기능