TinyMCE устаревшей версии

Материал из База знаний Центра ПУСК МФТИ

Текстовый редактор TinyMCE - это плагин для редактирования в Moodle, который можно включить, отключить или установить по умолчанию в меню Администрирование > Администрирование сайта > Плагины > Текстовые редакторы > Управление редакторами.

Пользователи также могут выбрать редактор TinyMCE (вместо редактора по умолчанию Atto) в верхнем правом меню пользователя> Настройки> Настройки редактора.

Сворачивание и разворачивание редактора

Сначала появляется редактор TinyMCE, состоящий всего из одного ряда кнопок. При нажатии на значок вверху слева он расширяется до трех рядов.

Редактор Tiny панель свернутая
Редактор Tiny панель свернутая
Редактор Tiny панель развернутая
Редактор Tiny панель развернутая

Кнопки на панели инструментов

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

Верхняя строка редактора
Верхняя строка редактора
1: Развернуть панель редактора 2. Форматирование 3. Жирный шрифт 4. Курсив
5. Маркированный список 6. Нумерованный список 7. Добавить ссылку 8. Отменить ссылку
9. Остановить автоматическое создание ссылок 10. Добавить изображение 11. Добавить смайлик 12. Добавить медиа
13. Управление встроенными файлами
Вторая строка редактора
Вторая строка редактора
1: Отменить 2. Повторить 3. Подчеркнуть 4. Зачеркнуть
5. Нижний индекс 6. Верхний индекс 7. Выровнять по левому краю 8. Выровнять по центру
9. Выровнять по правому краю 10. Уменьшить отступ 11. Увеличить отступ 12. Цвет текста
13. Цвет фона 14. Слева направо 15. Справа налево
Нижняя строка редактора
Нижняя строка редактора
1: Семейство шрифтов 2. Размер шрифта 3. Отредактируйте HTML 4. Найти
5. Найти/заменить 6. Вставьте неразрывный пробел 7. Вставьте специальный символ 8. Вставьте таблицу
9. Очистите запутанный код 10. Удалите форматирование 11. Вставьте в виде обычного текста 12. Вставьте из MS Word
13. Переключите полноэкранный режим

Выбор цвета

Colourpickers

Существует четыре уровня выбора шрифта или цвета фона:

  • Матрица быстрого выбора цветов размером 5х8;
  • «Дополнительные цвета», которая содержит ссылки на палитру, поддон и именованные вкладки:
Матрица быстрого выбора цветов размером 5х8
Матрица быстрого выбора цветов размером 5х8
Вкладка выбора цветов радуги
Вкладка выбора цветов радуги
Вкладка палитры с матрицей цветов 18x12
Вкладка палитры с матрицей цветов 18x12
Именованная вкладка с пользовательскими палитрами
Именованная вкладка с пользовательскими палитрами

Вставить таблицу

Основное меню вставки таблицы
Вкладка «Общие» при вставке или редактировании таблицы.
Вкладка Дополнительные при вставке таблицы
Вкладка «Дополнительные» при вставке или редактировании таблицы

Как добавить границы к таблице

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

  1. На странице, содержащей вашу таблицу, нажмите на иконку таблицы, после чего откроется вкладка «Общие».
  2. Установите толщину границы, минимум 1: на скриншоте выше стоит 0, значит, после сохранения границ у таблицы не будет.
  3. Перейдите на вкладку «Дополнительные» и установите цвет границы, например, черный. Нажмите «Применить», а затем «Обновить».
  4. Нажмите Сохранить; после этого загрузится страница, содержащая вашу таблицу с отображением границ.

Настройки редактора TinyMCE

В редакторе HTML TinyMCE есть своя страница настроек Администрирование > Плагины > Текстовые редакторы > Редактор HTML TinyMCE > Общие настройки со следующими параметрами:

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

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

Управление встроенными файлами

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

Кнопка "Управление файлами"

Управление встроенными файлами из TinyMCE

Вставьте уравнение

Доступ осуществляется из меню Администрирование> Администрирование сайта > Плагины > Текстовые редакторы > HTML-редактор TinyMCE > Редактировать уравнение, что позволяет включать или отключать текстовый фильтр в контексте редактора и, таким образом, отображать кнопку Dragmath. Если у вас есть глобальный пользовательский текстовый фильтр, отключите этот параметр.

Вставить смайлик

Доступ осуществляется из меню Администрирование > Администрирование сайта > Плагины > Текстовые редакторы > HTML-редактор TinyMCE > Вставить смайлик. Это позволяет включать или отключать фильтр смайликов в контексте редактора и, таким образом, отображать кнопку со смайликом.

Устаревшая программа проверки орфографии

Устаревшая проверка орфографии доступна только в IE9 и более поздних версиях, но не в других браузерах. Если вы хотите отключить его и вместо этого использовать функцию проверки орфографии в браузере, вы можете сделать это, отключив устаревший плагин проверки орфографии, щелкнув по нему в меню Администрирование > Администрирование сайта > Плагины > Текстовые редакторы > Редактор HTML TinyMCE > Общие настройки

Чтобы проверить орфографию через браузер, введите нужное слово (при неправильном написании под ним будут выделены красные линии) и нажмите правой кнопкой мыши + CTRL

