Редактор 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 инструменты
В меню Инструменты доступны следующие варианты:
View source code
The source code pop up window displays the code of the page, usually HTML or JS. The code can be modified in plain text; once the window is closed, any changes will be reflected in the WYSIWYG mode.
Word count
The word pop up windows displays the number of words and the number of characters (with and without spaces) of the entire document and the selected text, respectively.
The number of words are also shown in the editor's footer.
Accessibility checker
The automated accessibility checker checks for some common errors in the text. These are usually elements in the way the text is constructed that can prevent all users from having equal access to information and functionality. The list of problems that the accessibility checker looks for is:
- Images with missing or empty alt text (unless they have the presentation role)
- Contrast of font colour and background colour meets WCAG AA guidelines
- Long blocks of text are sufficiently broken up into headings
- All tables require captions
- Tables should not contain merged cells as they are difficult to navigate with screen readers
- All tables should contain row or column headers
Media Manager
The media manager shows all media files that have been embedded in the text.
The top part of the media manager shows the familiar file management element where you can add, download, and delete attached files.
Files that have been attached and deleted again are shown at the bottom half of the screen.
Keyboard shortcuts
The following keyboard shortcuts will work in the Tiny text editor in most browsers. Note that for many of these commands to work you need to either click in the text editor or select content in the text editor.
Editor shortcuts
| Windows Command | Mac Command | Function |
|---|---|---|
| Ctrl + Shift + f | ⌘ + Shift + f | Full screen toggle |
| Ctrl + c | ⌘ + c | Copy |
| Ctrl + v | ⌘ + v | Paste |
| Ctrl + Shift + v | ⌘ + Shift + v | Paste without formatting (very useful) |
| Ctrl + x | ⌘ + x | Cut |
| Ctrl + z | ⌘ + z | Undo |
| Ctrl + y | ⌘ + y | Redo |
| Ctrl + a | ⌘ + a | Select all |
| Ctrl + f | ⌘ + f | Find and replace |
| F3 | Find next | |
| Shift + F3 | Find previous | |
| Ctrl + b | ⌘ + b | Bold |
| Ctrl + i | ⌘ + i | Italics |
| Ctrl + u | ⌘ + u | Underline |
| Ctrl + k | ⌘ + k | Insert/edit link |
| Ctrl + Right arrow | Option + Right arrow | Move to the end of the next word |
| Ctrl + Left arrow | Option + Left arrow | Move to the end of the previous word |
| Ctrl + Shift + Right arrow | Shift + Option + Right arrow | Select the next word or letter |
| Ctrl + Shift + Left arrow | Shift + Option + Left arrow | Select the previous word or letter |
| Ctrl + Shift + Home | Select from the cursor to the beginning of the page | |
| Ctrl + Shift + End | Select from the cursor to the end of the page | |
| Ctrl + Home | ⌘ + Up arrow | Move to the beginning of the page |
| Ctrl + End | ⌘ + Down arrow | Move to the end of the page |
| Ctrl + Backspace | Delete word or letter to the left | |
| Ctrl + Delete | Delete word or letter to the right | |
| Ctrl + P | ⌘ + P | |
| Alt+Shift+1 | Ctrl+Option+1 | Header 1 |
| Alt+Shift+2 | Ctrl+Option+2 | Header 2 |
| Alt+Shift+3 | Ctrl+Option+3 | Header 3 |
| Alt+Shift+4 | Ctrl+Option+4 | Header 4 |
| Alt+Shift+5 | Ctrl+Option+5 | Header 5 |
| Alt+Shift+6 | Ctrl+Option+6 | Header 6 |
| Alt+Shift+7 | Ctrl+Option+7 | Paragraph |
| Alt+Shift+8 | Ctrl+Option+8 | Div |
| Alt+Shift+9 | Ctrl+Option+9 | Address |
| Alt+0 | Option+0 | Help dialogue (list of shortcuts) |
| Ctrl and + | ⌘ and + | Zoom in (not specific to the editor, but very useful) |
| Ctrl and - | ⌘ and - | Zoom out (not specific to the editor, but very useful) |
| Ctrl and 0 | ⌘ and 0 | Reset zoom (not specific to the editor, but very useful) |
| Double-click | Double-click | Select word |
| Triple-click | Triple-click | Select line |
The sections of the outer UI of the editor - the menubar, toolbar, sidebar and footer - are all keyboard navigable.
There are multiple ways to activate keyboard navigation:
- Focus the menubar: Alt + F9 (Windows) or ⌥F9 (MacOS)
- Focus the toolbar: Alt + F10 (Windows) or ⌥F10 (MacOS)
- Focus the footer: Alt + F11 (Windows) or ⌥F11 (MacOS)
Focusing the menubar or toolbar will start keyboard navigation at the first item in the menubar or toolbar, which will be highlighted with a gray background. Focusing the footer will start keyboard navigation at the first item in the element path, which will be highlighted with an underline.
Moving between UI sections
When keyboard navigation is active, pressing tab will move the focus to the next major section of the UI, where applicable. These sections are:
- the menubar
- each group of the toolbar
- the sidebar
- the element path in the footer
- the wordcount toggle Кнопка in the footer
- the branding link in the footer
- the editor resize handle in the footer
Pressing shift + tab will move backwards through the same sections, except when moving from the footer to the toolbar. Focusing the element path then pressing shift + tab will move focus to the first toolbar group, not the last.
Moving within UI sections
Keyboard navigation within UI sections can usually be achieved using the left and right arrow keys. This includes:
- moving between menus in the menubar
- moving between Кнопкаs in a toolbar group
- moving between items in the element path
In all these UI sections, keyboard navigation will cycle within the section. For example, focusing the last Кнопка in a toolbar group then pressing right arrow will move focus to the first item in the same toolbar group.
Executing Кнопкаs
To execute a Кнопка, navigate the selection to the desired Кнопка and hit space or enter.
When focusing a menubar Кнопка or a toolbar Кнопка with a menu, pressing space, enter or down arrow will open the menu. When the menu opens the first item will be selected. To move up or down the menu, press the up or down arrow key respectively. This is the same for submenus, which can also be opened and closed using the left and right arrow keys.
To close any active menu, hit the escape key. When a menu is closed the selection will be restored to its previous selection. This also works for closing submenus.
To focus an open context toolbar such as the table context toolbar, press Ctrl + F9 (Windows) or ⌃F9 (MacOS).
Context toolbar navigation is the same as toolbar navigation, and context menu navigation is the same as standard menu navigation.
There are two types of dialog UIs in TinyMCE: tabbed dialogs and non-tabbed dialogs.
When a non-tabbed dialog is opened, the first interactive component in the dialog will be focused. Users can navigate between interactive components by pressing tab. This includes any footer Кнопкаs. Navigation will cycle back to the first dialog component if tab is pressed while focusing the last component in the dialog. Pressing shift + tab will navigate backwards.
When a tabbed dialog is opened, the first Кнопка in the tab menu is focused. Pressing tab will navigate to the first interactive component in that tab, and will cycle through the tab's components, the footer Кнопкаs, then back to the tab Кнопка. To switch to another tab, focus the tab Кнопка for the current tab, then use the arrow keys to cycle through the tab Кнопкаs.
Accessibility shortcuts
This is a list of available keyboard shortcuts within the editor user interface.
| Windows Command | Mac Command | Function |
|---|---|---|
| Enter / Spacebar | Enter / Spacebar | Execute command |
| Tab | Tab | Focus on next UI Element(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item) |
| Shift+Tab | Shift+Tab | Focus on previous UI Element(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item) |
| Right Arrow / Down Arrow | Right Arrow / Down Arrow | Focus next Control(such as: toolbar Кнопка, menu, or menu item) |
| Left Arrow / Up Arrow | Left Arrow / Up Arrow | Focus previous Control(such as: toolbar Кнопка, menu, or menu item) |
| Down Arrow / Spacebar | Down Arrow / Spacebar | Open menu or toolbar menu Кнопка |
| Spacebar | Spacebar | Open group toolbar Кнопка |
| Down Arrow | Down Arrow | Open split toolbar Кнопка |
| Shift+Enter | Shift+Enter | Open the popup menu on split toolbar Кнопкаs |
| Right Arrow | Right Arrow | Open submenu |
| Left Arrow / Esc | Left Arrow / Esc | Close submenu |
| Esc | Esc | Close dialog |
| Esc | Esc | Close menu |
| Esc | Esc | Move focus back to editor body |
Note: Browsers and Screen Readers provide additional shortcuts within the editor context.
Site administration settings
General settings
From Site administration > Plugins > Text editors > TinyMCE editor you can disable and enable certain settings, for example the Tiny HTML formatter, Tiny no-auto link and access the setting for the paid service TinyMCE Premium.
You can also disable the TinyMCE branding logo which appears at the bottom of the editor.
TinyMCE Premium
TinyMCE Premium requires a paid subscription. Your API key is available on your Tiny Cloud account page if you have purchased a subscription, or if you are on a free trial.
You can enter the API key and enable specific premium plugins at Site administration > Plugins > Text editors > TinyMCE Premium.
For TinyMCE premium features charging is done on "per request" basis (number of editor loads). You can make use of the capability 'Access TinyMCE Premium features' (tiny/premium:accesspremium) (new in Moodle 4.4) to control which users can use premium features and in which context.
The TinyMCE features that may be available to your Moodle site with a Premium subscription are:
- Advanced Tables
- Advanced Typography
- Case Change
- Checklist
- Enhanced Image Editing
- Export
- Footnotes
- Format Painter
- Link Checker
- Page Embed
- Permanent Pen
- PowerPaste
- Spell Checker Pro
- Spelling Autocorrect
- Table of Contents
You can learn more about these features on TinyMCE's website. Please note that not all plugins listed on TinyMCE's website are currently available to Moodle users.
Equation editor settings
The equation editor has 4 tabs: Operators, Arrows, Greek symbols, and Advanced. The commands that are available on each tab and their order can be configured in Site administration > Plugins > Text editors > TinyMCE editor > Equation editor settings.
For each group, the list of commands is shown in TeX format.
Tiny Record RTC plugin for Moodle
Tiny fully supports media recording through. Internally, RecordRTC is utilised, an open source JavaScript library using WebRTC for audio and video recording. To configure its settings, navigate to Site administration > Plugins > Text editors > TinyMCE editor > RecordRTC:
The following options have an impact on server resources, both in terms of bandwidth and disk usage:
- Allowed types: You can specify whether Audio and video recording are supported or Audio only or Video only. There are two capabilities to control access to the TinyMCE Кнопкаs: Capabilities/tiny/recordrtc:recordvideo and Capabilities/tiny/recordrtc:recordaudio
- Audio bitrate and Video bitrate: The lower the bitrates, the smaller the file sizes, and vice versa. The default bitrate for recorded audio (128000) should generate files of about 15 KB per minute; the default bitrate for recorded video (2500000) to files of approximately 20 MB per minute.
- Audio time limit in seconds and Video time limit in seconds: The default time limit is 2 minutes for audio and video recording. Again, the longer the maximum recording length, the bigger the resulting files.
Recordings are stored in subdirectories of $CFG->dataroot>/filedir. Ensure post_max_size and upload_max_filesize are configured in line with your expected maximum recording sizes.
