Редактор TinyMCE
Что представляет собой редактор TinyMCE?
TinyMCE это мощный форматированный текстовый редактор, который позволяет пользователям создавать форматированный контент с удобным интерфейсом.
Популярный редактор является редактором по умолчанию для всех Moodle. В разделе Администрирование > Администрирование сайта > Плагины > Текстовые редакторы > Управление редакторами можно включать и отключать текстовые редакторы, упорядочивать их по приоритету, а также настраивать редактор по умолчанию. Если включено несколько текстовых редакторов, пользователи могут выбрать предпочитаемый редактор на странице настроек: Меню пользователя > Настройки > Настройки редактора.
Проверка орфографии
Хотя в TinyMCE Premium доступна программа проверки орфографии (см. ниже), вы можете использовать свой браузер для проверки орфографии в стандартном редакторе TinyMCE. В зависимости от вашего браузера вы можете, например, ввести текст, щелкнуть правой кнопкой мыши и выбрать «Проверка орфографии». Неправильное или потенциально неправильное написание будет подчеркнуто красным.
Tiny панель инструментов
На панели инструментов доступны следующие кнопки (не все кнопки могут отображаться в конкретных случаях)
Доступны следующие кнопки:
| № | Кнопка | № | Кнопка | № | Кнопка |
|---|---|---|---|---|---|
| 1 | Undo | 9 | Вставить H5P или изменить настройки H5P | 18 | Маркированный список |
| 2 | Redo | 10 | Выровнять по левому краю | 19 | Нумерованный список |
| 3 | Bold | 11 | Выровнять по центру | 20 | Редактор уравнений |
| 4 | Italics | 12 | Выровнять по правому краю | 21 | Переключить на вторую строку (если есть) |
| 5 | Вставить изображение или изменить настройки изображения | 13 | Распределить по строке | ||
| 6 | Вставить видео или изменить настройки видео | 14 | Направление слева направо | ||
| 6 | Запись звука | 15 | Направление справа налево | ||
| 7 | Запись видео | 16 | Уменьшить отступ | ||
| 8 | Присоединить гиперссылку | 17 | Увеличить отступ |
У некоторых кнопок есть предварительные условия для отображения, например, кнопка редактора формул будет отображаться только в том случае, если включены фильтры MathJax или TeX (в разделе Администрирование сайта > Плагины > Фильтры > Управление фильтрами), в то время как опция H5P будет отображаться только в том случае, если включена функция tiny/h5p:addembed.
Некоторые функции также будут отображаться на «быстрой панели инструментов» при выделении текста в редакторе (например, некоторые параметры форматирования), однако быстрая панель инструментов будет отображаться только в том случае, если размер редактора превышает 5 строк текста. В небольших редакторах он автоматически скрывается, так как меньший объем может вызвать проблемы с корректным отображением параметров.
Tiny features
В меню Вставка доступны функции, показанные на скриншоте справа:
Вставка / редактирование изображения
Самый простой способ вставить изображение ― перетащить его. В качестве альтернативы вы можете использовать инструмент «Вставить изображение», который дает вам больше возможностей для управления некоторыми свойствами изображения:
Вы можете вставить URL-адрес изображения или просмотреть репозитории, чтобы найти или загрузить изображение.
Как только ваше изображение будет добавлено, вы можете изменить его размер и добавить альтернативный текст.
Чтобы изменить свойства изображения после его добавления в текст, выберите изображение и нажмите кнопку «Изображение» на появившейся мини-панели инструментов.
Вставить/отредактировать ссылку
При вставке или редактировании ссылки на другую (внутреннюю или внешнюю) страницу вы можете указать следующие параметры:
- URL: адрес страницы, на которую нужно перейти. Если оставить это поле пустым, будут доступны опции <вверху> и <внизу>
- Отображаемый текст: Текст, который отображается в тексте, представленном в виде ссылки
- Заголовок (может отсутствовать, как на скриншоте): Текст, отображаемый при наведении курсора мыши на ссылку
- Обзор репозиториев: переход на страницу загрузки файлов по ссылке.
- Открыть в новом окне: страницу можно открыть как в текущем окне, так и в новом.
Вставка/редактирование мультимедийных файлов
Для вставки существующих аудио- или видеоклипов редактор TinyMCE поддерживает стандарт Moodle Встраивание мультимедийных файлов.
Запись аудио, видео и экрана
TinyMCE позволяет пользователям записывать аудио- и видеоклипы, которые после записи будут прикреплены к тексту.
Новое в версии 4.5: с помощью значка камеры пользователь может записывать свой экран, если администратор включил эту настройку в меню Администрирование сайта > Плагины > Редактор TinyMCE > RecordRTC. Также доступна настройка приостановки записи.
Каждая запись состоит из следующих шагов:
- Начать запись: когда все будет готово, нажмите кнопку Начать запись
- Приостановить запись: приостановить, а затем перезапустить при необходимости (если администратор включил эту настройку).
- Остановить запись: по завершении нажмите кнопку Остановить запись
- Просмотрите запись: вы можете прослушать или просмотреть запись с помощью предоставленных элементов управления. Либо прикрепите клип к своему тексту, либо запишите его еще раз.
Максимальную длину и качество (битрейт) можно настроить на уровне администратора.
Вставить/отредактировать пример кода
Tiny редактор позволяет вставлять фрагменты кода, выделенные цветом синтаксиса, в редактируемую область.
Хотя вы можете выбрать язык программирования в верхней строке перед вводом кода, это никак не повлияет на способ отображения кода.
Tiny также поддерживает форматирование элементов кода (Format > Code), которое изменяет выделенный текст на внутренне определенный code style.
Вставка таблицы
Tiny поставляется с широкими возможностями управления таблицами для работы с текстовыми структурами в виде сетки. В дополнение к пункту меню «Вставить таблицу», для редактирования таблиц есть отдельное меню.
После добавления таблицы вы можете настраивать отдельные ячейки, строки, столбцы и свойства всей таблицы. Доступны следующие понятные пункты меню, поддерживающие стандартные параметры HTML-таблиц:
| Ячейка | Строка | Столбец |
|
|
|
Также есть возможность установить свойства таблицы и удалить ее.
Редактор таблиц также отображает контекстно-зависимые меню при редактировании различных элементов таблицы:
Вставить специальный символ
Средство выбора специальных символов позволяет вставлять буквы и символы (есть карта специальных символов Юникода), доступ к которым затруднен или невозможен с клавиатуры. Вы можете выполнять поиск по ключевым словам и / или просматривать категории.
Вставлять смайлики
Заставьте ваш контент вызывать улыбку: программа выбора эмодзи (смайликов) позволяет вставлять пиктограммы. Вы можете выполнять поиск по ключевым словам и/или просматривать категории.
Вставка HTML-элементов
Следующие 4 HTML-элемента поддерживаются TinyMCE с помощью меню:
- Вставить горизонтальную строку: добавляет HTML-строку к вашему тексту.
- Вставить разрыв страницы: добавляет разрыв страницы (
<p>) to your text.
- Вставить неразрывный пробел: добавьте неразрывный пробел (
) at the current cursor location.
- Вставить привязку (якорь, закладку): вставьте привязки (иногда называемые закладками) в свой текст. В диалоговом окне пользователям будет предложено ввести строку. Строка будет вставлена в HTML в качестве идентификатора привязки в месте расположения курсора. Например, пользователь помещает курсор в начало "Moodle", нажимает на кнопку привязки и вводит "start" в диалоговом окне. Результирующий HTML-код будет иметь вид
<p><a id="start"></a>Moodle</p>.
Вставить дату/время
Параметры вставки даты и времени позволяют легко вставить текущую дату и/или время в редактируемую область в точке установки курсора. Доступные параметры формата даты и времени зависят от выбранного языка.
Редактор формул
Если включены фильтры MathJax или TeX (в разделе Администрирование сайта > Плагины > Фильтры > Управление фильтрами), то в редакторе TinyMCE предусмотрена опция Вставить уравнение для запуска редактора уравнений.
В редакторе формул используется текстовая запись, которую можно ввести вручную и/или в интерактивном режиме. Интерактивные элементы сгруппированы в 4 категории (операторы, стрелки, греческие символы и дополнительно). Содержимое каждой вкладки можно настроить с помощью настроек редактора формул.
В нижней части редактора отображается предварительный просмотр.
Настройка содержимого H5P
Вы можете внедрить содержимое H5P через меню Настройка содержимого H5P следующим образом:
- Просмотрите хранилище банка содержимого и выберите файл H5P.
- Выберите либо создать копию файла, либо создать ярлык.
- При необходимости, настройте параметры H5P (разрешить загрузку, встроить ссылку, копировать ссылку с авторским правом).
- Нажмите кнопку «Выбрать этот файл».
- Нажмите «Вставить H5P», после чего внутренний адрес будет автоматически введен в поле URL H5P. В качестве альтернативы вы можете ввести любой внутренний или внешний URL H5P вручную.
Примечание: если вы создадите ярлык для файла, вы сможете отредактировать его в банке содержимого, и все действия, содержащие ссылку на файл, будут обновлены.
Tiny инструменты
В меню Инструменты доступны следующие варианты:
Исходный код
Во всплывающем окне «Исходный код» отображается код страницы, обычно HTML или JS. Код может быть изменен в виде обычного текста; как только окно будет закрыто, любые изменения будут отражены в режиме WYSIWYG.
Количество слов
Во всплывающих окнах отображается количество слов и символов (с пробелами и без них) во всем документе и выделенном тексте соответственно.
Количество слов также указано в нижнем колонтитуле редактора.
Проверка общедоступности
Автоматическая проверка специальных возможностей проверяет наличие некоторых распространенных ошибок в тексте. Обычно это элементы структуры текста, которые могут помешать всем пользователям получить равный доступ к информации и функциональным возможностям. Список проблем, которые ищет программа проверки специальных возможностей, следующий:
- Изображения с отсутствующим или пустым альтернативным текстом (если только они не используются для презентации).
- Контраст цвета шрифта и фона соответствует рекомендациям WCAG AA.
- Длинные блоки текста достаточно разбиты на заголовки.
- Все таблицы должны быть подписаны.
- Таблицы не должны содержать объединенных ячеек, так как в них трудно ориентироваться с помощью программы чтения с экрана.
- Все таблицы должны содержать заголовки строк или столбцов.
Медиа-менеджер
В медиаменеджере отображаются все медиафайлы, которые были вставлены в текст.
В верхней части медиаменеджера отображается знакомый элемент управления файлами, с помощью которого вы можете добавлять, загружать и удалять прикрепленные файлы.
Файлы, которые были прикреплены и снова удалены, отображаются в нижней части экрана.
Сочетания клавиш
Следующие сочетания клавиш будут работать в текстовом редакторе Tiny в большинстве браузеров. Обратите внимание, что для работы многих из этих команд вам необходимо либо щелкнуть мышью в текстовом редакторе, либо выбрать содержимое в текстовом редакторе.
Команды редактора
| Windows | Mac | Функция |
|---|---|---|
| Ctrl + Shift + f | ⌘ + Shift + f | Переключение на весь экран |
| Ctrl + c | ⌘ + c | Копировать |
| Ctrl + v | ⌘ + v | Вставить |
| Ctrl + Shift + v | ⌘ + Shift + v | Вставить без форматирования (очень полезно) |
| Ctrl + x | ⌘ + x | Вырезать |
| Ctrl + z | ⌘ + z | Отменить |
| Ctrl + y | ⌘ + y | Переделать |
| Ctrl + a | ⌘ + a | Выбрать все |
| Ctrl + f | ⌘ + f | Найти и заменить |
| F3 | Найти следующее | |
| Shift + F3 | Найти предыдущее | |
| Ctrl + b | ⌘ + b | Жирный шрифт |
| Ctrl + i | ⌘ + i | Курсив |
| Ctrl + u | ⌘ + u | Нижнее подчеркивание |
| Ctrl + k | ⌘ + k | Вставить/отредактировать ссылку |
| Ctrl + Right arrow | Option + Right arrow | Перейти к концу следующего слова |
| Ctrl + Left arrow | Option + Left arrow | Перейти к концу предыдущего слова |
| Ctrl + Shift + Right arrow | Shift + Option + Right arrow | Выбрать следующее слово или букву |
| Ctrl + Shift + Left arrow | Shift + Option + Left arrow | Выбрать предыдущее слово или букву |
| Ctrl + Shift + Home | Перейти от курсора к началу страницы | |
| Ctrl + Shift + End | Перейти от курсора к концу страницы | |
| Ctrl + Home | ⌘ + Up arrow | Перейти к началу страницы |
| Ctrl + End | ⌘ + Down arrow | Перейти к концу страницы |
| Ctrl + Backspace | Удалите слово или букву слева | |
| Ctrl + Delete | Удалите слово или букву справа | |
| Ctrl + P | ⌘ + P | Печать |
| Alt+Shift+1 | Ctrl+Option+1 | Заголовок 1 |
| Alt+Shift+2 | Ctrl+Option+2 | Заголовок 2 |
| Alt+Shift+3 | Ctrl+Option+3 | Заголовок 3 |
| Alt+Shift+4 | Ctrl+Option+4 | Заголовок 4 |
| Alt+Shift+5 | Ctrl+Option+5 | Заголовок 5 |
| Alt+Shift+6 | Ctrl+Option+6 | Заголовок 6 |
| Alt+Shift+7 | Ctrl+Option+7 | Параграф |
| Alt+Shift+8 | Ctrl+Option+8 | Div |
| Alt+Shift+9 | Ctrl+Option+9 | Адрес |
| Alt+0 | Option+0 | Диалог справки (список ярлыков) |
| Ctrl and + | ⌘ and + | Увеличение масштаба (не относится к редактору, но очень полезно) |
| Ctrl and - | ⌘ and - | Уменьшение масштаба (не относится к редактору, но очень полезно) |
| Ctrl and 0 | ⌘ and 0 | Сброс масштаба (не относится к редактору, но очень полезно) |
| Double-click | Double-click | Выберите слово |
| Triple-click | Triple-click | Выберите строку |
Навигация с помощью клавиатуры
Все разделы внешнего интерфейса редактора: строка меню, панель инструментов, боковая панель и нижний колонтитул доступны для навигации с помощью клавиатуры.
Активация навигации с клавиатуры
Существует несколько способов активировать навигацию с клавиатуры:
- Сфокусируйте панель меню: Alt + F9 (Windows) или ⌥F9 (Mac OS)
- Сфокусируйте панель инструментов: Alt + F10 (Windows) или ⌥F10 (macOS)
- Наведите курсор на нижний колонтитул: Alt + F11 (Windows) или ⌥F11 (macOS)
Наведение курсора на строку меню или панель инструментов запустит навигацию по первому элементу в строке меню или панели инструментов, который будет выделен серым фоном. Наведение курсора на нижний колонтитул запустит навигацию с клавиатуры по первому элементу в контуре элемента, который будет выделен подчеркиванием.
Перемещение между разделами пользовательского интерфейса
Когда активна навигация с клавиатуры, нажатие клавиши tab переместит фокус на следующий важный раздел пользовательского интерфейса, если это применимо. Этими разделами являются:
- строка меню;
- каждая группа панели;
- боковая панель;
- путь по элементам в нижнем колонтитуле;
- кнопка переключения количества слов в нижнем колонтитуле;
- брендированная ссылка в нижнем колонтитуле;
- редактор изменения размер маркера в нижнем колонтитуле.
Нажатие shift + tab приведет к перемещению в обратном направлении по тем же разделам, за исключением перехода от нижнего колонтитула к панели инструментов. При наведении фокуса на контур элемента, а затем нажатии shift + tab фокус переместится на первую группу панелей инструментов, а не на последнюю.
Перемещение по разделам пользовательского интерфейса
Навигация с клавиатуры по разделам пользовательского интерфейса обычно осуществляется с помощью клавиш со стрелками влево и вправо. Это включает в себя:
- перемещение между меню в строке меню;
- перемещение между кнопками в группе инструментов;
- перемещение между элементами в пути к элементу.
Во всех этих разделах пользовательского интерфейса навигация с клавиатуры будет циклической в пределах раздела. Например, если сфокусироваться на последней кнопке в группе панелей инструментов, а затем нажать стрелку вправо, фокус переместится на первый элемент в той же группе панелей инструментов.
Открытие, навигация и закрытие меню
При наведении курсора мыши на кнопку в строке меню или на панели инструментов с меню, нажатие клавиши пробел, ввод или стрелка вниз приведет к открытию меню. При открытии меню будет выбран первый элемент. Для перемещения по меню вверх или вниз нажмите клавишу со стрелкой вверх или вниз соответственно. То же самое относится и к подменю, которые также можно открывать и закрывать с помощью клавиш со стрелками влево и вправо.
Чтобы закрыть любое активное меню, нажмите клавишу escape. При закрытии меню выбор будет восстановлен в прежнем виде. Это также работает для закрытия подменю.
Контекстные панели инструментов и меню
Чтобы сфокусировать открытую контекстную панель инструментов, например контекстную панель инструментов таблицы, нажмите Ctrl + F9 (Windows) или ⌃F9 (Mac OS).
Навигация по контекстной панели инструментов аналогична навигации по панели инструментов, а навигация по контекстному меню аналогична навигации по стандартному меню.
Диалоговая навигация
В TinyMCE есть два типа пользовательских интерфейсов для диалога: диалоги с вкладками и диалоги без вкладок.
Когда открывается диалоговое окно без вкладок, фокусируется первый интерактивный компонент в диалоге. Пользователи могут перемещаться между интерактивными компонентами, нажимая tab. Это включает в себя любые кнопки нижнего колонтитула. При нажатии кнопки tab на первом компоненте диалогового окна выполняется возврат к первому компоненту диалога. При нажатии shift + tab выполняется переход в обратном направлении.
При открытии диалогового окна с вкладками фокусируется на первой кнопке в меню вкладок. Нажатие кнопки tab приведет к переходу к первому интерактивному компоненту на этой вкладке и переключению между компонентами вкладки, кнопками нижнего колонтитула, а затем обратно к кнопке tab. Чтобы переключиться на другую вкладку, сфокусируйте кнопку tab на текущей вкладке, затем с помощью клавиш со стрелками переключайтесь между кнопками tab.
Ярлыки специальных возможностей
Это список доступных сочетаний клавиш в пользовательском интерфейсе редактора.
| Windows | Mac | Функция |
|---|---|---|
| Enter / Spacebar | Enter / Spacebar | Выполните команду |
| Tab | Tab | Сосредоточьтесь на следующем элементе пользовательского интерфейса (например, строке меню, панели инструментов, группе панелей инструментов, элементе строки состояния) |
| Shift+Tab | Shift+Tab | Сосредоточьтесь на предыдущем элементе пользовательского интерфейса (например, строке меню, панели инструментов, группе панелей инструментов, элементе строки состояния) |
| Right Arrow / Down Arrow | Right Arrow / Down Arrow | Сфокусируйтесь на следующем элементе управления (например, на кнопке панели инструментов, меню или элементе меню) |
| Left Arrow / Up Arrow | Left Arrow / Up Arrow | Сфокусируйтесь на предыдущем элементе управления (например, на кнопке панели инструментов, меню или элементе меню) |
| Down Arrow / Spacebar | Down Arrow / Spacebar | Откройте меню или кнопку меню на панели инструментов |
| Spacebar | Spacebar | Откройте кнопку групповой панели инструментов |
| Down Arrow | Down Arrow | Откройте кнопку разделенной панели инструментов |
| Shift+Enter | Shift+Enter | Откройте всплывающее меню с помощью кнопок разделенной панели инструментов |
| Right Arrow | Right Arrow | Открыть подменю |
| Left Arrow / Esc | Left Arrow / Esc | Закрыть подменю |
| Esc | Esc | Закрыть диалог |
| Esc | Esc | Закрыть меню |
| Esc | Esc | Переместить фокус обратно в текст редактора |
Примечание: браузеры и программы для чтения с экрана предоставляют дополнительные ярлыки в контексте редактора.
Настройки администрирования сайта
Общие настройки
В разделе Администрирование > Плагины > Текстовые редакторы > Редактор TinyMCE вы можете отключить и включить определенные настройки, например, Tiny HTML formatter, Tiny no-auto link и получить доступ к настройкам платного сервиса TinyMCE Premium.
Вы также можете отключить фирменный логотип TinyMCE, который отображается в нижней части редактора.
Настройки редактора формул
Редактор формул имеет 4 вкладки: Операторы, Стрелки, Греческие символы и Дополнительно. Команды, доступные на каждой вкладке, и их порядок можно настроить в разделе Администрирование > Плагины > Текстовые редакторы > Редактор TinyMCE > Настройки редактора формул.
Для каждой группы отображается список команд в текстовом формате.
Плагин Tiny Record RTC для Moodle
Tiny полностью поддерживает запись мультимедиа. Внутри системы используется RecordRTC ― библиотека JavaScript с открытым исходным кодом, использующая WebRTC для записи аудио и видео. Чтобы настроить ее параметры, перейдите в раздел Администрирование сайта > Плагины > Текстовые редакторы > Редактор TinyMCE > RecordRTC.
Следующие параметры влияют на ресурсы сервера, как с точки зрения пропускной способности, так и с точки зрения использования диска:
- Разрешенные типы: вы можете указать, поддерживается ли запись аудио и видео, только аудио или только видео. Существуют две возможности для управления доступом к кнопкам TinyMCE: Capabilities/tiny/recordrtc:запись видео и Capabilities/tiny/recordrtc:запись аудио
- Скорость передачи аудио и видео: чем ниже скорость передачи, тем меньше размер файла, и наоборот. Скорость передачи данных по умолчанию для записанного аудио (128000) должна составлять около 15 КБАЙТ в минуту; скорость передачи данных по умолчанию для записанного видео (2500000) должна составлять около 20 МБ в минуту.
- Ограничение по времени воспроизведения аудио и видео в секундах: по умолчанию для аудио- и видеозаписи установлено ограничение по времени в 2 минуты. Опять же, чем больше максимальная продолжительность записи, тем больше размер получаемых файлов.
Записи хранятся в подкаталогах $CFG->dataroot>/filedir. Убедитесь, что параметры post_max_size и upload_max_filesize настроены в соответствии с ожидаемыми максимальными размерами записей.
Общие настройки Tiny
В нижнем колонтитуле редактора отображается небольшой значок "Power by Tiny", который содержит ссылку на веб-сайт редактора Tiny. Вы можете отобразить/скрыть этот значок, включив/отключив опцию фирменного стиля Tiny.
TinyMCE Premium
Для TinyMCE Premium требуется платная подписка. Ваш API-ключ доступен на странице вашей учетной записи Tiny Cloud, если вы приобрели подписку или у вас доступна бесплатная пробная версия.
Вы можете ввести ключ API и включить определенные плагины премиум-класса в разделе Администрирование сайта > Плагины > Текстовые редакторы > TinyMCE Premium.
Плата за премиум-функции TinyMCE взимается «за запрос» (количество загрузок редактора). Вы можете воспользоваться возможностью «Доступ к премиум-функциям TinyMCE» (tiny/premium: доступ премиум-класса) (новой в Moodle 4.4), чтобы контролировать, какие пользователи могут использовать премиум-функции и в каком контексте.
К функциям TinyMCE, которые могут быть доступны на вашем сайте Moodle при наличии премиум-подписки, относятся:
- Расширенные таблицы.
- Расширенная типографика.
- Изменение регистра.
- Контрольный список.
- Улучшенное редактирование изображений.
- Экспорт.
- Сноски.
- Форматировщик.
- Средство проверки ссылок.
- Вставка в страницу.
- Перманентное перо.
- PowerPaste.
- Программа проверки орфографии Pro.
- Автозамена орфографии.
- Содержание.
Вы можете узнать больше об этих функциях на веб-сайте TinyMCE. Пожалуйста, обратите внимание, что не все плагины, перечисленные на веб-сайте TinyMCE, в настоящее время доступны пользователям Moodle.
