Элементы панели инструментов

Все доступные элементы панели инструментов по секциям.

Действия

Элемент	Описание
undo	Отменить последнее изменение
redo	Повторить отменённое изменение
resetChanges	Отменить все изменения с момента открытия редактора и очистить историю (сначала спрашивает)

AI

Элемент	Описание
ai	Открыть диалог AI-запроса, если он настроен

Формат

Элемент	Описание
bold	Включить/выключить жирный
italic	Включить/выключить курсив
underline	Включить/выключить подчёркивание
strike	Включить/выключить зачёркивание

Дополнительный формат

Элемент	Описание
sup	Включить/выключить верхний индекс
sub	Включить/выключить нижний индекс
code	Включить/выключить встроенный код
codeBlock	Вставить блок кода с подсветкой синтаксиса
blockquote	Вставить цитату

Стиль

Элемент	Описание
heading	Выпадающий список для выбора уровня заголовка (H1-H6)
fontFamily	Выпадающий список для выбора шрифта
fontSize	Выпадающий список для выбора размера шрифта
lineHeight	Задать межстрочный интервал
textColor	Цвет текста: палитра, недавние цвета, HEX, пипетка, произвольный выбор
highlightColor	Цвет выделения: тот же выбор, первым идёт «Без выделения»

Элемент heading принимает параметры после двоеточия: уровни заголовков, p для добавления пункта абзаца и inline, чтобы показать их отдельными кнопками вместо выпадающего списка:

<Tiptapify :items="['heading:p,2,3,inline', 'bold', 'italic']" />

Выравнивание

Элемент	Описание
left	Выровнять текст по левому краю
center	Выровнять текст по центру
right	Выровнять текст по правому краю
justify	Выровнять текст по ширине
align	Выпадающий список выравнивания; align:left,center,right ограничивает его варианты

Список

Элемент	Описание
bulletList	Включить/выключить маркированный список
orderedList	Включить/выключить нумерованный список
taskList	Включить/выключить список задач (чекбоксы)
indent	Увеличить отступ текущего блока
outdent	Уменьшить отступ текущего блока

Медиа

Элемент	Описание
link	Вставить/изменить ссылку или карточку ссылки при наличии linkPreview
image	Вставить/изменить изображение: по URL или загрузкой, alt, подпись, размер, положение
video	Вставить/изменить видео с YouTube, Vimeo или видеофайл (.mp4, .webm, .ogg, .mov)
iframe	Встроить страницу по её адресу или коду iframe
emoji	Открыть выбор эмодзи (10 категорий)
charmap	Открыть выбор специальных символов
table	Вставить таблицу

Разное

Элемент	Описание
line	Вставить горизонтальную линию
pagebreak	Вставить разрыв страницы
source	Включить/выключить просмотр исходного HTML
preview	Включить/выключить режим HTML-превью
fullscreen	Включить/выключить полноэкранный режим редактирования
formatClear	Очистить всё форматирование выделенного фрагмента
invisibleChar	Вставить невидимые символы (пробелы и т. д.)

Разделители

Используйте | как разделитель между группами кнопок в prop items в виде массива:

<Tiptapify
  :items="['bold', 'italic', '|', 'heading', 'bulletList', '|', 'undo', 'redo']"
/>

Пример полной панели инструментов

<template>
  <Tiptapify
    :items="[
      'undo', 'redo',
      '|',
      'heading', 'fontFamily', 'fontSize',
      '|',
      'bold', 'italic', 'underline', 'strike',
      '|',
      'sup', 'sub', 'code', 'codeBlock', 'blockquote',
      '|',
      'left', 'center', 'right', 'justify',
      '|',
      'bulletList', 'orderedList', 'taskList',
      '|',
      'link', 'image', 'video', 'iframe',
      '|',
      'emoji', 'charmap', 'table',
      '|',
      'ai',
      '|',
      'line', 'pagebreak', 'formatClear',
      '|',
      'source', 'preview', 'fullscreen'
    ]"
  />
</template>