表单设计器—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内容

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

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

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

表单设计器—HTML元素操作相关推荐

基于vue Ant-Design 的表单设计器，快速开发
基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介参考项目 ...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
Silverlight Forms Builder表单设计器FreeForm 简介
2019独角兽企业重金招聘Python工程师标准>>> FreeForm 简介 FreeForm 是昕友软件开发的免费表单设计器,是亿方智能平台的其中一个组件. 是一个基于 .N ...
使用开源的驰骋表单设计器设计表单案例演示
我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下: 工业设计和创意需求登记表原始表单图在ccform表单设计器中,设计如下: 驰骋表单设计器,设计表单所见既所得,操 ...
驰骋表单设计器设计表单案例演示
为什么80%的码农都做不了架构师?>>> 我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下:工业设计和创意需求登记表原始表单图在ccform ...
表单设计器 k-form-design
k-form-design支持自定义组件.表单联动等高级功能,使用 vue2 + CompositionAPI + ts 实现伪 vue3 应用. 设计器布局参考form-generator项目,基于 ...
Antd Vue 表单生成快速开发指南，内附强大的表单设计器
之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/.现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后 ...
java 表单设计器开源_6款在线表单设计器_Web表单设计器_AnyReport
AnyReport表单设计器作为报表的一个组件,可设计多样式表单,收集数据,可生成对应的物理表字段,支持在线设计表单.预览表单,并支持一对多关系的表单结构设计,生成的表单支持输出excel文件,使用 ...
不得不说，还是这款开源工作流表单设计器较合心意！
近几年,低代码的热潮持续不断.且不说之前的阿里钉钉跨平台写作方式.飞书上的审批流程,就说现在我们大部分人接触到的表单审批.投票的模板等,几乎都是以低代码的方式来呈现在大家面前的.在数字化转型的浪潮下, ...

表单设计器—HTML元素操作

表单设计器—HTML元素操作相关推荐

最新文章

热门文章