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.

Try It Out

Try Preview mode