에디터에서 작성한 컨텐츠를 반응형보기 형태로 제공하기 위해 아래와 같이 두가지 방법으로 설정이 가능합니다.
1. getPublishingHtml() API 사용시 옵션 설정
synapeditor.config.js
editor.getPublishingHtml({'publishingResponsiveStyle': true});
2. 외부 CSS에 반응형보기 지원을 위한 스타일 추가
synapeditor.config.js
<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>