API для кастомной интеграции Setka Editor С чего начать кастомную интеграцию?

С чего начать кастомную интеграцию?

Что такое Setka Editor

Setka Editor это WYSIWYG-редактор для изданий и блогов. Он позволяет наладить регулярный быстрый выпуск красивых и сложных постов без привлечения верстальщиков и предварительного создания макетов.

Плагин Setka Editor для Wordpress прошел код-ревью и сейчас доступен для платформы WordPress VIP GO. Это ревью подтверждает высокий уровень качества нашей разработки и гарантирует стабильную работу сайтов (в том числе высоконагруженных проектов) при подключении Setka Editor.

Setka Editor совместим с любой CMS

Помимо установки Setka Editor Wordpress Plugin, вы можете интегрировать Setka Editor с другими CMS, например: Joomla, Drupal, 1CBitrix, Typo3 и т.д.

Чтобы интегрировать Setka Editor, необходимо получить пять ссылок на файлы стилей и редактора по API, а затем подключить их на страницах создания и просмотра поста.

Терминология

Компания — клиент Setka со своим сайтом. Каждая компания имеет свой лицензионный ключ и личный кабинет в Style Manager.

Лицензионный ключ (company token) — уникальный идентификатор компании, используется для связи между клиентским сайтом и Style Manager.

Публичный ключ (public token) — публичный идентификатор компании, используется для отправки вспомогательных запросов из редактора в Style Manager.

Style Manager:

  1. личный кабинет компании
  2. интерфейс для создания и редактирования стилей. Он позволяет создать стили постов (шрифты, заголовки, цвета) и сетки (задавать параметры для колонок, отступов и пробелов между колонками).
  3. API для автоматического взаимодействия между сайтом компании и Setka Editor

Находится по адресу editor.setka.io.

Редактор — JavaScript WYSIWYG-редактор Setka Editor. Запускается только в админке. Состоит из двух файлов вида:

editor.v1.17.16.1523614535.min.js — основной JS-файл редактора (далее – editor.js)

editor.v1.17.16.1523614535.min.css — основной CSS-файл стилей интерфейса редактора (далее — editor.css).

Пост — HTML-код поста вместе с оберткой <div class=“stk-post”>...</div>

Стиль — набор CSS-правил для текстовых стилей, шрифтов, цветов, разделителей и пр., определяющих фирменный стиль издания. Редактируется в Style Manager.

Сетка —  набор CSS-правил для построения модульных сеток с колонками и отступами используемые для верстки постов, а также адаптации под мобильные устройства. Редактируется в Style Manager.

Стили и сетки бывают встроенные (built-in) и созданные клиентом (custom). Создаются через интерфейс Style Manager. При каждом изменении Style Manager генерирует новую пару файлов:

123_company_1_240.min.css — CSS-правила для всех стилей и сеток компании (далее — company.css).

123_company_1_240.json — мета-данные (стили, сетки и др. информация) в формате JSON (далее — company.json).

public.js — JS-файл со скриптами для запуска интерактивных элементов поста (анимации и галереи). Подключается только на внешних страницах постов.
 

Setka Editor имеет хорошо структурированный код, отвечающий требованиям SEO

При разработке Setka Editor мы уделяем много внимания семантике и правильной структуре кода в соответствии со стандартом HTML5. Setka Editor — редактор для контента страницы, поэтому генерирует код с меньшим уровнем вложенности, в отличие от инструментов, формирующих страницу целиком (конструкторов лендингов или «пейдж-билдеров»). Меньшая вложенность HTML-кода позволяет быстрее загружать страницы. Также Setka Editor корректно ставит теги заголовков и дает возможность заполнить alt-текст для изображений.

 

Экспортирует контент в HTML, JSON и других форматах

Setka Editor использует собственную древовидную структуру данных. Каждый элемент верстки (параграф, картинка, сетка и др.) представлен в виде объекта со свойствами и связями с другими элементами. Это позволяет не быть привязанным к HTML-представлению документа и экспортировать контент в любом необходимом формате, например, JSON.

Хранение контента

Весь контент хранится в виде HTML-кода в вашей базе данных. Файлы CSS можно сохранять на стороне компании или использовать CDN Setka Editor.

Интеграция Setka Editor

Интеграция Setka Editor и CMS проходит в два этапа:

      1. Интеграция со Style Manager — для обновления редактора и стилей из аккаунта Style Manager.
      2. Инициализация редактора на странице редактирования поста в CMS.

 
Как зарегистрировать и заполнить аккаунт

Для того, чтобы начать интеграцию, необходимо создать аккаунт (если у вас его еще нет) на https://editor.setka.io/signup. Заполните все обязательные поля и cвяжитесь с менеджером Setka Editor через форму Contact us для того, чтобы он активировал в вашем аккаунте поля для кастомной интеграции. После их активации в главном меню на editor.setka.io появится раздел Integration.

 

Что необходимо для интеграции:

      1. Ввести license key. В вашем личном кабинете вы можете найти license key. На стороне своей CMS необходимо создать поле для ввода license key, не обязательно создавать поле в интерфейсе, достаточно добавить его в коде. License key передается в ваших GET/POST-запросах. В нашей документации лицензионный ключ фигурирует как companies unique TOKEN.
      2. Заполнить все поля* во вкладке CMS Integration:

Editor config url - по этой ссылке вы будете получать в своей CMS актуальную версию редактора и обновления стилей, созданные в Style Manager. Также, при первой синхронизации вы получите `public_token`, необходимый для работы ряда функций редактора, например комментариев и вставки эмбедов по ссылке.

Company status url - по этой ссылке вы будете получать информацию о подписке. Прошел/не прошел платеж, закончился пробный период и т.д. 

Server status url - по этой ссылке мы проверяем корректность проведенной интеграции.

* Указать имя локального сервера (localhost, 127.0.0.1) нельзя. Домену должен соответствовать публичный IP-адрес на DNS-серверах. Если вы хотите протестировать взаимодействие с локальным сервером, то настройте туннель с внешним адресом, например, с помощью сервиса https://www.npmjs.com/package/localtunnel

 

______________2017-06-29___16.52.34.png

 

Для корректной интеграции ссылки необходимо ввести с учетом протокола (http/https).

Последняя версия документации по API находится по адресу https://editor.setka.io/docs/api2/index.html.

Пример интеграции на Ruby on Rails: https://github.com/setkaio/grid-editor-integration

 

Схема подключения файлов Setka Editor

Чтобы интегрировать Setka Editor, необходимо получить пять ссылок на файлы стилей и редактора по API, а затем подключить их на страницах создания и просмотра поста.

 

___________________-_Page_1-2.jpeg

 

 

Что такое public token?

Public token – это уникальный идентификатор, который используется для работы ряда важных функций Setka Editor, таких как добавление комментариев, эмбеды по ссылке, сохранение сниппетов и др. Он присваивается вам при первой синхронизации и передается как параметр запроса между редактором и editor.setka.io по API при каждом запуске Setka Editor, поэтому мы рекомендуем вам сохранить ваш public token на сервере сразу после получения и передать его в инициализацию редактора.

 

Кастомная интеграция

Интеграция Setka Editor с вашей CMS состоит их двух этапов: