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 для 1С Битрикс и Drupal 7,8 вы можете интегрировать Setka Editor с другими CMS, например: Joomla, MOD X, Magento, Typo3, а также с вашей самописной CMS и т.д.

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

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

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

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

Style Manager аходится по адресу editor.setka.io):

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

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

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

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

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

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

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

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

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

company.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. После регистрации зайдите во вкладку CMS Integration в вашем личном кабинете, в блоке Set your domain нажмите Add domain и выберите тип интеграции Other.

 

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

      1. License key. В вашем личном кабинете
      2. во вкладке CMS Integration вы можете найти license key. На стороне своей CMS необходимо создать поле для ввода license key, не обязательно создавать поле в интерфейсе, достаточно добавить его в коде. License key передается в ваших GET-запросах. 
      3. Заполнить Editor config url во вкладке CMS Integration/Other:

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

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

 

Screen_Shot_2019-01-23_at_12.37.43.png

 

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

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

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

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

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