각 편집요소에 기본 스타일을 지정하여 inline-style로 랜더링 합니다. 편집에 필요한 기본 스타일을 정의하거나 상위 CSS 영향을 초기화하는데 사용합니다.
스타일 지정 방법
'editor.defaultStyle': 지정하고싶은 Model Element Type에 기본 스타일을 지정할 수 있습니다.
- 지정된 Model Element Type에만 스타일 지정이 가능합니다.
- 스타일은 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>기본 스타일 지정</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를 의미합니다. |