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

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

Содержание

Что такое Setka Editor?

Этапы интеграции

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

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

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

Ответы на вопросы

Совместим ли Setka Editor с моей CMS?

Отвечает ли Setka Editor требованиям SEO?

В каких форматах Setka Editor экспортирует контент?

Где и как хранится контент Setka Editor?

Полезные ссылки

Кастомная интеграция, продолжение

 

Что такое Setka Editor?

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

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

 

Этапы интеграции

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

1. Подготовка аккаунта.

2. Интеграция с Управлением дизайн системой — для обновления редактора и стилей, настроенных в личном кабинете.

3. Инициализация редактора на странице редактирования поста.

 

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

Чтобы начать интеграцию, создайте аккаунт (если у вас его еще нет). После регистрации, зайдите во вкладку CMS Integration в личном кабинете. В блоке Set your domain нажмите Add domain и выберите тип интеграции Other.

 

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

1. Получить License key в личном кабинете.

Во вкладке CMS Integration вы найдёте лицензионный ключ. На стороне своей CMS необходимо создать поле для ввода ключа. Не обязательно создавать поле в интерфейсе, достаточно использовать ключ в коде. Лицензионный ключ передается в GET-запросах к нашему серверу.

2. Заполнить Editor config url во вкладке CMS Integration/Other:

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

Важно: для корректной интеграции, вводите ссылки с учетом протокола (http/https).

 

Screen_Shot_2019-01-23_at_12.37.43.png

 

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

 

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

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

Лицензионный ключ (license key) — уникальный идентификатор компании, используется для связи между клиентским сайтом и Управлением дизайн системойr.

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

Управление дизайн системой аходится по адресу 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-правил для текстовых форматов, шрифтов, цветов, разделителей и пр., определяющих фирменный стиль издания. Редактируется в Управлении дизайн системой.

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

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

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

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

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

 

Ответы на вопросы

 

Совместим ли Setka Editor с моей CMS?

Помимо установки Setka Editor WordPress Plugin и модулей Setka Editor для 1С Битрикс и Drupal 7,8 вы можете интегрировать Setka Editor с другими CMS, например: Joomla, MOD X, Magento, Typo3, а также с вашей самописной CMS и т.д.

 

Отвечает ли Setka Editor требованиям SEO?

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

 

В каких форматах Setka Editor экспортирует контент?

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

 

Где и как хранится контент Setka Editor?

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

 

Полезные ссылки

 

Кастомная интеграция, продолжение:

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