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

  

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

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

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

,

步骤一

在下增加文件夹,如下所示:


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


,

,

html代码,,基于UEditor上开发的表单设计器——自定义文本控件

<李>

<李>

<李>

,

,

步骤二

为了不影响旧的,复制文件更名为,复制文件,更名为

步骤三

在中

,

,,,,,,,,,,工具栏:,[[   ,,,,,,,,,,,……,打印# 39;,,& # 39;预览# 39;,,& # 39;searchreplace& # 39;,, & # 39;帮助# 39;   ,,,,,,,,,,,,,//& # 39;草稿# 39;,从草稿箱加载   ,,,,,,,,,,,//新增自定义按钮   ,,,,,,,,,,,,& # 39;mini-textbox& # 39;   ,,,,,,,]]

,

,

Html代码,,基于UEditor上开发的表单设计器——自定义文本控件

<李>

<李>

<李>

,

,

,

再定义其工具栏上按钮的样式图标,进入UEditor文件夹下的主题文件夹下的默认的文件夹下的css文件夹下的ueditor.css,在文件的末尾加上如css下:   null

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