<< Introduo >>

Ol mestres ! Estou novamente aqui, s que agora iremos criar um Editor de pginas HTML em Delphi. Projetei um Artigo simples e prtico para todos entendam o artigo. Espero que este artigo possa suprir todas as dvidas, de como criar um Editor HTML.

Pr-requisitos
Destinado a todos nveis de conhecimento.Ter participado do Artigo "Criando um WebBrowser Avanado" para se ter algumas noes sobre o componente TWebBrowser.

Criando um Editor HTML

y 1 Passo

Criar uma Nova Aplicao:

Declarando as Units a serem usadas

Para construirmos nossa aplicao ser necessrio a declarao de duas Units, a

ActiveX e a MShtml, declare na seo: Uses Activex, MsHtml; ....... var Form1: TForm1; HTMLDocumento:IHTMLDocument2; Iremos usar esta varivel global HTMLDocumento para editarmos as pginas da WEB.

Inserindo os Componentes a serem Usados

Primeiramente vamos fazer o download das imagens que sero usadas na aplicao: Clique aqui para Baixar as Imagens

Componentes a serem inseridos:

Nossa aplicao ter um visual bem simples, ter simplesmente alguns PANEL's e Speedbuttons em cima dos mesmos. Abaixo vai uma imagem para exemplificar:

Inserindo um MainMenu
Vamos inserir um Menu em nossa aplicao, este que ter apenas 3 comandos o comando ABRIR e o comando SALVAR. E O comando NOVO responsvel por criar um novo documento para "Rabiscarmos" e inserirmos uma imagem, link ...Para isso v at a paleta Standard da paleta de componentes e insira o componente MainMenu. Coloque os seguintes comandos:

Agora vamos inserir o componente TOpenDialog, responsvel para abrirmos as pginas, mais pra frente implementaremos as funes de cada boto do MENU.

O Componente TOpenDialog se encontra na paleta Dialogs da paleta de componentes do delphi.

Nesta mesma Paleta, vamos inserir o componente TSaveDialog, para salvarmos tudo aquilo que criamos como uma pgina da WEB.

Inserindo os SpeedButtons
V at a paleta de componentes na guia Addtional e insira em seu Form o Speedbutton:

Como vocs podem observar, os SpeedButtons usam figuras, estas que voc baixou no inicio do Artigo. Os botes: B = O Primeiro Speedbutton I = O Segundo SpeedButton U = O Terceiro SppedButton No usaram imagem, foi simplesmente a propriedade Caption, foi trocada. Ex: SppedButton B = Caption = B

Inserindo Imagens nos SpeedButtons

1 - Seleciona o boto; 2 - V at o Object Inspector, na propriedade Glyph e clique para abrir a caixa de dilogo para a seleo da figura. 3- Quando abrir, clique em LOAD;

E v at o local onde se encontra a figura, selecione-a e clique em abrir, depois em OK. Pronto, se SpeedButton j est pronto.

Inserindo o Componente TColorDialog

Este componente ser responsvel para abrir a caixa de dilogo de seleo de cores, para aplicarmos uma cor ao texto selecionado.

Para isso v ate a Paleta de Componentes na guia Dialogs, e selecione o componente TColorDialog:

Inserindo o Principal Componente de Nossa Aplicao

Bom pessoal, no novidade eu vir aqui explicar sobre o componente TWebBrowser,o componente usado para navegar em pginas da Internet. Um componente interessante e robusto por suas funes e mesmas Caractersticas do IE. Esse gal ser usado para podermos criar pginas da WEB, um simples editor de HTML, onde poder, inserir links, imagens ... Etc... Esse gal quando entramos em uma pgina ele tem uma propriedade chamada DesignMode ou seja Modo de Design, modo de edio das pginas. Essa propriedade por padro vem OFF (Desligada). Mas isso iremos fazer agorinha, primeiramente vamos adicionar ele ao nosso Form. V at a paleta de componentes na Guia INTERNET e coloque em seu form o componente TWebBrowser.

Insira ele no form e v ate o Object Inspector e troque a seguinte propriedade: Align alClient

Para que ele ocupe uma posio absoluta no Form.

