现公布自定义表单控件的部分代码，这个纯属个人利用空闲时间所做，欢迎大家交流。
ckeditor插件代码
插件配置文件plugin.js，该文件放在ckeditor下的plugins目录下
/** * 自定义表单设计器 计算控件 * author tony 2012-08-14 */CKEDITOR.plugins.add('xd_calcu',{ init : function(editor){ var pluginName = 'xd_calcu'; editor.addCommand(pluginName,new CKEDITOR.dialogCommand(pluginName)); editor.ui.addButton(pluginName,{ label:'计算控件', command:pluginName, icon : CKEDITOR.plugins.getPath(pluginName) + 'calc.gif' }); CKEDITOR.dialog.add(pluginName,this.path + 'dialogs/xd_calcu.js'); if ( editor.addMenuItems ) { editor.addMenuItems( { xd_calcu : { label : '日历控件', command : 'xd_calcu', group : 'textfield', icon : CKEDITOR.plugins.getPath('xd_calcu') + 'calc.gif' } }); } if ( editor.contextMenu ) { editor.contextMenu.addListener( function( element ) { if ( element && !element.isReadOnly() ) { var name = element.getName(); var input_type = element.getAttribute('input_type'); if ( name == 'input' && input_type === 'calc'){ return { xd_calcu : CKEDITOR.TRISTATE_ON }; } } }); } editor.on( 'doubleclick', function( evt ) { var element = evt.data.element; if ( element.is( 'input' ) ) evt.data.dialog = 'xd_calcu'; }); }}); 对话框文件xd_calcu.js
/** * 智能表单 计算控件 * @author tony 2012-08-14 *///显示公式说明function displayRemark(){ var displayDom = document.getElementById('displayRemark'); if(displayDom){ if(displayDom.style.display === 'none'){ displayDom.style.display = 'block'; } else { displayDom.style.display = 'none'; } }} CKEDITOR.dialog.add('xd_calcu',function(editor){ var elements = [ { id : 'calcName', type : 'text', widths : ['100px','150px'], label : '控件名称：', labelLayout : 'horizontal', labelStyle : 'font-weight:bold', style : 'width:150px;margin-left:25px;' }, { id : 'calcValue', type : 'textarea', widths : ['100px','150px'], rows : '3', cols : '45', label : '计算公式：', labelLayout : 'horizontal', labelStyle : 'font-weight:bold', style : 'width:150px;margin-left:25px;' }, { type : 'html', widths : ['10%','80%'], html : ' 查看计算公式填写说明' }, { type : 'html', widths : ['10px','300px'], html : ' ' + '计算公式支持+ - * / ^和英文括号以及特定计算 函数，例如:(数值1+数值2)*数值3-ABS(数值4) ' + '其中数值1、数值2等为表单控件名称。 ' + ' 当前版本所支持的计算函数： ' + '1、MAX(数值1,数值2,数值3...) 输出最大值, 英文逗号分割; ' + '2、MIN(数值1,数值2,数值3...) 输出最小值, 英文逗号分割; ' + '3、ABS(数值1) 输出绝对值; ' + '4、MOD(数值1,数值2) 计算数值1和数值2的余数; ' + '5、AVG(数值1,数值2,数值3) 输出平均值; ' + '6、RMB(数值1) 输出人民币大写形式， 数值范围0～9999999999.99; ' + '7、DAY(日期1-日期2) 输出时间差的整数天数; ' + '8、HOUR(日期1-日期2) 输出时间差的小时数; ' + '9、DATE(日期1-日期2) 输出时间差， 形如：xx天xx小时xx分xx秒; ' + '10、LIST(列表控件名,第几列) 计算列表控件 指定列的和; ' + ' 注意：参与日期计算的控件必须为日期类型或者日期+时间类型。 ' + '' }, { id : 'calcPrec', type : 'text', 'default' : '4', widths : ['100px','150px'], label : '计算结果精度：', labelLayout : 'horizontal', labelStyle : 'font-weight:bold', style : 'width:150px' }, { id : 'calcFontSize', type : 'text', widths : ['100px','150px'], label : '字体大小：', labelLayout : 'horizontal', labelStyle : 'font-weight:bold', style : 'width:150px;margin-left:25px' }, { id : 'calcWidth', type : 'text', widths : ['100px','150px'], label : '控件宽度：', labelLayout : 'horizontal', labelStyle : 'font-weight:bold', style : 'width:150px;margin-left:25px' }, { id : 'calcHeight', type : 'text', widths : ['100px','150px'], label : '控件高度：', labelLayout : 'horizontal', labelStyle : 'font-weight:bold', style : 'width:150px;margin-left:25px' } ]; var dataSelect = [['---选择数据源---','0']]; if(typeof(MODULE_CONFIG) !== 'undefined'){ for(var key in MODULE_CONFIG){ var item = MODULE_CONFIG[key]; dataSelect.push([item,key]); } elements.push({ id : 'module_field', type : 'select', widths : ['5%','100px'], label : '业务表单字段：', labelLayout : 'horizontal', labelStyle : 'font-weight:bold', style : 'width:150px', 'default' : '0', items : dataSelect }); } return { title : '计算控件属性', width : 350, height : 300, resizable : false, style : 'overflow:scroll', onShow : function(){ delete this.xd_calcu; var element = this.getParentEditor().getSelection().getSelectedElement(); if ( element ) { this.xd_calcu = element; this.setupContent( element ); this.getContentElement('xd_calcu','calcName').setValue(element.getAttribute('title')); this.getContentElement('xd_calcu','calcValue').setValue(element.getAttribute('value')); this.getContentElement('xd_calcu','calcPrec').setValue(element.getAttribute('prec')); var styleString = element.getAttribute('style'); var styleArray = styleString.split(';'); for(var i = 0; i < styleArray.length; i++){ var itemArray = styleArray[i].split(':'); if(itemArray[0] === 'font-size'){ this.getContentElement('xd_calcu','calcFontSize').setValue(itemArray[1].substr(0,(itemArray[1].length - 2))); } if(itemArray[0] === 'width'){ this.getContentElement('xd_calcu','calcWidth').setValue(itemArray[1].substr(0,(itemArray[1].length - 2))); } if(itemArray[0] === 'height'){ this.getContentElement('xd_calcu','calcHeight').setValue(itemArray[1].substr(0,(itemArray[1].length - 2))); } } if(typeof(MODULE_CONFIG) !== 'undefined'){ this.getContentElement('xd_calcu','module_field').setValue(element.getAttribute('module_field')); } } }, onOk : function(){ var editor, element = this.xd_calcu, isInsertMode = !element; if ( isInsertMode ) { editor = this.getParentEditor(); element = editor.document.createElement( 'input' ); element.setAttribute( 'class', 'CALCU' ); element.setAttribute('align','absMiddle'); element.setAttribute('input_type','calc'); var element_index = XD_FORM_ELEMENT_INDEX(); element.setAttribute('name','DATA_' + element_index); element.setAttribute('id','DATA_' + element_index); editor.insertElement( element ); } element.setAttribute('title',this.getContentElement('xd_calcu','calcName').getValue()); element.setAttribute('value',this.getContentElement('xd_calcu','calcValue').getValue()); element.setAttribute('prec',this.getContentElement('xd_calcu','calcPrec').getValue()); var styleString = ''; var calcuFontSize = this.getContentElement('xd_calcu','calcFontSize').getValue(); var calcuWidth = this.getContentElement('xd_calcu','calcWidth').getValue(); var calcuHeight = this.getContentElement('xd_calcu','calcHeight').getValue(); if(calcuFontSize){ styleString += ('font-size:' + calcuFontSize + 'px;'); } if(calcuWidth){ styleString += ('width:' + calcuWidth + 'px;'); } if(calcuHeight){ styleString += ('height:' + calcuHeight + 'px;'); } element.setAttribute('style',styleString); element.setAttribute('element_type','xd_calcu'); if(typeof(MODULE_CONFIG) !== 'undefined'){ element.setAttribute('module_field',this.getContentElement('xd_calcu','module_field').getValue()); } this.commitContent( { element : element } ); }, contents : [ { id : 'xd_calcu', label : '计算控件属性', title : '计算控件属性', elements : elements } ] }; }); 控件的php解析代码
find('input[element_type="xd_calcu"]'); if(!empty($calcus)){ foreach($calcus as $e){ if($opType === 'w'){ $name = $e->name; $index = explode('_',$name); $value = $e->value; $elementValue = $value; if(isset($formData[$name]) && $formData[$name]){ $elementValue = $formData[$name]; } $htmlText = ' title).'" type="text" class="CALC" classname="CALC" prec="'.($e->prec).'">'; //获取计算项 $elementArray = array(); $calcuElement = $html->find('input'); foreach($calcuElement as $calcuE){ if(strpos($value,$calcuE->title) >= 0){ $elementArray[] = $calcuE; } } $calcuString = $this->calculate($value,$elementArray); $htmlText .= ' function calc_'.$index[1].'(){var myvalue=eval("'.$calcuString.'");if(myvalue==Infinity) document.form1.DATA_'.$index[1].'.value="无效结果";else if(!isNaN(myvalue)) {var prec=document.form1.DATA_'.$index[1].'.getAttribute(\'prec\');var vPrec;if(!prec) vPrec=10000;else vPrec=Math.pow(10,prec);var result = new Number(parseFloat(Math.round(myvalue*vPrec)/vPrec));document.form1.DATA_'.$index[1].'.value=result.toFixed(prec);}else document.form1.DATA_'.$index[1].'.value=myvalue;setTimeout(calc_'.$index[1].',1000);}setTimeout(calc_'.$index[1].',3000);'; $e->outertext = $htmlText; } else { $name = $e->name; $outertext = isset($formData[$name]) ? $formData[$name] : ''; $e->outertext = $outertext; } } } return $html; } public function calculate( $VALUE, $ELEMENT_QUERY ){ if ( $VALUE == "" ) { return; } $VALUE = str_replace( array( "ABS(", "RMB(", "MAX(", "MIN(", "MOD(", "DAY(", "HOUR(", "AVG(", "DATE(", "LIST(" ), array( "calc_abs(", "calc_rmb(", "calc_max(", "calc_min(", "calc_mod(", "calc_day(", "calc_hour(", "calc_avg(", "calc_date(", "calc_list(" ), $VALUE ); $flag = FALSE; if ( preg_match( "/[\\+|\\-|\\*|\\/|,]+/i", $VALUE ) == 0 ) { $flag = TRUE; } foreach ( $ELEMENT_QUERY as $ELEMENT ) { $ETITLE1 = $ELEMENT->title; $nameArray = explode('_',$ELEMENT->name); $ITEM_ID1 = $nameArray[1]; if ( $flag && $ETITLE1 == $VALUE ) { $VALUE = "calc_getval('DATA_".$ITEM_ID1."')"; } else { if ( strstr( $ETITLE1, "/" ) ) { $ETITLE1 = str_replace( array( "/", "+", "-" ), array( "\\/", "\\+", "\\-" ), $ETITLE1 ); } $pattern = "/([\\+|\\-|\\*|\\/|\\(|,]+)".$ETITLE1."([\\+|\\-|\\*|\\/|\\)|,]+)/i"; $VALUE = preg_replace( $pattern, "\$1calc_getval('DATA_".$ITEM_ID1."')\$2", $VALUE ); $pattern = "/([\\+|\\-|\\*|\\/|,]+)".$ETITLE1."\$/i"; $VALUE = preg_replace( $pattern, "\$1calc_getval('DATA_".$ITEM_ID1."')", $VALUE ); $pattern = "/^".$ETITLE1."([\\+|\\-|\\*|\\/|,]+)/i"; $VALUE = preg_replace( $pattern, "calc_getval('DATA_".$ITEM_ID1."')\$1", $VALUE ); } } return $VALUE; }}?>