OA智能办公系统   OA系统  审批流 自定义表单 的实现

先来一张图

模板设计器 使用的是  TinyMce，下载地址：TinyMce

后面会把 详细的代码及实现思路贴上来

 

步骤一、集成TinyMce

引入 tinyMce

<script type="text/javascript" src="../../../../comm/lib/tinymce/tinymce.min.js"></script>

来一个textarea 

<textarea id="templateElm"></textarea>

js中初始化 tinyMce

tinymce.init({selector: 'textarea#templateElm', //<textarea>中为编辑区域theme: "modern", //主题language: "zh_CN", //语言 ，可自行下载中文branding: false,height: 340,plugins: [ //插件，可自行根据现实内容删除"advlist autolink lists charmap print preview hr anchor pagebreak spellchecker","searchreplace wordcount visualblocks visualchars fullscreen insertdatetime  nonbreaking","save table contextmenu directionality emoticons powerpaste textcolor"],file_browser_callback: function(field_name, url, type, win) {win.document.getElementById(field_name).value = 'my browser value';},powerpaste_word_import: 'propmt', // 参数可以是propmt, merge, clear，效果自行切换对比powerpaste_html_import: 'propmt', // propmt, merge, clearpowerpaste_allow_local_images: true,content_css: "../../../../comm/css/template.css", //引用的外部CSS样式，可删除toolbar: "insertfile   | styleselect fontselect fontsizeselect| bold italic | " +"alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      " +"|  fullpage | forecolor backcolor", //工具栏，可根据需求删除style_formats: [ //初始时提供的默认格式{title: 'Bold text',inline: 'b'},{title: 'Red text',inline: 'span',styles: {color: '#ff0000'}},{title: 'Red header',block: 'h1',styles: {color: '#ff0000'}},{title: 'Example 1',inline: 'span',classes: 'example1'},{title: 'Example 2',inline: 'span',classes: 'example2'},{title: 'Table styles'},{title: 'Table row 1',selector: 'tr',classes: 'tablerow1'}]
});

步骤二、添加左侧插件组

<div class="layui-inline"><button class="layui-btn layui-btn-primary btn-li first-li" data-type="rescode"><\>源码</button><button class="layui-btn layui-btn-primary btn-li" data-type="insertForm">表单</button><button class="layui-btn layui-btn-primary  btn-li" data-type="insertCheckbox">复选框</button><button class="layui-btn layui-btn-primary  btn-li" data-type="insertRadio">单选按钮</button><button class="layui-btn layui-btn-primary  btn-li" data-type="insertTextInput">单行文本框</button><button class="layui-btn layui-btn-primary btn-li" data-type="insertDownListBtn">下拉列表</button><button class="layui-btn layui-btn-primary  btn-li" data-type="insertHiddenInput">隐藏域</button><button class="layui-btn layui-btn-primary btn-li" data-type="insertTextArea">文本域</button><button class="layui-btn layui-btn-primary btn-li" data-type="insertFileUpload">文件上传</button><button class="layui-btn layui-btn-primary btn-li" data-type="insertPrimaryBtn">普通按钮</button><button class="layui-btn layui-btn-primary btn-li" data-type="insertSubmitBtn">提交按钮</button><button class="layui-btn layui-btn-primary btn-li" data-type="insertResetBtn">重置按钮</button>
</div>

绑定点击事件：

