Делаем свой текстовый редактор с автосохранением
Сделать собственный текстовый редактор гораздо проще, чем кажется. Сейчас мы соорудим такой, и вы сами в этом убедитесь.
В этой статье мы соберем текстовый редактор, который будет работать в браузере. В помощь нам три технологии:
- JavaScript — язык, на котором всё будет работать. Это не лучший язык для полноценных приложений, но с ним вы сможете запрограммировать текстовый редактор прямо в браузере.
- Contenteditable — возможность языка HTML делать какие-то части страницы редактируемыми. Обычно со страницы можно только читать, но благодаря этому свойству можно еще и писать.
- Localstorage — особая область памяти, которая позволяет сохранить что-нибудь для конкретной страницы в браузере. Ваш браузер будет помнить, что вы ввели конкретно в этой странице. Это самая интересная часть.
Общая идея
У нас будет HTML-страница, на ней будет блок, похожий на лист бумаги. У него будет включен content editable, то есть внутри этого блока можно будет что-то писать. После каждого нажатия клавиши содержимое этого блока будет записываться во внутреннюю память браузера.
Вторая часть алгоритма — при загрузке страницы взять из памяти тот текст, что там был раньше, и показать его в нашей текстовой области. Страницу можно обновлять как угодно и даже выключать компьютер — текст всё равно останется в памяти.
Если записать алгоритм кратко, то он будет выглядеть так:
- Достаём из памяти тот текст, который там был
- Выводим его в нашу область для редактирования
- Постоянно смотрим, нажата ли какая-нибудь клавиша
- Если нажата — сразу записываем изменения в память.
Пункты 3 и 4 выполняются непрерывно до тех пор, пока вы не закроете страницу.
Готовим каркас
Пойдём уже привычным способом и создадим новый HTML-файл, в котором будут прописаны все нужные блоки. Мы так уже делали в статьях про генератор паролей и спортивный таймер.
Сохраняем как html-файл, открываем его в браузере и видим пустой экран. Это нормально, сейчас будем наполнять.
Расставляем содержимое
Нам нужен только заголовок, который объяснит нам, где мы находимся, и большое пространство для ввода текста. За текстовое поле будет отвечать блок
Настраиваем стили
Стили задают внешний вид страницы и любых элементов на ней. Сделаем наш заголовок опрятнее:
Сохраняем, обновляем и смотрим на результат:
Пишем скрипт
Теперь нужно научить редактор сначала извлекать из памяти прошлый текст, а потом снова запоминать каждое нажатие клавиши. Всё будем делать через localStorage, как с ним работать — рассказываем в статье про список задач.
Источник статьи: http://thecode.media/editor/
Урок 10. Стандартные диалоги. Создание текстового редактора
Урок из серии: «Программирование для школьников в среде Lazarus»
Стандартные диалоги – это диалоговые окна, общие для большинства приложений Windows. Например, когда пользователь сохраняет файл в редакторе Word, он использует диалоговое окно Save As … (Сохранить как …). Когда он сохраняет рабочую книгу в Microsoft Excel, он также использует диалоговое окно Save As …
Операционная система Windows стандартизирует и значительно облегчает создание таких диалоговых окон. Программисту нет необходимости «изобретать колесо» каждый раз, когда понадобится диалоговое окно, в котором пользователь будет сохранять или открывать файл.
Вместо этого программист попросту устанавливает стандартный компонент на форму и задает ему необходимые свойства.
В составе Lazarus поставляется 14 диалоговых компонентов. Все они находятся на вкладке Dialogs. Как и MainMenu, в среде Lazarus диалоговые компоненты являются невизуальными, они присутствуют на форме в виде значков, однако во время выполнения они невидимы.
В этом уроке мы рассмотрим диалоговые компоненты: TOpenDialog, TSaveDialog, TFontDialog.
Для активизации диалогового окна используется метод Execute(). Он выполняет открытие соответствующего окна и возвращает значение True, если пользователь щелкнул по кнопке ОК.
Компоненты TOpenDialog и TSaveDialog
Компонент TOpenDialog предназначен для выбора файла с целью последующего открытия, а компонент TSaveDialog — для последующего сохранения файла.
свойства приведены в таблице.
Эти компоненты не предназначены для выполнения конкретных действий: загрузки файла, записи в файл. Они применяются только для получения от пользователя желаемых настроек, например ввода полного имени файла вместе с путем поиска.
Рассмотрим использование диалоговых окон на примере создания простейшего Текстового редактора.
Задание. Создайте приложение Текстовый редактор. В приложении должно быть меню, содержащее пункты: Файл -Открыть, Файл-Сохранить, Шрифт. Приложение открывает текстовый файл на диске с использованием компонента TOpenDialog, записывает текст из файла в объект Memo на форме. После редактирования и форматирования текст необходимо сохранить. Для выбора файла для сохранения использовать компонент TSaveDialog, при форматировании шрифта — компонент TFontDialog.
При работе с текстовыми файлами следует иметь в виду, что при выводе в TMemo файла с русским текстом, в Windows буквы могут отображаться некорректно. Это вызвано тем, что текстовые файлы в ОС Windows имеют кодировку CP-1251. Перед выводом текст необходимо преобразовать в кодировку UTF8.
Для преобразования символов из одной кодировки в другую можно использовать функции: SysToUTF8() и UTFToSys().
Ход выполнения проекта
1. Создайте форму и разместите на ней компоненты MainMenu, Memo1. Компонент MainMenu – невизуальный компонент, его значок можно поместить в произвольном месте.
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» и щелкните мышью на кнопке ОК.
5. Выберите в палитре компонентов вкладку Dialogs и поместите на форму компоненты OpenDialog, SaveDialog, FontDialog.
Эти компоненты невизуальные, разместить их в нижней части формы рядом со значком TMainMenu.
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. Открыв в окне Проводника папку, в которой был сохранен файл, убедитесь, что файл с указанным вами именем в ней есть.
18. Измените размер шрифта и цвет в диалоговом окне Шрифт.
Источник статьи: http://gospodaretsva.com/urok-10-standartnye-dialogi.html
Пишем текстовый редактор
Курс начинающего программиста в Дельфи
В этой статье мы попробуем вместе написать текстовый редактор. Тут есть два варианта: создавать редактор наподобие Microsoft Word (имеется ввиду редактор для форматированного текста), или что-то вроде Блокнота. Предлагаю Вам пойти по первому пути, так как знаний вы получите больше и редактор выйдет красивее. А если вам будет сильно нужно, то Вы сами сможете создать Ваш Блокнот!
Теперь надо выбрать основной компонент для создания редактора. Выбор между компонентом Memo и RichEdit. Для нашего редактора мы выберем RichRdit (находится на вкладке Win32), потому что он поддерживает абзацы, нумерацию, цветовое выделение текста и т.д.
Поместив его на форму вы увидите примерно то, что изображено на рисунке. Пока это не очень похоже на текстовый редактор, но скоро он преобразится. Теперь нам необходимо растянуть компонент, чтобы он занимал всю рабочую площадь окна. Но при этом надо помнить, что при изменении размеров окна пользователем, компонент тоже должен изменять свои размеры!
Для этого мы воспользуемся свойством Align нашего компонента. Необходимо установить его в alClient. Это позволит нам добиться желаемого эффекта.
В компоненте RichEdit при установке уже содержится одна строка текста (по умолчанию это имя вновь созданного компонента), многим это не понравится. Поэтому мы сейчас ее оттуда удалим. За отображение текста в компоненте отвечает свойство Lines типа TStrings. Это что-то вроде массива строк, так как каждая строка имеет свой порядковый номер (отсчет начинается с нуля). Чтобы изменить, например, первую строку, Вы должны написать так:
Если эту строку поместить в событие формы OnCreate, а в кавычках вместо Новая строка ничего не ставить (то есть просто RichEdit1.Lines[0]:=»;), то при запуске программы первая строка будет пустой. Но можно все сделать намного проще! Нажмите на форме на Ваш компонент RichEdit, а теперь в Инспекторе Объектов найдите свойство Lines. Нажмите на него, а затем на кнопку с тремя точками. Перед Вами появится редактор текста. Просто сотрите все содержимое.
Надо придумать какое-нибудь название вашей новой программе и разместить его в заголовок формы. За отображение формы отвечает свойство Caption, поэтому прямо в Инспекторе Объектов измените это значение. (не забудьте перед этим выбрать форму).
Теперь нам надо создать панель инструментов (ToolBar), на которой будут располагаться кнопки быстрого вызова команд (например, Открыть, Сохранить и т.д.). Для этого расположите на форме компонент Panel (вкладка Standart палитры компонентов). Сотрите у нее свойство Caption. Теперь надо сделать, чтобы панель располагалась всегда в верхней части окна. Установите свойство панели — Align равным alTop.
Мы только что создали платформу, на которой будут находиться кнопки. Разместим и их на нашей панели. Пока обойдемся двумя кнопками (Button). Свойство Caption первой панели сделайте равным Открыть, второй — Сохранить.
Чтобы нам открывать и сохранять текстовые файлы нам понадобятся еще два компонента, это OpenDialog и SaveDialog. Оба находятся на вкладке Dialogs. Это невизуальные компоненты и их не будет видно во время работы приложения, поэтому располагайте их в любое удобное место вашей формы.
Ну вот подготовительные работы окончены и Вас должно получиться примерно это:
Я не стал помещать всю картинку целиком, так как это заняло бы много места, к тому же там нет ничего интересного!
Ну вот и настал самый интересный момент — сейчас мы начнем писать сам код! Для начала напишем процедуру открытия файла. Чтобы сделать это надо обработать нажатие на первую кнопку — то есть обработать событие OnClick. Щелкните два раза на кнопке и перед вами откроется редактор кода. Причем именно в том месте, где и надо помещать нужные команды. Текст будет таким:
procedure TForm1.Button1Click(Sender: TObject);
begin
Весь код нужно поместить между Begin и End. Этот код очень прост и выглядит примерно так:
if OpenDialog1.Execute then
RichEdit1.Lines.LoadFromFile(OpenDialog1.Filename);
Здесь ничего сложного нет. Но если вы запустите программу и при запуске диалога открытия файла выберите не текстовый файл, то произойдет ошибка. Чтобы ее избежать надо разрешить пользователю выбирать только текстовые файлы. Для это воспользуемся свойством Filter компонента OpenDialog.
Для этого выберите на форме компонент OpenDialog, и в Инспекторе Объектов найдите свойство Filter. Теперь нажмите на кнопку с тремя точками и перед вами откроется диалоговое окно «Filter Editor» (Редактор фильтра) (Рисунок 3). В поле Filter Name (имя фильтра) можно писать что вам вздумается, но характеризующее тип файлов, для которого создается фильтр. В нашем примере можно написать что-то наподобие Текстовые файлы или Только текст. А в поле Filter надо написать сам фильтр. Фильтр имеет формат:
Если допустимо любое имя, то ставится звездочка, тогда для нашего редактора можно написать:
Добавим еще фильтр для форматированных файлов (то есть Rich Text Format). Для этого во второй строчке в поле Filter Name напишите Форматированный текст, а в поле FIlter — *.rtf. Если вам захочется добавить в фильтр для любых типов файлов, то в поле фильтр надо написать *.*
Рисунок 3. Окно Filter Editor.
Теперь вам необходимо проделать такие же действия с компонентом SaveDialog, чтобы наш текстовый редактор сохранял файлы в текстовом формате.
Кстати у компонентов SaveDialog и OpenDialog есть одно полезное свойство DefaultExt. Это расширение по умолчанию. Желательно сделать его равным *.txt у обоих компонентов.
Теперь напишем процедуру сохранения файла (обработки нажатия на вторую кнопку). Щелкните два раза на второй кнопке чтобы получить доступ к процедуре обработки клика на эту кнопку. И впишите туда такой код:
if SaveDialog1.Execute then
RichEdit1.Lines.SaveToFile(SaveDialog1.Filename);
Таким образом код процедуры обработки щелчка на второй кнопке будет таким:
procedure TForm1.Button2Click(Sender: TObject);
begin
if SaveDialog1.Execute then
RichEdit1.Lines.SaveToFile(SaveDialog1.Filename);
end;
А код всей программы будет иметь примерно такой вид:
Листинг 1. Код наполовину готовой программы ТЕКСТОВЫЙ РЕДАКТОР uses type procedure TForm1.Button1Click(Sender: TObject); procedure TForm1.Button2Click(Sender: TObject); В принципе примитивный текстовый редактор готов, но нам нужно большего :)) к тому же нам надо учиться. Если вы заметили, что при открытии больших файлов не появляется полоса прокрутки. Конечно же это недостаток, поэтому мы сейчас его исправим. За отображение полос прокрутки компонента RichEdit отвечает свойство ScrollBars. Оно сложное и вы можете выбрать из: ssNone — полосы прокрутки не отображаются ssBoth — есть как горизонтальная, так и вертикальная полоса ssVertical — только вертикальная полоса ssHorizontal — только горизонтальная полоса Выберите ssVertical — это обеспечит нам появление вертикальной полосы прокрутки при редактировании больших текстов. Продолжим совершенствовать наш редактор и добавим возможность форматирования текста. То есть изменение его размера, стиля, цвета и т.д. Можно конечно все прописывать самостоятельно, но зачем тратить время и силы на это если есть компонент FontDialog (находится на вкладке Dialogs). Он реализует стандартный диалог Windows настройки шрифта. Нам нужно будет его только вызвать! Для этого установим его на форму. К тому же нам понадобится еще и кнопка, чтобы вызывать это диалоговое окно. Поставим на форму и ее. Задайте ее свойство Caption равным Шрифт. А в обработчике события OnCLick напишите: if FontDialog1.Execute then Этот код позволит с помощью диалогового окна настройки шрифта изменят шрифт для каждого отдельного абзаца, слова, символа или всего текста. На рисунке 4 приведен вид приложения после добавления третьей кнопки и компонента FontDialog. В наш проект нужно добавить еще очень много функций, а поэтому и кнопок, но место к сожалению, у нас ограничено. Но мы решим эту проблему с помощью использования в нашей программе системного и всплывающего меню. Дальше части займемся разработкой системного меню нашей программы. Как уже говорилось в конце прошлой главы сейчас займемся разработкой главного меню нашего приложения! Для этого мы воспользуемся компонентом MainMenu, который расположен на вкладке Standart палитры компонентов. Для того, чтобы можно было редактировать пункты меню следует воспользоваться встроенным редактором меню. Выделите компонент MainMenu, а затем в Инспекторе Объектов найдите свойство Items и нажмите на кнопку с тремя точками. Перед вами откроется диалоговое окно, вид которого изображен на рисунке 17 Соответственно поля Инспектора Объектов тоже изменятся. Написав в свойстве Caption выделенного элемента вы тем самым изменяете надпись на нем. Нам понадобится такая структура меню: Нажимая на элемент меню в редакторе меню, вы получаете доступ к его свойствам, а также доступ к следующему элементу, который создается автоматически. Впрочем если вы его не задействовали, то в меню он не будет виден! На рисунке 18 приведен вид нашего меню. Его совсем не сложно будет создать! Теперь надо создать обработчики событий для пунктов нашего меню. Перейдите на форму, нажмите на меню файл и в раскрывшемся меню выберите первый пункт — «Открыть». Перед вами откроется редактор кода с созданным шаблоном обработки события (как всегда Дельфи берет много работы на себя:). Будет это выглядеть примерно так: procedure TForm1.N2Click(Sender: TObject); Теперь между begin и end надо написать код. Но тут есть одна маленькая хитрость: конечно, можно было бы скопировать код из обработчика события OnClick для первой кнопки, но это не совсем удобно и не рационально. Представьте если у вас множество кнопок и столько же пунктов меню. Во-первых размер программы увеличивается вдвое, а во-вторых вдруг вам понадобиться что-нибудь изменить. Тогда придется все перебирать исправляя код. Поэтому мы сделаем всего лишь ссылку на обработку события для первой кнопки. Напишите button1 и поставьте точку, когда появиться список возможных процедур, функций и свойств начинайте набирать On. Теперь вы видите события первой кнопки на которые можно сослаться. Нам конечно же нужно OnClick. У этой функции есть один параметр: Source: TObject. То есть надо указать источник события. Мы напишем Self. Таким образом, ссылка на обработчик события нажатия на первую кнопку будет выглядеть так: Проделайте тоже со пунктами меню «Шрифт» и «Сохранить». Теперь напишем обработчик нажатия на пункт меню «Выход». Для завершения работы программы достаточно вызвать метод Close главной формы. Поскольку форма у нас одна, она и является главной. И еще, если свойство относится к форме, то в коде можно не писать имя формы. То есть закрыть нашу программу можно так: Если вы обратили внимание в меню правка находятся пункты Копировать, Вставить и Вырезать. Реализовать эти функции очень просто: Ну и на последок. В меню «?» есть пункт «О программе. «. Сделаем, чтобы при нажатии открывалась новая форма с информацией о программе и авторе. Для этого в меню File основного меню Дельфи выберите New, а в открывшемся диалоговом окне на закладке Forms выберите AboutBox и нажмите Ok. Перед вами появиться заготовка формы «О программе. «. Измените там информацию по своему вкусу. И в обработчик события кнопки с надписью Ok (OKButton) напишите только одно слово: Close; Теперь перейдите к нашей основной форме, создайте обработчик события OnClick для пункта меню О программе. Туда надо написать: Теперь запустите программу. Перед вами появится сообщение о том, что форма AboutBox не объявлена в секции uses. Ответьте на запрос положительно. Поздравляю! Работа над вашим первым текстовым редактором окончена. Скорее сохраняйте ваш проект, компилируйте и бегите хвастаться друзьям! Скачать готовые исходные коды этого текстового редактора можно здесь. uses type procedure TForm1.Button1Click(Sender: TObject); procedure TForm1.Button2Click(Sender: TObject); procedure TForm1.Button3Click(Sender: TObject); procedure TForm1.N2Click(Sender: TObject); procedure TForm1.N3Click(Sender: TObject); procedure TForm1.N9Click(Sender: TObject); procedure TForm1.N6Click(Sender: TObject); procedure TForm1.N7Click(Sender: TObject); procedure TForm1.N8Click(Sender: TObject); Источник статьи: http://www.realcoding.net/articles/pishem-tekstovyi-redaktor.html Подписаться авторизуйтесь 0 Комментарий Старые |