Setka Editor API Introduction to Custom Integration

Introduction to Custom Integration

What is Setka Editor

Setka Editor is a WYSIWYG editor for online publications and blogs. It allows users to create beautiful and complex layouts for written content and visually standout digital publishing quickly and easily — all without having to code or rely on developers. 

The Setka Editor plugin for WordPress has successfully passed a code review and is available for the WordPress VIP GO platform. This review affirms the high quality of our development efforts and guarantees the stability and functionality for Setka-powered websites and visual-rich pages.

 

Setka Editor is compatible with any CMS

Setka Editor is currently available on WordPress, Drupal, Magento, and Ghost, and can be integrated with any platform, such as Joomla, MOD X, Typo3 or your own-written CMS.

  

Glossary

Company — a Setka client, each company of which has a website with a license key and an account in the Style Manager.

License key (company token) — a company's unique ID, used to connect client websites with the Setka Editor's Style Manager.

Public key (public token) — a public ID used to send auxiliary requests from the editor to the Style Manager. You can receive it in response to initial synchronization or copy it from your CMS Integration page. The public key must be handled to editor initialization.

Style Manager (located at editor.setka.io):

  1. A company account.
  2. An interface for creating and editing post styles (fonts, text formats, color palettes, etc.) and grid systems (column parameters, indentations and margins).
  3. An API for an automatic connection between client website and Setka Editor.

Editor — Setka JavaScript WYSIWYG Editor. Launches only in the admin panel. Consists of 2 files in a form of:

editor.min.js — editor's main JS file (hereinafter – editor.js).

editor.min.css — main CSS file, contains editor's interface styles (hereinafter — editor.css).

Post — HTML-code of the post, wrapped into <div class=“stk-post”>...</div>.

Style — set of CSS rules for text styles, fonts, colors, dividers, etc., defines a corporate identity. Being edited in the Style Manager.

Grid set of CSS rules for building modular grids with columns and indents, used in post layouts and mobile versions. Being edited in the Style Manager.

Styles and grids can be built-in or custom. They are being created in Style Manager. Style Manager generates a new pair of files on each change: 

company.min.css — CSS rules for all the company's styles and grids (hereinafter — company.css).

company.json — JSON metadata of styles, grids, etc. (hereinafter — company.json).

public.js — JS file with scripts to launch interactive elements of a post (animations and galleries). Activates on external post pages only.

 

Setka Editor has a well-structured code that meets the requirements of SEO

In the development of Setka Editor, we pay a lot of attention to semantics and correct code structure following the HTML5 standard. Setka Editor edits the page content only, thus it generates the code with a less nesting level, unlike tools that generate the entire page (page builders). Less-nested HTML code allows faster page loading. Setka Editor also correctly tags headers and allows filling-in an alternate text for images. 

 

Exporting the content in HTML, JSON and other formats

Setka Editor uses its' own tree data structure. Each layout element (paragraph, image, grid, etc.) is presented as an object with properties and connections to other elements. It allows to stay unattached to HTML representation of a document and export the content in any required format, e.g. JSON.

 

Content storage

All content is stored as an HTML-code in our database. CSS files can be stored on a client side or delivered via Setka Editor CDN.

 

Setka Editor integration

Integration of Setka Editor and a CMS comes in 2 stages:

  1. Style Manager integration — to update styles from the Style Manager account and the editor itself.
  2. Editor initialisation on a CMS' post editor page.

 

How to register and fill in the account

To start the integration, it is necessary to create the account (if you don't have one). After the registration, go to "CMS Integration" on editor.setka.io and select "Add your domain" in the "Set your domain" block. Then select "Via API" as an integration type.

 

What is necessary for the integration:

  1. Fill in the license key. It is located in your account, on editor.setka.io, on the "CMS Integration" page. It is not necessary to create a text field in an interface of your CMS, you can just add it into code. The license key is being transferred with your GET-requests. 
  2. Fill in the Editor config URL in the "CMS Integration" -> "Other" tab.

Editor config URL is an address on which you will receive a recent version of the editor and style updates, created in the Style Manager, into to your CMS. On initial sync, you will also receive a public_token, which is required for several editor functions to work, e.g. for commenting and inserting embeds via URL.

* It is not possible to specify a local server (localhost, 127.0.0.1). Public IP-address on DNS servers should match the domain. Set up a tunnel with an external address, if you want to test an interaction with a local server, e.g. with the localtunnel service. 

 Screen_Shot_2019-01-23_at_12.37.43.png

 

The link should be specified with a protocol (http/https) for the correct integration.

The latest version of the API documentation is located on https://editor.setka.io/docs/api2/index.html.

Integration sample for Ruby on Rails: https://github.com/setkaio/grid-editor-integration 

 

Custom integration