Руководство пользователя СДО "Онлайн колледж на Енисее"

7. Как работать с меню ввода текста (инструменты редактирования )?

Практически все тексты для Web создаются с помощью языка HTML. Язык разметки HTML имеет свой синтаксис, который необходимо знать, если вы хотите оформить свой текст, сделать его более удобным для чтения другими людьми. Но основные операции по форматированию можно делать без знания HTML!

Коллеги, для тех, кто знаком с сайтами и панелью WYSIWYG (произносится [ˈwɪziwɪɡ], является аббревиатурой от англ. What You See IWhat You Get, «что видишь, то и получишь»), инструменты редактирования покажутся знакомыми и все будет достаточно просто. Редакторов WYSIWYG достаточно много, они могут отличаться внешне, но, как правило, их функционал схож с другими редакторами. В большинстве своем управление интуитивно понятно и не отличается от традиционных текстовых редакторов. 

Редактор TinyMCE дает достаточно широкие возможности по форматированию текста, вставке рисунков, ссылок, работе с таблицами. Вы сразу же можете визуально оценить, каков будет результат. В HTML-редакторе можно так же, как в MS Word, использовать некоторые горячие клавиши (например, Ctrl+B для выделения текста полужирным). На рисунке 13 представлен внешний вид HTML-редактора.

Рис. 13  HTML-редактор TinyMCE

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

Итак, давайте рассмотрим наш редактор подробнее. Ниже мы попытаемся дать описание ко всем иконкам редактора. Попытаемся - потому что, как уже указано, редакторы WYSIWYG бывают разные, и иконки тоже бывают разные, но разобравшись с одним, Вам не составит труда работать с другим.

  • Сверху на сером фоне располагается панель инструментов редактора с большим количеством иконок
  • В центральной части - текстовое поле, где будем работать с текстом.

Описание визуального текстового редактора WYSIWYG 

Основные, часто используемые функции редактора

Задает стиль оформления

Данные стили преимущественно используются для оформления заголовков различного уровня

Доступны следующие стили: Абзац, Адрес, Форматированный, Заголовок 1-6

Переключение панели инструментов

Не всегда удобно редактировать тексты в относительно небольшом окне. Для этого вы можете воспользоваться режимом редактирования во весь экран. При этом WYSIWYG редактор с вашим текстом откроется на весь экран

Жирность

Выделяет текст жирным (пример, Текст)

Горячие клавиши - Ctrl+B

Полноэкранный режим

Функция позволяет открыть панель редактора на весь экран

Курсив

Выделяет текст курсивом, т.е текст становиться наклонными (пример, Текст)

Горячие клавиши - Ctrl+I

Источник html кода

Кнопка, означает, что можно редактировать текст, не через редактор, а через html код сайта. Данной функцией лучше пользоваться, если вы знаете, малейшие основы html кода

Подчеркивание

Добавляет тексту подчеркивание (пример,Текст)

Горячие клавиши - Ctrl+U

Вставить / редактировать ссылку

Для того, что бы создать активную ссылку, нужно выделить слово, (необходимое для будущей ссылки), и нажать на «звено цепочки», в открывшемся окне, произвести необходимые настройки (Можно также закачать файл для скачивания или сделать ссылку, чтобы открывалась в новом окне и др. возможности).

Зачеркивание

Позволяет сделать текст зачеркнутым (пример,Текст)

Убрать (снять) ссылку

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

Надстрочный/ Верхний индекс

Помогает создать (написать) информацию, маленьким шрифтом, возле основного текста, сверху, например, см2

Вставить / редактировать изображение

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

Подстрочный/ Нижний индекс

Помогает создать (написать) информацию, маленьким шрифтом, возле основного текста, снизу, например, тенхнология2.0

Вставить как простой текст

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

Выравнивания по левому краю

Ваш текст будет прижат к левой стороне страницы

Вставить из word

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

 

Выравнивания по центру

Ваш текст будет располагаться по центру относительно страницы

Очистить лишний код

Перед оформлением текста, будет не лишним использовать данную функцию, если вы вставили текст, через функцию "вставить только текст", то текст уже будет очищен от стилей

Выравнивания по правому краю

Ваш текст будет прижат к правой стороне станицы

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

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

Вставить / удалить маркированный список

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

Вставить / редактировать медиа

Можно вставить музыку, видео добавив ссылку

Вставить / удалить нумерованный список

Делает выбранный текст, в виде пронумерованного столбика

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

Позволяет выбрать из списка предлагаемых системой смайликов и вставить их в текст

Отменить

Позволяет отменить сделанное действие

Горячие клавиши - ctrl+Z

Вставить символы

Можно выбрать из списка символов, тот который вам необходим, и он автоматически вставиться в текст. Такими как ±, ≠, ≤, ©, ÷ и д.р.

Повторить

Позволяет вернуться вперед, если была использована функция "отменить"

Горячие клавиши - ctrl+Y

Вставить / редактировать таблицу

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

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

Фон текста

Через данную функцию можно создать выделение фона для текста

Добавить (увеличить) отступ текста от края

Цвет шрифта

Благодаря этой функции, можно задать нужному тексту другой цвет

Убрать (уменьшить) отступ текста

Размер

Задает размер шрифта. Доступно 7 размеров: 1(8pt), 2(10pt), 3(12pt), 4(14pt), 5(18pt), 6(24pt), 7(36pt)

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

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

Шрифт

Задает шрифт. Доступно девять шрифтов: Trebuchet, Arial, Courier Nev, Georgia, Tahoma, Times New Roman, Verdana, Impact, Wingdings

Направление текста слева направо

Поиск

Открывается дополнительное окно поиска в тексте

Направление текста справа налево

Вставить неразрывный пробел

Ставится если вам нужно, чтобы словесные конструкции не разделялись при переносе на новую строчку

Найти и заменить

Открывается дополнительное окно  замены (например, нужно найти и заменить в тексте все случае, где встречается 2019 на 2020)

Примечание: Обратите внимание, что отсутствие выравнивания по ширине! Выравнивание текста по левому краю является стандартным, так как в текстах с длинными словами (русский, немецкий язык) браузер “не умеет” пока переносить слова по слогам, поэтому на экране при выравнивании по ширине часто образуются большие “дыры”. 

 Видеоурок TinyMCE работа с текстом