基于UEditor上开发的表单设计器--自定义文本控件

Actviti的流程功能已经很强大，但其表单的部分还是弱弱的，因此，在后续的文章中，我们会逐步通过一些开源以及商业的UI工具逐步加强这块。尽管流程审批中的表单需要与第三方的数据进行交互，在我看来，这些都是流程的携带的数据模型，可以不用搞得太复杂，流程实例只需要管理与自己关联的流程实例数据即可，而对于这些数据的来源及交互，只需要由流程的数据模型来执行即可，这就可以有效划分了流程定义与表单的数据的职责问题，而审批的表单则由UI层结合流程的数据模型进行展示。在本文中我们不打算对这块功能进行讨论与分析其实现方案，本文目前只是谈如何通过在线自定义数据的UI，即可以理解为表单如何定义。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了正蓝免费建站欢迎大家使用！

关于表单的展示，目前市面上有比较多的UI框架，包括开源与商用的。本文只讨论近期我在一项目上采用的MiniUI,这个框架还是比较不错，其原理是通过转化html中带有MINI-UI样式的控件，本文则着重讲解如何在UEditor中自定义mini控件。

尽管UEditor功能已经很强大了，但是有时候我们还是需要开发自己的插件，今天有时间就自己搞了下，发现还是挺简单的，有需要的同学可以参考下，我使用的UEditor版本是1.4.3的。

步骤一

在ueditor下增加form-design文件夹，如下所示：

 同时增加design-plugin.js，增加config目录用来放置开发控件的属性页面，css下放工具栏的按钮图标及样式，在本示例中，我们在该目录images放置textfield.png图标，同时在toolbars.css下定义样式如

Html代码  

1. .textfield{  

2.     background: url(images/textfield.png) no-repeat;  

3. }  

步骤二

为了不影响旧的ueditor，复制ueditor.all.js文件更名为ueditor-fd.all.js，复制ueditor.config.js文件，更名为ueditor-fd-config.js

步骤三

在ueditor-fd-config.js中toolbars参数，新增一个字符串min-textbox，同时新增一个labelMap用于

鼠标移入显示该控件的描述。如下所示：

        , toolbars: [[
            ......,print', 'preview', 'searchreplace', 'help'
            //, 'drafts' 从草稿箱加载
            //新增自定义按钮
            ,'mini-textbox'
        ]]

找到ueditor文件夹下的ueditor-fd.all.js的btnCmds数组，添加字符串'mini-textbox'

这个时候刷新页面就可以在help按钮后面新增了一个按钮，但是按钮的图标显示的是B（默认的样式）

Html代码  

1. .edui-for-mini-textbox .edui-icon{  

2.         background-position:-200px -40px;  

3. }  

再定义其工具栏上按钮的样式图标，进入ueditor文件夹下的themes文件夹下的default文件夹下的css文件夹下的ueditor.css,在文件的末尾加上如下css：
在本示例中，我们把这些工具栏的按钮定义在Ueditor的外面，所以本步骤可以省略

步骤四

在UEditor中注册我们的插件，在form-design目录下增加design-plugin.js,并且编写如下代码

Js代码  

1. //基础目录  

2. UE.FormDesignBaseUrl = 'form-design';  

3. //文本控制器  

