表单设计器实现效果及思路1.概述2.基于UEditor的控件的插件的开发

125 阅读 0 评论 83 点赞

我是靠谱客的博主魁梧口红，这篇文章主要介绍表单设计器实现效果及思路1.概述2.基于UEditor的控件的插件的开发，现在分享给大家，希望可以做个参考。

1.概述

流程中的表单是一个重要部分，审批过程中数据的呈现需要依赖表单，而表单展现方式挺多，但在平台中，我们的表单均是以html来展示。在以往的开发中，这部分的表单均是由开发人员通过代码开发来实现，而本文介绍的则是两种方式：

基于在线表单的设计器实现
基于开发人员自身扩展的表单

在线的表单的实现方式无非是通过js+html来渲染出来，而js可以由自己写，也可以用第三方成熟的库，若是纯html库，要实现复杂的表单交互，需要费不少功夫，在JSaaS平台中，我们采用了MINIUI的前端框架，采用它主要有以下原因：

它是基于JQuery的UI库，学习成本低
其大部分是使用HTML标签属性定义方式，只需要定义则可，减少js的交互复杂
商业版本，有技术支持保障

具体的学习示例请参考官方的示例。

既然我们采用了miniui的表单实现方式，其自定义表单无非就是让ueditor来生成其miniui的控件定义方式，如文本框，miniui的定义如下：

文本控件：<input id=”tb” class=”mini-textbox” emptyText=”请输入商品编号” vtype=”email”/>
日期控件：<input id=”date2″ class=”mini-datepicker” style=”width:200px;” onvaluechanged=”onValueChanged” nullValue=”null” format=”yyyy-MM-dd H:mm:ss” timeFormat=”H:mm:ss” showTime=”true” showOkButton=”true” showClearButton=”false”/>

其实现的效果如下所示：

其预览的效果如下所示：
表单预览.jpg

2.基于UEditor的控件的插件的开发

Ueditor是一款不错的在线HTML的设计编辑器，目前由百度的团队在维护，并且用于百度很多的产品上，如百度百科。它支持多种语言，支持流行的浏览器，支持扩展开发插件，相对fckeditor，ckeditor，其灵活性及使用的方便性均要好很多.以下我们介绍如何在ueditor上扩展其插件。

第一步

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

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

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

第二步

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

第三步

在ueditor-fd-config.js中toolbars参数，新增一个字符串min-textbox，同时新增一个labelMap用于
鼠标移入显示该控件的描述。如下所示：

复制代码

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

找到ueditor文件夹下的ueditor-fd.all.js的btnCmds数组，添加字符串’mini-textbox’
这个时候刷新页面就可以在help按钮后面新增了一个按钮，但是按钮的图标显示的是B（默认的样式）

复制代码

1
2
3
.edui-for-mini-textbox .edui-icon{
        background-position:-200px -40px;
}

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

第四步

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

复制代码

