Руководство пользователя «WYSIWYG-редактор»
Используйте это руководство для полноценной и быстрой работы с редактором.
1. ВНЕШНИЙ ВИД РЕДАКТОРА
Зайдя на страницу редактора, первом делом вы увидите область, в которой и будет проходить большая часть работы веб-приложения. Это текстовое поле и блок с функциями «Создание HTML элементов» и «Оформление HTML элементов» (рисунок 1).
Рис.1 – Рабочая область – текстовое поле (слева) и блок с функциями (справа)
Функции при желании можно скрыть, нажав на кнопку «Открыть функции». Соответственно, чтобы раскрыть меню следует вновь нажать на кнопку «Открыть функции» (рисунок 2). Второй блок с функциями «Оформление HTML элементов» по умолчанию находится в скрытом состоянии. Для него применяются те же манипуляции, что и для первого.
Рис.2 – Вид блока с функциями в скрытом состоянии
Под текстовым полем располагаются две кнопки «Очистить» – отвечает за полную очистку текстового поля, и «Вывод» (рисунок 3). Кнопка вывод отвечает, чтобы код, введенный в текстовое поле в виде HTML-тегов, был выведен в текстовом блоке (рисунок 4) в виде визуальных элементов страницы.
Рис.3 – Кнопки «Очистить» и «Вывод»
Нижняя часть страницы представляет собой блок с результатами работы редактора «Отображение содержимого страницы» (рисунок 4). В текстовом блоке при нажатии кнопки «Вывод» выводится введенный в текстовое поле HTML-код в виде визуальных элементов страницы. С текстовым блоком нельзя взаимодействовать, в нем лишь выводится конечная информация.
Рис.4 – Текстовый блок
Ниже текстового блока находятся 2 кнопки – «Сохранить (.html)» и «Сохранить (.txt)» (рисунок 4). Данные кнопки имеют одинаковую функцию, а именно – введенный в текстовое поле HTML-код будет сохранен в соответствующем расширении. Подразумевается, что пользователь сможет просто скопировать в буфер обмена текст из текстового поля, но также есть возможность сразу же сохранить его как HTML-документ, что позволит сразу посмотреть полученный код в виде статической страницы в браузере, или текстовый документ, содержимое которого можно будет использовать впоследствии в своих работах. Выбирать имя сохраняемого файла нельзя – по умолчанию оно имеет вид «data.*выбранное расширение*», но в последствии его можно изменить средствами, которые предлагает операционная система для изменения имени файлов.
2. СОЗДАНИЕ HTML-ЭЛЕМЕНТОВ
В данном блоке будет подробно рассмотрен блок функций «Создание HTML-элементов» (рисунок 5).
Рис.5 – Блок функций «Создание HTML-элементов»
2.1. ФУНКЦИЯ «СОЗДАТЬ ТАБЛИЦУ»
Функция «Создать таблицу» представляет функционал добавления на страницу элемента <table>, который имеет определенное количество строк и столбцов, которые нужно ввести при использовании данной функции (рисунок 6 и 7).
Рис.6 – Диалоговое окно для введения количества строк в таблице
Рис.7 – Диалоговое окно для введения количества столбцов в таблице
Для примера добавим таблицу размеров 3 на 3 (3 столбца и 3 строки). На рисунке 8 показано, какой необходимый HTML-код появится в текстовом поле слева.
Рис.8 – Текстовое поле с необходимым HTML-кодом для вставки элемента таблицы на страницу
Для предоставления возможности работы с редактором большему количеству людей, код снабжен комментариями, которые не будут отображаться в выводе, а также будут помогать ориентироваться в коде. Таблица заполнена примерными данными, которые пользователь сможет заменить на необходимые ему.
Вид приведенной примерной таблицы в текстовом блоке «Отображение содержимого страницы» приведен на рисунке 9.
Рис.9 – Текстовый блок с результатом работы редактора
2.2. ФУНКЦИЯ «СОЗДАТЬ АБЗАЦ»
Функция «Создать абзац» представляет функционал добавления на страницу элемента <p>. Желательно оформлять им любой текст, который необходимо вставить на страницу в рамках данного редактора.
При нажатии на кнопку в текстовом поле появляется необходимый HTML-код (рисунок 10).
Рис.10 – Текстовое поле с необходимым HTML-кодом для вставки элемента абзаца на страницу
Для предоставления возможности работы с редактором большему количеству людей, код снабжен комментариями, которые не будут отображаться в выводе, а также будут помогать ориентироваться в коде. Примерного текста не установлено, но в комментарии описан алгоритм действий.
Для примера создадим абзац, в котором будет написано «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua» (текст-заглушка). Работа редактора показана на рисунках 11 и 12.
Рис.11 – Текстовое поле с необходимым HTML-кодом для вставки примерного элемента абзаца на страницу
Рис.12 – Текстовый блок с результатом работы редактора
2.3. ФУНКЦИЯ «СОЗДАТЬ СПИСОК»
Функция «Создать список» представляет функционал добавления на страницу элемента <ul> или <ol> (по умолчанию). При использовании данной функции нужно указать количество элементов в списке в диалоговом окне (рисунок 13).
Рис.13 – Диалоговое окно для введения количества элементов в списке
Для примера добавим список, который состоит из 3 элементов. На рисунке 14 показано, какой необходимый HTML-код появится в текстовом поле слева.
Рис.14 – Текстовое поле с необходимым HTML-кодом для вставки элемента списка на страницу
Для предоставления возможности работы с редактором большему количеству людей, код снабжен комментариями, которые не будут отображаться в выводе, а также будут помогать ориентироваться в коде. Список заполнен примерными данными, которые пользователь сможет заменить на необходимые ему.
Вид приведенного примерного списка в текстовом блоке «Отображение содержимого страницы» приведен на рисунке 15.
Рис.15 – Текстовый блок с результатом работы редактора
2.4. ФУНКЦИЯ «СОЗДАТЬ ЗАГОЛОВОК»
Функция «Создать заголовок» представляет функционал добавления на страницу элементов <h1> (по умолчанию), <h2>, <h3>, <h4>, <h5> или <h6>.
При нажатии на кнопку в текстовом поле появляется необходимый HTML-код (рисунок 16).
Рис.16 – Текстовое поле с необходимым HTML-кодом для вставки элемента заголовка на страницу
Для предоставления возможности работы с редактором большему количеству людей, код снабжен комментариями, которые не будут отображаться в выводе, а также будут помогать ориентироваться в коде. Примерного текста не установлено, но в комментарии описан алгоритм действий.
Для примера создадим заголовок, в котором будет написано «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua» (текст-заглушка). Работа редактора показана на рисунках 17 и 18.
Рис.17 – Текстовое поле с необходимым HTML-кодом для вставки примерного элемента заголовка на страницу
Рис.18 – Текстовый блок с результатом работы редактора
3. СОЗДАНИЕ HTML-ЭЛЕМЕНТОВ С РАСШИРЕННЫМИ НАСТРОЙКАМИ
В данном блоке будет подробно рассмотрен блок функций «Создание HTML-элементов» с расширенными настройками каждой из функций. Данный функционал можно применять в ситуациях, когда нужно изменить некоторые свойства вставляемого HTML-элемента (цвет, размер и пр.).
3.1. ФУНКЦИЯ «СОЗДАТЬ ТАБЛИЦУ» С РАСШИРЕННЫМИ НАСТРОЙКАМИ
Функция «Создать таблицу» представляет функционал добавления на страницу элемента <table>, который имеет определенное количество строк и столбцов, которые нужно ввести при использовании данной функции.
Расширенные настройки позволяют при добавлении задать таблице некоторые свойства, а именно – цвет и ширину границы (рисунок 19).
Рис.19 – Функция «Создать таблицу» с расширенными настройками
Для предоставления возможности работы с редактором большему количеству людей, код снабжен комментариями, которые не будут отображаться в выводе, а также будут помогать ориентироваться в коде.
Для примера добавим таблицу размеров 3 на 3 (3 столбца и 3 строки) с шириной границы 5 пикселей и цветом – желтый. На рисунках 20, 21 и 22 показана работа редактора.
Рис.20 – Вставленные в расширенные настройки значения при добавлении элемента
Рис.21 – Текстовое поле с необходимым HTML-кодом для вставки элемента таблицы с примененными расширенными настройками на страницу
Рис.22 – Текстовый блок с результатом работы редактора
3.2. ФУНКЦИЯ «СОЗДАТЬ АБЗАЦ» С РАСШИРЕННЫМИ НАСТРОЙКАМИ
Функция «Создать абзац» представляет функционал добавления на страницу элемента <p>.
Расширенные настройки позволяют при добавлении задать абзацу некоторые свойства, а именно – размер и цвет текста (рисунок 23).
Рис.23 – Функция «Создать абзац» с расширенными настройками
Для предоставления возможности работы с редактором большему количеству людей, код снабжен комментариями, которые не будут отображаться в выводе, а также будут помогать ориентироваться в коде. Примерного текста не установлено, но в комментарии описан алгоритм действий.
Для примера создадим абзац, в котором будет написано «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua» (текст-заглушка) размером 15 пикселей и красным цветом. Работа редактора показана на рисунках 24, 25 и 26.
Рис.24 – Вставленные в расширенные настройки значения при добавлении элемента
Рис.25 – Текстовое поле с необходимым HTML-кодом для вставки элемента абзаца с примененными расширенными настройками на страницу
Рис.26 – Текстовый блок с результатом работы редактора
3.3. ФУНКЦИЯ «СОЗДАТЬ СПИСОК» С РАСШИРЕННЫМИ НАСТРОЙКАМИ
Функция «Создать список» представляет функционал добавления на страницу элемента <ul> или <ol> (по умолчанию).
Расширенные настройки позволяют при добавлении списка определить его тип – маркированный или нумерованный (рисунок 27).
Рис.27 – Функция «Создать список» с расширенными настройками
Для предоставления возможности работы с редактором большему количеству людей, код снабжен комментариями, которые не будут отображаться в выводе, а также будут помогать ориентироваться в коде. Список заполнен примерными данными, которые пользователь сможет заменить на необходимые ему.
Для примера добавим маркированный список, который состоит из 3 элементов. Работа редактора показана на рисунках 28, 29 и 30.
Рис.28 – Вставленные в расширенные настройки значения при добавлении элемента
Рис.29 – Текстовое поле с необходимым HTML-кодом для вставки элемента списка с примененными расширенными настройками на страницу
Рис.30 – Текстовый блок с результатом работы редактора
3.4. ФУНКЦИЯ «СОЗДАТЬ ЗАГОЛОВОК» С РАСШИРЕННЫМИ НАСТРОЙКАМИ
Функция «Создать заголовок» представляет функционал добавления на страницу элементов <h1> (по умолчанию), <h2>, <h3>, <h4>, <h5> или <h6>.
Расширенные настройки позволяют при добавлении задать заголовку некоторые свойства, а именно – уровень и цвет заголовка (рисунок 31).
Рис. 31 – Функция «Создать заголовок» с расширенными настройками
Для предоставления возможности работы с редактором большему количеству людей, код снабжен комментариями, которые не будут отображаться в выводе, а также будут помогать ориентироваться в коде. Примерного текста не установлено, но в комментарии описан алгоритм действий.
Для примера создадим заголовок, в котором будет написано «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua» (текст-заглушка) с уровнем заголовка 4 и цветом – зеленый. Работа редактора показана на рисунках 32, 33 и 34.
Рис.32 – Вставленные в расширенные настройки значения при добавлении элемента
Рис.33 – Текстовое поле с необходимым HTML-кодом для вставки элемента списка с примененными расширенными настройками на страницу
Рис.34 – Текстовый блок с результатом работы редактора
4. ОФОРМЛЕНИЕ HTML-ЭЛЕМЕНТОВ
В данном блоке будет подробно рассмотрен блок функций «Оформление HTML-элементов» (рисунок 35).
Рис.35 – Блок функций «Оформление HTML-элементов»
Первым делом следует уточнить, что все функции, приведенные в данном блоке, применяются лишь к строковым (текстовым) данным (абзац, текст в списке, текст внутри ячейки таблицы, заголовок).
Любой из методов работает по принципу заключения необходимого элемента текста в теги для форматирования текста. То есть, нужно зажатием мыши выделить участок текста, а затем нажать на необходимую функцию. Таким образом вокруг выделения появятся теги для форматирования.
При необходимости убрать теги есть 2 способа убрать поставленные теги оформления:
- Выделить участок текста, включив в выделение теги (открывающий и закрывающий), которые необходимо убрать, а затем вновь нажать на функцию, которая была применена.
- Вручную удалить из текстового поля теги (открывающий и закрывающий).
4.1. ОБЕРНУТЬ ВЫДЕЛЕНИЕ ТЕГОМ ‘U’ (ПОДЧЕРКИВАНИЕ)
Функция «Обернуть выделение тегом ‘u’ (подчеркивание)» используется для создания у выбранной части текста подчеркивающей линии.
Для примера создадим абзац, в котором будет написано «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua» (текст-заглушка). Работа редактора показана на рисунках 36 и 37.
Рис.36 – Текстовое поле с необходимым HTML-кодом для вставки примерного элемента абзаца с примененным тегом форматирования на страницу
Рис.37 – Текстовый блок с результатом работы редактора
4.2. ОБЕРНУТЬ ВЫДЕЛЕНИЕ ТЕГОМ ‘B’ (ЖИРНЫЙ)
Функция «Обернуть выделение тегом ‘b’ (жирный)» используется для задания полужирного начертания тексту.
Для примера создадим абзац, в котором будет написано «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua» (текст-заглушка). Работа редактора показана на рисунках 38 и 39.
Рис.38 – Текстовое поле с необходимым HTML-кодом для вставки примерного элемента абзаца с примененным тегом форматирования на страницу
Рис.39 – Текстовый блок с результатом работы редактора
4.3. ОБЕРНУТЬ ВЫДЕЛЕНИЕ ТЕГОМ ‘I’ (КУРСИВ)
Функция «Обернуть выделение тегом ‘i’ (курсив)» используется для задания курсивного начертания тексту.
Для примера создадим абзац, в котором будет написано «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua» (текст-заглушка). Работа редактора показана на рисунках 40 и 41.
Рис.40 – Текстовое поле с необходимым HTML-кодом для вставки примерного элемента абзаца с примененным тегом форматирования на страницу
Рис.41 – Текстовый блок с результатом работы редактора
4.4. ОБЕРНУТЬ ВЫДЕЛЕНИЕ ТЕГОМ ‘DEL’ (ЗАЧЕРКНУТЫЙ)
Функция «Обернуть выделение тегом ‘del’ (зачеркнутый)» используется для создания линии, которая будет зачеркивать выбранный элемент текста.
Для примера создадим абзац, в котором будет написано «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua» (текст-заглушка). Работа редактора показана на рисунках 42 и 43.
Рис.42 – Текстовое поле с необходимым HTML-кодом для вставки примерного элемента абзаца с примененным тегом форматирования на страницу
Рис.43 – Текстовый блок с результатом работы редактора
5. СОХРАНЕНИЕ РЕЗУЛЬТАТА РАБОТЫ РЕДАКТОРА
В данном блоке будет подробно рассмотрен функционал сохранения результата работы редактора посредством кнопок «Сохранить (.html)» и «Сохранить (.txt)», которые расположены под текстовым блоком «Отображение содержимого страницы» (рисунок 44).
Рис.44 – Кнопки «Сохранить (.html)» и «Сохранить (.txt)»
Данные кнопки имеют одинаковую функцию, а именно – введенный в текстовое поле HTML-код будет сохранен в соответствующем расширении.
Подразумевается, что пользователь может просто скопировать в буфер обмена текст из текстового поля, т вставить в разрабатываемое веб-приложение. Но при необходимости сохранения результата можно воспользоваться данной функцией.
Первая кнопка «Сохранить (.html)» дает возможность сразу же сохранить результата работы редактора как HTML-документ, что позволит сразу посмотреть полученный код в виде статической страницы в браузере.
Кнопка «Сохранить (.txt)» дает возможность сохранить результат работы редактора как текстовый документ, содержимое которого можно будет использовать впоследствии в своих работах.
Выбирать имя сохраняемого файла нельзя – по умолчанию оно имеет вид «data.*выбранное расширение*», но в последствии его можно изменить средствами, которые предлагает операционная система для изменения имени файлов.