Руководство пользователя к графическому текстовому редактору

Разработчик:

Моисеев Даниил

Описание решаемой задачи

Моей целью было разработать графический редактор текста на Python с использованием фреймворка Django.

Редактором текста предусмотрен следующий функционал:

1. Загрузка (и сохранение) файла формата .html «в» и «из» указанного каталога.

2. Редактирование текста: добавление, удаление, изменение стиля, параметров: bold, italic, underline, выбор 12 видов шрифта, а также цвета фона текста.

3. Предусмотрены команды «отменить», «повторить», масштабирование редактора на весь экран и просмотр текста без изменений в разметке html.

Технические требования

64-битная операционная система Windows, на которую возможна установка интерпретатора Python 3.7 или выше (​https://www.python.org/downloads/​)

Любой современный браузер, поддерживающий язык JavaScript.

Инструкция по установке приложения

Пользователю требуется установить на своем компьютере интерпретатор Python версии 3.7 и выше, а также фреймворк Django при отсутствии на компьютере.

Инструкция по запуску и настройке приложения

Пользователю требуется запустить приложение, используя скрипт start.py

Настроить приложение можно через скрипт ​settings.py​ (что находится в каталоге ​Work/Library​). В нём находится множество параметров, которые пользователь может поправить.

Описание интерфейса программы

При открытии программы командой python start.py, у вас запустится локальный веб-сервер и браузер. После применения, в командной строке появится лог запуска приложения и, при успешном запуске, в строке Starting development server at … будет выдан адрес, по которому запущено приложение. (По умолчанию 127.0.0.1 порт 8000) *Если вы запускаете приложение вручную через python manage.py runserver, скопируйте эту ссылку (http://127.0.0.1:8000/) в веб-браузер (Рис. 1 и 2).

Рис. 1. Запуск в командной строке.

Рис. 2. Открытие страницы в браузере. (Реализовано автоматически)

Главный интерфейс – окно редактора

Рассмотрим окно текстового редактора, что изображено ниже (Рис. 3).

Рис. 3. Основная рабочая область

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

Инструменты для изменения текста

На верхней панели предусмотрены 12 инструментов редактирования (Рис. 4).

Рис. 4. Инструменты редактирования

Рассмотрим подробнее каждый параметр.

1. Заголовок (Рис. 5) – выбор необходимого кегля текста.

2. Семейство шрифта (Рис. 6) - выбор необходимого шрифта

3. 3 классических параметра: Bold, Italic, Underline (рис. 7) – применение параметров: жирный, курсив, подчёркнутый соответственно.

4. Цвет шрифта (рис. 8) – выбор цвета шрифта с выдвигающимся меню цветовой палитры

5. Цвет фона (рис. 9) – аналогичная система цвета для фона текста

6. Кнопка «На весь экран» (рис. 10 слева)

7. Исходный код (рис. 10 в середине и рис. 11)

8. Помощь (рис. 10 справа) – показывает текст без форматирования в формате HTML (HyperText Markup Language)

9. Кнопки «Отменить», «Повтор» (рис.12)

10. Меню внизу: кнопки «Сохранить», «Открыть» (рис.13) – сохраняют и открывают соответственно в/из файла, используя Проводник Windows.

Рис. 5. Выбор заголовка Рис. 6. Выбор шрифта Рис. 7. Bold, Italic, Underline

Рис. 8. Выбор цвета шрифта Рис. 9. Выбор цвета фона Рис. 10. «На весь экран», Исходный код, помощь

Рис. 11. Просмотр исходного HTML кода

Рис. 12. «Отменить» и «Повтор» Рис. 13. «Сохранить» и «Открыть»

Ввод и форматирование текста

Удобство редактора в том, что пользователь может настроить параметры текста, и после вводить его, или сначала ввести, выделить и затем настроить его параметры. Рассмотрим примеры исходя из начального положения, когда пользователь только открыл редактор.

Исходные настройки:

• размер (кегль) – нормальный

• Шрифт – Segoe UI

• Bold, Italic, Underline – отключены

• Цвет шрифта – черный

• Цвет фона – прозрачный

(см. рис. 14)

Рис. 14. Исходные настройки редактора.

Пример работы

Мы хотим ввести текст «Привет, Мир!» самым крупным шрифтом семейства Times New Roman, где слово «Привет» должно быть жирное, «мир!» должно быть курсивное и подчеркнутое.

1. Выбираем «Заголовок 1» из рис. 4

2. Выбираем «Times New Roman» из рис. 5

3. Нажимаем на кнопку «B» на рис. 6

4. Вводим «Привет, мир!», результат ввода на рис. 15 ниже

Рис. 15.

1. Так как мир напечатался ненужным для нас жирным шрифтом, выделяем эту часть и отменяем Bold, применяем Italic и Underline, получая нужный результат (рис. 16 ниже)

Рис. 16. Результат примера

Сохранение текста

Предположим, пользователь ввёл текст (рис. 17)

Рис. 17

Очевидно, чтобы сохранить файл нужно нажать на кнопку ниже поля ввода «Сохранить». При нажатии всплывает* окно проводника Windows, в котором можно интерактивно в привычном виде выбрать путь, а так же легко назвать файл. (рис. 18) Обратите внимание, что справа внизу можно выбрать формат

*возможно оно не появится сверху всех окон, и придется нажать сочетание Ctrl + Tab , чтобы переключиться на него.

Рис. 18 меню сохранения

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

Рис. 19

Открытие текста

Обнулим наш текст после сохранения, загрузив начальную страницу через адресную строку - http://127.0.0.1:8000/

Нажимаем на кнопку внизу «Открыть файл», откроется аналогичное с сохранением окно, но уже для выбора файла для загрузки в редактор (рис. 20)

Рис. 20

После, открывается ваш сохраненный текст в новом адресе. (рис. 21)

Рис. 21