вторник, 26 апреля 2011 г.

Простой HTML редактор для создания веб сайтов

Решил написать HTML редактор для создания сайтов. Простенький чисто что бы писать в ручную как на блокноте, но просмотр в одной программе .
Редактор  будет иметь подсветку кода, просмотр страницы, сохранение и открытие документов,. И так приступим, первое это скачаем и установим компоненты SynEdit и Embedded Web Browser.
Скачав и установив компоненты приступим к  созданию приложения, первое что сделаем это разместим на форме компонент MainMenu, TabControl, на него разместим два компонент SynMemo и компоненты SynHtmlSyn и SynCssSyn, компонент Embedded Web Browser, компоненты OpenDialog и SaveDialog и полдучим примерно вот такой вид:
У компонента TabControl создадим вкладки “Редактор HTML”, “Редактор CSS”, “Просмотр EI”, у компонентов SynMemo и Embedded Web Browser свойство Align поставим значение Client. Форма будет выглядить так:


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

procedure TForm1.FormCreate(Sender: TObject);
begin
with tabcontrol1 do
begin
synmemo1.Visible:=tabindex=0;
synmemo2.Visible:=tabindex=1;
embeddedwb1.Visible:=tabindex=2;
end;
end;
procedure TForm1.TabControl1Change(Sender: TObject);
begin
with tabcontrol1 do
begin
synmemo1.Visible:=tabindex=0;
synmemo2.Visible:=tabindex=1;
embeddedwb1.Visible:=tabindex=2;
end;
synmemo1.Lines.SaveToFile(extractfilepath(application.ExeName)+'index.html');
synmemo2.Lines.SaveToFile(extractfilepath(application.ExeName)+'style.css');
embeddedwb1.Navigate(extractfilepath(application.ExeName)+'index.html');
end;

Теперь отредактируем компонент MainMenu, то есть создадим меню нашего редактора, добавим туда два пункта Это: Меню под меню Новый, Открыть, Сохранить, Выход, и второй пункт Правка , в которой разместим под меню Назад, Вырезать, Копировать, Вставить. И напишим код обработки каждого из пунктов:

Меню| Новый

procedure TForm1.N2Click(Sender: TObject);
begin
if tabcontrol1.TabIndex=0 then
begin
synmemo1.Text:='';
end;
if tabcontrol1.TabIndex=1 then
begin
synmemo2.Text:='';
end;
end;

Меню| Открыть

procedure TForm1.N3Click(Sender: TObject);
begin
if tabcontrol1.TabIndex=0 then
begin
with opendialog1 do
begin
if opendialog1.Execute then
begin
synmemo1.Lines.LoadFromFile(filename);
end;
end;
end;
if tabcontrol1.TabIndex=1 then
begin
with opendialog2 do
begin
if opendialog2.Execute then
begin
synmemo2.Lines.LoadFromFile(filename);
end;
end;
end;
end;

Меню|Сохранить

procedure TForm1.N4Click(Sender: TObject);
begin
if tabcontrol1.TabIndex=0 then
begin
with savedialog1 do
begin
if savedialog1.Execute then
begin
synmemo1.Lines.SaveToFile(savedialog1.FileName+filter);
end;
end;
end;
if tabcontrol1.TabIndex=1 then
begin
with savedialog2 do
begin
if savedialog2.Execute then
begin
synmemo2.Lines.SaveToFile(filename+filter);
end;
end;
end;
end;

Меню|Выход

procedure TForm1.N5Click(Sender: TObject);
begin
close;
end;

Правка|Назад

procedure TForm1.N10Click(Sender: TObject);
begin
if tabcontrol1.TabIndex=0 then
begin
synmemo1.Undo;
end;
if tabcontrol1.TabIndex=1 then
begin
synmemo2.Undo;
end;
end;

Правка|Вырезать

procedure TForm1.N7Click(Sender: TObject);
begin
if tabcontrol1.TabIndex=0 then
begin
synmemo1.SelText;
synmemo1.CutToClipboard;
end;
if tabcontrol1.TabIndex=1 then
begin
synmemo2.SelText;
synmemo2.CutToClipboard;
end;
end;


Меню|Копировать

procedure TForm1.N8Click(Sender: TObject);
begin
if tabcontrol1.TabIndex=0 then
begin
synmemo1.SelText;
synmemo1.CopyToClipboard;
end;
if tabcontrol1.TabIndex=1 then
begin
synmemo2.SelText;
synmemo2.CopyToClipboard;
end;
end;

Меню|Вставить

procedure TForm1.N9Click(Sender: TObject);
begin
if tabcontrol1.TabIndex=0 then
begin
synmemo1.PasteFromClipboard;
end;
if tabcontrol1.TabIndex=1 then
begin
synmemo2.PasteFromClipboard;
end;
end;

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

Р.S по просьбе добавлю новые возможности.

Комментариев нет:

Отправить комментарий