사이냅 에디터 문서
Space shortcuts
Page tree

Versions Compared

Old Version 15

changes.mady.by.user 권승민

Saved on

compared with

New Version 16

changes.mady.by.user 권승민

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejs
themeEmacs
title에디터 설정
// url 에는 OG 태그를 파싱하는 API 주소가 설정되어야 합니다.
// customTemplateWithImage 은 이미지가 존재할 경우 생성되는 URL 미리보기 HTML입니다.
// customTemplateWithoutImage 은 이미지가 존재하지 않을 경우 URL 미리보기 HTML입니다.
 
'ogParser.config': {
    'url': '/ogParser',
    'customTemplateWithImage': ``, // 이미지 있을 때 커스텀 템플릿
    'customTemplateWithoutImage': `` // 이미지 없을 때 커스텀 템플릿
}


기본 템플릿

  • 템플릿 설정을 따로 하지 않았을 경우 해당 HTML이 적용되어 미리보기 URL이 보여집니다기본 템플릿 구성은 아래와 같으며 커스텀 템플릿 설정 시 해당 템플릿으로 HTML이 적용됩니다.

미리보기적용된 HTML기본 템플릿
썸네일이 있을 경우


Code Block
languagejs
themeEmacs
titleHTML
<div style="width: 387px; border: 1px solid #ddd; color: #333; background-color: #123; text-align: center;">
    <img src="#{image}" style="height: 268px; max-width: 387px; display: block;">
    <div style="overflow: hidden; padding: 10px 10px 10px 10px; text-align: left; background-color: #FFF; display:block;">
        <a href="#{url}" style="font-size: 14px; color: #39b6b8; text-decoration: none; margin-top: 0px; margin-bottom: 3px;">#{url}</a>
        <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: bold;
           margin-top: 0px; margin-top: 0px; margin-bottom: 3px;">#{title}</p>
        <p style="font-size: 14px; color: #757575; margin-top: 0px; margin-bottom: 3px;">#{description}</p>
    </div>
</div>


썸네일이 없을 경우


Code Block
languagejs
themeEmacs
titleHTML
<div style="box-sizing: border-box; border: 1px solid #717171; font-size: 0; width: 314px; height:80px; padding: 15px 8px; max-width: 100% !important;"> <p style="font-size: 12px; font-weight: bold; white-space: nowrap; margin-top: 0px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis;">#{title}</p> <p style="font-size: 12px; color: #757575; white-space: nowrap; margin-top: 0px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis;">#{description}</p> <p style="font-size: 12px; white-space: nowrap; margin-top: 0px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; color: #39b6b8;"> <a href="#{url}" style ="text-decoration: none; color: #39b6b8;">#{url}</a> </p> </div>


...

tag의미설명
#{title}제목
  • 서버에서 반환된 title 값이 바인딩됩니다.
#{description}설명
  • 서버에서 반환된 description 값이 바인딩됩니다.
#{image}썸네일
  • 서버에서 반환된 image 값이 바인딩됩니다.
#{url}링크
  • 서버에서 반환된 url 값이 바인딩됩니다.

커스텀 템플릿 설정 예시

미리보기커스텀 템플릿 설정


Code Block
languagejs
themeEmacs
title에디터 설정
'ogParser.config': {
    ...
    'customTemplateWithImage': `
    <div style="width: 387px; border: 1px solid #ddd; color: #333; background-color: #123; text-align: center;">
        <img src="#{image}" style="height: 268px; max-width: 387px; display: block;">
        <div style="overflow: hidden; padding: 10px 10px 10px 10px; text-align: left; background-color: #FFF; display:block;">
            <a href="#{url}" style="font-size: 14px; color: #39b6b8; text-decoration: none; margin-top: 0px; margin-bottom: 3px;">
                #{url}</a>
            <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: bold;
                 margin-top: 0px; margin-top: 0px; margin-bottom: 3px;">#{title}</p>
            <p style="font-size: 14px; color: #757575; margin-top: 0px; margin-bottom: 3px;">#{description}</p>
        </div>
    </div>`,
    ...
}



Code Block
languagejs
themeEmacs
title에디터 설정
'ogParser.config': {
    ...
    'customTemplateWithImage': `
    <div style="box-sizing: border-box; border: 1px solid #808080; font-size: 0; width: 772px; overflow: auto;">
        <div style="box-sizing: border-box; float: left; width: 520px; height:108px; padding: 12px 8px;">
            <p style="font-size: 18px; font-weight: bold; white-space: nowrap; margin-top: 0px; overflow: hidden;
                 text-overflow: ellipsis;">#{title}</p>
            <p style="font-size: 14px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">#{description}</p>
            <p style="font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #39b6b8;">
                <a href="#{url}" style="text-decoration: none; color: #39b6b8;">#{url}</a></p>
        </div>
        <div style="box-sizing: border-box; float: left; height: 108px; width: 250px; background: url(#{image}) no-repeat center center;
         background-size: cover;"></div>
    </div>`,
    ...
}


...