网页编辑器 DIY

原创 2003年09月23日 01:29:00

                                                网页编辑器 DIY 

    DreamWeaver、FrontPage 等网页编辑制作工具我们早已耳熟能详。但是你有没有想过亲自动手制作一个我们自己的“网页编辑器”呢?

    Delphi 中自带的 WebBrowser 控件可以使我们梦想成真,而且实现起来一点也不困难。

    首先建立一个新工程,在 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.OleObject.Document.body.innerHTML :=sHTML;
这一句,如果再仔细发掘,肯定还能找出更有用的功能来。附图是本程序运行的示例截图。

    本程序在 Win98、Delphi5.0、IE5.0 环境下实现。程序的完整代码如下:
  unit Unit1;
  interface
  uses
  Windows, 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 :='<Html>'+lf
  +'<Headl><Title></Title><Headl>'+lf
  +'<Body>'+lf+lf
  +'</Body>'+lf
  +'</Html>';
  end;

  procedure TForm1.TabSheet2Show(Sender: TObject);
  var sHTML: string;
  begin
  sHTML :=RichEdit1.Text;
  WebBrowser1.OleObject.Document.body.innerHTML :=sHTML;
  end;
  end.
  ------------------------------------------------
    张庆 Email: zhangking@263.net
    http://soft.why100000.com

DIY分享:国外DIY网站大集合

多个国外DIY网站收集  http://www.powerlabs.org 高能diy,电磁枪,微波武器.  http://www.altair.org/tesla.html 高电压diy爱好者 ...
  • u010794281
  • u010794281
  • 2015年05月04日 11:46
  • 1925

HTML编辑器-HTML网页表单可视化在线编辑器插件大全

HTML编辑器-HTML网页表单可视化在线编辑器插件大全 DIVCSS5为大家整理常用的网页中嵌入的编辑器插件。html编辑器-HTML网页表单编辑器插件集合整理列表。 网页中...
  • superit401
  • superit401
  • 2016年09月07日 20:33
  • 4741

DIY 一个在线编辑器

DIY一个在线编辑器 Step1 复制以下代码: 适用于Chrome 25 dev 或 360安全浏览器6.0: data:text/html, #e { position:absolute;...
  • SeanXu2012
  • SeanXu2012
  • 2013年02月02日 22:26
  • 723

强势Mac机网站设计软件:10大最佳HTML编辑器

Mac机是Macintosh的俗称,中文名称麦金塔电脑,亦有人称作苹果机或麦金托什机,是苹果电脑其中一系列的个人电脑。今天,IDC评述网与大家分享10个Mac机最佳的HTML文本编辑器。1. Adob...
  • WhatRU
  • WhatRU
  • 2015年11月26日 10:38
  • 4280

网页富文本编辑器推荐

如题。         进行网页开发的时候,textarra并不能够满足我们的所有需要。如果你正在寻找合适的富文本编辑插件,我这里可以给大家推荐几款:         百度Ueditor:      ...
  • killzero
  • killzero
  • 2013年11月27日 14:23
  • 2548

网页文本编辑器插入网页中无法正常显示运行

问题现象:网页编辑器插入后不能够正常运行 解决办法:浏览器换成兼容模式+选择浏览器版本,或者使用搜狗浏览器+兼容模式 可能程度:基本IE6以上都会会出现此问题 最近在做一个网页,...
  • cheyanxin2009
  • cheyanxin2009
  • 2015年05月29日 07:55
  • 1584

没错,你可以移动式编码了:4款最好的Android设备HTML编辑器

作为出色的应用平台,Android系统不仅可以用于登录Facebook或是玩“愤怒的小鸟”,它还可以为web开发人员提供可行的移动式解决方案。然而,web开发者是不可能对那些陈旧的文本编辑器表示满意的...
  • moon_prince2013
  • moon_prince2013
  • 2015年11月15日 02:45
  • 903

DIY一个具有远程控制功能的智能家居原型系统

smarthome 0.1是一个智能家居系统的雏形。主要实现局域网、因特网远程控制家里的电器;下一步要实现根据传感器数据控制家电功能;远景要实现根据人工智能自己控制电器功能;现在初步实现第一个功能。长...
  • gongqingkui
  • gongqingkui
  • 2016年09月16日 11:00
  • 1338

wpf页面编辑器原理

wpf实现页面编辑器,运行时拖拽控件大小,与修改控件位置,原理是使用装饰器来做,并且禁用掉控件的IsHittestVisiable属性就可以实现编辑控件位置与大小了,装饰器adornor如下:clas...
  • new_smile
  • new_smile
  • 2016年06月02日 10:36
  • 435

自己制作页面编辑器(js+css)

编辑器都有什么功能。文字加粗,上传图片,改变大小等等。此例仅包含文字加粗和图片上传。 首页你要知道html标签中的contenteditable="true"属性,不知道的自行去百度。(可让div可...
  • u010674395
  • u010674395
  • 2017年03月03日 20:22
  • 1092
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页编辑器 DIY
举报原因:
原因补充:

(最多只允许输入30个字)