Criando Um Editor HTML

[lucas98 1]

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.

 

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:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

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

 

 

Bom galera esse ai é mais um tuto de eu entao divirta-se com o seu editor

Credito: Kennedy Tadesco P.

Credito2: Eu por arganizar e postar

Credito3:Google

[Boy Fenix 1]

Otiimo,

• Espero que vc compartilhe maiis '

So falo um negociio, tem ai " [ ... ] usam figuras, estas que você baixou no inicio do Artigo. " Mas num tem nenhum link para a gente baixar

 

• Um pedido melhore um poquiinho só o Tpico está meio desorganizado '

[lucas98 1]

claro agora voutei a WC vou estar sempre atualizando meus topicos e ajudando o pessoal vlw

 

vlw pelo aviso vou colocar o link é que tavo muito distraido foi malz

 

Otiimo,

• Espero que vc compartilhe maiis '

So falo um negociio, tem ai " [ ... ] usam figuras, estas que você baixou no inicio do Artigo. " Mas num tem nenhum link para a gente baixar

 

• Um pedido melhore um poquiinho só o Tpico está meio desorganizado '

 

Na minha opniao ele ta bem organizado é so voce ler com atençao e voce vai entender e tambem nao sou o todo poderoso

[Boy Fenix 1]

Não, Não eu seii

• Tipo num quis ofender, mas assim, pq na imagem tem uma coisa, e o tutorial ta falando outra so isso !!!

 

Vou ler novamente Ok ?

[matheusguerra 3]

how de mais, não era vc que estava com duvida sobre criar isto?

bom mas não importa o que importa é que vc fez, e muito bem por sinal ^^

[DragonBoss 8]

jah tinha lido esse tutorial na internet, eh bom, porem eu axo que falta uma incrementada, ele faz poucas coisas, mas gostei da forma que insere links nas imagens por exemplo.... usam codigos de uma certa forma "complexos" =P.... porem faz pouca coisa... acho que seria legal se houvesse opçoes de inserir botoes no site, ou uma maneira de editar tabelas de uma forma simples, do tipo "inserir e arrastar"... vou fazer um editor ake e por mais algumas funçoes nele... mas de qualker forma, tutorial bom... vlw por trazer ao wc

 

flw, abraços.

[viniciushacker 0]

vei q poha é essa sem zua mais quei issu isso edita site?

so mo leigo nisso doido podia esplica se eh pra edita informaçoes de sitesnun entendi q se falo :confused::confused::confused::confused::confused: pode esplica pra min por isso q axo o delphi complicado tem q copia esse monte de informaçao e tem q bota nos devidos lugares so sei mexer no vb msm assim tenhu o delphi nun sei pq axo q e pq queru aprender mais nesses tutos daki entendo quase nada:( responde ae vlw:D

[DragonBoss 8]

@viniciushacker

 

isso eh um editor html, ou seja, para editar seus sites... vc pode tbm com um pouco de programaçao, por pra ele pra abrir um site qualker da internet, e vc poder editar e salvar no teu pc ( as alteraçoes serao visiveis somente a vc, ou seja, vc nao vai pode editar um "servidor" ), mas o mais interessante eh tentar criar um site apenas com esses recursos, para mostrar que o programa eh realmente funcional xD

 

flw, abraços