에디터에서 작성한 컨텐츠를 반응형보기 형태로 제공하기 위해 아래와 같이 두가지 방법으로 설정이 가능합니다.
1. getPublishingHtml() API 사용시 옵션 설정
synapeditor.config.js
editor.getPublishingHtml({'publishingResponsiveStyle': true});
getPublishingHtml() API 사용시 publishingResponsiveStyle 옵션을 true로 설정하면 아래와 같이 HTML 본문에 반응형보기 처리를 위한 <style>이 포함되어 반환됩니다.
<div class="se-contents" style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;"><p style="text-indent: -31.4667px; margin-left: 31.4667px;"><span style="font-weight: bold; font-family: 함초롬돋움; font-size: 13pt; letter-spacing: 0px;">※ </span><span style="font-weight: bold; font-family: 함초롬돋움; font-size: 13pt;">플랫폼에 과제 등록시 유의사항</span><span style="font-weight: bold; font-family: 함초롬돋움; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;" lang="EN-US">(</span><span style="font-weight: bold; font-family: 함초롬돋움; font-size: 13pt; color: rgb(255, 0, 0);">입력시 아래 유의사항은 모두 삭제 부탁드립니다</span><span style="font-weight: bold; font-family: 함초롬돋움; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;" lang="EN-US">)</span></p><p class="0" style="text-indent: -31.4667px; margin-left: 31.4667px;"><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">‣ </span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">표를 그대로 복사</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">-</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">붙여넣기 하지 말고 </span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;">줄글로 입력할 것</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;" lang="EN-US">(</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;">되도록 표</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;" lang="EN-US">/</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;">이미지는 원글에서 삭제</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;" lang="EN-US">, </span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;">붙임에서 확인 요청</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0); letter-spacing: 0px;" lang="EN-US">)</span></p><p class="0" style="text-indent: -31.4667px; margin-left: 31.4667px;"><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">‣ </span><span style="font-family: 한양중고딕; font-size: 13pt;">개조식 표현이 아니라 </span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0);">서술식으로 기술</span><span style="font-family: 한양중고딕; font-size: 13pt;">할 것</span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">(</span><span style="font-family: 한양중고딕; font-size: 13pt;">어미표현 바꾸기 예</span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">, ‘</span><span style="font-family: 한양중고딕; font-size: 13pt;">필요</span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">’ × </span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">→ </span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">‘</span><span style="font-family: 한양중고딕; font-size: 13pt;">필요함</span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">’ </span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">○</span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">)</span></p><p class="0" style="text-indent: -31.4667px; margin-left: 31.4667px;"><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">‣ </span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt;">본문 내용 입력 시 문단이 바뀌게 되더라도 엔터치지 말고 스페이스바로 띄우기</span></p><p class="0" style="text-indent: -31.4667px; margin-left: 31.4667px;"><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">‣ </span><span style="font-family: 한양중고딕; font-size: 13pt;">항목이 바뀌는 경우 외에는 </span><span style="font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 78, 0);">엔터키</span><span style="font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 78, 0);">를</span><span style="font-family: 한양중고딕; font-size: 13pt; color: rgb(255, 0, 0);"> 사용하지 말것</span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">!! (</span><span style="font-family: 한양중고딕; font-size: 13pt;">모바일에서 볼 때 깨짐</span><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">)</span></p><p class="0" style="text-indent: -31.4667px; margin-left: 31.4667px;"><span style="font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;">‣ 상위항목</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt;">폰트</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">: </span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt;">맑은고딕</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">/</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt;">글자크기</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">16/</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt;">굵게, 하위항목</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt;">폰트</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">: </span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt;">맑은고딕</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">/</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt;">글자크기</span><span style="font-weight: bold; font-family: 한양중고딕; font-size: 13pt; letter-spacing: 0px;" lang="EN-US">12</span></p><div class="se-div hwp_editor_board_content" data-hjsonver="1.0" data-jsonlen="16555"><p style="line-height: 1px; margin: 0px;"><br></p></div><p style="line-height: 110%;"><br></p><p style="line-height: 110%;"><span style="font-size: 14pt;" class="se-zws-run"><br></span></p><p style="line-height: 110%;"><span style="font-size: 14pt;" lang="EN-US">1. </span><span style="font-weight: bold; font-size: 14pt;">해결하고자 하는 과제명</span></p><p class="0" style="line-height: 110%;"><span style="font-family: "맑은 고딕";" lang="EN-US"> </span><span style="font-family: "맑은 고딕";" lang="EN-US"> </span><span style="font-family: "맑은 고딕";" lang="EN-US"> </span><span style="font-family: "맑은 고딕";" lang="EN-US">[</span><span style="font-family: "맑은 고딕";">←</span><span style="font-family: "맑은 고딕";">스</span><span style="font-family: "맑은 고딕";">페</span><span style="font-family: "맑은 고딕";">이스바 </span><span style="font-family: "맑은 고딕";" lang="EN-US">3</span><span style="font-family: "맑은 고딕";">칸 띄우고 본</span><span style="font-family: "맑은 고딕";">문 입력</span><span style="font-family: "맑은 고딕";" lang="EN-US">, </span><span style="font-family: "맑은 고딕";">아</span><span style="font-family: "맑은 고딕";">래 모든 항목도 동일</span><span style="font-family: "맑은 고딕";" lang="EN-US">] </span></p><p class="0" style="font-size: 12pt; color: rgb(0, 0, 254); line-height: 110%;"><span> </span></p><p class="0" style="line-height: 110%;"><span lang="EN-US">2. </span><span style="font-weight: bold;">과제 해결시 보상금액</span></p><p class="0" style="line-height: 110%;"><span lang="EN-US"> </span><span style="font-family: 궁서;" lang="EN-US"> </span><span lang="EN-US">(</span><span>예시</span><span lang="EN-US">)</span><span>최대 </span><span lang="EN-US">100</span><span>만</span><span>원 지급</span></p><p class="0" style="font-size: 12pt; color: rgb(0, 0, 254); line-height: 110%;"><span> </span></p><p class="0" style="line-height: 110%;"><span lang="EN-US">3. </span><span style="font-weight: bold;">과제 배경 설명</span></p><p class="0" style="line-height: 110%;"><span lang="EN-US"> (</span><span>항목</span><span lang="EN-US">1)</span><span>밀폐 공간</span><span lang="EN-US">(</span><span>맨홀</span><span lang="EN-US">)</span><span>작업에서의 비상상황 발생 시</span><span lang="EN-US">, </span><span>신속한 조치를 위한 간급 구조 차량을 현재 운영하고 있습니다</span><span lang="EN-US">. </span><span>하지만 </span><span>사용 시 공기가 제대로 공급 중인지 확인이 어려운 단점이 있습니다</span><span lang="EN-US">.</span><span lang="EN-US"> </span><span lang="EN-US">[</span><span>←</span><span>엔터 없이 이어서 쓰기</span><span lang="EN-US">]</span></p><p class="0" style="line-height: 110%;"><span lang="EN-US"> (</span><span>항목</span><span lang="EN-US">2)</span><span>당사는 현재 이러한 상황입니다</span><span lang="EN-US">. </span><span>그래서 </span><span lang="EN-US">~</span><span>한 아이디어가 필요합니다</span><span lang="EN-US">.</span><span lang="EN-US"> </span><span lang="EN-US">[</span><span>←</span><span>항목이 분리된 경우에만 엔터치고 스페이스바 </span><span lang="EN-US">3</span><span>칸 띄우기</span><span lang="EN-US">]</span></p><p class="0" style="line-height: 110%;"><span lang="EN-US"> </span></p><p class="0" style="line-height: 110%;"><span lang="EN-US">4. </span><span style="font-weight: bold;">과제 세부내용</span></p><p class="0" style="font-size: 12pt; color: rgb(0, 0, 254); line-height: 110%;"><span lang="EN-US"> </span></p><p class="0" style="font-size: 12pt; color: rgb(0, 0, 254); line-height: 110%;"><span lang="EN-US"> </span></p><p class="0" style="line-height: 110%;"><span style="font-weight: bold;" lang="EN-US">5. </span><span style="font-weight: bold;">아이디어 제안시 고려사항</span><span style="font-weight: bold;" lang="EN-US">(</span><span style="font-weight: bold;">요구사항</span><span style="font-weight: bold;" lang="EN-US">)</span></p><p class="0" style="font-size: 12pt; color: rgb(0, 0, 254); line-height: 110%;"><span> </span></p><p class="0" style="font-size: 12pt; line-height: 110%;"><span> </span></p><p class="0" style="line-height: 110%;"><span style="font-weight: bold;" lang="EN-US">6. </span><span style="font-weight: bold;">우수 제안자 기업 특전</span><span lang="EN-US"> </span><span lang="EN-US">(</span><span>있는 경우에만 표기</span><span lang="EN-US">, </span><span style="text-decoration: underline;">없으면 항목자체를 삭제할 것</span><span style="text-decoration: underline;" lang="EN-US">)</span></p><p class="0" style="font-size: 12pt; color: rgb(255, 0, 0); line-height: 110%;"><span> </span></p><p class="0" style="font-size: 12pt; color: rgb(255, 0, 0); line-height: 110%;"><span> </span></p><p class="0" style="line-height: 110%;"><span style="font-weight: bold;">※ </span><span style="font-weight: bold;">자세한 내용은 첨부된 원본 파일을 꼭 확인 부탁드립니다</span><span style="font-weight: bold;" lang="EN-US">.</span></p><div class="se-div hwp_editor_board_content" data-hjsonver="1.0" data-jsonlen="18272"><p style="line-height: 1px; margin: 0px;"><br></p></div></div>
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>