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

Versions Compared

Old Version 4

changes.mady.by.user 권승민

Saved on

compared with

New Version 5

changes.mady.by.user 권승민

Saved on

Key

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

...

미리보기템플릿 설정


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>`, 
    ...
}


서버 반환 값 JSON 예시

keytypevalue
title
String
  • OG 태그의 og:title 내용
description
String
  • OG 태그의 og:description 내용
image
String
  • OG 태그의 og:image 내용
 urlString
  • OG 태그의 og:url 내용


Code Block
languagejs
themeEmacs
title에디터 설정
{
    "image": "https://www.synapsoft.co.kr/wp-content/uploads/2020/04/product03.png",
    "description": "Synap Editor is an innovative HTML5 web editor developed with Synap’s own digital document processing know-how over a long period of about 20 years and proven technologies.",
    "title": "Synap Editor, a completely different HTML5 web editor",
    "url": "https://www.synapeditor.com"
}

...