Елементи панелі інструментів

Усі доступні елементи панелі інструментів, згруповані за секціями.

Дії

Елемент	Опис
undo	Скасувати останню зміну
redo	Повторити останню скасовану зміну
resetChanges	Скасувати всі зміни з моменту відкриття редактора й очистити історію (спершу запитує)

AI

Елемент	Опис
ai	Відкрити діалог AI-запиту, якщо його налаштовано

Формат

Елемент	Опис
bold	Перемкнути жирний текст
italic	Перемкнути курсив
underline	Перемкнути підкреслення
strike	Перемкнути закреслення

Додаткове форматування

Елемент	Опис
sup	Перемкнути верхній індекс
sub	Перемкнути нижній індекс
code	Перемкнути inline-код
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	Вставити невидимі символи (пробіли тощо)

Роздільники

Використовуйте | як роздільник між групами кнопок у пропі 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>