Работа в редакторе

Эта страница для тех, кто каждый день наполняет сайт: как устроен редактор, где какие кнопки и что происходит при сохранении.

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

Панель находится над текстом и при прокрутке остаётся на виду (настройка tiptapeditor.sticky_toolbar). Кнопки собраны в группы; набор и порядок задаёт администратор (см. Панель инструментов). У каждой кнопки есть всплывающая подсказка с названием и сочетанием клавиш.

Кнопка нажата (подсвечена), когда форматирование уже применено к тексту под курсором. Кнопка неактивна, если действие сейчас невозможно: например, «Якорь» работает только в заголовке, а «Убрать ссылку» — только на ссылке.

Пока курсор стоит в таблице, под основной панелью появляется вторая — панель таблицы (см. Таблицы).

Всплывающее меню

Если выделить текст, над ним появляется небольшое меню: Жирный, Курсив, Подчёркнутый, Зачёркнутый, Код в строке и Ссылка. Внутри кода и в режиме HTML-кода меню не показывается.

Включается настройкой tiptapeditor.bubble_menu.

Меню вставки блока

Когда курсор стоит в пустом абзаце, рядом появляется меню вставки блока: Заголовок 2, Заголовок 3, списки, Цитата, Блок кода, Изображение, Галерея, Таблица и Видео или встраивание. Кнопки выключенных функций (например, таблиц) не показываются.

Включается настройкой tiptapeditor.floating_menu.

Команды через «/»

Наберите / в начале пустого абзаца — откроется список блоков: Абзац, Заголовок 2, Заголовок 3, Маркированный список, Нумерованный список, Цитата, Изображение, Галерея, Таблица, Блок кода, Горизонтальная линия, Видео или встраивание.

Продолжайте печатать, чтобы отфильтровать список (/таб оставит «Таблицу»). Стрелки выбирают пункт, Enter вставляет, Escape закрывает список.

Включается настройкой tiptapeditor.slash_commands.

TIP

Администратор может поменять состав всех трёх меню в профиле или во внешней конфигурации, например "bubbleMenu": "bold italic link". Подробнее — в разделе Профили.

Строка состояния

Если включена настройка tiptapeditor.statusbar, под текстом показываются:

• путь элемента под курсором, например p > strong или table > tr > td > p;
• количество слов и символов: «Слов: 120 Символов: 845».

Вставка из Word и Google Docs

Текст, вставленный из Word, Google Docs или с других сайтов, очищается перед вставкой:

• служебная разметка Office (mso-*, o:p, условные комментарии), лишние <span>, шрифты и inline-стили удаляются;
• жирный, курсив, подчёркивание, зачёркивание, верхний и нижний индекс, заданные стилями, превращаются в обычные теги;
• списки Word становятся настоящими вложенными списками;
• выравнивание абзацев и заголовков сохраняется.

Картинки, которые есть только в буфере обмена (а не по адресу в интернете), не вставляются — редактор сообщает об этом. Вставьте их кнопкой Изображение или, если включена загрузка, перетащите файлы в текст. В содержимое никогда не попадают картинки в base64.

Копирование и вставка внутри редактора не очищается: классы и атрибуты сохраняются.

Чтобы вставить только текст без оформления, нажмите Ctrl+Shift+V (на Mac — Cmd+Shift+V). Если администратор включил tiptapeditor.paste_as_text, так вставляется всё.

Ссылки

Диалог ссылки

Выделите текст и нажмите Ссылка (или Ctrl/Cmd+K). Диалог «Вставить ссылку» (или «Изменить ссылку» для существующей) содержит:

Поле	Что делает
Адрес (URL)	Любой адрес: https://…, [[~12]], #якорь, /path/, mailto:, tel:. Записывается ровно как введено, редактор ничего не добавляет.
Ресурс MODX	Поиск ресурса по заголовку, расширенному заголовку, псевдониму или ID (см. ниже).
Файл…	Выбор файла в файловом менеджере MODX. Кнопка есть, если у поля есть доступный источник файлов.
Якорь в этом тексте…	Список заголовков с id из этого же текста; выбор подставляет #id.
Текст ссылки	Появляется, если ничего не было выделено.
Подсказка (title)	Атрибут title.
Открывать	«В этом же окне» или «В новом окне».
Атрибут rel	Значение rel. Для нового окна всегда добавляется noopener noreferrer.
CSS-класс	Список стилей из tiptapeditor.link_classes или текстовое поле, если пресеты не заданы.

Для существующей ссылки в диалоге есть кнопка Убрать ссылку. Ту же операцию делает отдельная кнопка панели.

Как ведут себя ссылки:

• Своих target и rel редактор не добавляет. При выборе «В новом окне» к rel добавляется noopener noreferrer (остальные значения остаются); при возврате к «В этом же окне» эти два слова убираются.
• Адреса javascript:, vbscript:, data: и file: не принимаются.
• Ссылки с тегами MODX в адресе ([[~12]], [[~5? &scheme=`abs`]]) показываются и сохраняются как написаны.
• Неизвестный класс у существующей ссылки сохраняется.

Ссылка на ресурс MODX

Нажмите Ресурс MODX в диалоге (или кнопку Ресурс MODX на панели — она открывает диалог сразу на поиске) и начните вводить заголовок, псевдоним или ID. Поиск начинается с двух символов (или сразу с числа-ID), показывает до 50 результатов: заголовок, ID, контекст, URI и пометку «не опубликован».

• Ищутся только ресурсы, которые вам разрешено видеть.
• По умолчанию поиск идёт в контексте редактируемого ресурса. С настройкой tiptapeditor.links_across_contexts — во всех доступных вам контекстах (кроме mgr).
• Выбранный ресурс записывается по формату tiptapeditor.resource_link_format, по умолчанию [[~{id}]], например [[~12]].
• При правке такой ссылки диалог показывает заголовок ресурса.

