반응형보기 환경설정

에디터에서 작성한 컨텐츠를 반응형보기 형태로 제공하기 위해 아래와 같이 두가지 방법으로 설정이 가능합니다.

1. getPublishingHtml() API 사용시 옵션 설정

getPublishingHtml() API 사용시 publishingResponsiveStyle 옵션을 true로 설정하면 HTML 본문에 반응형보기 처리를 위한 <style>이 포함되어 반환됩니다. 이 경우 별다른 외부 CSS 파일 수정 없이 반응형보기를 지원할 수 있습니다.

editor.getPublishingHtml({'publishingResponsiveStyle': true});


<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>을 에디터에서 편집한 HTML 문서를 보는 페이지의 외부 CSS파일에 추가합니다. HTML 본문에 별도의 style tag가 포함되어 있지 않아 외부 CSS 수정만으로 반응형보기에 필요한 스타일을 추가하거나 변경 할 수 있습니다.

<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>


에디터에서 본문 편집시 반응형보기 설정방법

1. 이미지

이미지에 반응형보기를 설정하려면 아래와 같이 이미지속성창에서 "반응형보기"를 체크합니다.


2. 표


관련기능