Щелкните правой кнопкой мыши +CTRL для проверки орфографии в браузере

ПРИМЕЧАНИЕ: Хотя по умолчанию используется Google spell, который можно изменить в меню Администрирование> Администрирование сайта> Плагины> Текстовые редакторы> HTML-редактор TinyMCE, Google больше не поддерживает его и он не будет работать. (Обратите внимание, что он доступен только в IE9 и более поздних версиях) Его необходимо удалить. Смотрите номер MDL-38867. Рекомендуется проверять орфографию в браузере.

Если выбран параметр PSpell, то на вашем сервере должен быть установлен aspell версии 0.50 или более поздней, а путь к aspell должен быть указан в разделе Администрирование > Администрирование сайта > Сервер > Системные пути.

Вы можете выбрать другой орфографический движок в разделе Администрирование> Администрирование сайта > Плагины > Текстовые редакторы > HTML-редактор TinyMCE> Проверка орфографии.

Выбираем другой орфографический движок

Согласно: http://php.net/manual/en/book.pspell.php

"Начиная с версии php 5.3. Pspell больше не поддерживается / не входит в комплект поставки. Вместо этого вы можете использовать enchant, который по умолчанию включен в 5.3."

Если выбран параметр PSpell, на вашем сервере должен быть установлен aspell версии 0.50 или более поздней, а путь к aspell должен быть указан в разделе Администрирование > Администрирование сайта > Сервер > Системные пути.

Настройка панели инструментов редактора

Администратор может удалить или добавить кнопки на панель инструментов редактора TinyMCE, изменив панель инструментов редактора в разделе Администрирование > Администрирование сайта > Плагины > Текстовые редакторы > HTML-редактор TinyMCE > Общие настройки, как показано на скринкасте Настройка текстового редактора в 2.4.

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

Пример панели инструментов с добавленной кнопкой "Горизонтальное правило"

Список доступных шрифтов

В дополнение к шрифтам, используемым по умолчанию, администратор сайта может добавить дополнительные шрифты, введя их название и строку в поле Администрирование > Администрирование сайта > Плагины > Текстовые редакторы > HTML-редактор TinyMCE > Общие настройки, как показано на скринкасте, посвященном добавлению дополнительных шрифтов.

Пример пользовательского шрифта

Пользовательская конфигурация

Настройка в разделе Администрирование>Администрирование сайта>Плагины> Текстовые редакторы>HTML-редактор TinyMCE>Общие настройки предоставляет возможность администратору применять пользовательские форматы. Более подробную информацию с примерами смотрите в MDL-37186, а также на странице конфигурации TinyMCE

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

Пример 2: Пользовательские стили

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

Добавьте следующее:

{"theme_advanced_toolbar_location" : "внизу"}

Пример: Добавьте свои собственные пользовательские стили.

(Это может быть полезно, например, если вам нужен "домашний стиль" для важных заметок, ключевых моментов или чего-то подобного) На панели инструментов редактора введите "выбор стилей", а затем в поле "Пользовательский" добавьте следующий код, изменив его в соответствии с вашими целями:

{"style_formats" : [
 {"title" : "Bold text", "inline" : "b"},
 {"title" : "Red text", "inline" : "span", "styles" : {"color" : "#ff0000"}},
 {"title" : "Red header", "block" : "h1", "styles" : {"color" : "#ff0000"}} ]}

Следующее позволит вам использовать классы bootstrap CSS, если вы используете тему на основе bootstrap: 

   {"style_formats" : [
       {"title" : "Well", "block" : "div", "classes" : "well"},
       {"title" : "Label", "inline" : "span", "classes" : "label"},
       {"title" : "Label - success", "inline" : "span", "classes" : "label label-success"},
       {"title" : "Label - warning", "inline" : "span", "classes" : "label label-warning"},
       {"title" : "Label - important", "inline" : "span", "classes" : "label label-important"},
       {"title" : "Label - info", "inline" : "span", "classes" : "label label-info"},
       {"title" : "Label - inverse", "inline" : "span", "classes" : "label label-inverse"},
       {"title" : "Button", "inline" : "a", "classes" : "btn btn"},
       {"title" : "Button - primary", "inline" : "a", "classes" : "btn btn-primary"},
       {"title" : "Button - info", "inline" : "a", "classes" : "btn btn-info"},
       {"title" : "Button - success", "inline" : "a", "classes" : "btn btn-success"},
       {"title" : "Button - warning", "inline" : "a", "classes" : "btn btn-warning"},
       {"title" : "Button - danger", "inline" : "a", "classes" : "btn btn-danger"},
       {"title" : "Button - inverse", "inline" : "a", "classes" : "btn btn-inverse"}
   ]}

Пример: Включение копирования расширенного контента со стилями из MS Word (tm) и вставка в TineMCE без удаления важных стилей:

{"paste_retain_style_properties": "поля, отступы, ширина, высота, размер шрифта".,

  шрифт-вес, семейство шрифтов, цвет, выравнивание текста, ul, ol, li,

оформление текста, граница, фон, плавающий шрифт, отображение"}

Скорость работы TinyMCE в Firefox и Chrome