Как создать текстовый редактор на компьютере

Обновлено: 07.07.2024

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

В этой статье мы соберем текстовый редактор, который будет работать в браузере. В помощь нам три технологии:

  • JavaScript — язык, на котором всё будет работать. Это не лучший язык для полноценных приложений, но с ним вы сможете запрограммировать текстовый редактор прямо в браузере.
  • Contenteditable — возможность языка HTML делать какие-то части страницы редактируемыми. Обычно со страницы можно только читать, но благодаря этому свойству можно еще и писать.
  • Localstorage — особая область памяти, которая позволяет сохранить что-нибудь для конкретной страницы в браузере. Ваш браузер будет помнить, что вы ввели конкретно в этой странице. Это самая интересная часть.

Общая идея

У нас будет HTML-страница, на ней будет блок, похожий на лист бумаги. У него будет включен content editable, то есть внутри этого блока можно будет что-то писать. После каждого нажатия клавиши содержимое этого блока будет записываться во внутреннюю память браузера.

Если записать алгоритм кратко, то он будет выглядеть так:

  • Достаём из памяти тот текст, который там был
  • Выводим его в нашу область для редактирования
  • Постоянно смотрим, нажата ли какая-нибудь клавиша
  • Если нажата — сразу записываем изменения в память.

Пункты 3 и 4 выполняются непрерывно до тех пор, пока вы не закроете страницу.

Готовим каркас

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

Сохраняем как html-файл, открываем его в браузере и видим пустой экран. Это нормально, сейчас будем наполнять.

Расставляем содержимое

Нам нужен только заголовок, который объяснит нам, где мы находимся, и большое пространство для ввода текста. За текстовое поле будет отвечать блок <div> со свойством contenteditable. Это свойство разрешает редактировать текст в блоке как угодно.

Разместим это в разделе <body>:

Настраиваем стили

Стили задают внешний вид страницы и любых элементов на ней. Сделаем наш заголовок опрятнее:

Привет, Хабр! Представляю вашему вниманию перевод статьи "Build Your Own Text Editor" автора Джереми Рутена.

Привет! Это вольный перевод о том, как написать свой никому не нужный текстовый редактор на C.


Итак, что сможет делать наш редактор?

  • Базовые функции редактора (писать, стирать, перемещать «каретку» и т.д.)
  • Искать по ключевому слову
  • Подсвечивать синтаксис

Еще чуть-чуть о реализации редактора:

  • Реализация редактора состоит из чуть больше, чем 1000 строк и одного файла
  • Не имеет зависимостей (кроме, конечно же, системных)

Всего туториал состоит из 184 шагов. Каждый шаг вы будете добавлять, изменять или удалять разные строки кода. На большинстве шагов вы сможете наблюдать за внесенными изменениями просто скомпилировав и запустив программу.

Я попробую объяснить каждый шаг на этом пути, иногда очень подробно. Не бойтесь пропускать теорию, потому что суть в самом написании кода и то, что вы вообще решились на это! Всё, что вы узнаете в процессе — это бонус, будет чему научится просто вводя изменения в код и наблюдая за результатами.

Настройки

Первый шаг, новый файл и всё всё всё с чистого листа…
Для начала убедитесь в том, что ваша среда корректно настроена для вашего ЯП (в нашем случае — для C), а так же вы хотя бы примерно понимаете, как компилировать и запускать вашу программу в этой среде.

К нашему счастью, редактор, который мы напишем не зависит от каких-либо внешних библиотек. Единственное, что нам понадобится, так это компилятор и стандартная библиотека языка C, с которой он и поставляется. Мы так же будем использовать make-скрипт для упрощения команд компиляции. Удостоверьтесь, что у вас есть как и компилятор для C, так и make.

Компилятор языка C

Так как C компилируемый язык, нам нужен, как не странно, компилятор, если у вас его нет, его обязательно нужно установить, как и make. Например, в Ubuntu, это можно сделать так:

Функция main()

Итак, вот, с чего начинается наш путь! Создайте файл kilo.c и напишите в нем базовую main() функцию.

