URL 미리보기 플러그인

2.17.2311 버전부터 지원합니다.

하이퍼링크의 OG 태그를 파싱하여 링크의 미리보기를 제공합니다.

유효한 하이퍼링크를 입력하면 링크의 썸네일과 관련 정보를 미리 볼 수 있습니다.

참고 사항

• 미리보기 카드 안에 링크를 삽입하면 그 링크의 미리보기는 만들어지지 않습니다.
• URL이 수정될 때 미리보기가 업데이트되지 않습니다. 미리보기는 새 링크를 입력할 때만 제공됩니다.

작동 조건

동작	예시
링크 삽입
링크 텍스트 입력 후 Enter

사용 방법

플러그인 파일 불러오기

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of ogParser.min.js"></script>

플러그인 구성

사용 가능한 키

// Editor configuration
// url must be set to the API address that parses OG tags.
// customTemplateWithImage is the URL preview HTML generated when an image exists.
// customTemplateWithoutImage is the URL preview HTML generated when an image does not exist.
'ogParser.config': {
    'url': '/ogParser',
    'customTemplateWithImage': '',
    'customTemplateWithoutImage': ''
}

기본 템플릿

미리보기	기본 템플릿
썸네일이 있을 때	아래 썸네일이 있을 때를 참고합니다.
썸네일이 없을 때	아래 썸네일이 없을 때를 참고합니다.

썸네일이 있을 때

<div style="box-sizing: border-box; border: 1px solid #717171; max-width: 100% !important; width: 394px; display: inline-block;">
  <div style="display: inline-block;">
    <img src="#{image}" alt="#{title}" style="box-sizing: border-box; vertical-align: top; width: 80px; height: 80px; object-fit: cover;">
  </div>
  <div style="box-sizing: border-box; display: inline-block; vertical-align: top; height: 80px; padding: 15px 8px; width: calc(100% - 82px); overflow: hidden;">
    <p style="font-size: 12px; font-weight: bold; white-space: nowrap; margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis;">#{title}</p>
    <p style="font-size: 12px; color: #757575; white-space: nowrap; margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis;">#{description}</p>
    <p style="font-size: 12px; white-space: nowrap; overflow: hidden; margin: 0; text-overflow: ellipsis; color: #39b6b8;">
      <a href="#{url}" title="#{title}" style="text-decoration: none; color: #39b6b8;">#{url}</a>
    </p>
  </div>
</div>

썸네일이 존재하지 않을 때

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

사용자 정의 템플릿 설정 방법

HTML에 포함된 태그

사용자 정의 템플릿 설정 예시

미리보기	사용자 정의 템플릿 설정
	아래 사용자 정의 템플릿 1을 참고합니다.
	아래 사용자 정의 템플릿 2를 참고합니다.

사용자 정의 템플릿 1

// Editor configuration
'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; text-align: left; background-color: #fff; display: block;">
        <a href="#{url}" style="font-size: 14px; color: #39b6b8; text-decoration: none; margin: 0 0 3px;">#{url}</a>
        <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: bold; margin: 0 0 3px;">#{title}</p>
        <p style="font-size: 14px; color: #757575; margin: 0 0 3px;">#{description}</p>
      </div>
    </div>`
}

사용자 정의 템플릿 2

// Editor configuration
'ogParser.config': {
    ...
    'customTemplateWithImage': `
    <div style="...custom style for template 2...">
      ...
    </div>`
}

서버 반환값 JSON 예시

참고 사항

미리보기는 서버가 제공해야 하는 주요 값 중 적어도 하나가 존재할 때만 제공됩니다.

{
    "image": "https://www.synapsoft.co.kr/wp-content/uploads/2020/04/product03.png",
    "description": "Synap Editor is an HTML5 web editor developed with Synap's digital document processing know-how built over about 20 years.",
    "title": "Synap Editor — an HTML5 web editor",
    "url": "https://www.synapeditor.com"
}