UE.FormDesignBaseUrl = 'form-design';
//文本控制器
UE.plugins['mini-textbox'] = function () {
var me = this,thePlugins = 'mini-textbox';
 me.commands[thePlugins] = {
  execCommand:function () {
  var dialog = new UE.ui.Dialog({
    iframeUrl:this.options.UEDITOR_HOME_URL + UE.FormDesignBaseUrl+'/config/mini-textbox.html',
    name:thePlugins,
    editor:this,
    title: '文本框',
    cssRules:"width:600px;height:380px;",
    buttons:[
    {
     className:'edui-okbutton',
     label:'确定',
     onclick:function () {
      dialog.close(true);
     }
    },
    {
     className:'edui-cancelbutton',
     label:'取消',
     onclick:function () {
      dialog.close(false);
     }
    }]
   });
   dialog.render();
   dialog.open();
  }
 };
var popup = new baidu.editor.ui.Popup( {
  editor:this,
  content: '',
  className: 'edui-bubble',
  _edittext: function () {
     baidu.editor.plugins[thePlugins].editdom = popup.anchorEl;
     me.execCommand(thePlugins);
    this.hide();
  },
  _delete:function(){
  if( window.confirm('确认删除该控件吗？') ) {
    baidu.editor.dom.domUtils.remove(this.anchorEl,false);
   }
  this.hide();
  }
 } );
 popup.render();
 me.addListener( 'mouseover', function( t, evt ) {
  evt = evt || window.event;
 var el = evt.target || evt.srcElement;
       var leipiPlugins = el.getAttribute('plugins');
 if ( /input/ig.test( el.tagName ) && leipiPlugins==thePlugins) {
  var html = popup.formatHtml(
   '<nobr>文本框: <span onclick=$$._edittext() class="edui-clickable">编辑</span>  <span onclick=$$._delete() class="edui-clickable">删除</span></nobr>' );
  if ( html ) {
    popup.getDom( 'content' ).innerHTML = html;
    popup.anchorEl = el;
    popup.showAnchor( popup.anchorEl );
   } else {
    popup.hide();
   }
  }
 });
};

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
UE.FormDesignBaseUrl = 'form-design';
//文本控制器
UE.plugins['mini-textbox'] = function () {
var me = this,thePlugins = 'mini-textbox';
 me.commands[thePlugins] = {
  execCommand:function () {
  var dialog = new UE.ui.Dialog({
    iframeUrl:this.options.UEDITOR_HOME_URL + UE.FormDesignBaseUrl+'/config/mini-textbox.html',
    name:thePlugins,
    editor:this,
    title: '文本框',
    cssRules:"width:600px;height:380px;",
    buttons:[
    {
     className:'edui-okbutton',
     label:'确定',
     onclick:function () {
      dialog.close(true);
     }
    },
    {
     className:'edui-cancelbutton',
     label:'取消',
     onclick:function () {
      dialog.close(false);
     }
    }]
   });
   dialog.render();
   dialog.open();
  }
 };
var popup = new baidu.editor.ui.Popup( {
  editor:this,
  content: '',
  className: 'edui-bubble',
  _edittext: function () {
     baidu.editor.plugins[thePlugins].editdom = popup.anchorEl;
     me.execCommand(thePlugins);
    this.hide();
  },
  _delete:function(){
  if( window.confirm('确认删除该控件吗？') ) {
    baidu.editor.dom.domUtils.remove(this.anchorEl,false);
   }
  this.hide();
  }
 } );
 popup.render();
 me.addListener( 'mouseover', function( t, evt ) {
  evt = evt || window.event;
 var el = evt.target || evt.srcElement;
       var leipiPlugins = el.getAttribute('plugins');
 if ( /input/ig.test( el.tagName ) && leipiPlugins==thePlugins) {
  var html = popup.formatHtml(
   '<nobr>文本框: <span onclick=$$._edittext() class="edui-clickable">编辑</span>&nbsp;&nbsp;<span onclick=$$._delete() class="edui-clickable">删除</span></nobr>' );
  if ( html ) {
    popup.getDom( 'content' ).innerHTML = html;
    popup.anchorEl = el;
    popup.showAnchor( popup.anchorEl );
   } else {
    popup.hide();
   }
  }
 });
};

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

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>MINI-TextField</title>
   <script src="../../../boot.js" type="text/javascript"></script>
   <script type="text/javascript" src="../../dialogs/internal.js"></script>
   <link href="../../../../styles/form.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="miniForm">
  <table class="table-detail" cellspacing="1" cellpadding="0">
   <caption>文本框基础属性</caption>
   <tr>
    <th>字段属性*</th>
    <td>
     <input class="mini-textbox" name="name" id="name" required="true" vtype="maxLength:80" style="width:90%"/>
    </td>
    <th>必填*</th>
    <td>
     <input class="mini-checkbox" name="isRequired" id="isRequired"/>是
    </td>
   </tr>
  </table>
 </form>
 <script type="text/javascript">
 function createElement(type, name){     
     var element = null;     
     try {        
          element = document.createElement('<'+type+' name="'+name+'">');     
      } catch (e) {}   
     if(element==null) {     
          element = document.createElement(type);     
          element.name = name;     
      }
     return element;     
  }
 
  mini.parse();
 var form=new mini.Form('miniForm');
 //编辑的控件的值
 var oNode = null,
  thePlugins = 'mini-textbox';
 
 window.onload = function() {
  //若控件已经存在，则设置回调其值
     if( UE.plugins[thePlugins].editdom ){
         //
      oNode = UE.plugins[thePlugins].editdom;
         //获得字段名称
         
   var name = oNode.getAttribute('name');
         var isRequried=oNode.getAttribute("required");
          mini.get('name').setValue(name);
          mini.get('isRequired').setValue(isRequried);
      }
  }
 //取消按钮
 dialog.oncancel = function () {
     if( UE.plugins[thePlugins].editdom ) {
         delete UE.plugins[thePlugins].editdom;
      }
  };
 //确认
 dialog.onok = function (){
   form.validate();
        if (form.isValid() == false) {
            return false;
         }
     var name=mini.get('name').getValue();
     var isRequired=mini.get('isRequired').getValue();
     
     //控件尚未存在，则创建新的控件，否则进行更新
     if( !oNode ) {
         try {
              oNode = createElement('input',name);
              oNode.setAttribute('type','text');
              oNode.setAttribute('class','mini-textbox');
              oNode.setAttribute('required',isRequired);
             //需要设置该属性，否则没有办法其编辑及删除的弹出菜单
             oNode.setAttribute('plugins',thePlugins);
              editor.execCommand('insertHtml',oNode.outerHTML);
          } catch (e) {
             try {
                  editor.execCommand('error');
              } catch ( e ) {
                  alert('控件异常，请联系技术支持');
              }
             return false;
          }
      } else {//已经存在，则更新属性则可
         oNode.setAttribute('title', name);
          oNode.setAttribute('required', isRequired);
         delete UE.plugins[thePlugins].editdom;
      }
  };
 
 </script>