//定义右侧工具栏事件
active = {rescode: function() { //源码$('#rescode_ta').val(tinymce.activeEditor.getContent());layer.open({type: 1,offset: '10px',title: "源码", //不显示标题area: ['1000px', '650px'],content: $('#rescode_ta'),btn: ['确认', '关闭'],yes: function(index) {initTemplateView($('#rescode_ta').val());layer.close(index);}});},insertForm: function() { //插入表单var formHTML = '<form class="edit-form" id="commonForm"><br /></form>'tinymce.execCommand("mceInsertContent", false, formHTML);DomListener(); //重新设置监听},insertCheckbox: function() { //插入复选框var checkboxHTML = '<input name="modelcheckbox" type="checkbox" value="" />'tinymce.execCommand("mceInsertContent", false, checkboxHTML);DomListener(); //重新设置监听},insertRadio: function() { //插入单选按钮var uuid = $tool.uuid(16, 16);var radioHTML = '<label><input name="modelredio" type="radio" value="0" />是</label> ' +'<label><input name="modelredio" type="radio" value="1" />否</label>'tinymce.execCommand("mceInsertContent", false, radioHTML);DomListener(); //重新设置监听},insertTextInput: function() { //插入文本框var uuid = $tool.uuid(16, 16);tinymce.execCommand("mceInsertContent", false, '<input type="text"  />');DomListener(); //重新设置监听},insertHiddenInput: function() { //插入隐藏域var uuid = $tool.uuid(16, 16);var checkboxHTML = '<input name="modelHidden" type="text" data-inputtype="hidden" class="hiddeninput" value="" />'tinymce.execCommand("mceInsertContent", false, checkboxHTML);DomListener(); //重新设置监听},insertTextArea: function() { //插入文本域var uuid = $tool.uuid(16, 16);var textareaHTML = '<textarea name="modeltextarea" > </textarea>'tinymce.execCommand("mceInsertContent", false, textareaHTML);DomListener(); //重新设置监听},insertFileUpload: function() { //插入文件上传var uuid = $tool.uuid(16, 16);var textareaHTML = '<input type="text"  /><button class="uploadFile" type="button">选择文件</button>'tinymce.execCommand("mceInsertContent", false, textareaHTML);DomListener(); //重新设置监听},insertPrimaryBtn: function() { //插入普通按钮var uuid = $tool.uuid(16, 16);tinymce.execCommand("mceInsertContent", false, '<input type="button" value="普通按钮"/>');DomListener(); //重新设置监听},insertSubmitBtn: function() { //插入提交按钮var uuid = $tool.uuid(16, 16);tinymce.execCommand("mceInsertContent", false, '<input type="button" class="submit" value="保存" >');DomListener(); //重新设置监听},insertResetBtn: function() { //插入重置按钮var uuid = $tool.uuid(16, 16);tinymce.execCommand("mceInsertContent", false, '<input type="reset" value="重置" />');DomListener(); //重新设置监听},insertDownListBtn: function() { //插入下拉框tinymce.execCommand("mceInsertContent", false, '<select style="width: 120px"><option value="1">选择一</option><option value="2" >选择二</option>' +'<option value="3">选择三</option> </select>');DomListener(); //重新设置监听}};

步骤三、绑定input、select、radio、checkbox等元素的点击事件

因为动态添加的html元素需要重新设置 点击事件的监听。

var iframeDocument =iframeDocument = $('#templateElm_ifr')[0].contentDocument; //获取 tinyMce 的 编辑区域的 iframe DOM对象

function DomListener() {$(iframeDocument).find("input").unbind("click"); //清除之前的绑定，否则会造成重复绑定$(iframeDocument).find("input").bind("click", function() {var dataItemCode = $(this).attr("data-itemcode");var datasource = HTMLFormat(tinymce.activeEditor.getContent());var dataId = ""if($(this).attr("id") != undefined) {dataId = $(this).attr("id");}//隐藏所有面板$(".config_pane_item").hide();if("radio" == $(this).attr("type")) { //redio组if(dataItemCode == undefined || dataItemCode == "") { //如果dataItemCode未找到，说明是新建的数据项var that = this;var radioName = $(this).attr("name");var datacode = "";$(datasource).find('input[name="' + radioName + '"][type="radio"]').each(function(index, item) {if($(item).attr('data-itemcode') != undefined) {datacode = $(item).attr('data-itemcode');return false;}});$("#template_data_config_pane").show();if(datacode != "") {$(this).attr("data-itemcode", datacode);templateData(templateId, datacode, this, dataId);} else {dataItemCode = $tool.uuid(16, 16);$(datasource).find('input[ name="' + radioName + '"][type="radio"]').each(function(indexs, items) {$($(that).parents("#tinymce").find('input[ name="' + radioName + '"][type="radio"]')[indexs]).attr("data-itemcode", dataItemCode)})templateData(templateId, dataItemCode, this, dataId);}} else {$("#template_data_config_pane").show();templateData(templateId, dataItemCode, this, dataId);}}if("checkbox" == $(this).attr("type")) { //checkbox组if(dataItemCode == undefined || dataItemCode == "") { //如果dataItemCode未找到，说明是新建的数据项var cthat = this;var checkboxName = $(this).attr("name");var checkboxCode = ""$(datasource).find('input[name="' + checkboxName + '"][type="checkbox"]').each(function(indexs, items) {if($(items).attr('data-itemcode') != undefined) {checkboxCode = $(items).attr('data-itemcode');return false;}})$("#template_data_config_pane").show();if(checkboxCode != "") {$(this).attr("data-itemcode", checkboxCode);templateData(templateId, checkboxCode, this, dataId);} else {dataItemCode = $tool.uuid(16, 16);$(datasource).find('input[name="' + checkboxName + '"][type="checkbox"]').each(function(indexsd, itemsd) {$($(cthat).parents("#tinymce").find('input[name="' + checkboxName + '"][type="checkbox"]')[indexsd]).attr("data-itemcode", dataItemCode)})templateData(templateId, dataItemCode, this, dataId);}} else {$("#template_data_config_pane").show();templateData(templateId, dataItemCode, this, dataId);}}if("text" == $(this).attr("type")) {if(dataItemCode == undefined) { //如果dataItemCode未找到，说明是新建的数据项dataItemCode = $tool.uuid(16, 16);$(this).attr("data-itemcode", dataItemCode);}//展示模板数据项目面板$("#template_data_config_pane").show();templateData(templateId, dataItemCode, this, dataId);}if("button" == $(this).attr("type")) {if(dataItemCode == undefined) { //如果dataItemCode未找到，说明是新建的数据项dataItemCode = $tool.uuid(16, 16);$(this).attr("data-itemcode", dataItemCode);}//展示模板按钮属性面板$("#template_btn_config_pane").show();templateBtn(templateId, dataItemCode, this, dataId);}})/*设置 textarea 点击监听事件*/$(iframeDocument).find("textarea").unbind("click"); //清除之前的绑定，否则会造成重复绑定$(iframeDocument).find("textarea").bind("click", function() {var dataItemCode = $(this).attr("data-itemcode");var dataId = ""if($(this).attr("id") != undefined) {dataId = $(this).attr("id");}if(dataItemCode == undefined) { //如果dataItemCode未找到，说明是新建的数据项dataItemCode = $tool.uuid(16, 16);$(this).attr("data-itemcode", dataItemCode);if($(this).attr("id") == undefined) {$(this).attr("id", dataItemCode);}}//隐藏所有面板$(".config_pane_item").hide();//展示模板数据项目面板$("#template_data_config_pane").show();templateData(templateId, dataItemCode, this, dataId);})/*设置 select 点击监听事件*/$(iframeDocument).find("select").unbind("click"); //清除之前的绑定，否则会造成重复绑定$(iframeDocument).find("select").bind("click", function() {var dataItemCode = $(this).attr("data-itemcode");var dataId = ""if($(this).attr("id") != undefined) {dataId = $(this).attr("id");}if(dataItemCode == undefined) { //如果dataItemCode未找到，说明是新建的数据项dataItemCode = $tool.uuid(16, 16);$(this).attr("data-itemcode", dataItemCode);if($(this).attr("id") == undefined) {$(this).attr("id", dataItemCode);}}//隐藏所有面板$(".config_pane_item").hide();//展示模板数据项目面板$("#template_data_config_pane").show();templateData(templateId, dataItemCode, this, dataId);})}

通过绑定的点击事件，就可以弹出相关的配置面板了。

 

步骤四、添加自定义样式

在初始化tinymce时，有一个属性叫  content_css: "../../../../comm/css/template.css", //引用的外部CSS样式，可删除

其中的内容为：

.edit-form{border: 1px dashed #F00;
}.hiddeninput{border: 1px dashed #b9b7b7;width:40px;
}

这样加上去之后，编辑器中就能直接使用 template中定义的样式

表单：

我在插入表单对象时，给了一个 edit-form 样式，这样就能直接 以红色的边框展示。

隐藏域：

隐藏域比较特殊，因为如果插入一个真实的 type=‘‘hidden’’ 的input元素的话，编辑器中是看不见的，导致不能点击，所以我插入的隐藏域是这样的：

<input name="modelHidden" type="text" data-inputtype="hidden" class="hiddeninput" value="" />

它的type是一个 text。然后给了一个 hiddeninput样式。

最后在做保存的时候，将 所有 data-inputtype="hidden" 的input元素的 type改成hidden就可以了。