URL Preview Plugin

Release 2.17.2311 and above.

Provides a preview of the link by parsing the OG tags of the hyperlink.

When a valid hyperlink is entered, you can preview the thumbnail and related information of the link.

Notes

• Preview is not provided when inserting a link inside a preview.
• The preview is not updated when the URL is modified. Preview is only provided when a new link is entered.

Operating Conditions

Action	Example
Link insertion
Enter after entering link text

How to Use

Loading Plugin Files

<!-- 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>

Configure the Plugin

Available Keys

// 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': ''
}

Default Template

Preview	Default Template
When thumbnail exists	See When thumbnail exists below.
When thumbnail does not exist	See When thumbnail does not exist below.

When thumbnail exists

<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>

When thumbnail does not exist

<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>

How to Set Custom Templates

Tags Included in HTML

Custom Template Setting Example

Preview	Custom Template Setting
	See Custom template 1 below.
	See Custom template 2 below.

Custom template 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>`
}

Custom template 2

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

Server Return Value JSON Example

Notes

The preview is provided only when at least one of the key values that the server should provide exists.

{
    "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"
}