Declarando Eventos e Funes

Principais Funes {Funo responsvel para a execuo de comandos internos no webbrowser , esses que sero de grande importncia para o funcionamento de nosso Editor, ou seja: comando Negrito, Italico..... Inserir imagem....). function GetIEHandle(WebBrowser: TWebbrowser; ClassName: string): HWND; var hwndChild, hwndTmp: HWND; oleCtrl: TOleControl; szClass: array [ 0..255] of char; begin oleCtrl :=WebBrowser; hwndTmp := oleCtrl.Handle; while (true) do begin hwndChild := GetWindow(hwndTmp, GW_CHILD); GetClassName(hwndChild, szClass, SizeOf(szClass)); if (string(szClass)=ClassName) then begin Result :=hwndChild; Exit; end; hwndTmp := hwndChild; end; Result := 0; end; {Fiz este procedimentopara facilitar nossas vidas, ao invs de ficarmos a todo momento"webbrowser1.navigate('about:blank'); basta colocarmos DocumentoEmBranco(webbrowser1); ou seja ele vai navegar ate a pgina em branco. procedure DocumentoEmBranco(WebBrowser: TWebBrowser); begin WebBrowser.Navigate( 'about:blank' ); end; Evento ONCREATE do Form

procedure TForm1.FormCreate(Sender: TObject); begin //Navega em uma pgina em Branco (About:Blank) DocumentoEmBranco(webbrowser1); {altera o modo design do webbrowse para ON, ou seja, toda pgina que abrirmos poderemos alterar, selecionar, excluir .. inserir ...} (WebBrowser1.Document as IHTMLDocument2).designMode := 'On'; {Insere todas as fontes instalados no computador dentro do combobox} combofont.Items:=screen.Fonts; {verifique o nome correto do combobox que receber as fontes.}

end;

Inserindo as Constantes
Logo acima ns declaramos a funo GetIEHandle tal funo que responsvel pela execuo de alguns comandos que sero utilizados em nossa aplicao mais tarde. Esta funo executada da seguinte forma: Ex: SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server'), WM_COMMAND,IDM_MARCADOR, 0); Onde est de vermelho uma constante que ter que ser declarada em nossa aplicao. Ou seja: Const IDM_MARCADOR = 2184; Cada comando que formos executar no WebBrowser tem seu nmero, sua identificao, ou seja para colocarmos um marcador a identificao seria assim: "Execute pra mim fazendo favor o comando 2184 no meu webbrowser ! " Colocamos uma constante IDM_MARCADOR = 2184; recebendo essa identificao que coloca marcadores no webbrowser. Porqu usamos uma constante ??? Uma constante como voc j sabe seu valor no varia, no se altera, por isso ficar bem melhor para ns na aplicao, ou seja quando batermos o olho veremos IDM_MARCADOR j saberemos que esse a colocar marcadores na pgina. Ento vamos a declarao das Constantes que sero usadas no no sso Editor HTML: Vamos declarar elas "Globalmente" para que seja executada em qualquer procedimento de nossa aplicao.

unit Unit1;
interface uses .................. const IDM_MARCADOR = 2184; IDM_MARCADOR_LISTA = 2185; IDM_OUTDENT = 2187; IDM_INDENT = 2186; IDM_ALINHARESQ = 59;

IDM_CENTRALIZAR = 57; IDM_ALINHADIR = 60; IDM_IMAGEM = 2168; IDM_LINHAHORIZ = 2150; IDM_RECORTAR = 16; IDM_COPIAR = 15; IDM_COLAR = 26; IDM_HYPERLINK = 2124; IDM_DESFAZER = 43; Type .......................

Inserindo comandos ao Evento Onclick dos SpeedButtons

Bom pessoal, agora vamos comear a fazer o corpo de nossa aplicao, adicionando comandos ao Evento Onlick de cada boto. Ou seja, o nosso boto que algo ser esse ?? dever executar algo quando clicares sobre ele.

O Prprio nome do boto j diz tudo, NEGRITO, ou seja a funo dele ser colocar o texto selecionado em negrito.

= Negrito procedure TForm1.btnBoldClick(Sender: TObject); begin {Estamos usando nossa Varivel global declarada anteriormente.} {Aqui estamos dizendo que HTMLDocumento = A Interface que comanda o design do webbrowser, a interface que ir inserir em seu texto selecionado um negrito... italico..} HTMLDocumento := WebBrowser1.Document as IHTMLDocumen t2; {Estamos falando oq queremos aplicar no texto selecionado, ento dizemos Bold ou seja Negrito} HTMLDocumento.execCommand( 'Bold', False,0); end;

= coloca o efeito Itlico no Texto Selecionado procedure TForm1.btnItalicClick(Sender: TObject); begin HTMLDocumento := WebBrowser1.Document as IHTMLDocument2; HTMLDocumento.execCommand(' Italic', False,0); end;

= Coloca o efeito sublinhado ao testo Selecionado procedure TForm1.btnUnderlineClick(Sender: TObject); begin HTMLDocumento := WebBrowser1.Document as IHTMLDocument2; HTMLDocumento.execCommand( 'Underline' , False,0); end;

= Ser responsvel pela execuo da caixa de dilogo TColorDialog onde selecionar a cor do texto selecionado. procedure TForm1.btnColorClick(Sender: TObj ect); begin HTMLDocumento := WebBrowser1.Document as IHTMLDocument2; if Colordialog1.Execute then HTMLDocumento.execCommand( 'ForeColor' , False,ColorDialog1.Color) else abort; end;

= Responsvel por colocar Marcadores na pgina Ex: 12procedure TForm1.btnNumListClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND, IDM_MARCADOR , 0); end;

