網頁編輯器 DIY (轉)

網頁編輯器 DIY (轉)[@more@]

  網頁編輯器 DIY 

  DreamWeaver、FrontPage 等網頁編輯製作工具我們早已耳熟能詳。但是你有沒有想過親自動手製作一個我們自己的“網頁編輯器”呢？

  中自帶的 Browser 可以使我們夢想成真，而且實現起來一點也不困難。

  首先建立一個新工程，在 Form1 上拖一個 PageControl 控制元件，建立 2 個 TabSheet 即 TabSheet1 和 TabSheet2。再在 TabSheet1 上拖放 RichEdit1 控制元件，在 TabSheet2 上拖放 WebBrowser1 控制元件。這幾個控制元件的基本屬性設定為：
  TabSheet1：Caption='HTML程式碼'
  TabSheet1：Caption='預覽'
  RichEdit1：Align=alClient
  WebBrowser1：Align=alClient

  RichEdit 用於編寫 HTML 程式碼，WebBrowser 對程式碼進行視覺化預覽。在初始化階段提供了一個基本的網頁模板，我們可以在此基礎上編寫的 HTML 程式碼。程式的核心程式碼就是
  WebBrowser1.Ole.Document.body.innerHTML :=sHTML;
這一句，如果再仔細發掘，肯定還能找出更有用的功能來。附圖是本程式執行的示例截圖。

  本程式在 、Delphi5.0、.0 環境下實現。程式的完整程式碼如下：
  unit Unit1;
  interface
  uses
  , Messages, SysUtils, Classes, Graphics, Controls,
  Forms, Dialogs, StdCtrls, OleCtrls, SHDocVw, ComCtrls;
  type
  TForm1 = class(TForm)
  PageControl1: TPageControl;
  TabSheet1: TTabSheet;
  TabSheet2: TTabSheet;
  WebBrowser1: TWebBrowser;
  RichEdit1: TRichEdit;
  procedure FormCreate(Sender: TObject);
  procedure TabSheet2Show(Sender: TObject);
  private { Private declarations }
  public { Public declarations }
  end;
  var
  Form1: TForm1;
  Const
  lf = #10; //換行符
  implementation
  {$R *.DFM}

  procedure TForm1.FormCreate(Sender: TObject);
  begin
  //設定視窗標題：
  Caption :='網頁編輯器DIY';
  //初始化WebBrowser
  WebBrowser1.Navigate('about:blank');
  //產生網頁程式碼模板：
  RichEdit1.Text :=''+lf
  +''+lf
  +''+lf+lf
  +''+lf
  +'';
  end;

  procedure TForm1.TabSheet2Show(Sender: TObject);
  var sHTML: string;
  begin
  sHTML :=RichEdit1.Text;
  WebBrowser1.OleObject.Document.body.innerHTML :=sHTML;
  end;
  end.
  ------------------------------------------------
  張慶 E: ">zhangking@263.net