Page tree

Versions Compared

Key

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


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

스타일 지정 방법

It is the feature to designate the default styles to each editing elements and render in inline-style. It can be used to define the default style for editing or initialize influence of upper CSS.

Style Designating Method

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

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

Designate the default style to the desired model element type.

  • You may deisgnate styles only to the designated model element types.
  • The style can be designated in the form of cssText string.

Example of Designating Default Style

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'
},
기본 스타일 지정 결과

Result of Designating Default Style

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>
지원


Supported Model Element Type

Model Element Type설명Description
Body편집영역Refers to the editing window (div.se-contents)을 의미합니다.
ParagraphRefers to <p> tag를 의미합니다tag.
TextRunRefers to <span> tag를 의미합니다tag.
DivRefers to <div> tag를 의미합니다tag.
ImageRefers to <img> tag를 의미합니다tag.
VideoRefers to <video> tag를 의미합니다tag.
ListRefers to <ul> tag를 의미합니다tag.
ListItemRefers to <li> tag를 의미합니다tag.
QuoteRefers to <blockquote> tag를 의미합니다tag.
TableRefers to <table> tag를 의미합니다tag.
TableRowRefers to <tr> tag를 의미합니다tag.
TableCellRefers to <td> tag를 의미합니다tag.
HorizontalLineRefers to <hr> tag를 의미합니다tag.
IframeRefers to <iframe> tag를 의미합니다tag.



관련기능See also