表单设计器—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";

}

 

主要知识点：

1. axDHTMLEdit.DocumentHTML：将一段Html文档赋值给该属性，DHTMLEdit控件可以显示控件布局，即设计模式视图；同时也可以从该属性获取设计模式视图的HTML代码。
2. IHTMLSelectionObject对象获取当前控件选中区域的类型，该对象可以通过axDHTMLEdit的DOM属性的selection属性获取。IHTMLSelectionObject包含一个type属性，type的属性值有Control、Text、None三种分别代表选中控件，文本，未选中任何对象。
3. IHTMLTxtRange对象，该对象表示与当前选中区域（selection）相关的文本域对象，可以通过、 range.createRange()来获取该对象。可以通过text、htmlText属性获取该区域中的文本字符串；或者通过pasteHTML(string)方法将一段HTML文本字符串添加到当前选中的文本区域中，再设计模式下向编辑区增加控件即是通过该方法完成的。
4. IHTMLElement类型是HTML控件的基类型，通过属性outerHTML可以获取对象的HTML内容

 

原创文章，转载请注明出处！
All CopyRight Reserved ！

主页：http://jingtao.cnblogs.com

QQ:307073463
Email:jingtaodeemail@qq.com
MSN:sunjingtao@live.com