Показаны сообщения с ярлыком Программа HTML редактор для создания web сайтов. Показать все сообщения
Показаны сообщения с ярлыком Программа HTML редактор для создания web сайтов. Показать все сообщения

вторник, 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 по просьбе добавлю новые возможности.