Buscar por:

Criando um editor de html

Kennedy Tedesco Parreira

Colunista ainda sem descrição. Caro colunista, por favor envie-nos sua descrição.

<< Introdução >>

Olá mestres ! Estou novamente aqui, só que agora iremos criar um Editor de páginas HTML em Delphi. Projetei um Artigo simples e prático para todos entendam o artigo.

Espero que este artigo possa suprir todas as dúvidas, de como criar um Editor HTML.

Críticas, sugestão, postem nos comentários.
Pré-requisitos
Destinado a todos níveis de conhecimento.
Ter participado do Artigo "Criando um WebBrowser Avançado" para se ter algumas noções sobre o componente TWebBrowser.

Criando um Editor HTML

1º Passo

Criar uma Nova Aplicação:

Declarando as Units a serem usadas

Para construirmos nossa aplicação será necessário a declaração de duas Units, a ActiveX e a MShtml, declare na seção:

Uses
Activex, MsHtml;

.......

var
Form1: TForm1;
HTMLDocumento:IHTMLDocument2;

Iremos usar esta variável global HTMLDocumento para editarmos as páginas da WEB.

Inserindo os Componentes a serem Usados

Primeiramente vamos fazer o download das imagens que serão usadas na aplicação:

Clique aqui para Baixar as Imagens

Componentes a serem inseridos:

Nossa aplicação 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 aplicação, este que terá apenas 3 comandos o comando ABRIR e o comando SALVAR. E O comando NOVO responsável 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, responsável para abrirmos as páginas, mais pra frente implementaremos as funções de cada botão 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 página da WEB.

Inserindo os SpeedButtons

Vá até a paleta de componentes na guia Addtional e insira em seu Form o Speedbutton:

Como vocês podem observar, os SpeedButtons usam figuras, estas que você baixou no inicio do Artigo.

Os botões:

B = O Primeiro Speedbutton

I = O Segundo SpeedButton

U = O Terceiro SppedButton

Não usaram imagem, foi simplesmente a propriedade Caption, foi trocada.

Ex: SppedButton B = Caption = B

Inserindo Imagens nos SpeedButtons

1 - Seleciona o botão;

2 - Vá até o Object Inspector, na propriedade Glyph e clique para abrir a caixa de diálogo para a seleção 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á responsável para abrir a caixa de diálogo de seleção 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 Aplicação

Bom pessoal, não é novidade eu vir aqui explicar sobre o componente TWebBrowser,o componente usado para navegar em páginas da Internet. Um componente interessante e robusto por suas funções e mesmas Características do IE.

Esse galã será usado para podermos criar páginas da WEB, um simples editor de HTML, onde poderá, inserir links, imagens ... Etc...

Esse galã quando entramos em uma página ele tem uma propriedade chamada DesignMode ou seja Modo de Design, modo de edição das páginas. Essa propriedade por padrão 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 posição absoluta no Form.

Declarando Eventos e Funções

Principais Funções

