getPublishingHtml
Returns the content edited in Synap Editor in HTML format.
Parameters:
<table> <thead> <tr><th>Name</th><th>Type</th><th>Attribute</th><th>Description</th></tr> </thead> <tbody> <tr> <td><code>wrap</code></td> <td>boolean</td> <td>default: <code>false</code></td> <td>Determines whether to wrap the edited content with an <code><html></code> tag.</td> </tr> <tr> <td><code>emojiEscapes</code></td> <td>boolean</td> <td>default: <code>false</code></td> <td>Determines whether to convert emoji characters into HTML Entity form.</td> </tr> <tr> <td><code>specialCharacterEscapes</code></td> <td>boolean</td> <td>default: <code>false</code></td> <td>Determines whether to convert special characters into HTML Entity form.</td> </tr> <tr> <td><code>contentPadding</code></td> <td>object</td> <td>default: <code>'none'</code></td> <td>Determines the value for the document margin.
'document': Uses the margin of the imported document.'none': Does not use any margin.
<code>contentWidth</code>
</td> <td>boolean</td> <td>default: <code>true</code></td> <td>Determines whether to return the document width.</td> </tr> <tr> <td>Release 3.0.0 and above, Release 2.18.0 and above.
<code>maintainId</code>
</td> <td>boolean</td> <td>default: <code>false</code></td> <td>Determines whether ids should be preserved.</td> </tr> <tr> <td>Release 3.0.2406 and above, Release 2.18.2406 and above.
<code>selector</code>
</td> <td>string</td> <td>default: <code>''</code></td> <td>The selector that locates a specific element within the content area.</td> </tr> <tr> <td>Release 3.0.2406 and above, Release 2.18.2406 and above.
<code>codeBlockPublishingStyle</code>
</td> <td>boolean</td> <td>default: <code>true</code></td> <td>Determines whether to apply the code block's HTML content style.</td> </tr> <tr> <td>Release 3.3.2602 and above.
<code>minHeight</code>
</td> <td>boolean</td> <td>default: <code>false</code></td> <td>Determines whether to return the document minimum height.</td> </tr> </tbody> </table>Release 3.3.2603 and above.
Return:
| Type | Description |
|---|---|
| String | The HTML content edited in Synap Editor. |
Example:
var html = editor.getPublishingHtml();
Result
<div class="se-contents" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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>
Get edited content without wrapping in <html> tag
var html = editor.getPublishingHtml({ 'wrap': false });
Result
<div class="se-contents" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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>
Get edited content wrapped in <html> tag
var html = editor.getPublishingHtml({ 'wrap': true });
Result
<html>
<body>
<div class="se-contents" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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>
Get HTML without using the imported document's margin
var html = editor.getPublishingHtml({ 'contentPadding': 'none' });
Result
<div class="se-contents" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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">....
Get HTML using the imported document's margin
var html = editor.getPublishingHtml({ 'contentPadding': 'document' });
Result
<div class="se-contents" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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">...
Get HTML without returning the imported document's width
Release 3.0.0 and above, Release 2.18.0 and above.
var html = editor.getPublishingHtml({ 'contentWidth': false });
Result
<div class="se-contents" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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">...
Get HTML returning the imported document's width
Release 3.0.0 and above, Release 2.18.0 and above.
var html = editor.getPublishingHtml({ 'contentWidth': true });
Result
<div class="se-contents" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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">...
Get HTML without converting emoji characters to HTML Entities
var html = editor.getPublishingHtml({ 'emojiEscapes': false });
Result
...<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>...
Get HTML converting emoji characters to HTML Entities
var html = editor.getPublishingHtml({ 'emojiEscapes': true });
Result
...<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>...
Get HTML without converting special characters to HTML Entities
var html = editor.getPublishingHtml({ 'specialCharacterEscapes': false });
Result
...<span>←︎↑︎→︎↓︎↔︎↕︎↦︎↖︎</span>...
Get HTML converting special characters to HTML Entities
var html = editor.getPublishingHtml({ 'specialCharacterEscapes': true });
Result
...<span>←︎↑︎→︎↓︎↔︎↕︎↦︎↖︎</span>...
Get a specific part of the document by using selector
Release 3.0.0 and above, Release 2.18.0 and above.
var html = editor.getPublishingHtml({ 'selector': '#test' });
Original HTML
<div class="se-contents" role="textbox" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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>
Result HTML using the selector option
<p id="test" style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>test</span></p>
Disable code block style with codeBlockPublishingStyle
Release 3.3.2602 and above.
var html = editor.getPublishingHtml({ 'codeBlockPublishingStyle': false });
Original HTML
<div class="se-contents" role="textbox" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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>
Result HTML using the codeBlockPublishingStyle option
<div class="se-contents" role="textbox" style="box-sizing: content-box; font-family: "Malgun Gothic"; 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>
Get HTML returning the document minimum height by using minHeight
Release 3.3.2603 and above.
var html = editor.getPublishingHtml({ 'minHeight': true });
Original HTML
<div class="se-contents" role="textbox" style="font-family: "Malgun Gothic"; 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>
Result HTML using the minHeight option
<div class="se-contents" role="textbox" style="font-family: "Malgun Gothic"; 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>