Шаг 1

Для компиляции этого файла, достаточно ввести cc kilo.c -o kilo в ваш терминал. Если ошибок не последовало, в текущей директории появится исполняемый файл kilo. Что бы запустить программу, введите ./kilo. К сожалению, пока наша программа ничего не умеет, поэтому ничего нам не напечатает.

(не обязательно, что бы ваш редактор назывался так же, как и в статье, вы вполне можете назвать свой редактор "uber_mega_super_redaktor1337" другим эстетичным названием)

Упрощение компилирования с make

Каждый раз печатать что то вроде cc kilo.c -o kilo надоедает, поэтому мы и напишем make скрипт.

Создайте новый Makefile с подобным содержимым:

Шаг 2

Первая линия Makefile-а говорит нам о том, что мы хотим скомпилировать и то, что нам для этого потребуется. Вторая линия определяет команду, которую будет выполнять make скрипт. $(CC) обычно ссылается на команду cc.

Что это за магические слова появились?
Это флаги, а именно:

  1. -Wall — от английского "all Warnings", что говорит компилятору выводить почти все предупреждения, если ему что то не очень нравится.
  2. -Wextra и -pedantic просит компилятор выводить еще больше предупреждений, если такие имеются.
  3. -std=c99 показывает компилятору, какую версию стандарта языка C ему использовать при компилировании. Стандарт C99 немного упростит нам процесс написания кода.

Теперь, когда Makefile настроен, попробуйте написать команду make в ваш терминал для компиляции программы. Запустить её можно так же, как и всегда, ./kilo.

Многие говорят, что программировать сложно. На самом деле программировать не сложнее, чем нарезать колбасу или написать письмо. Не сложнее, чем водить машину или пилотировать самолет. Главное — научиться. Мы постоянно получаем письма от вас с просьбами научить программированию. Почти полгода мы думали, как сделать это наиболее просто. Как научить создавать свои игры и программы, но так, чтобы не пришлось писать огромных руководств по языкам программирования и постоянно ссылаться на специализированную литературу. Результатом раздумий стал уникальный цикл статей — " Кладовая программиста ".
Любому делу можно учиться двумя способами. Либо сначала долго штудировать теорию, а потом плавно переходить к практике — это эффективно, но очень долго. Второй способ — учиться сразу на практике. В этом случае не все получается сразу, но вы приобретаете бесценный опыт.
Мы научим вас программировать на Delphi (статью " Игровая нирвана: Delphi и программирование компьютерных игр " с обзором Delphi читайте в седьмом номере "Мании" за 2002 год или на нашем компакте ) за несколько уроков. Каждый урок будет представлять собой независимую статью, руководство по созданию программы или игры. То есть можно будет взять, скажем, третью статью из серии и понять все, что в ней написано. Но! Чем более "поздний" урок вы возьмете, тем сложнее будет разобраться. Последовательность уроков мы подобрали так, чтобы в каждом следующем создаваемая утилита или игра была бы чуть сложнее, чем в предыдущем. Тем самым вы на наглядных примерах и в кратчайший срок выучите основные функции Delphi и сможете пользоваться ими уже для воплощения своих собственных идей.
Итак, через тридцать минут вы сами создадите полноценный текстовый редактор, безглючный, красивый и удобный, который сможет по функциональности поспорить с творениями Microsoft (например, с "Блокнотом"). Вы поймете, что программирование — крайне увлекательный процесс.

