getPublishingHtml
Synap Editor에서 편집된 내용을 HTML 형식으로 반환합니다.
매개변수
| 이름 | 타입 | 속성 | 설명 |
|---|---|---|---|
wrap | boolean | 기본값: false | 편집된 내용을 <html> 태그로 감쌀지 여부를 결정합니다. |
emojiEscapes | boolean | 기본값: false | 이모지 문자를 HTML Entity 형태로 변환할지 여부를 결정합니다. |
specialCharacterEscapes | boolean | 기본값: false | 특수기호를 HTML Entity 형태로 변환할지 여부를 결정합니다. |
contentPadding | object | 기본값: 'none' | 문서의 여백 값을 결정합니다. 아래 contentPadding을 참고합니다. |
contentWidth3.0.0 버전부터 지원, 2.18.0 버전부터 지원합니다. | boolean | 기본값: true | 문서의 너비를 반환할지 여부를 결정합니다. |
maintainId3.0.2406 버전부터 지원, 2.18.2406 버전부터 지원합니다. | boolean | 기본값: false | id를 보존할지 여부를 결정합니다. |
selector3.0.2406 버전부터 지원, 2.18.2406 버전부터 지원합니다. | string | 기본값: '' | 콘텐츠 영역 내에서 특정 요소를 찾는 선택자입니다. |
codeBlockPublishingStyle3.3.2602 버전부터 지원합니다. | boolean | 기본값: true | 반환되는 HTML에 코드 블록 퍼블리싱 스타일을 포함할지 여부를 결정합니다. |
minHeight3.3.2603 버전부터 지원합니다. | boolean | 기본값: false | 문서의 최소 높이를 반환할지 여부를 결정합니다. |
contentPadding
문서 여백의 값을 결정합니다.
'document': 임포트된 문서의 여백을 사용합니다.'none': 여백을 사용하지 않습니다.
반환값
| 타입 | 설명 |
|---|---|
| String | Synap Editor에서 편집된 HTML 내용입니다. |
예시
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>Test Document</span></p></div>
<html> 태그로 감싸지지 않은 편집된 내용 가져오기
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>Test Document</span></p></div>
편집된 내용에 <html> 태그를 감싸서 가져오기
var html = editor.getPublishingHtml({ 'wrap': true });
결과
<html>
<body>
<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>Test Document</span></p></div></body>
</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">...
이모지 문자를 HTML 엔티티로 변환하지 않고 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;">(emoji)</span>...
이모지 문자를 HTML 엔티티로 변환하여 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;">😁</span>...
특수기호를 HTML 엔티티로 변환하지 않고 HTML 가져오기
var html = editor.getPublishingHtml({ 'specialCharacterEscapes': false });
결과
...<span>←︎↑︎→︎↓︎↔︎↕︎↦︎↖︎</span>...
특수기호를 HTML 엔티티로 변환하여 HTML 가져오기
var html = editor.getPublishingHtml({ 'specialCharacterEscapes': true });
결과
...<span>←︎↑︎→︎↓︎↔︎↕︎↦︎↖︎</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>
선택자 옵션을 사용한 결과 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>