4. UE.plugins['mini-textbox'] = function () {  

5.     var me = this,thePlugins = 'mini-textbox';  

6.     me.commands[thePlugins] = {  

7.         execCommand:function () {  

8.             var dialog = new UE.ui.Dialog({  

9.                 iframeUrl:this.options.UEDITOR_HOME_URL + UE.FormDesignBaseUrl+'/config/mini-textbox.html',  

10.                 name:thePlugins,  

11.                 editor:this,  

12.                 title: '文本框',  

13.                 c***ules:"width:600px;height:380px;",  

14.                 buttons:[  

15.                 {  

16.                     className:'edui-okbutton',  

17.                     label:'确定',  

18.                     onclick:function () {  

19.                         dialog.close(true);  

20.                     }  

21.                 },  

22.                 {  

23.                     className:'edui-cancelbutton',  

24.                     label:'取消',  

25.                     onclick:function () {  

26.                         dialog.close(false);  

27.                     }  

28.                 }]  

29.             });  

30.             dialog.render();  

31.             dialog.open();  

32.         }  

33.     };  

34.     var popup = new baidu.editor.ui.Popup( {  

35.         editor:this,  

36.         content: '',  

37.         className: 'edui-bubble',  

38.         _edittext: function () {  

39.               baidu.editor.plugins[thePlugins].editdom = popup.anchorEl;  

40.               me.execCommand(thePlugins);  

41.               this.hide();  

42.         },  

43.         _delete:function(){  

44.             if( window.confirm('确认删除该控件吗？') ) {  

45.                 baidu.editor.dom.domUtils.remove(this.anchorEl,false);  

46.             }  

47.             this.hide();  

48.         }  

49.     } );  

50.     popup.render();  

51.     me.addListener( 'mouseover', function( t, evt ) {  

52.         evt = evt || window.event;  

53.         var el = evt.target || evt.srcElement;  

54.         var leipiPlugins = el.getAttribute('plugins');  

55.         if ( /input/ig.test( el.tagName ) && leipiPlugins==thePlugins) {  

56.             var html = popup.formatHtml(  

57.                 '文本框: 

    ._edittext() class="edui-clickable">编辑  ._delete() class="edui-clickable">删除' );  

58.             if ( html ) {  

59.                 popup.getDom( 'content' ).innerHTML = html;  

60.                 popup.anchorEl = el;  

61.                 popup.showAnchor( popup.anchorEl );  

62.             } else {  

63.                 popup.hide();  

64.             }  

65.         }  

66.     });  

67. };  

以上有一个地方是当使用该插件时，会弹出编辑框编辑我们的自定义属性，这是config/mini-textbox.html的代码定义，如下：

Html代码  

1.   

2.   

3.   

4.           

5.           

6.           

7.           

8.           

9.   

10.   

11.       

12.           

13.             文本框基础属性  

14.               

15.                 字段属性*  

16.                   

17.                       

18.                   

19.                 必填*  

20.                   

21.                     是  

22.                   

23.               

24.           

25.       

26.       

27.       

28.         function createElement(type, name){       

29.             var element = null;       

30.             try {          

31.                 element = document.createElement('<'+type+' name="'+name+'">');       

32.             } catch (e) {}     

33.             if(element==null) {       

34.                 element = document.createElement(type);       

35.                 element.name = name;       

36.             }   

37.             return element;       

38.         }  

39.           

40.         mini.parse();  

41.         var form=new mini.Form('miniForm');  

42.         //编辑的控件的值  

43.         var oNode = null,  

44.         thePlugins = 'mini-textbox';  

45.           

46.         window.onload = function() {  

47.             //若控件已经存在，则设置回调其值  

48.             if( UE.plugins[thePlugins].editdom ){  

49.                 //  

50.                 oNode = UE.plugins[thePlugins].editdom;  

51.                 //获得字段名称  

52.                   

53.                 var name = oNode.getAttribute('name');  

54.                 var isRequried=oNode.getAttribute("required");  

55.                 mini.get('name').setValue(name);  

56.                 mini.get('isRequired').setValue(isRequried);  

57.             }  

58.         }  

59.         //取消按钮  

60.         dialog.oncancel = function () {  

61.             if( UE.plugins[thePlugins].editdom ) {  

62.                 delete UE.plugins[thePlugins].editdom;  

63.             }  

64.         };  

65.         //确认  

66.         dialog.onok = function (){  

67.             form.validate();  

68.             if (form.isValid() == false) {  

69.                 return false;  

70.             }  

71.             var name=mini.get('name').getValue();  

72.             var isRequired=mini.get('isRequired').getValue();  

73.               

74.             //控件尚未存在，则创建新的控件，否则进行更新  

75.             if( !oNode ) {  

76.                 try {  

77.                     oNode = createElement('input',name);  

78.                     oNode.setAttribute('type','text');  

79.                     oNode.setAttribute('class','mini-textbox');  

80.                     oNode.setAttribute('required',isRequired);  

81.                     //需要设置该属性，否则没有办法其编辑及删除的弹出菜单  

82.                     oNode.setAttribute('plugins',thePlugins);  

83.                     editor.execCommand('insertHtml',oNode.outerHTML);  

84.                 } catch (e) {  

85.                     try {  

86.                         editor.execCommand('error');  

87.                     } catch ( e ) {  

88.                         alert('控件异常，请联系技术支持');  

89.                     }  

90.                     return false;  

91.                 }  

92.             } else {//已经存在，则更新属性则可  

93.                 oNode.setAttribute('title', name);  

94.                 oNode.setAttribute('required', isRequired);  

95.                 delete UE.plugins[thePlugins].editdom;  

96.             }  

97.         };  

98.           

99.       

100.   

101.   

步骤五：

在页面中使用表单设计器示例，代码如下所示：

Html代码  

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  

2. <%@include file="/commons/taglibs.jspf" %>  

3.   

4.   

5.   

6.           

7.           

8.         <%@include file="/commons/dynamic.jspf" %>  

9.            

10.           

11.           

12.            

13.           

14.           

15.           

16.   

17.   

18.         

    表单设计器示例

      

19.           

20.           

21.               

22.                   

23.                       

24.                         文本控件  

25.                       

26.                   

27.             

28.