查看原图（大图）
主编辑区域的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内容