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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于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.jstoolbars参数,新增一个字符串min-textbox,同时新增一个labelMap用于

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

 

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

 

找到ueditor文件夹下的ueditor-fd.all.jsbtnCmds数组,添加字符串'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.                 cssRules:"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.                 '<nobr>文本框: <span onclick=

    ._edittext() class="edui-clickable">编辑</span>&nbsp;&nbsp;<span onclick=

    ._delete() class="edui-clickable">删除</span></nobr>' );  

  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. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

  2. <html>  

  3. <head>  

  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

  5.         <title>MINI-TextField</title>  

  6.         <script src="../../../boot.js" type="text/javascript"></script>  

  7.         <script type="text/javascript" src="../../dialogs/internal.js"></script>  

  8.         <link href="../../../../styles/form.css" rel="stylesheet" type="text/css" />  

  9. </head>  

  10. <body>  

  11.     <form id="miniForm">  

  12.         <table class="table-detail" cellspacing="1" cellpadding="0">  

  13.             <caption>文本框基础属性</caption>  

  14.             <tr>  

  15.                 <th>字段属性*</th>  

  16.                 <td>  

  17.                     <input class="mini-textbox" name="name" id="name" required="true" vtype="maxLength:80" style="width:90%"/>  

  18.                 </td>  

  19.                 <th>必填*</th>  

  20.                 <td>  

  21.                     <input class="mini-checkbox" name="isRequired" id="isRequired"/>是  

  22.                 </td>  

  23.             </tr>  

  24.         </table>  

  25.     </form>  

  26.     <script type="text/javascript">  

  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.     </script>  

  100. </body>  

  101. </html>  

  

步骤五:

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

Html代码  技术分享图片

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

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

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

  4. <html>  

  5. <head>  

  6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

  7.         <title>MiniUI 的控件自定义</title>  

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

  9.         <script src="${ctxPath}/scripts/boot.js" type="text/javascript"></script>   

  10.         <link href="${ctxPath}/scripts/ueditor/form-design/css/toolbars.css" rel="stylesheet" type="text/css" />  

  11.         <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/ueditor-fd-config.js"></script>  

  12.         <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/ueditor-fd.all.js"> </script>  

  13.         <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/lang/zh-cn/zh-cn.js"></script>  

  14.         <!-- 引入表单控件 -->  

  15.         <script type="text/javascript" charset="utf-8" src="${ctxPath}/scripts/ueditor/form-design/design-plugin.js"></script>  

  16. </head>  

  17. <body>  

  18.         <h2>表单设计器示例</h2>  

  19.           

  20.         <div class="mini-toolbar" style="padding:0px;">  

  21.             <table style="width:100%;">  

  22.                 <tr>  

  23.                     <td style="width:100%;">  

  24.                         <a class="mini-button" iconCls="textfield" plain="true" onclick="designer.execCommand('mini-textbox')">文本控件</a>  

  25.                     </td>  

  26.                 </tr>  

  27.           </table>  

  28.          </div>  

  29.        <script id="designer" type="text/plain" style="width:100%;height:500px;"></script>  

  30.   

  31.     <p>描述:  

  32.         <br/>  

  33.             表单设计器中的文本控件示例  

  34.         <br/>  

  35.     </p>  

  36.       

  37.     <script type="text/javascript">  

  38.      mini.parse();  

  39.      var designer = UE.getEditor('designer');  

  40.     </script>  

  41. </body>  

  42. </html>  

 示意图:


技术分享图片
 


技术分享图片
 

 

 

 

成的html代码为:

<input name="code" type="text" class="mini-textbox" required="true" plugins="mini-textbox"/>

 

 

其他更多的控件属性,请补充即可。


了解咨询:1361783075


以上是关于基于UEditor上开发的表单设计器--自定义文本控件的主要内容,如果未能解决你的问题,请参考以下文章

基于vue开发的一款强大的表单设计器,支持element和antd-vue表单快速开发。

两款自定义表单设计器

VUE使用富文本自定义打印模板

百度UEditor富文本上传图片

具有自定义属性表单的 ASP.NET 组件

表单设计器 k-form-design