사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

Synap Editor에서 편집 된 내용을 HTML 형식으로 가져옵니다.


Parameters:

NameTypeAttributeDescription
wrapbooleandefault : false편집한 내용을 <html> tag로 둘러쌀지 결정합니다.
emojiEscapesbooleandefault : falseemoji 문자를 HTML Entity 형태로 변경할지 결정합니다.
specialCharacterEscapesbooleandefault: false특수문자를 HTML Entity 형태로 변경할지 결정합니다.
contentPaddingobjectdefault : 'none'

문서 여백에 대한 값을 결정합니다.

'document': 임포트한 문서의 여백을 사용.

'none': 여백을 사용하지 않음.

contentWidth 릴리즈 3.0.0 이상 릴리즈 2.18.0 이상

booleandefault: true문서 너비를 반환할지 여부를 결정합니다.

maintainId 릴리즈 3.0.2406 이상 릴리즈 2.18.2406 이상

booleandefault: falseid가 유지되도록 할 지 여부를 결정합니다.

selector 릴리즈 3.0.2406 이상 릴리즈 2.18.2406 이상

stringdefault: ''

컨텐츠 영역에서 특정 요소를 찾을 셀렉터 입니다.

codeBlockPublishingStyle 릴리즈 3.3.2602 이상 

booleandefault: true코드블럭의 HTML 콘텐츠 스타일 적용 여부를 결정합니다. 

minHeight 릴리즈 3.3.2603 이상

booleandefault: false문서 최소 높이를 반환할지 여부를 결정합니다.


Return:

TypeDescription
String사이냅에디터에서 편집한 HTML 콘텐츠



Example:

var html = editor.getPublishingHtml();


결과 값
<div class="se-contents" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23"><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>테스트 문서입니다.</span></p></div>


편집한 내용을 <html> tag로 둘러싸지 않고 가져오기

var html = editor.getPublishingHtml({'wrap':false});


결과 값
<div class="se-contents" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23"><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>테스트 문서입니다.</span></p></div>


편집한 내용을 <html> tag로 둘러싸서 가져오기

var html = editor.getPublishingHtml({'wrap':true});


결과 값
<html>\n<body>\n<div class="se-contents" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23"><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>테스트 문서입니다.</span></p></div></body>\n</html>




임포트한 문서의 여백을 사용하지 않고 HTML 가져오기

var html = editor.getPublishingHtml({'contentPadding':'none'});


결과 값
<div class="se-contents" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2; max-width: 624px;" data-document-padding-top="96" data-document-padding-bottom="96" data-document-padding-left="96" data-document-padding-right="96" data-document-width="816">....


임포트한 문서의 여백을 사용해서 HTML 가져오기

var html = editor.getPublishingHtml({'contentPadding':'document'});


결과 값
<div class="se-contents" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2; padding: 96px; max-width: 624px;" data-document-padding-top="96" data-document-padding-bottom="96" data-document-padding-left="96" data-document-padding-right="96" data-document-width="816">...


임포트한 문서의  너비를 반환하지 않고 HTML 가져오기 릴리즈 3.0.0 이상 릴리즈 2.18.0 이상

var html = editor.getPublishingHtml({'contentWidth':false});


결과 값
<div class="se-contents" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-padding-top="96" data-document-padding-bottom="96" data-document-padding-left="96" data-document-padding-right="96" data-document-width="816">...


임포트한 문서의 너비를 반환하여 HTML 가져오기 릴리즈 3.0.0 이상 릴리즈 2.18.0 이상

var html = editor.getPublishingHtml({'contentWidth':true});
결과 값
<div class="se-contents" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2; max-width: 624px;" data-document-padding-top="96" data-document-padding-bottom="96" data-document-padding-left="96" data-document-padding-right="96" data-document-width="816">...




emoji 문자를 HTML Entity 형태로 변경하지 않고 HTML 가져오기

var html = editor.getPublishingHtml({'emojiEscapes':false});
결과 값
...<span class="se-emoji" style="font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "Emoji Symbols", "EmojiOne Mozilla" !important;">(이모지)</span>...


emoji 문자를 HTML Entity 형태로 변경해서 HTML 가져오기

var html = editor.getPublishingHtml({'emojiEscapes':true});
결과 값
...<span class="se-emoji" style="font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "Emoji Symbols", "EmojiOne Mozilla" !important;">&#x1F601;</span>...




특수문자를 HTML Entity 형태로 변경하지 않고 HTML 가져오기

var html = editor.getPublishingHtml({'specialCharacterEscapes':false});
결과 값
...<span>←︎↑︎→︎↓︎↔︎↕︎↦︎↖︎</span>...


특수문자를 HTML Entity 형태로 해서 HTML 가져오기

var html = editor.getPublishingHtml({'specialCharacterEscapes':true});
결과 값
...<span>&#x2190;︎&#x2191;︎&#x2192;︎&#x2193;︎&#x2194;︎&#x2195;︎&#x21A6;︎&#x2196;︎</span>...


selector을 이용해서 문서의 특정부분을 가져오기 릴리즈 3.0.0 이상 릴리즈 2.18.0 이상

var html = editor.getPublishingHtml({'selector': '#test'});

원본 HTML

결과 값
<div class="se-contents" role="textbox" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23"><p id="test" style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>test</span></p></div>

