API Name
...
Synap Editor에서 편집된 편집 된 내용을 HTML 형식으로 가져옵니다.
Parameters:
| Name | Type | Attribute | Description |
|---|
| bWrapwrap | boolean | default : false | 편집한 내용을 <html> tag로 둘러쌀지 결정합니다. |
| emojiEscapes | boolean | default : false | emoji 문자를 HTML Entity 형태로 변경할지 결정합니다. |
| beautifyspecialCharacterEscapes | boolean | default: false | HTML tag를 보기좋게 표시(beautify)할지 특수문자를 HTML Entity 형태로 변경할지 결정합니다. |
| contentPadding | object | default : 'none' | 문서 여백에 대한 값을 결정합니다. 'document': 임포트한 문서의 여백을 사용. 'currentnone': 현재 편집기의 여백을 사용.'none': 여백을 사용하지 않음여백을 사용하지 않음. |
| boolean | default: true | 문서 너비를 반환할지 여부를 결정합니다. |
| boolean | default: false | id가 유지되도록 할 지 여부를 결정합니다. |
| string | default: '' | 컨텐츠 영역에서 특정 요소를 찾을 셀렉터 입니다. |
Return:
| Type | Description |
|---|
| String | 사이냅에디터에서 편집한 HTML 콘텐츠 |
Example:
Image Added
| Code Block |
|---|
|
var html = editor.getPublishingHtml(); |
...
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<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로 둘러싸지 않고 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'wrap':false}); |
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<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로 둘러싸서 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'wrap':true}); |
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<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> |
Image Added
임포트한 문서의 여백을 사용하지 않고 HTML 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'contentPadding':'currentnone'}); |
...
...
HTML content를 Synap Editor에 보여줍니다.
Parameters:
...
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<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 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'contentPadding':'document'}); |
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<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 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'contentWidth':false}); |
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<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 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'contentWidth':true});
|
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<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">...
|
Image Added
emoji 문자를 HTML Entity 형태로 변경하지 않고 HTML 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'emojiEscapes':false}); |
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
...<span "<H1>Synap Editor</H><P>Holistic Rich Text Editor</P>";
editor.openHTML(html);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 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'emojiEscapes':true});
|
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
...<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>...
|
Image Added
특수문자를 HTML Entity 형태로 변경하지 않고 HTML 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'specialCharacterEscapes':false}); |
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
...<span>←︎↑︎→︎↓︎↔︎↕︎↦︎↖︎</span>... |
특수문자를 HTML Entity 형태로 해서 HTML 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'specialCharacterEscapes':true}); |
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
...<span>←︎↑︎→︎↓︎↔︎↕︎↦︎↖︎</span>... |
selector을 이용해서 문서의 특정부분을 가져오기
| Code Block |
|---|
|
var html = editor.getPublishingHtml({'selector': '#test'}); |
원본 HTML
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<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
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | 결과 값 |
|---|
|
<p id="test" style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>test</span></p> |