</body>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>MINI-TextField</title>
   <script src="../../../boot.js" type="text/javascript"></script>
   <script type="text/javascript" src="../../dialogs/internal.js"></script>
   <link href="../../../../styles/form.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="miniForm">
  <table class="table-detail" cellspacing="1" cellpadding="0">
   <caption>文本框基础属性</caption>
   <tr>
    <th>字段属性*</th>
    <td>
     <input class="mini-textbox" name="name" id="name" required="true" vtype="maxLength:80" style="width:90%"/>
    </td>
    <th>必填*</th>
    <td>
     <input class="mini-checkbox" name="isRequired" id="isRequired"/>是
    </td>
   </tr>
  </table>
 </form>
 <script type="text/javascript">
 function createElement(type, name){     
     var element = null;     
     try {        
          element = document.createElement('<'+type+' name="'+name+'">');     
      } catch (e) {}   
     if(element==null) {     
          element = document.createElement(type);     
          element.name = name;     
      }
     return element;     
  }
 
  mini.parse();
 var form=new mini.Form('miniForm');
 //编辑的控件的值
 var oNode = null,
  thePlugins = 'mini-textbox';
 
 window.onload = function() {
  //若控件已经存在，则设置回调其值
     if( UE.plugins[thePlugins].editdom ){
         //
      oNode = UE.plugins[thePlugins].editdom;
         //获得字段名称
         
   var name = oNode.getAttribute('name');
         var isRequried=oNode.getAttribute("required");
          mini.get('name').setValue(name);
          mini.get('isRequired').setValue(isRequried);
      }
  }
 //取消按钮
 dialog.oncancel = function () {
     if( UE.plugins[thePlugins].editdom ) {
         delete UE.plugins[thePlugins].editdom;
      }
  };
 //确认
 dialog.onok = function (){
   form.validate();
        if (form.isValid() == false) {
            return false;
         }
     var name=mini.get('name').getValue();
     var isRequired=mini.get('isRequired').getValue();
     
     //控件尚未存在，则创建新的控件，否则进行更新
     if( !oNode ) {
         try {
              oNode = createElement('input',name);
              oNode.setAttribute('type','text');
              oNode.setAttribute('class','mini-textbox');
              oNode.setAttribute('required',isRequired);
             //需要设置该属性，否则没有办法其编辑及删除的弹出菜单
             oNode.setAttribute('plugins',thePlugins);
              editor.execCommand('insertHtml',oNode.outerHTML);
          } catch (e) {
             try {
                  editor.execCommand('error');
              } catch ( e ) {
                  alert('控件异常，请联系技术支持');
              }
             return false;
          }
      } else {//已经存在，则更新属性则可
         oNode.setAttribute('title', name);
          oNode.setAttribute('required', isRequired);
         delete UE.plugins[thePlugins].editdom;
      }
  };
 
 </script>
