表单设计器—HTML元素操作

　　查看原图（大图）

　　主编辑区域的TabControl分为设计模式和编码模式两个页，设计模式页包含dhtml edit control，实例名称为：axDHTMLEdit；编码模式页包含多行文本框，实例名称为：txtCode。可以在设计模式和编码模式之间进行切换，来展示不同内容，类似于Dreamweaver的功能。

　　为了标识着两种模式，定义枚举类型EditorMode：

///　<summary>　
///　编辑器的模式　
///　</summary>　
public　enum　EditorMode　{　Design,　Code}　

　　模式之间切换代码为：

if　(tabControl.SelectedIndex　==(int)EditorMode.Code)　
{　
GlobalStatus.CurrentMode　=　EditorMode.Code;　
txtCode.Text　=　axDHTMLEdit.DocumentHTML;　
}　
else　if　(tabControl.SelectedIndex　==(int)EditorMode.Design)　
{　
GlobalStatus.CurrentMode　=　EditorMode.Design;　
axDHTMLEdit.DocumentHTML　=　txtCode.Text;　
}　

　　可以在空白面板区点击鼠标，然后点击工具中的按钮，即可在空白面板上增加相应的HTML控件。相应的代码为：

///　<summary>　
///　插入控件的处理函数　
///　1.如果是设计模式　
///　1.1如果当前焦点在控件上，那么不允许插入　
///　1.2如果当前焦点不在控件上　
///　1.2.1如果插入之前需要预设信息，那么弹出属性窗口进行设置，然后插入控件信息　
///　1.2.2如果插入之前不需要预设信息，直接插入控件信息　
///　2.如果是编辑模式，直接插入控件信息　
///　</summary>　
///　<param　name="type"></param>　
private　void　insertControl(string　type)　
{　
//设计模式　
if　(GlobalStatus.CurrentMode　==　EditorMode.Design)　
{　
IHTMLSelectionObject　range　=　axDHTMLEdit.DOM.selection;　
if　(range.type　==　RangeType.CONTROL)　
{　
MessageBox.Show(ErrorMessage.E_FOCUS_ON_CONTROL_CANNOT_ADD_CONTROL);　
}　
else　
{　
IHTMLTxtRange　obj　=　(IHTMLTxtRange)range.createRange();　
//判断是否需要预设信息　
if(NeedShowPropertyForm(type))　
{　
//根据元素类型获取html对象，类型为：button,text,password,table,checkbox,radio等　
IHTMLElement　element　=　HtmlControlFactory.getHtmlElement(type,axDHTMLEdit);　
//获取元素的属性窗口并显示，待用户设置属性信息后生成html增加到设计视图中　
Form　propForm　=　getPropertyForm(element);　
DialogResult　result=　propForm.ShowDialog();　
if　(result　==　DialogResult.OK)　
{　
obj.pasteHTML(HtmlControlFactory.getHtmlElementString(element));　
}　
}　
else　
{　
obj.pasteHTML(HtmlControlFactory.getHtmlElementString(type,axDHTMLEdit));　
}　
}　
}　
else　
{　
txtCode.Paste(HtmlControlFactory.getHtmlElementString(type,axDHTMLEdit));　
}　
}　
　
///　<summary>　
///　点击增加控件按钮后，是否需要弹出属性窗口进行初始化设置　
///　</summary>　
///　<param　name="type">控件类型</param>　
///　<returns>是：需要进行初始化设置；否：不需要进行初始化设置</returns>　
private　bool　NeedShowPropertyForm(string　type)　
{　
if　(HtmlControlType.TABLE　==　type)　return　true;　
return　false;　
}　
///　<summary>　
///　HTML控件类型　
///　</summary>　
public　class　HtmlControlType　
{　
public　const　string　BUTTON　=　"button";　
public　const　string　CHECK_BOX_LIST　=　"checkboxlist";　
public　const　string　SELECT　=　"select";　
public　const　string　DATE_TIME　=　"datetime";　
public　const　string　PICTURE　=　"picture";　
public　const　string　TABLE　=　"table";　
public　const　string　CHECK_BOX　=　"checkbox";　
public　const　string　RADIO_BOX　=　"radio";　
public　const　string　PASSWORD　=　"password";　
public　const　string　HIDDEN　=　"hidden";　
public　const　string　TEXT　=　"text";　
public　const　string　INPUT　=　"input";　
}　
///　<summary>　
///　DHTML控件选中区域类型　
///　</summary>　
public　class　RangeType　
{　
///　<summary>　
///　选中控件　
///　</summary>　
public　const　string　CONTROL　=　"Control";　
///　<summary>　
///　未选中　
///　</summary>　
public　const　string　NONE　=　"None";　
}　

主要知识点：

　　axDHTMLEdit.DocumentHTML：将一段Html文档赋值给该属性，DHTMLEdit控件可以显示控件布局，即设计模式视图；同时也可以从该属性获取设计模式视图的HTML代码。

　　IHTMLSelectionObject 对象获取当前控件选中区域的类型，该对象可以通过axDHTMLEdit的DOM属性的selection属性获取。 IHTMLSelectionObject包含一个type属性，type的属性值有Control、Text、None三种分别代表选中控件，文本，未选中任何对象。

　　IHTMLTxtRange 对象，该对象表示与当前选中区域（selection）相关的文本域对象，可以通过、 range.createRange()来获取该对象。可以通过text、htmlText属性获取该区域中的文本字符串；或者通过 pasteHTML(string)方法将一段HTML文本字符串添加到当前选中的文本区域中，再设计模式下向编辑区增加控件即是通过该方法完成的。

　　IHTMLElement类型是HTML控件的基类型，通过属性outerHTML可以获取对象的HTML内容