И снова в бой
Запустите "Дельфи". Мы не будем создавать редактор с нуля. Зачем, если кто-то уже сделал часть работы за нас? В любой приличной IDE (Интегрированная Среда Разработки) есть мастер приложений . С его помощью мы быстро создадим каркас будущей программы. После запуска "Дельфи" откроет новый проект. Нам он ни к чему, поэтому выполните File/Close All . После этого кликайте File/New . Откроется громадное окно с кучей пресетов. На вкладке Projects дважды кликните на иконке Application Wizard . Откроется мастер приложений.
Первое его окно предложит указать, какие меню нам нужны. Помечайте галочкой File и Edit и кликайте Next . Следующее окно предложит выбрать расширения файлов, с которыми будет работать наша программа. Мы будем делать простой текстовый редактор, значит нам понадобится расширение "txt". Кликайте на Add . В поле Description введите что-то вроде "Текстовый документ", а в поле Extension — "txt". Щелкайте Ok , а потом Next . В следующем окне у вас поинтересуются, какие стандартные кнопки вы хотите добавить на панель инструментов будущего приложения. Думаю, в интерфейсе этого окна вы разберетесь сами, ничего сложного там нет. Добавьте на панель инструментов все доступные кнопки из меню File и Edit . Перед тем как добавлять кнопки из меню Edit, один раз нажмите кнопку Space . Так вы поставите между группами кнопок File и Edit узкую вертикальную полоску, чтобы логически отделить их друг от друга.
В следующем окне введите название программы. Я назвал ее Super . Данное окно — единственное, где нельзя использовать русский язык. Не беспокойтесь — позже вы сможете сменить заголовок программы и имя ее исполняемого файла на русские. Но сейчас — нельзя. С помощью кнопки Browse определите для своего проекта место на жестком диске и пометьте галочками пункты Create a status line и Enable hints . Нажмите на Finish , и "Дельфи" создаст новый проект.
Перед вами четыре окна. Вверху — меню и палитра компонентов самого "Дельфи", слева — инспектор объектов , он же объектный инспектор (чрезвычайно важная и полезная в работе штука), а прямо перед вами окажется заготовка программы. Выглядит она не совсем так, как будет выглядеть конечное приложение. Под заготовкой — окно редактора кода, где вы будете программировать. Там уже есть добрых пять-шесть страниц. Это вспомогательный код, который создал мастер приложений. На его основе мы и будем разрабатывать текстовый редактор. Каркас готов, пора обшивать его подробностями. Интереса ради можете запустить заготовку. Для этого нажмите кнопку Run на главной панели Delphi. Вы увидите, что программа уже сейчас работоспособна, но ничего полезного не делает. Разве что в меню File можно выбрать Exit, и тогда программа закроется. Ну ничего — сейчас мы добавим ей функциональности.

Стандартные диалоги – это диалоговые окна, общие для большинства приложений Windows. Например, когда пользователь сохраняет файл в редакторе Word, он использует диалоговое окно Save As … (Сохранить как …). Когда он сохраняет рабочую книгу в Microsoft Excel, он также использует диалоговое окно Save As …

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

Вместо этого программист попросту устанавливает стандартный компонент на форму и задает ему необходимые свойства.

В составе Lazarus поставляется 14 диалоговых компонентов. Все они находятся на вкладке Dialogs. Как и MainMenu, в среде Lazarus диалоговые компоненты являются невизуальными, они присутствуют на форме в виде значков, однако во время выполнения они невидимы.

В этом уроке мы рассмотрим диалоговые компоненты: TOpenDialog, TSaveDialog, TFontDialog.

Lazarus. Диалоговые компоненты

Для активизации диалогового окна используется метод Execute(). Он выполняет открытие соответствующего окна и возвращает значение True, если пользователь щелкнул по кнопке ОК.

Компоненты TOpenDialog и TSaveDialog

свойства приведены в таблице.

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

Рассмотрим использование диалоговых окон на примере создания простейшего Текстового редактора.

При работе с текстовыми файлами следует иметь в виду, что при выводе в TMemo файла с русским текстом, в Windows буквы могут отображаться некорректно. Это вызвано тем, что текстовые файлы в ОС Windows имеют кодировку CP-1251. Перед выводом текст необходимо преобразовать в кодировку UTF8.

Ход выполнения проекта

1. Создайте форму и разместите на ней компоненты MainMenu, Memo1. Компонент MainMenu – невизуальный компонент, его значок можно поместить в произвольном месте.

Memo-поле и простейший текстовый редактор

