ФреймворкJavaScript
Документация Blok
Руководства, полный справочник API и все встроенные блочные и строчные инструменты. Впервые здесь? Начните с быстрого старта, и рабочий редактор займёт пять минут.
Начало работы
- Быстрый стартЗапустите Blok за несколько шагов.
- Создайте первый редакторПодключите редактор, добавьте контент и сохраните его в JSON, который можно загрузить обратно.
- Всё — это блокГлавная идея Blok: любой контент является блоком.
- Создание собственного блок-инструментаСоздайте с нуля блок-выноску, которая отрисовывается, редактируется и сохраняется как встроенный блок.
- Синхронизация вкладокОдин документ остаётся актуальным во всех вкладках браузера, без сервера.
Основное
- Класс BlokГлавный класс редактора, который создаёт экземпляр и открывает все пространства имён API.
- КонфигурацияВсе опции конструктора Blok и то, какие из них можно менять на лету.
- БлокиСоздание, удаление, обновление и переупорядочивание блоков в редакторе.
- BlockAPIРабота с отдельным блоком, который возвращает API блоков.
- СохранениеСохранение и экспорт содержимого редактора.
- View-рендерерПоказ сохранённых документов в виде HTML или текста без загрузки редактора.
Редактирование
- КурсорУправление позицией курсора внутри редактора.
- ВыделениеРабота с выделением текста внутри редактора.
- МеткиПрименение и снятие строчных меток на диапазоне для инструментов форматирования.
- СтилиКлассы и CSS-переменные Blok для стилизации инструментов и редактора.
- ИсторияУправление отменой и повтором операций редактора.
Интерфейс
- Панель инструментовОткрытие и закрытие панели инструментов блока, её меню настроек и тулбокса.
- Строчная панельУправление строчной панелью форматирования.
- ИнтерфейсДоступ к элементам интерфейса Blok и их состоянию.
- УведомленияПоказ уведомлений пользователям или подключение собственной отрисовки.
- Всплывающие подсказкиПоказ всплывающих подсказок на элементах интерфейса.
- ТемаЧтение и смена цветовой темы редактора на лету.
- ШиринаПереключение редактора между узким и полноширинным контентом.
- ПлейсхолдерЧтение и смена плейсхолдера пустого редактора без его пересоздания.
Расширение и система
- ИнструментыПросмотр и управление инструментами, зарегистрированными в редакторе.
- ЗагрузчикЗагрузка файла через конвейер, который отвечает за его тип.
- СобытияПодписка на события жизненного цикла редактора.
- СлушателиДобавление и снятие обработчиков DOM-событий с автоматической очисткой.
- ViewStateЛичное состояние блока в этом браузере, которое не попадает в сохранённый документ.
- ОчисткаОчистка HTML-контента от небезопасной разметки.
- Только чтениеВключение и выключение правки на лету.
- ЛокализацияПеревод строк интерфейса и смена языка на лету.
- Подмена версии для разработкиКак устроена подмена версии для разработки в каждой точке входа и как её убрать.
Типы данных
Адаптеры фреймворков
Блочные инструменты
- ПараграфТекстовый блок по умолчанию с полужирным, курсивом, ссылками и цветом.
- ЗаголовокЗаголовки от H1 до H6, у каждого уровня есть сочетание через #.
- СписокМаркированные, нумерованные списки и чек-листы с любой вложенностью.
- ТаблицаТаблица, в которой каждая ячейка является отдельным редактором блоков.
- ПереключательСворачиваемый блок, который прячет дочерние блоки за стрелкой.
- ВыноскаВыделенный блок с иконкой-эмодзи и настраиваемыми цветами.
- База данныхБлок базы данных с типизированными свойствами и видами доски или списка.
- Строка базы данныхОдна строка базы данных, которую создаёт и ведёт родительский блок базы.
- РазделительГоризонтальная линия, которая разделяет части контента.
- ОтступРегулируемый вертикальный отступ для выравнивания контента.
- ОглавлениеЖивой список заголовков страницы с переходом к каждому.
- ЦитатаЦитата двух размеров: обычного и крупного.
- КодБлок кода с подсветкой синтаксиса, выбором языка и кнопкой копирования.
- ИзображениеИзображение по URL, загрузкой или вставкой файла.
- КолонкиБлок раскладки, который ставит дочерние блоки колонками бок о бок.
- КолонкаОдна колонка внутри блока колонок.
- ВкладкиБлок, который раскладывает содержимое по вкладкам, открытым по одной.
- ВкладкаОдна вкладка внутри блока вкладок, с названием и своим содержимым.
- ВстраиваниеЖивое встраивание YouTube, Figma, CodePen и ещё более 100 сервисов.
- ЗакладкаКарточка предпросмотра ссылки с заголовком, описанием и изображением.
- СтраницаБлок вложенной страницы, содержимое которой хранит ваше приложение.
- Ссылка на страницуСсылка на существующую страницу вашего приложения без владения ею.
- ФайлКарточка вложения с именем файла, размером и кнопкой скачивания.
- АудиоАудиоплеер с перемоткой по форме волны и кнопками управления.
- ВидеоВидеоплеер с собственными кнопками воспроизведения и полноэкранным режимом.
Строчные инструменты
- ЖирныйПолужирное начертание выделенного текста по Cmd/Ctrl+B.
- КурсивКурсив для выделенного текста по Cmd/Ctrl+I.
- СсылкаДобавление, правка и удаление ссылки на выделенном тексте по Cmd/Ctrl+K.
- МаркерЦвет выделенного текста или его фона.
- ПодчёркнутыйПодчёркивание выделенного текста по Cmd/Ctrl+U.
- ЗачёркнутыйЗачёркивание выделенного текста по Cmd/Ctrl+Shift+S.
- Строчный кодПометка выделенного текста как строчного кода по Cmd/Ctrl+E.
- ФормулаСтрочные формулы на LaTeX, которые отрисовывает KaTeX.
- Очистить форматСнятие строчного форматирования с выделенного текста с сохранением ссылок.
- Надстрочный / подстрочныйНадстрочный или подстрочный индекс для выделенного текста.