Criando um Editor HTML simples MegaTutorial[ Mecere Fixo]

[~SkIP~ 0]

Criando um Editor HTML s

 

Criando 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;

 

 

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

• Entre
• ou
• Cadastre-se

 

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

• Entre
• ou
• Cadastre-se

['Leozin 34]

Conteúdo já existente aqui no fórum, e você esqueceu de colocar download das imagens.

http://www.webcheats.com.br/forum/delphi-vb/409136-criando-um-editor-html.html

 

Fechado.