热门IT资讯网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 互联网科技 >

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

发表于：2024-11-23 作者：热门IT资讯网编辑
编辑最后更新 2024年11月23日，Actviti的流程功能已经很强大，但其表单的部分还是弱弱的，因此，在后续的文章中，我们会逐步通过一些开源以及商业的UI工具逐步加强这块。尽管流程审批中的表单需要与第三方的数据进行交互，在我看来，这些

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' )[xss_clean] = 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. <html>

  3. <head>

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

  5. <title>MINI-TextFieldtitle>

  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. function createElement(type, name){

  28. var element = null;

  29. try {

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

  31. } catch (e) {}

  32. if(element==null) {

  33. element = document.createElement(type);

  34. element.name = name;

  35. }

  36. return element;

  37. }

  38. mini.parse();

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

  40. //编辑的控件的值

  41. var oNode = null,

  42. thePlugins = 'mini-textbox';

  43. _window.onload = function() {

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

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

  46. //

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

  48. //获得字段名称

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

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

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

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

  53. }

  54. }

  55. //取消按钮

  56. dialog.oncancel = function () {

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

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

  59. }

  60. };

  61. //确认

  62. dialog.onok = function (){

  63. form.validate();

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

  65. return false;

  66. }

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

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

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

  70. if( !oNode ) {

  71. try {

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

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

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

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

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

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

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

  79. } catch (e) {

  80. try {

  81. editor.execCommand('error');

  82. } catch ( e ) {

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

  84. }

  85. return false;

  86. }

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

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

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

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

  91. }

  92. };

  93. script>

  94. body>

  95. html>

步骤五：

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

Html代码

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

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

  3. >

  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>

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

  16. head>

  17. <body>

  18. <h3>表单设计器示例h3>

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

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

  21. <tr>

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

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

  24. td>

  25. tr>

  26. table>

  27. div>

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

  29. <p>描述：

  30. <br/>

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

  32. <br/>

  33. p>

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

  35. mini.parse();

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

  37. script>

  38. body>

  39. html>

示意图：





生成的html代码为：

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


了解咨询:1361783075


很赞哦！

相关文章

0