= Insere marcadores no pgina procedure TForm1.btnBulletClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND,IDM_MARCADOR_LISTA, 0); end;

= Recuo de texto, exerce a funo da tecla TAB, voltando < procedure TForm1.btnDecreaseIndentClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND,IDM_OUTDENT, 0); end;

= Exerce a mesma funo da Tecla Tab do teclado.

procedure TForm1.btnIncreaseIndentClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND,IDM_INDENT, 0); end;

= Alinha o texto selecionado a esquerda procedure TForm1.btnAlignLeftClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server'), WM_COMMAND,IDM_ALINHARESQ, 0); end;

= Centraliza o texto procedure TForm1.btnCenterClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND,IDM_CENTRALIZAR, 0); end;

= Alinha o texto a Direita procedure TForm1.btnAlignRightClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server '), WM_COMMAND,IDM_ALINHADIR, 0); end;

= Abre a caixa de dilogo para a insero de imagens do disco ou da web em sua pgina. procedure TForm1.BtnImageClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND,IDM_IMAGEM, 0); end;

= Insere a famosa Linha Horizontal na pgina. procedure TForm1.btnHRClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server '), WM_COMMAND,IDM_LINHAHORIZ, 0); end;

= Recorta um texto em sua pgina procedure TForm1.btnCutClick(Sender: TObject); begin

SendMessage(GetIEHandle(webbrowser1, Explorer_Server' ), WM_COMMAND,IDM_RECORTAR, 0); end;

'Internet

= copia um certo texto selecionado procedure TForm1.btnCopyClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND,IDM_COPIAR, 0); end;

= cola um certo texto da rea de transferncia e coloca em sua pgina. procedure TForm1.btnPasteClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server '), WM_COMMAND,IDM_COLAR, 0); end;

= Desfaz uma ao procedure TForm1.BtnDesfazerClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND,IDM_DESFAZER, 0); end;

= Abre a caixa de dilogo para insero de um hiperlink um link de um site, email ... Etc. procedure TForm1.BtnLinkClick(Sender: TObject); begin SendMessage(GetIEHandle(webbrowser1, 'Internet Explorer_Server' ), WM_COMMAND,IDM_HYPERLINK, 0); end;

Evento OnChange do Combobox das Fontes

= exibe todas as fontes selecionadas, com a funo que colocamos no evento Oncreate do form. No evento OnChange coloque o seguinte: procedure TForm1.ComboFontChange(Sender: TObject); begin