2. Чтобы начать формирование пунктов меню, дважды щелкните по компоненту TMainMenu1. Откроется специальное окно Редактор меню.

Определите пункты меню.

Меню первого уровне содержит два пункта: New Item1 и New Item2 . Первый пункт создается автоматически. Чтобы на этом уровне добавить второй пункт, откройте контекстное меню существующего пункта и выполните команду Вставить новый пункт (после). Появиться новый пункт New Item2.

Меню New Item1 содержит пункты : New Item3 и New Item4. Откройте контекстное меню пункта New Item1 и выполните команду Создать подменю. В подменю появиться пункт New Item3. Для него откройте контекстном меню и выполните команду Создать новый пункт (после). Появиться пункт New Item4.

Определяем пункты меню

3. Значения свойств установите в соответствии с таблицей.

Компонент Свойство Значение
MenuItem1 Caption Файл
MenuItem2 Caption Шрифт
MenuItem3 Caption Открыть
MenuItem4 Caption Сохранить
Form1 Caption Текстовый редактор
Memo1 ScrollBars ssVertical

4. Удалите текст «Memo1» из окна Memo1.

  • выберите в окне Инспектор объектов объект Memo1;
  • на странице Свойства в строке Lines дважды щелкните на значении String или на кнопке с многоточием для формирования и редактирования текста;
  • в окне Диалог ввода строк удалите текст «Memo1» и щелкните мышью на кнопке ОК.

Memo-поле и простейший текстовый редактор

5. Выберите в палитре компонентов вкладку Dialogs и поместите на форму компоненты OpenDialog, SaveDialog, FontDialog.

Эти компоненты невизуальные, разместить их в нижней части формы рядом со значком TMainMenu.

Lazarus. Стандартные диалоги

6. Настройте свойства компонентов OpenDialog, SaveDialog

Компонент Свойство Значение
OpenDialog1 Title Открыть
SaveDialog1 Title Сохранить

7. Чтобы реализовать выбор типа файла при открытии файла в окне диалога:

  • выберите в окне Инспектор объектов объект OpenDialog1;
  • на странице свойства дважды щелкните мышью по списку значений свойства Filter.
  • в окне Редактор фильтра (Filter Edit) задайте фильтры для выбора типа и расширения файла.

Выбор типа файла при открытии файла в окне диалога

8. Чтобы установить в качестве расширения файла первый вариант (.txt), задайте для свойства OpenDialog1.FilterIndex значение 1.

9. Для диалога SaveDialog задайте свойство DefaultExt = txt (чтобы расширение txt автоматически добавлялось к создаваемому файлу).

10. В разделе implementation после директивы < TForm1 >запишите программный код процедуры Ansi_Memo, реализующей загрузку текста из файла с системной кодировкой (кодировка Ansi) в memo-поле (кодировка UTF8), а также процедуры Memo_Ansi, сохраняющей текст из memo-поля в файле на диске.

11. Напишите программный код для процедуры обработчика щелчка на пункте меню Файл – Открыть. Для этого дважды щелкните на данном пункте меню.

После выбора пользователем файла в свойстве OpenDialog1.FileName будет находиться имя файла вместе с путем к нему.

Обратите внимание на оператор:

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

12. Напишите программный код процедуры обработчика щелчка на пункте меню Файл-Сохранить:

Приложение открывает диалоговое окно «Сохранить», в котором задается имя файла. Имя файла из свойства SaveDialog1.FileName запоминается в переменной FName. В заключительной части процедуры оператор Memo1.Lines.SaveToFile(FName); используется для записи в файл содержимого свойства Lines объекта Memo1

13. Напишите программный код процедуры обработчика щелчка на пункте меню Шрифт:

14. Сохраните, откомпилируйте и запустите на выполнение созданное приложение.

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

16. Отредактируйте текст в окне приложения и нажмите кнопку Сохранить.

После этого в диалоговом окне сохранить текстовый файл выберите в поле тип файла расширение для сохраняемого файла, задайте его имя и щелкните мышью по кнопке Сохранить.

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

Читайте также: