Текстовый редактор TinyMCE

О механике

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

Редактор доступен полностью или частично в большинстве модулей и механик. Например, в административной части на странице создания/редактирования урока полный функционал редактора находится во вкладке Контент, а в публичной части есть только несколько опций редактора в комментариях к опубликованным материалам.

Как работать с текстовым редактором

Форматировать текст

Чтобы переключаться между элементами форматирования, делите текст на абзацы с помощью клавиши Enter на клавиатуре

Если переносить текст комбинацией клавиш Shift+Enter, прошлое форматирование сохранится и расстояние между строками будет меньше обычного.

Shift+Enter

Enter

Shift+Enter

Enter

Пример 1.png
Пример 2.png

Заголовки

Чтобы задать заголовок в пустой строке, выберите один из вариантов в панели редактора. Если нужно оформить в заголовок уже написанный текст, выделите его и для выбора размера нажмите на Заголовки.

Заголовки.png

Абзацы

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

image-20250326-042334.png

Цвет текста и фона текста

Для настройки цвет текста или фона текста выделите необходимый текст и нажмите кнопку Раз-20250326-052754.png или Два-20250326-052805.png соответственно. Откроется окно, в котором можно выбрать системный цвет.

image-20250328-041115.png

Чтобы добавить пользовательский цвет, в открывшемся окне нажмите кнопку палитра-20250326-053332.png и задайте цвет с помощью перемещения пипетки или ввода кода цвета.

image-20250326-054219.png

Панели

Для оформления контента по блокам можно воспользоваться опцией Панели. По умолчанию на платформе доступны системные панели, каждая из которых имеет своё оформление.

Панели.png

Чтобы создать другой блок, выберите пункт Пользовательская панель. Для него можно задать рамку, фон, прозрачность и скругление.

image-20250328-040755.png

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

Чтобы выровнять текст, нажмите кнопку image-20250326-040208.png и выберите один из вариантов: по левому краю, по центру или по правому краю. По умолчанию текст выравнивается по левому краю.

Списки

Если нужно разделить текст на списки, используйте один из доступных в редакторе:

  • Маркированный — 26.1.png

  • Нумерованный — 27.png

Чтобы добавить новый пункт списка, нажмите Enter на клавиатуре компьютера. Если нажать Enter дважды, форматирование списком прекратится

Шрифты

В панели редактора доступны 3 типа шрифта, которые можно комбинировать или использовать одновременно:

  • Жирный — 4.png

  • Курсив — 5.png

  • Подчёркнутый — 6.png

Изображение

Чтобы добавить изображение, нажмите image-20250326-033757.png. Можно загрузить изображение с устройства по кнопке image-20250326-045318.png или указать ссылку на внешний ресурс или на страницу платформы.

Размер одного изображения не должен превышать 10 МБ. Допустимые форматы: jpg, jpeg, png, svg, gif

После загрузки можно настроить изображение: повернуть, изменить отражение, выровнять и отредактировать по разным параметрам. Для этого нажмите на изображение и выберите необходимую настройку.

Видео

Чтобы добавить видео, нажмите image-20250326-032239.png. В разделе Общее можно загрузить видео с устройства по кнопке image-20250326-045318.png или указать ссылку на внешний ресурс или на страницу платформы, а в разделе Код для вставки — вставить код.

Размер одного видео не должен превышать 1 ГБ. Допустимые форматы: mp4, avi, mpeg

При добавлении видео дождитесь, чтобы оно загрузилось на платформу. После загрузки файл конвертируется с разрешением 480р или 720р. Если разрешение исходного видео меньше 720p, оно будет конвертировано только в качество 480p. С платформы можно скачать только конвертированный файл.

Ссылка

Чтобы добавить ссылку, нажмите кнопку image-20250326-032741.png и в открывшемся окне настройте необходимые параметры.

Ссылка.png

Таблица

Чтобы добавить таблицу, нажмите кнопку image-20250326-040439.png, выберите пункт Таблица и настройте размер. При создании таблицы максимальный размер — 10х10, в дальнейшем его можно изменить.

Таблица.png

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

Горизонтальная линия

Разделить контент на части можно с помощью горизонтальной линии. Чтобы добавить её, нажмите кнопку image-20250326-031543.png в панели редактора.

Смайл

Чтобы добавить смайл, нажмите кнопку image-20250326-033022.png и выберите эмодзи из списка.

Настроить список эмозди можно в Панели управленияИнструментыСписок эмодзи

Исходный код

Исходный код (HTML-код) — ссылка вида iframe, которая позволяет отображать документ внутри Motivity. Это удобно, потому что пользователи не переходят на другие вкладки и изучают всю информацию прямо на платформе.

Многие сервисы предлагают скопировать исходный код со всеми нужными атрибутами. Важно добавлять ссылки на открытые сервисы, чтобы платформа могла установить с ними соединение.

Пример копирования исходного кода в Google-картах

Чтобы добавить исходный код, нажмите кнопку 11.png и вставьте скопированные данные в открывшемся окне.

Если сервис не позволяет скопировать исходный код, его нужно составить самостоятельно. Как это сделать:

  1. Ознакомиться с атрибутами элемента <iframe></iframe><iframe>: The Inline Frame element - HTML: HyperText Markup Language | MDN

  2. Скопировать пример

<iframe src="#" width="#" height="#" > </iframe>
  1. Нажать кнопку 11.png в панели редактора и вставить пример в открывшемся окне

  2. Обязательно в атрибуте src указать ссылку на источник

  3. Опционально указать ширину width и высоту height блока, в котором будет отображаться документ. Если данные не введены, удалить строки с этими атрибутами

  4. Сохранить код и проверить корректность отображения

Удалить форматирование

Чтобы удалить форматирование, нажмите кнопку 3.png . Удалять форматирование можно для всего текста сразу или только для конкретной части.

Вернуть/отменить изменение

Вернуть или отменить изменение можно кнопками в панели редактора или клавишами на компьютерной клавиатуре.

Функция редактора

Метод работы

Действие пользователя

Функция редактора

Метод работы

Действие пользователя

Вернуть изменение

Панель редактора

Нажать кнопку 2.png

Компьютерная клавиатура

Нажать комбинацию клавиш Ctrl+Z

Отменить изменение

Панель редактора

Нажать кнопку 1.png

Компьютерная клавиатура

Нажать комбинацию клавиш Ctrl+Shift+Z

Использовать предпросмотр

В некоторых модулях при создании контента можно использовать предпросмотр. Он позволяет посмотреть, как материал будет выглядеть финально. Чтобы увидеть актуальную версию текста, необязательно сохранять страницу: все изменения сразу отображаются в области предпросмотра.

После предпросмотра запись можно опубликовать или вернуться к полной версии страницы создания/редактирования. Подробно о предпросмотре — Предпросмотр

image-20250328-040510.png

Упомянуть пользователя в тексте

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

Чтобы упомянуть пользователя, выполните ряд действий:

  1. В текстовом поле введите знак @ и первые несколько букв имени, фамилии или электронной почты пользователя

  2. Выберите пользователя из списка

  3. При необходимости поменяйте текст упоминания в скобках

Упоминание-20250326-045709.png
Пример упоминания пользователя

Related content