Панель инструментов
Состав и порядок кнопок задаёт системная настройка tiptapeditor.toolbar. Изменение вступает в силу после перезагрузки страницы ресурса, пересобирать ничего не нужно.
Синтаксис
- Имена кнопок пишутся через пробел.
- Символ
|начинает новую группу: между группами на панели появляется разделитель. - Регистр не важен:
bulletList,bulletlistиBULLETLIST— одно и то же. - Неизвестные имена пропускаются, ошибкой это не считается.
- Перенос строки в значении — такой же разделитель, как пробел.
undo redo | heading | bold italic | link imageВ профиле или во внешней конфигурации панель можно задать и списком (JSON):
{ "toolbar": ["undo", "redo", "|", "bold", "italic", "|", "link", "source"] }или списком групп: [["undo", "redo"], ["bold", "italic"]]. Подробнее — в разделе Профили и конфигурация.
Панель по умолчанию
undo redo | heading | bold italic underline strike code | color highlight
| superscript subscript | align | bulletList orderedList | blockquote horizontalRule
| link modxLink anchor | image gallery file table embed | codeBlock | clearFormatting | source fullscreenЭто значение настройки после установки. Если очистить настройку полностью, основной панели не будет совсем (останутся всплывающие меню и команды через /, если они включены). Повторы имён в списке игнорируются.
Все кнопки
В колонке «Название» — подпись, которую видит пользователь (всплывающая подсказка на русском языке менеджера).
Текст и блоки
| Имя | Название | Что делает |
|---|---|---|
undo | Отменить | Отменить последнее действие (Ctrl/Cmd+Z). |
redo | Повторить | Повторить отменённое (Ctrl/Cmd+Shift+Z). |
heading | Стиль текста | Меню: «Абзац» и заголовки уровней из tiptapeditor.heading_levels. |
paragraph | Абзац | Превратить блок в обычный абзац. |
h1 … h6 | Заголовок 1 … Заголовок 6 | Отдельная кнопка для каждого уровня заголовка. |
paragraphClass | Стиль абзаца | Меню классов для абзацев и заголовков из tiptapeditor.paragraph_classes. Без пресетов кнопка не показывается. |
bold | Жирный | Ctrl/Cmd+B. |
italic | Курсив | Ctrl/Cmd+I. |
underline | Подчёркнутый | Ctrl/Cmd+U. |
strike | Зачёркнутый | Ctrl/Cmd+Shift+S. |
code | Код в строке | Ctrl/Cmd+E. |
superscript | Надстрочный | Верхний индекс, Ctrl/Cmd+. |
subscript | Подстрочный | Нижний индекс, Ctrl/Cmd+, |
color | Цвет текста | Палитра цветов с пунктом «Убрать цвет». |
highlight | Выделение цветом | Палитра цвета фона с пунктом «Убрать цвет». |
align | Выравнивание | Меню: по левому краю, по центру, по правому краю, по ширине. |
alignLeft | По левому краю | Отдельная кнопка выравнивания. |
alignCenter | По центру | Отдельная кнопка выравнивания. |
alignRight | По правому краю | Отдельная кнопка выравнивания. |
alignJustify | По ширине | Отдельная кнопка выравнивания. |
bulletList | Маркированный список | Ctrl/Cmd+Shift+8. |
orderedList | Нумерованный список | Ctrl/Cmd+Shift+7. |
blockquote | Цитата | Ctrl/Cmd+Shift+B. |
horizontalRule | Горизонтальная линия | Вставить <hr>. |
codeBlock | Блок кода | Ctrl/Cmd+Alt+C. |
clearFormatting | Очистить форматирование | Снять всё строчное оформление и вернуть блок к абзацу. |
Ссылки
| Имя | Название | Что делает |
|---|---|---|
link | Ссылка | Диалог ссылки (Ctrl/Cmd+K). |
modxLink | Ресурс MODX | Тот же диалог, сразу открытый на поиске ресурса MODX. |
unlink | Убрать ссылку | Убрать ссылку под курсором. Активна только на ссылке. |
anchor | Якорь | Задать якорь (id) текущего заголовка. Активна только в заголовке. |
file | Ссылка на файл | Выбрать файл в файловом менеджере: выделенный текст станет ссылкой на него, без выделения вставится имя файла со ссылкой. Нужен доступный источник файлов. |
Изображения, галереи, встраивание
| Имя | Название | Что делает |
|---|---|---|
image | Изображение | Диалог изображения: файловый менеджер, загрузка с компьютера, копирование по ссылке, alt, подпись, размеры, увеличение по клику. На выделенном изображении — его правка. |
imageUpload | Изображение с компьютера | Сразу выбор файла на компьютере, загрузка и диалог изображения. Необязательная кнопка (см. ниже). |
imageUrl | Изображение по ссылке | Сразу диалог «скачать изображение на сайт по адресу». Необязательная кнопка (см. ниже). |
gallery | Галерея | Диалог галереи. На выделенной галерее — её правка. |
embed | Видео или встраивание | Диалог видео YouTube, VK Видео, Rutube или кода <iframe>. |
Подробно о каждой — в разделе Изображения, галереи, файлы.
Таблицы
| Имя | Название | Что делает |
|---|---|---|
table | Таблица | Вставить таблицу (диалог). Если курсор в таблице — свойства таблицы. |
addRowBefore | Вставить строку выше | |
addRowAfter | Вставить строку ниже | |
deleteRow | Удалить строку | |
addColumnBefore | Вставить столбец слева | |
addColumnAfter | Вставить столбец справа | |
deleteColumn | Удалить столбец | |
toggleHeaderRow | Строка заголовков вкл/выкл | Превратить первую строку в заголовки (<th>) и обратно. |
toggleHeaderColumn | Столбец заголовков вкл/выкл | То же для первого столбца. |
mergeCells | Объединить ячейки | Объединить выделенные ячейки. |
splitCell | Разделить ячейку | Разделить объединённую ячейку. |
tableProperties | Свойства таблицы | Классы таблицы. |
deleteTable | Удалить таблицу |
Команды таблицы и так есть на панели таблицы, которая появляется, пока курсор в таблице. В основную панель их стоит добавлять, только если они нужны там постоянно.
Вид
| Имя | Название | Что делает |
|---|---|---|
source | HTML-код | Переключить на исходный HTML и обратно. |
fullscreen | Во весь экран | Полноэкранный режим, выход — Esc. |
Когда кнопка не видна или неактивна
Кнопку можно вписать в панель, но она скроется, если её функция выключена:
| Кнопки | Скрываются, если |
|---|---|
table и все команды таблиц | tiptapeditor.enable_tables = Нет |
image, imageUpload, imageUrl | tiptapeditor.enable_images = Нет |
gallery | tiptapeditor.enable_gallery или tiptapeditor.enable_images = Нет, или у поля нет ни доступного источника файлов, ни загрузки |
embed | tiptapeditor.enable_iframe = Нет |
fullscreen | tiptapeditor.enable_fullscreen = Нет |
paragraphClass | tiptapeditor.paragraph_classes пуста |
imageUpload | загрузка выключена (tiptapeditor.upload_enabled) или у поля нет источника файлов |
imageUrl | загрузка выключена или у поля нет источника файлов |
color, highlight, align…, superscript, subscript и др. | их расширение выключено в профиле или внешней конфигурации ("extensions": {"highlight": false}) |
Кнопка file остаётся на месте, но неактивна, если у пользователя нет доступа к файловому менеджеру или источнику файлов.
Необязательные кнопки: imageUpload и imageUrl
Начиная с версии 0.1.0-alpha16 загрузка с компьютера и копирование по ссылке встроены в диалог кнопки Изображение, поэтому в панели по умолчанию отдельных кнопок нет. Их можно добавить, если редакторам удобнее одним щелчком:
... | image imageUpload imageUrl gallery file table embed | ...Обе кнопки работают, только если включена загрузка (tiptapeditor.upload_enabled). Если выделено изображение, они заменяют только его файл.
Примеры
Минимальная панель для коротких текстов:
bold italic link | bulletList orderedList | clearFormattingПанель для статей с пресетами абзацев и только двумя уровнями заголовков (tiptapeditor.heading_levels = 2,3):
undo redo | heading paragraphClass | bold italic | link modxLink anchor | image gallery table | source fullscreenОтдельные кнопки заголовков вместо меню:
paragraph h2 h3 | bold italic | alignLeft alignCenter alignRightПосле обновления пакета
Значение tiptapeditor.toolbar при обновлении сохраняется. Кнопки новых версий (например, gallery, file, embed) нужно дописать в него самостоятельно — сравните с панелью по умолчанию.
Свои кнопки
Разработчики могут добавить свою кнопку через TipTapEditor.registerToolbarItem() — после этого её имя можно вписывать в tiptapeditor.toolbar, в профили и в списки меню. См. JS API.