{Função responsável para a execução de comandos internos
no webbrowser, esses que serão de grande importância 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 invés de ficarmos a todo momento"webbrowser1.navigate('about:blank'); basta colocarmos DocumentoEmBranco(webbrowser1); ou seja ele vai navegar ate a página 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 página em Branco (About:Blank)
DocumentoEmBranco(webbrowser1);

{altera o modo design do webbrowse para ON, ou seja, toda página 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 nós declaramos a função GetIEHandle tal função que é responsável pela execução de alguns comandos que serão utilizados em nossa aplicação mais tarde.

Esta função é 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 aplicação.

Ou seja:

Const
IDM_MARCADOR = 2184;

Cada comando que formos executar no WebBrowser tem seu número, sua identificação, ou seja para colocarmos um marcador a identificação seria assim:

"Execute pra mim fazendo favor o comando 2184 no meu webbrowser ! "

Colocamos uma constante IDM_MARCADOR = 2184; recebendo essa identificação que coloca marcadores no webbrowser.

Porquê usamos uma constante ???

Uma constante como você já sabe seu valor não varia, não se altera, por isso ficar bem melhor para nós na aplicação, ou seja quando batermos o olho veremos IDM_MARCADOR já saberemos que esse aí colocará marcadores na página.

Então vamos a declaração das Constantes que serão usadas no nosso Editor HTML:

Vamos declarar elas "Globalmente" para que seja executada em qualquer procedimento de nossa aplicação.

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 começar a fazer o corpo de nossa aplicação, adicionando comandos ao Evento Onlick de cada botão.

Ou seja, o nosso botão

deverá executar algo quando clicares sobre ele.

que algo será esse ??

O Próprio nome do botão já diz tudo, NEGRITO, ou seja a função dele será colocar o texto selecionado em negrito.

= Negrito

procedure TForm1.btnBoldClick(Sender: TObject);
begin
{Estamos usando nossa Variàvel 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 IHTMLDocument2;

{Estamos falando oq queremos aplicar no texto selecionado, então dizemos Bold ou seja Negrito}
HTMLDocumento.execCommand('Bold', False,0);
end;

= coloca o efeito Itálico 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á responsável pela execução da caixa de diálogo TColorDialog onde selecionará a cor do texto selecionado.

procedure TForm1.btnColorClick(Sender: TObject);
begin
HTMLDocumento := WebBrowser1.Document as IHTMLDocument2;
if Colordialog1.Execute then
HTMLDocumento.execCommand('ForeColor', False,ColorDialog1.Color)
else
abort;
end;

= Responsável por colocar Marcadores na página Ex: 1-
2-

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

= Insere marcadores no página

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

= Recuo de texto, exerce a função 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 função 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 diálogo para a inserção de imagens do disco ou da web em sua página.

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

= Insere a famosa Linha Horizontal na página.

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

= Recorta um texto em sua página

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

= 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 transferência e coloca em sua página.

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

= Desfaz uma ação

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

= Abre a caixa de diálogo para inserção 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 função 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 função, vamos ate a propriedade ITEMS do combobox tamanho da fonte, e vamos colocar os seguintes items:

Troque a propriedade Style para csOwnerDrawFixed assim não poderá ser inserido outros valores no combobox, os valores serão valores fixos. Estes que nós 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 são dados por números ou seja:

1 = pequeno pra caramba.
2= menor
3=Médio ......

Assim por diante, por isso inserimos aqueles valores no combobox agora usamos a Estrutura CASE para dar uma condição, Se o item do combobox selecionado for 0 Então esse item será o PEQUENO, então o tamanho da fonte se dará pelo número 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 código:

procedure TForm1.Novo1Click(Sender: TObject);
begin
DocumentoEmBranco(webbrowser1);
end;

Então pessoal, quando clicares em NOVO ele irá navegar em uma página em branco dessa forma, você poderão inserir muitas coisas... imagens .. links ... textos ... e se preciso salvar.

Menu Abrir:

O Menu Abrir neste caso abrirá páginas da WEB salvas em seu computador para você poder alterar e modificar o que desejar.

No Evento Onclick do menu abrir digite o seguinte código:

procedure TForm1.Abrir1Click(Sender: TObject);
begin
{se o Opendialog for executado e o kara selecionar um arquivo então 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 diálogo para salvar aquilo que você fez no editor em páginas HTML.

Para isso selecione o componente TSaveDialog vá ao objetc Inspector e clique na propriedade filter. para filtramos os arquivos que serão salvos, ou seja salvar os arquivos em .HTML

Na janela de filtro aberta, faça o seguinte, digite os seguintes dados:

Filter Name	Filter
Arquivos HTML	*.html
Arquivos HTML	*.htm
Todos os arquivos	*.*

Agora quando fores salvar, terá as opções acima de salvamento.

No evento Onclick do Botão Salvar

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 código fonte

Download Código fonte

CONSIDERAÇÕES 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 várias finalidades, uns queria para implementar em um Software para envio de Email, POP3, SMTP.

Até a próxima, em breve estarei lançando "Criando um Navegador de Internet Avançado PARTE 2"

Qualquer dica ou crítica postem nos comentários.

Abração a Todos !!!!

Atenciosamente,
Kennedy Tedesco P.
Moderador de Conteúdo (www.planetaDelphi.com.br).

Email: Kennedy@delphi.eti.br
Msn: ktpigs@hotmail.com