Текстовый редактор TinyMCE
О механике
Текстовый редактор используется для форматирования (оформления) контента. С помощью разных элементов форматирования можно облегчить восприятие текста, привлечь внимание пользователей и замотивировать их к прочтению.
Редактор доступен полностью или частично в большинстве модулей и механик. Например, в административной части на странице создания/редактирования урока полный функционал редактора находится во вкладке Контент, а в публичной части есть только несколько опций редактора в комментариях к опубликованным материалам.
Как работать с текстовым редактором
Форматировать текст
Чтобы переключаться между элементами форматирования, делите текст на абзацы с помощью клавиши Enter на клавиатуре
Если переносить текст комбинацией клавиш Shift+Enter, прошлое форматирование сохранится и расстояние между строками будет меньше обычного.
Shift+Enter | Enter |
---|---|
Заголовки
Чтобы задать заголовок в пустой строке, выберите один из вариантов в панели редактора. Если нужно оформить в заголовок уже написанный текст, выделите его и для выбора размера нажмите на Заголовки.
Абзацы
Текст можно оформлять в абзацы Важное и Цитата. Их оформление отличается, при этом каждый можно использовать для разных целей в любой части материала.
Цвет текста и фона текста
Для настройки цвет текста или фона текста выделите необходимый текст и нажмите кнопку или
соответственно. Откроется окно, в котором можно выбрать системный цвет.
Чтобы добавить пользовательский цвет, в открывшемся окне нажмите кнопку и задайте цвет с помощью перемещения пипетки или ввода кода цвета.
Панели
Для оформления контента по блокам можно воспользоваться опцией Панели. По умолчанию на платформе доступны системные панели, каждая из которых имеет своё оформление.
Чтобы создать другой блок, выберите пункт Пользовательская панель. Для него можно задать рамку, фон, прозрачность и скругление.
Выравнивание
Чтобы выровнять текст, нажмите кнопку и выберите один из вариантов: по левому краю, по центру или по правому краю. По умолчанию текст выравнивается по левому краю.
Списки
Если нужно разделить текст на списки, используйте один из доступных в редакторе:
Маркированный —
Нумерованный —
Чтобы добавить новый пункт списка, нажмите Enter на клавиатуре компьютера. Если нажать Enter дважды, форматирование списком прекратится
Шрифты
В панели редактора доступны 3 типа шрифта, которые можно комбинировать или использовать одновременно:
Жирный —
Курсив —
Подчёркнутый —
Изображение
Чтобы добавить изображение, нажмите . Можно загрузить изображение с устройства по кнопке
или указать ссылку на внешний ресурс или на страницу платформы.
Размер одного изображения не должен превышать 10 МБ. Допустимые форматы: jpg, jpeg, png, svg, gif
После загрузки можно настроить изображение: повернуть, изменить отражение, выровнять и отредактировать по разным параметрам. Для этого нажмите на изображение и выберите необходимую настройку.
Видео
Чтобы добавить видео, нажмите . В разделе Общее можно загрузить видео с устройства по кнопке
или указать ссылку на внешний ресурс или на страницу платформы, а в разделе Код для вставки — вставить код.
Размер одного видео не должен превышать 1 ГБ. Допустимые форматы: mp4, avi, mpeg
При добавлении видео дождитесь, чтобы оно загрузилось на платформу. После загрузки файл конвертируется с разрешением 480р или 720р. Если разрешение исходного видео меньше 720p, оно будет конвертировано только в качество 480p. С платформы можно скачать только конвертированный файл.
Ссылка
Чтобы добавить ссылку, нажмите кнопку и в открывшемся окне настройте необходимые параметры.
Таблица
Чтобы добавить таблицу, нажмите кнопку , выберите пункт Таблица и настройте размер. При создании таблицы максимальный размер — 10х10, в дальнейшем его можно изменить.
Когда таблица создана, можно настраивать ячейки, строки и столбцы. В разделе Свойства таблицы есть возможность изменить ширину, высоту таблицы и выравнивание текста в ней.
Горизонтальная линия
Разделить контент на части можно с помощью горизонтальной линии. Чтобы добавить её, нажмите кнопку в панели редактора.
Смайл
Чтобы добавить смайл, нажмите кнопку и выберите эмодзи из списка.
Настроить список эмозди можно в Панели управления → Инструменты → Список эмодзи
Исходный код
Исходный код (HTML-код) — ссылка вида iframe, которая позволяет отображать документ внутри Motivity. Это удобно, потому что пользователи не переходят на другие вкладки и изучают всю информацию прямо на платформе.
Многие сервисы предлагают скопировать исходный код со всеми нужными атрибутами. Важно добавлять ссылки на открытые сервисы, чтобы платформа могла установить с ними соединение.
Чтобы добавить исходный код, нажмите кнопку и вставьте скопированные данные в открывшемся окне.
Если сервис не позволяет скопировать исходный код, его нужно составить самостоятельно. Как это сделать:
Ознакомиться с атрибутами элемента
<iframe></iframe>
— <iframe>: The Inline Frame element - HTML: HyperText Markup Language | MDNСкопировать пример
<iframe
src="#"
width="#"
height="#"
>
</iframe>
Нажать кнопку
в панели редактора и вставить пример в открывшемся окне
Обязательно в атрибуте
src
указать ссылку на источникОпционально указать ширину
width
и высотуheight
блока, в котором будет отображаться документ. Если данные не введены, удалить строки с этими атрибутамиСохранить код и проверить корректность отображения
Удалить форматирование
Чтобы удалить форматирование, нажмите кнопку . Удалять форматирование можно для всего текста сразу или только для конкретной части.
Вернуть/отменить изменение
Вернуть или отменить изменение можно кнопками в панели редактора или клавишами на компьютерной клавиатуре.
Функция редактора | Метод работы | Действие пользователя |
---|---|---|
Вернуть изменение | Панель редактора | Нажать кнопку |
Компьютерная клавиатура | Нажать комбинацию клавиш Ctrl+Z | |
Отменить изменение | Панель редактора | Нажать кнопку |
Компьютерная клавиатура | Нажать комбинацию клавиш Ctrl+Shift+Z |
Использовать предпросмотр
В некоторых модулях при создании контента можно использовать предпросмотр. Он позволяет посмотреть, как материал будет выглядеть финально. Чтобы увидеть актуальную версию текста, необязательно сохранять страницу: все изменения сразу отображаются в области предпросмотра.
После предпросмотра запись можно опубликовать или вернуться к полной версии страницы создания/редактирования. Подробно о предпросмотре — Предпросмотр
Упомянуть пользователя в тексте
Если вы хотите дать ссылку на пользователя в тексте, можно применить функцию упоминания. Тогда при публикации материала упоминаемый пользователь получит уведомление, а читатели смогут перейти по ссылке в профиль этого человека.
Чтобы упомянуть пользователя, выполните ряд действий:
В текстовом поле введите знак @ и первые несколько букв имени, фамилии или электронной почты пользователя
Выберите пользователя из списка
При необходимости поменяйте текст упоминания в скобках