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下定义样式如
.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用于
鼠标移入显示该控件的描述。如下所示:
, toolbars: [[ ......,print', 'preview', 'searchreplace', 'help' //, 'drafts' 从草稿箱加载 //新增自定义按钮 ,'mini-textbox' ]]
找到ueditor文件夹下的ueditor-fd.all.js的btnCmds数组,添加字符串'mini-textbox'
这个时候刷新页面就可以在help按钮后面新增了一个按钮,但是按钮的图标显示的是B(默认的样式)
.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(); } } }); };
以上有一个地方是当使用该插件时,会弹出编辑框编辑我们的自定义属性,这是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>
步骤五:
在页面中使用表单设计器示例,代码如下所示:
<%@ 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>
示意图:
生成的html代码为:
<input name="code" type="text" class="mini-textbox" required="true" plugins="mini-textbox"/>
其他更多的控件属性,请补充即可。
相关推荐
总结起来,百度编辑器ueditor-dev-1.5.0 gbk-asp版本是一款专为ASP环境设计的富文本编辑器,具备轻量化、高度可定制和良好的用户体验特性,特别适合需要处理大量中文内容的网站使用。通过其提供的API和配置选项,...
"ueditor1_4_3-utf8-jsp.zip" 是一个包含百度富文本编辑器(UEditor)的Java版本的压缩包。UEditor是一款广泛应用于网页内容编辑的开源JavaScript组件,它为用户提供了一个功能丰富的在线编辑器,支持多种文本格式、...
【ueditor1_4_3-utf8-net】是一个基于ASP.NET平台的富文本编辑器,由百度开发并提供,其版本号为1.4.3。富文本编辑器是网页应用中常用的一种组件,它允许用户在网页上进行文本编辑、格式化以及插入多媒体元素等操作...
总之,ueditor-dev-1.5.0 gbk-php编译版是为PHP开发者量身打造的富文本编辑器解决方案,其易于集成、高度可定制的特性,使其成为Web开发中的理想选择。通过理解和掌握其核心功能和应用场景,我们可以更好地利用这一...
Ueditor是一款由百度推出的开源富文本编辑器,具有丰富的插件和高度可定制化的特性,被广泛应用于各类网站后台管理系统中。本文主要讲解如何在Ueditor中添加自定义功能,包括自定义下拉框,并对具体步骤进行详细解析...
例如,`ueditor-list.zip`可能包含了一些预定义的列表样式或列表管理功能,允许用户在编辑器中创建有序列表、无序列表,或者自定义列表样式。这些功能通过JavaScript实现,与服务器端的"utf8-net"配合工作,实现了...
UEditor是一款由百度公司开发的开源在线富文本编辑器,其版本号从1.1.2到1.1.3的迭代,见证了这款编辑器在功能优化和用户体验上的不断提升。在IT领域,UEditor因其强大的功能、易用性以及高度可定制化而广受开发者...
vue-ueditor-wrap富文本编辑框的配置和使用(vue3)
ueditor是由百度公司开发的一款强大的在线富文本编辑器,它提供了丰富的文本格式化功能,如插入图片、视频、链接等,使得用户可以在网页端进行类似Word的操作。ueditor以其易用性、稳定性和良好的用户体验深受开发者...
**基于 UEditor 二次开发的富文本编辑器** 在网页应用中,富文本编辑器是不可或缺的一部分,它允许用户在浏览器端创建、编辑带有格式的文本内容,如字体、颜色、图片、链接等。`UEditor` 是百度推出的一款开源的、...
ueditor-baidu编辑器-前端主流富文本 主要特点: 轻量级:代码精简,加载迅速。 定制化: 全新的分层理念,满足多元化的需求。 采用三层架构: 1. 核心层: 为命令层提供底层API,如range/selection/...
UEditor是一款由百度FEX前端研发团队开发的高性能、易使用的富文本Web编辑器。它以其轻量级、高度可定制以及对用户体验的重视而受到广大开发者和网站管理员的青睐。UEditor遵循MIT协议,这意味着它对用户是完全开放...
本文将深入探讨ueditor-1.1.2 JAR包及其源码,帮助开发者更好地理解和利用这个编辑器。 一、ueditor-1.1.2 JAR包介绍 ueditor-1.1.2.jar是UEditor的Java实现,它包含了一整套用于处理文本编辑、图片上传、视频插入...
安装完成后,可以通过命令行工具进入ueditor-dev-1.5.0目录,运行特定的Grunt命令来启动构建过程。这个过程可能包括编译JavaScript源码、合并文件、压缩代码以及生成相应的配置文件等步骤。通过这种方式,开发者可以...
UEditor,一个强大的富文本编辑器,以其简洁、高效、易用的特点深受开发者喜爱。在这里,我们关注的是其1.4.3-UTF8-NET版本,专门为.NET平台设计,特别适用于ASP.NET MVC框架的项目。该版本支持多语言,特别是UTF-8...
总的来说,ueditor-dev-1.5.0 utf8-php版本是百度编辑器的一个强大且灵活的开发版本,对于需要在PHP环境中集成富文本编辑功能的开发者来说,是一个理想的选择。通过深入理解和充分利用其特性和功能,可以构建出满足...
该文件用来解决,使用ueditor编辑器,列表图标,数字不显示的问题。 列表文件本地化使用说明: 1、解压放到你的themes/文件夹下(可以按照需求放置路径) 2、修改editor_config.js文件,修改listiconpath配置项: ...
UEditor 是一个功能强大的在线富文本编辑器,尤其在Java Web开发领域中广泛应用。此压缩包"ueditor1_3_5-utf8-jsp.rar"包含了UEditor 1.3.5版本,特别针对UTF-8编码和JSP环境进行了优化。本文将深入探讨其核心特性和...
《ueditor-list:深入理解ueditor图片资源与前端富文本编辑器应用》 ueditor-list是一个包含ueditor图片资源的集合,这些资源主要用于ueditor编辑器的界面展示和功能实现。ueditor是一款知名的前端富文本编辑器,由...