</body>
</html>

第五步

扩展定义表单编辑器，以在设计器中使用我们扩展的控件，其使用的代码如下所示：

复制代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/commons/taglibs.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>MiniUI 的控件自定义</title>
  <%@include file="/commons/dynamic.jspf" %>
   <script src="${ctxPath}/scripts/boot.js" type="text/javascript"></script>
   <link href="${ctxPath}/scripts/ueditor/form-design/css/toolbars.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/ueditor-fd-config.js"></script>
     <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/ueditor-fd.all.js"> </script>
     <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/lang/zh-cn/zh-cn.js"></script>
    
     <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/form-design/design-plugin.js"></script>
</head>
<body>
  <h2>表单设计器示例</h2>
 
  <div class="mini-toolbar" style="padding:0px;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="textfield" plain="true" onclick="designer.execCommand('mini-textbox')">文本控件</a>
                    </td>
                </tr>
          </table>
         </div>
       <script id="designer" type="text/plain" style="width:100%;height:500px;"></script>
 <p>描述：
  <br/>
   表单设计器中的文本控件示例
  <br/>
 </p>
 <script type="text/javascript">
  mini.parse();
 var designer = UE.getEditor('designer');
 </script>
</body>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/commons/taglibs.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>MiniUI 的控件自定义</title>
  <%@include file="/commons/dynamic.jspf" %>
   <script src="${ctxPath}/scripts/boot.js" type="text/javascript"></script>
   <link href="${ctxPath}/scripts/ueditor/form-design/css/toolbars.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/ueditor-fd-config.js"></script>
     <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/ueditor-fd.all.js"> </script>
     <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/lang/zh-cn/zh-cn.js"></script>
    <!-- 引入表单控件 -->
     <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/form-design/design-plugin.js"></script>
</head>
<body>
  <h2>表单设计器示例</h2>
 
  <div class="mini-toolbar" style="padding:0px;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="textfield" plain="true" onclick="designer.execCommand('mini-textbox')">文本控件</a>
                    </td>
                </tr>
          </table>
         </div>
       <script id="designer" type="text/plain" style="width:100%;height:500px;"></script>
 <p>描述：
  <br/>
   表单设计器中的文本控件示例
  <br/>
 </p>
 <script type="text/javascript">
  mini.parse();
 var designer = UE.getEditor('designer');
 </script>
</body>
</html>

其实现的效果如下所示：

编辑控件的属性页如下：

通过它可以生成我们对应的miniui控件的标签定义，如下所示：

更多的其他属性，我们则通过在控件属性页上增加配置项即可，如完整的属性配置如下所示：

Ueditor对js支持

在ueditor.all.js文件中搜
找到 root.traversal(function (node) { 下的
switch(node.tagName) {
case:’style:
case:’script:

把以下代码注释掉即可：

复制代码

1
2
3
4
5
6
7
8
node.setAttr({
 cdata_tag: node.tagName,
 cdata_data: (node.innerHTML() || ''),
'_ue_custom_node_':'true'
});
node.tagName = 'div';
node.innerHTML('');
break;

修改后，我们可以在编辑中加上js的函数定义，如我们加一个大写自动转换的定义处理，即可以类似如下定义。

复制代码

1
2
3
4
5
6
7
8
<script type="text/javascript">   
function setCap(){
     var num=mini.get('htje').getValue();
     var capNum=_toUpChineseMoney(num);
      mini.get('htdxjq').setValue(capNum);
  }
</script>

当然代码也进行了简化，配置及使用上都更加简单。

了解咨询QQ:1361783075

转载于:https://my.oschina.net/u/3391161/blog/869302