基于ckeditor实现自定义表单

最近公司的一个系统需要自定义表单，根据以往使用ckeditor的经验突发奇想，用ckeditor编写插件的方式实现了一个自定义表单系统。下面简单介绍一下表单设计器的设计思路。

表单设计器原理
表单智能设计器的设计思想是基于ckeditor富文本编辑器，开发HTML表单中需要使用的一些常用控件，然后借助于HTML解析器将表单中的控件代码解析成对应的HTML代码。之所以选择ckeditor作为底层，是因为它有很好的扩展性及比较稳定的性能、全面的API文档，并且可以方便的进行插件的开发。
功能简介
表单智能设计器主要是用来完成工作流表单自定义的设计的，用户可以在word文件中制作表单的布局，然后将制作好的布局拷贝到表单设计器中，再用表单设计器添加表单的控件。通过表单设计器用户可以根据需求自定义表单的内容和表单的布局，进而达到满足用户需求的经常性变动。

主界面截图：

表单的主要控件及功能如下：

单行输入框 实现html中的text

多行输入框 实现html中的textarea


下拉菜单 实现html中的select


单选按钮 实现html中的radio


复选框 实现html中的checkbox


列表控件 实现html中的table，并且表格的行可以自由的添加和删除，同时还提供表格中的列与数据库数据绑定的功能。

图太多了就补贴了，

宏控件 实现html中的text或者select，但是值可以和后台程序关联达到数据的动态获取。宏控件的值的类型为：

日历控件 实现表单中日历的选取，可以定义选取日期的格式。


计算控件 在表单中实现对多个控件值的计算。可以支持的计算公式为：
计算公式支持+ - * / ^和英文括号以及特定计算函数，例如:(数值1+数值2)*数值3-ABS(数值4)其中数值1、数值2等为表单控件名称。
当前版本所支持的计算函数：
1、MAX(数值1,数值2,数值3...) 输出最大值,英文逗号分割;
2、MIN(数值1,数值2,数值3...) 输出最小值,英文逗号分割;
3、ABS(数值1) 输出绝对值;
4、MOD(数值1,数值2) 计算数值1和数值2的余数;
5、AVG(数值1,数值2,数值3) 输出平均值;
6、RMB(数值1) 输出人民币大写形式，数值范围0～9999999999.99;
7、DAY(日期1-日期2) 输出时间差的整数天数;
8、HOUR(日期1-日期2) 输出时间差的小时数;
9、DATE(日期1-日期2) 输出时间差，形如：xx天xx小时xx分xx秒;
10、LIST(列表控件名,第几列) 计算列表控件指定列的和;

数据选择控件 该控件一般与单行输入框控件结合使用，达到从数据库中选取数据并将数据回填到单行输入框的空间中。

表单解析

设计好的表单在保存时会将ckeditor的内容保存起来，在呈现给用户时将表单设计器特定的标签解析成对应的html表单元素，同时还要借助于js实现对应的功能