selector 옵션을 이용한 결과 HTML

결과 값
<p id="test" style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>test</span></p>


codeBlockPublishingStyle를 이용해서 코드 블럭의 스타일 미적용하기  릴리즈 3.3.2602 이상 

var html = editor.getPublishingHtml({'codeBlockPublishingStyle':false});

원본 HTML

원본 구조
<div class="se-contents" role="textbox" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-fixed-width="false" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23">
<style type="text/css" data-publishing-style="true">.se-contents .se-code-block { background-color: #f4f4f4; }</style>
<pre class="se-code-block" style="text-align: left; white-space: pre-wrap;"><code class="hljs" style="padding: 20px 13px; display: block; overflow-wrap: break-word;">Hello, World</code></pre></div>

codeBlockPublishingStyle 옵션을 이용한 결과 HTML

결과 값
<div class="se-contents" role="textbox" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-fixed-width="false" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23">
<pre class="se-code-block" style="text-align: left; white-space: pre-wrap;"><code class="hljs" style="padding: 20px 13px; display: block; overflow-wrap: break-word;">Hello, World</code></pre></div>



minHeight를 이용해서 문서의 최소 높이를 반환하여 HTML 가져오기  릴리즈 3.3.2603 이상 

var html = editor.getPublishingHtml({'minHeight':true});

원본 HTML

원본 구조
<div class="se-contents" role="textbox" style="font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2; box-sizing: content-box;" data-document-fixed-width="false" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23">
	<div class="se-para-div" style="margin: 16px 0px; display: block; position: relative; overflow-wrap: break-word;">
		<div class="se-drawing-object-wrapper se-shape" style="text-indent: 0px; top: 657.33px; left: 357.333px; width: 127px; height: 128px; vertical-align: text-bottom; display: inline-block; position: absolute; z-index: 251659264;" data-fill-color="#f4f4f4" data-flip-h="false" data-flip-v="false" data-height="128" data-rotate="0" data-shape-type="rect" data-stroke-fill-color="#3c3c3c" data-stroke-style="solid" data-stroke-width="2" data-width="127">
			<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 127 128" data-strokesize="2" style="width: 127px; height: 128px; transform: matrix(1, 0, 0, 1, 0, 0); overflow: visible; left: 0px; top: 0px; position: absolute;"><g><path stroke-width="2" d="M 0,0 L 127,0 L 127,128 L 0,128 Z " stroke="rgb(60, 60, 60)" stroke-dasharray="none" fill="rgb(244, 244, 244)" vector-effect="non-scaling-stroke"></path></g></svg>
			<div class="se-text-body-wrapper" style="margin: 10px; top: 0px; left: 0px; width: 107px; height: 108px; position: absolute; overflow: visible; z-index: 251659264; pointer-events: none;">
				<div class="se-text-body-area" style="position: absolute; width: 100%; height: 100%; word-break: break-all; left: 0px; top: 0px; box-sizing: border-box;">
					<div class="se-text-body" style="text-align: center; vertical-align: middle; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; position: absolute; box-sizing: border-box; pointer-events: auto;">
						<p style="margin: 0px; display: block; overflow-wrap: break-word;"><br></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

minHeight 옵션을 이용한 결과 HTML

결과 값
<div class="se-contents" role="textbox" style="font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2; box-sizing: content-box; min-height: 783px;"
    data-document-fixed-width="false" data-document-padding-top="18" data-document-padding-bottom="18"
    data-document-padding-left="23" data-document-padding-right="23">
    <div class="se-para-div" style="margin: 16px 0px; display: block; position: relative; overflow-wrap: break-word;">
        <div class="se-drawing-object-wrapper se-shape"
            style="text-indent: 0px; top: 657.33px; left: 357.333px; width: 127px; height: 128px; vertical-align: text-bottom; display: inline-block; position: absolute; z-index: 251659264;"
            data-fill-color="#f4f4f4" data-flip-h="false" data-flip-v="false" data-height="128" data-rotate="0"
            data-shape-type="rect" data-stroke-fill-color="#3c3c3c" data-stroke-style="solid" data-stroke-width="2"
            data-width="127"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 127 128"
                data-strokesize="2"
                style="width: 127px; height: 128px; transform: matrix(1, 0, 0, 1, 0, 0); overflow: visible; left: 0px; top: 0px; position: absolute;">
                <g>
                    <path stroke-width="2" d="M 0,0 L 127,0 L 127,128 L 0,128 Z " stroke="rgb(60, 60, 60)"
                        stroke-dasharray="none" fill="rgb(244, 244, 244)" vector-effect="non-scaling-stroke"></path>
                </g>
            </svg>
            <div class="se-text-body-wrapper"
                style="margin: 10px; top: 0px; left: 0px; width: 107px; height: 108px; position: absolute; overflow: visible; z-index: 251659264; pointer-events: none;">
                <div class="se-text-body-area"
                    style="position: absolute; width: 100%; height: 100%; word-break: break-all; left: 0px; top: 0px; box-sizing: border-box;">
                    <div class="se-text-body"
                        style="text-align: center; vertical-align: middle; z-index: 251659264; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; position: absolute; box-sizing: border-box; pointer-events: auto;">
                        <p style="margin: 0px; display: block; overflow-wrap: break-word;"><br></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  • No labels