注：环境配置：activiti自定义流程之自定义表单（一）：环境配置

在上一节自定义表单环境搭建好以后，我就正式开始尝试自己创建表单，在后台的处理就比较常规，主要是针对ueditor插件的功能在前端进行修改。

由于自己的前端相关技术太渣，因此好多东西都不会用，导致修改实现的过程也是破费了一番功夫，头皮发麻了好几天。

既然是用别人的插件进行修改，那么我想如果只是单独的贴出我修改后的代码，可能没有前后进行对比好理解，因此这里就把原代码和修改后的同时对比着贴出，以便于朋友们能从对比中更快的得到启发。

一、首先是前台创建表单，原文件示例是所有代码直接都写在了index.html文件中，文件在文章最后：

我在修改的过程中感觉这个代码太长，貌似有点杂乱，因此就自作主张的把部分内容提取到了新建的js文件中，还有部分我觉得无关紧要的东西也进行了删除，然后我的index.html代码如下：

相关的js文件命名为addForm.js如下：

那么这里需要着重说明的就是js文件，在原文件中大家可以看到js也是写在html中的，最重要的是到了保存和预览的时候，都变了请用户自已处理：
alert("你点击了保存,这里可以异步提交，请自行处理....");
alert("你点击了预览,请自行处理....");

于是我在对插件封装的数据进行了一定分析后就自行解决了这两个问题，也就是主要修改的地方。

二、前台表单创建、预览完毕，要能实现以后都随时调用的功能，自然就需要存储到数据库中，前台似乎也能直接操作数据库，但是我本身是做后台的，因此就直接用了后台和数据库交互。

后太也分别创建了model实体类、控制层controller、接口service、接口实现类serviceImp。因为这次主要是实现前台功能，我就把重心放在了前台，所以后台没有dao层。
原本我是连service都不准备建立的，只是后来为了测试方便，还是建立了，因此各层看起来其实很混乱，该写在service的代码写在了controller，依次类推。
代码分别如下：

（1）、controller层，对前台传入的字符串进行了一定处理：

（2）、service层存入数据库：

serviceImp代码:

Model实体：

页面效果如图：

原文index.html文件代码：