Preview Mode

With Preview mode, you can initialize Synap Editor in a preview state rather than an editable state. This is useful when you want to immediately show the result of the authored document, or when you need to provide a read-oriented view first.

Preview mode displays content using a preview iframe. You can apply additional stylesheets as needed to make the preview look closer to your service screen.

Preview mode editor

Setup Method

// synapeditor.config.js
'editor.type': 'preview',
'editor.preview.style.urls': [
  'url of horizontalLineExtension.min.css',
  'url of quoteExtension.min.css'
],
  • editor.type : initializes the editor in Preview mode.
  • editor.preview.style.urls : list of stylesheet URLs to add to the preview iframe.

editor.preview.style.urls is optional. To render Horizontal Line Extension and Quote Extension correctly, their CSS must be applied.