에디터에서 작성한 컨텐츠를 반응형보기 형태로 제공하기 위해 아래와 같이 두가지 방법으로 설정이 가능합니다.
1. getPublishingHtml() API 사용시 옵션 설정
synapeditor.config.js
editor.getPublishingHtml({'publishingResponsiveStyle': true});
getPublishingHtml() API 사용시 publishingResponsiveStyle 옵션을 true로 설정하면 아래와 같이 HTML 본문에 반응형보기 처리를 위한 <style>이 포함되어 반환됩니다.
getPublishingHtml() 호출결과
<div class="se-contents" style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;">
<style type="text/css" data-seresponsive="true">
.se-contents .se-scrollbox{overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
.se-contents .se-scrollbox::-webkit-scrollbar{display: none;}
.se-contents .se-responsive.se-image .se-caption{max-width: 100%; !important;}
.se-contents .se-responsive.se-image, .se-contents .se-responsive.se-video{max-width: 100%; height: auto !important;}
.se-contents .se-responsive.se-image > img, .se-contents .se-responsive.se-video > *{max-width: 100%; height: auto !important;}
.se-contents .se-responsive.se-video .se-youtube-wrapper{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; display: block;}
.se-contents .se-responsive.se-video .se-youtube-wrapper > iframe{width: 100% !important; height: 100% !important; position: absolute;}
</style>
<p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>반응형 보기 테스트입니다.</span></p>
</div>
2. 외부 CSS에 반응형보기 지원을 위한 스타일 추가
반응형보기를 위한 style
<style type="text/css">
.se-contents .se-scrollbox {overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
.se-contents .se-scrollbox::-webkit-scrollbar{display: none;}
.se-contents .se-responsive.se-image .se-caption{max-width: 100%; !important;}
.se-contents .se-responsive.se-image, .se-contents .se-responsive.se-video{max-width: 100%; height: auto !important;}
.se-contents .se-responsive.se-image > img, .se-contents .se-responsive.se-video > *{max-width: 100%; height: auto !important;}
.se-contents .se-responsive.se-video .se-youtube-wrapper{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; display: block;}
.se-contents .se-responsive.se-video .se-youtube-wrapper > iframe{width: 100% !important; height: 100% !important; position: absolute;}
</style>