Якоря

Поставьте курсор в заголовок и нажмите Якорь. В диалоге введите Имя якоря (id): оно начинается с буквы и может содержать буквы, цифры, -, _, : и .. Ссылка на якорь — #имя, такие якоря появляются в списке «Якорь в этом тексте…» диалога ссылки. Пустое поле убирает якорь.

Таблицы

Вставка. Кнопка Таблица открывает диалог «Вставить таблицу»: Строки (до 100), Столбцы (до 30), флажок Строка заголовков и CSS-классы — Стиль из пресетов tiptapeditor.table_classes и Другие CSS-классы (или одно поле CSS-класс, если пресетов нет).

Панель таблицы появляется, пока курсор в таблице:

• Вставить строку выше, Вставить строку ниже, Удалить строку;
• Вставить столбец слева, Вставить столбец справа, Удалить столбец;
• Строка заголовков вкл/выкл, Столбец заголовков вкл/выкл;
• Объединить ячейки, Разделить ячейку;
• Свойства таблицы (классы), Удалить таблицу.

Чтобы объединить ячейки, выделите их, протянув мышью. Tab и Shift+Tab переходят между ячейками. Изменять ширину столбцов мышью нельзя — иначе в содержимое попали бы ширины в пикселях.

Существующие таблицы сохраняются как написаны: секции <thead>, <tbody> и <tfoot>, классы и атрибуты таблиц, строк и ячеек (id, data-*, style, colspan, rowspan и др.), ячейки без абзацев (<td>Цена</td> так и останется). Редактор ничего не добавляет: ни <colgroup>, ни min-width, ни обёртку.

Таблицы, которые редактор не может показать без изменений, остаются HTML-блоками: с <caption>, <colgroup>, атрибутами у <thead>/<tbody>/<tfoot>, обработчиками событий или конструкциями Fenom между строками. Если таблицы выключены (tiptapeditor.enable_tables), HTML-блоками становятся все таблицы.

Режим HTML-кода

Кнопка HTML-код переключает редактор на исходный код и обратно.

• Код показывается в обычном текстовом поле ровно так, как хранится: HTML, теги MODX и Fenom, с исходными переносами строк и отступами.
• Всё, что вы печатаете, сразу попадает в поле MODX. Если сохранить ресурс в режиме кода, сохранится ровно набранный текст.
• Вернулись без изменений — документ и история отмены остаются как были.
• Если код изменён, он читается так же, как при открытии ресурса: теги становятся плашками, непонятный HTML — HTML-блоками. Если визуальный редактор всё же что-то потеряет, появится список этих частей и выбор: Вернуться к коду или Всё равно применить. Применение — один шаг отмены.
• Режим работает у каждого TV отдельно, в полноэкранном режиме и у полей только для чтения (тогда только просмотр).

Полноэкранный режим

Кнопка Во весь экран разворачивает редактор на всё окно менеджера. Выйти — той же кнопкой или клавишей Esc (в том числе когда курсор в тексте; открытое меню или список подсказок Esc сначала закрывает). Кнопку можно отключить настройкой tiptapeditor.enable_fullscreen.

Клавиатура

Сочетание	Действие
Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z	Отменить, повторить
Ctrl/Cmd+B, I, U	Жирный, курсив, подчёркнутый
Ctrl/Cmd+Shift+S	Зачёркнутый
Ctrl/Cmd+E	Код в строке
Ctrl/Cmd+. и Ctrl/Cmd+,	Надстрочный и подстрочный
Ctrl/Cmd+Alt+0	Абзац
Ctrl/Cmd+Alt+1…6	Заголовок 1…6
Ctrl/Cmd+Shift+8, Ctrl/Cmd+Shift+7	Маркированный, нумерованный список
Ctrl/Cmd+Shift+B	Цитата
Ctrl/Cmd+Alt+C	Блок кода
Ctrl/Cmd+K	Ссылка
Ctrl/Cmd+Shift+V	Вставить как текст
Ctrl/Cmd+S	Сохранить ресурс (кнопкой «Сохранить» MODX)
Esc	Выйти из полноэкранного режима

Панелью можно пользоваться без мыши: Tab переводит фокус на панель, стрелки двигают между кнопками, Home/End — к первой и последней, Enter, пробел или стрелка вниз открывают меню, Escape закрывает меню или возвращает в текст.

На выделенном изображении, видео, галерее, плашке MODX или HTML-блоке Enter (или двойной щелчок) открывает его диалог. В диалогах кода Ctrl/Cmd+Enter сохраняет.

Сохранение: как редактор связан с полем MODX

Под визуальным редактором по-прежнему живёт обычное поле MODX, и сохраняется именно оно. Редактор лишь аккуратно записывает в него ваши правки.

• Пока вы ничего не меняли, поле не трогается. Открыли ресурс и нажали «Сохранить» — сохранится исходное значение без единого изменённого символа.
• Во время набора изменения записываются в поле с небольшой задержкой (150 мс), а перед сохранением формы — сразу и полностью, так что последние нажатия не теряются.
• MODX видит изменения: после правки форма помечается изменённой, как с любым другим полем.
• Пустой редактор сохраняется как пустая строка (без <p></p>).
• Если редактор не смог запуститься, вы просто работаете в обычном поле — его значение и сохранится.

Почему в базе переносы строк выглядят как CRLF?

Браузеры отправляют значения текстовых полей с переводами строк CRLF, и MODX сохраняет их как получил. Так происходит с любым редактором и без него; на вывод страницы это не влияет.