Форматирование сообщений: редактор форматированного текста, изображения и блоки кода

Обзор

Каждая тема и каждый ответ в Discussions пишутся в одном и том же лёгком редакторе форматированного текста. В нём есть всё форматирование, которое нужно форуму, - выделение, списки, цитаты, блоки кода, ссылки и встроенные изображения - и ничего, что превратило бы ветку обсуждения в упражнение по вёрстке страницы. Текст хранится в виде HTML в столбце Содержимое списков Discussions Topics (на сайте с русским интерфейсом - «Темы обсуждений») и Discussions Posts («Сообщения обсуждений») на вашем сайте и проходит через санитайзер с белым списком как при сохранении, так и при отображении, поэтому сообщение никогда не сможет содержать скрипты, стили или встроенные фреймы.

В этой статье описаны панель инструментов, сочетания клавиш, ссылки, цитаты и блоки кода, три способа вставить изображение, а также то, что санитайзер сохраняет и что удаляет.

Где появляется редактор

• В форме Новая тема - как поле Опишите тему или вопрос под названием. Текст темы необязателен; обязательно только название.
• Внизу темы - как поле ответа с подсказкой Напишите ответ.... Пока поле пусто, кнопка Опубликовать неактивна; она становится активной, как только в поле появляется текст или изображение.
• Под любым ответом после нажатия Ответить; редактор при этом подписан Ответ для и именем автора, а его кнопка Опубликовать неактивна, пока редактор пуст.
• При нажатии Изменить на написанном вами ответе (модераторы могут изменять любой ответ). Существующий текст загружается в редактор, а Сохранить записывает новую версию; пока редактор пуст, кнопка Сохранить неактивна.
• При нажатии Изменить на теме. Автор может изменять тему, пока она не заблокирована; модераторы могут изменять любую тему. Название, категория (если у доски есть категории) и текст изменяются на месте, текст - в этом же редакторе, а завершают изменение кнопки Сохранить или Отмена.

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

На панели инструментов над областью редактирования одиннадцать кнопок. Наведите курсор на кнопку, чтобы увидеть её название и, если есть, сочетание клавиш.

Кнопки панели инструментов не забирают фокус у текста, поэтому можно нажать кнопку и продолжить печатать. Пока изображение загружается, в конце панели инструментов отображается небольшой индикатор.

Сочетания клавиш

Другие сочетания - например Ctrl+Z для отмены или Ctrl+Shift+V для вставки без форматирования - обрабатывает браузер, как в любом редактируемом поле.

Ссылки

1. Выделите текст, который должен стать ссылкой (необязательно), и нажмите Ссылка (Ctrl+K).
2. Введите или вставьте адрес в поле Адрес ссылки и нажмите Вставить или клавишу Enter.

Если текст был выделен, он становится ссылкой. Если ничего не выделено, в качестве текста ссылки вставляется сам адрес. Адрес, введённый без протокола (vitextra.com/support), сохраняется как https://vitextra.com/support. Редактор принимает адреса http:, https:, mailto: и относительные адреса сайта (/sites/...), и каждая ссылка записывается с атрибутом rel="noopener noreferrer".

Цитаты и блоки кода

Цитата превращает абзац, в котором стоит курсор, в блочную цитату. Она отображается с цветной полосой слева и слегка приглушённым текстом - удобно, чтобы процитировать сообщение, на которое вы отвечаете, или фрагмент документа.

Блок кода превращает абзац в преформатированный блок: моноширинный шрифт (Consolas в Windows), затенённый фон, сохранённые пробелы и переносы строк. Длинные строки переносятся, а не создают горизонтальную полосу прокрутки, поэтому блок остаётся читаемым на телефоне. Используйте его для PowerShell, скриптов, фрагментов конфигурации, выдержек из журналов и всего, где важны отступы.

Чтобы выйти из цитаты или блока кода, поставьте в него курсор и нажмите Очистить форматирование - блок вернётся к обычному абзацу; либо дважды нажмите Enter в конце блока, как в большинстве редакторов.

Изображения

Поместить изображение в любое место текста можно тремя способами:

• Вставить изображение на панели инструментов - открывает диалог выбора файлов; можно выбрать сразу несколько изображений.
• Вставка из буфера обмена - скопируйте снимок экрана или изображение из другого приложения и нажмите Ctrl+V в редакторе.
• Перетаскивание - перетащите один или несколько файлов изображений с компьютера в область редактирования.

Каждое изображение загружается в библиотеку документов Discussions Assets («Файлы обсуждений») сайта, в папку с названием текущего года (2026, 2027, …), под уникальным именем файла с префиксом на основе времени, чтобы два пользователя, загружающие screenshot.png, никогда не перезаписали друг друга. Затем редактор вставляет изображение в позицию курсора, используя исходное имя файла как альтернативный текст. Изображения отображаются в естественном размере и уменьшаются до ширины сообщения, если они шире.

Ещё несколько полезных подробностей:

• Изменить размер изображения в редакторе нельзя. Если картинка должна быть меньше, обрежьте или уменьшите её перед загрузкой.
• Изображения в сообщении видны всем, кто может читать библиотеку Discussions Assets; по умолчанию она наследует разрешения сайта, как и остальные списки Discussions.
• Удаление ответа или темы также удаляет использованные в них изображения из библиотеки Discussions Assets; при удалении темы удаляются и её ответы вместе с их изображениями. Очистка выполняется по принципу «по возможности» и затрагивает только файлы этой библиотеки, а изображение, которое вы убрали из сообщения при изменении, остаётся в библиотеке, поэтому владелец сайта по-прежнему может очистить библиотеку в любой момент.
• Библиотека создаётся вместе с остальными списками. Если доска была создана более ранней предварительной сборкой, модератор (пользователь с разрешением «Управление списками») добавляет недостающие списки, открыв страницу с веб-частью - в режиме редактирования или без него; до этого кнопка вставки изображения сообщает об ошибке. См. KB10431. Не загружаются изображения или вложения.

Вставка из других приложений

Когда вы вставляете форматированное содержимое - из Word, Outlook, веб-страницы, Teams - редактор сохраняет структуру, которую разрешает санитайзер (абзацы, полужирный и курсив, списки, ссылки, таблицы, заголовки), и без предупреждения отбрасывает остальное: шрифты, цвета, размеры, выравнивание, встроенные стили и классы. Картинки, которые приходят во вставленном HTML как внешние ссылки, сохраняют свои адреса; картинки, вставленные как файлы, загружаются так, как описано выше. Вставка простого текста вставляет его как простой текст.

Что сохраняет санитайзер

Один и тот же белый список применяется при сохранении сообщения и при его отображении, поэтому содержимое, написанное через форму списка или импортированное с классической доски, тоже очищается.

Всё остальное удаляется:

• script, style, iframe, object, embed, svg, math, template и noscript удаляются вместе с содержимым, как и HTML-комментарии.
• Любой другой тег (например, font, video, form, input) удаляется, но его текст сохраняется.
• Все атрибуты, не перечисленные выше, - style, class, id, onclick и остальные обработчики событий - отбрасываются.
• Ссылка или изображение, адрес которых использует другую схему (javascript:, data: для ссылок, file:), теряет этот атрибут.

Каждый сохранившийся тег a получает rel="noopener noreferrer". Поскольку style никогда не сохраняется, цвет текста, цвет фона, гарнитура, размер шрифта и выравнивание не переживают очистку - независимо от того, набраны они через расширение браузера или вставлены из документа. Так задумано: сообщения выглядят единообразно и следуют теме сайта.