Начало работы
Перед началом использования публичного API к редактору, необходимо сделать интеграцию Setka Editor в вашу систему управления контентом (CMS).
API для создания дополнительных компонентов доступно только на Enterprise тарифе.
Инициализация
В начале необходимо обновить шаблоны страниц, чтобы там появились файлы Setka Editor. К примеру, так:
<!DOCTYPE html>
<html>
<head>
<!-- 1. Main Editor's JS file -->
<script src="https://ceditor.setka.io/path/to/editor.min.js"></script>
<!-- 2. Editor's interface styles -->
<link
rel="stylesheet"
href="https://ceditor.setka.io/path/to/editor.min.css">
<!-- 3. Your company's styles -->
<link
rel="stylesheet"
href="https://ceditor.setka.io/path/to/company_name.min.css">
</head>
<body>
<!-- 4. Adding container for Setka Editor to render into -->
<div class="stk-editor" id="setka-editor"></div>
</body>
</html>
После обновления шаблонов страниц нужно вручную инициализировать Setka Editor при помощи JavaScript:
// Loading your JSON file with meta information
fetch('https://ceditor.setka.io/path/to/company_name.min.json')
.then(response => response.json())
.then(response => {
const config = response.config;
const assets = response.assets;
// Manually passing public_token to config
config.public_token = 'my_public_token_123456';
config.token = 'my_public_token_123456';
// Start Setka Editor
SetkaEditor.start(config, assets);
}).catch(ex => console.error(ex)); // Handle initialization errors
После обновления шаблонов страниц и JS файлов, как это показано выше, вы увидите запущенный редактор Setka Editor в вашей системе управления контентом (CMS). Теперь вы готовы к работе с публичным API Setka Editor.
Более детальную информацию по интеграции Setka Editor в вашу CMS вы можете узнать в этой документации.
Для чего может быть использовано публичное API Setka Editor?
Основная задача публичного API Setka Editor — дать разработчикам возможность встраивания в редактор кастомных компонентов, которые могут управлять состоянием редактора, подключать API других сервисов и даже отображаться в посте. Таким образом, это может быть любой дополнительный нестандартный функционал, необходимый вам для создания красивых постов.
Setka Editor поддерживает три типа кастомных компонентов:
- Инструменты
- Настройки
- Элементы контента
Компонент «Инструменты»
Начнем описание работы API с первого типа компонентов — Инструменты. Инструменты — это функционал работы с редактором, который расположен в правой панели редактора. Основная задача Инструментов — добавление различных объектов в пост (как правило, добавление происходит в то место поста, в котором в данный момент находится курсор пользователя, но это не обязательное условие). В приведенном ниже примере вы можете увидеть использование двух компонентов типа Инструменты: GridTool & ListTool, которые, соответственно, добавляют в пост Сетки и Списки.
Если вы, например, хотите вставить в пост набор компонентов с помощью одной кнопки — этот тот самый сценарий, в котором нужно использовать компонент «Инструменты».
Компонент «Настройки»
Второй тип кастомных компонентов — это «Настройки». Настройки расположены в верхней панели редактора и позволяют управлять свойствами различных типов контента в посте, свойствами выделенного текста и свойствами поста в целом. В примере, приведенном ниже, вы можете посмотреть использование компонента «Настройки», который определяет фон разных элементов контента поста. Обратите внимание, что набор компонентов в верхней панели редактора меняется в зависимости от того, какой элемент находится в фокусе. К примеру, если вы выделяете текст в посте, то увидите, что набор компонентов «Настройки» в верхней панели редактора изменился и теперь вы увидите возможность применить к выделенному тексту жирный и курсив.
Если вы хотите изменить свойства определенных элементов контента поста, воспользуйтесь компонентом «Настройки».
Компонент «Элементы контента»
Третий, но не менее важный, тип компонентов — Элементы контента — позволяет вам работать с контентной областью поста и всеми типа контента, расположенными в ней:
- Параграф
- Сетка
- Список
- Таблица
- Изображение
- Эмбед
- Галерея изображений
- Разделитель
- и другие…
Мы рекомендуем вам использовать уже готовые типа контента, но…
Если вам нужен какой-то специфический сложный Элемент контента, то вы можете без проблем зарегистрировать его с помощью нашего публичного API.
Инструкция по регистрации компонентов
После того, как мы познакомились с нашими основными компонентами, вы можете узнать, как зарегистрировать свой собственный: