각 편집요소에 기본 스타일을 지정하여 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를 의미합니다. |