사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

1. 반응형보기 환경설정

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

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

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

synapeditor.config.js
editor.getPublishingHtml({'publishingResponsiveStyle': true});
릴리즈 2.14.7 까지
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%; min-width: 10px; 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; left: 0px}
  </style>
  <p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>반응형 보기 테스트입니다.</span></p>
</div>
릴리즈 2.15.0 이상
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%; min-width: 10px; height: auto !important;}
      .se-contents .se-responsive.se-video .se-video-wrapper{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; display: block;}
      .se-contents .se-responsive.se-video .se-video-wrapper > iframe{width: 100% !important; height: 100% !important; position: absolute; left: 0px}
  </style>
  <p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>반응형 보기 테스트입니다.</span></p>
</div>

1.2. 외부 CSS에 반응형보기 지원을 위한 스타일 추가

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

릴리즈 2.14.7 까지
반응형보기를 위한 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%; min-width: 10px; 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; left: 0px}
</style>
릴리즈 2.15.0 이상
반응형보기를 위한 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%; min-width: 10px; height: auto !important;}
.se-contents .se-responsive.se-video .se-video-wrapper{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; display: block;}
.se-contents .se-responsive.se-video .se-video-wrapper > iframe{width: 100% !important; height: 100% !important; position: absolute; left: 0px}
</style>

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

2.1. 이미지

이미지에 반응형보기를 설정하려면 아래와 같이 이미지속성창에서 "반응형"을 체크합니다. "반응형"을 체크하면 "글자처럼 취급"은 자동으로 비활성화 됩니다.

반응형이 설정된 이미지는 max-width: 100% 스타일이 부여되어 화면 사이즈에 맞춰 리사이즈됩니다.

2.2. 표

표에 반응형보기를 설정하려면 아래와 같이 "표 속성 > 상세속성" 창에서 "반응형"을 체크합니다. "반응형"을 체크하면 "글자처럼 취급"은 자동으로 비활성화 됩니다.

반응형이 설정된 표는 "se-scrollbox" class가 부여되며 모바일 환경에서 좌/우 스크롤이 가능합니다.


관련기능

  • No labels