Connecting Setka Editor files to the pages of your site

Setka Editor files should be launched both on the post editing page (for the editor's tool operation) and on the post preview page (to connect Setka Editor styles to your content).

On a post-editing page:

• content_editor_files — JS и CSS editor files

• theme_files — JSON config file and a concatenated CSS file of your styles

On a post preview page

• plugins — scripts to launch interactive post elements (animations and galleries)

• theme_files — style files

• concatenated CSS file for styles from theme_files (if there are 1 or 2 styles in your Style Manager) and standalone_styles (if there are many styles in your account and the common style is too large)

To use separate styles; there are 3 files from standalone_styles array needed:

• common — common rules of Setka Editor styles

• themes — a style of a specific post. Take a style ID into your account when saving it to metadata on your stack

• layouts — layout grid used for your content. Take a layout grid ID into your account when saving it to metadata on your stack.

Public.js additional initialization parameters

By default, public.js initializes when all the content on the page is loaded. However, there may be times when you need to initialize public.js without waiting for all the content to load.

To initialize public.js on the DOMContentLoaded event, add configuration parameters with the startEvent key to the post's HTML code before the element that includes public.js.

Possible values are load (default) and DOMContentLoaded. Sample code:

<script>
      window.SEPublicConfig = {
        startEvent: 'DOMContentLoaded',
      };
</script> 

A choice of the page scrolling container

If a page scrolling container is not a window but some other DOM-element, send the following parameter to initialization:

window.SEPublicConfig = {
  $scrollingElement: document.querySelector(‘.scrollable-area’)
};

Where .scrollable-area is a container where page scrolling occurs.

Enabling polyfills

To optimize the size of the public.js file, since version 2.11.21, we don't include a polyfill for ResizeObserver and Web Animations API into it by default. If the visitor's browser does not support any of these APIs, public.js will automatically load the polyfill from Setka CDN before initialization.

To enable custom polyfills, pass this parameter into the initialization:

window.SEPublicConfig = {
  polyfillsPath: 'https://ceditor.setka.io/editor-polyfill/polyfills.pylyfillid.min.js'
};

Where polyfillsPath is an absolute polyfill URL.

On AMP pages

AMP does not allow connecting separate style files to pages. To do that, you need to save files' content and connect it to common files of AMP page styles.

There are 3 files from the amp-styles array of files that need to be saved:

• common — common rules of AMP page styles

• themes — a style of a specific post. Take a style ID into account when saving it to metadata on your stack

• layouts — layout grid used for your content. Take a grid ID into account when saving it to metadata on your stack