HTMLDocumento := WebBrowser1.Document as IHTMLDocument2; HTMLDocumento.execCommand( 'FontName' , False,ComboFont.Text); {no lugar de ComboFonte.text, coloque o nome de seu combobox das fontes} end;

Evento OnChange do combobox "Tamanho da fonte"

Antes de colocarmos alguma funo, vamos ate a propriedade ITEMS do combobox tamanho da fonte, e vamos colocar os seguintes items:

Troque a propriedade Style para csOwnerDrawFixed assim no poder ser inserido outros valores no combobox, os valores sero valores fixos. Estes que ns declaramos. Agora vamos ao evento Onchange: procedure TForm1.ComboSizeChange(Sender: TObject); begin //altera o tamanho da fonte HTMLDocumento := WebBrowser1.Document as IHTMLDocument2; case Combosize.ItemIndex of 0: HTMLDocumento.execCommand( 'FontSize', False, 1); 1: HTMLDocumento.execCommand( 'FontSize' , False,2); 2: HTMLDocumento.execCommand( 'FontSize' , False,3); 3: HTMLDocumento.execCommand( 'FontSize' , False,5); 4: HTMLDocumento.execCommand( 'FontSize' , False,6); 5: HTMLDocumento.execCommand( 'FontSize' , False,7); end; end; {O meu combobox do tamanho da fonte esta com o nome comboSize, troque pelo nome do seu combobox} Como voc pode observar os tamanhos da fonte no nosso editor so dados por nmeros ou seja: 1 = pequeno pra caramba. 2= menor 3=Mdio ...... Assim por diante, por isso inserimos aqueles valores no combobox agora usamos a Estrutura CASE para dar uma condio, Se o item do combobox selecionado for 0 Ento esse item ser o PEQUENO, ento o tamanho da fonte se dar pelo nmero 1

Inserindo comando ao Evento dos comandos dos Menus

O Primeiro menu a receber seu comando para executar algo ser clicado ser o menu NOVO.

ao evento OnClick do Menu Novo, insira o seguinte cdigo: procedure TForm1.Novo1Click(Sender: TObject); begin DocumentoEmBranco(webbrowser1); end; Ento pessoal, quando clicares em NOVO ele ir navegar em uma pgina em branco dessa forma, voc podero inserir muitas coisas... imagens .. links ... textos ... e se preciso salvar.

Menu Abrir:
O Menu Abrir neste caso abrir pginas da WEB salvas em seu computador para voc poder alterar e modificar o que desejar. No Evento Onclick do menu abrir digite o seguinte cdigo: procedure TForm1.Abrir1Click(Sender: TObject); begin {se o Opendialog for executado e o kara selecionar um arquivo ento navegaaaa webbrowser rsrsr.} if OpenDialog1.Execute=true then webbrowser1.Navigate(OpenDialog1.FileName) else abort; end;

Menu Salvar
O Menu salvar por sua vez abrir a caixa de dilogo para salvar aquilo que voc fez no editor em pginas HTML. Para isso selecione o componente TSaveDialog v ao objetc Inspector e clique na propriedade filter. para filtramos os arquivos que sero salvos, ou seja salvar os arquivos em .HTML Na janela de filtro aberta, faa o seguinte, digite os seguintes dados:

Filter Name Arquivos HTML Arquivos HTML Todos os arquivos

No evento Onclick do Boto Salvar

Filter *.html *.htm *.*

Agora quando fores salvar, ter as opes acima de salvamento.

procedure TForm1.Salvar1Click(Sender: TObject); var HTMLDocument: IHTMLDocument2; PersistFile: IPersistFile; begin HTMLDocument := WebBrowser1.Document as IHTMLDocument2; if SaveDialog1.Execute=true then begin PersistFile := HTMLDocument as IPersistFile; PersistFile.Save(StringToOleStr(savedialog1.FileName), System.True);

end else begin abort; end; end;

Print do programa e cdigo fonte

Download Cdigo fonte CONSIDERAES FINAIS

Bom pessoal espero que tenha ajudado, muitos a desenvolverem um Editor HTML em delphi, eu recebi muitos email's de pessoas querendo um Artigo de como criar um Editor, para vrias finalidades, uns queria para implementar em um Software para envio de Email, POP3, SMTP.