fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1091 from krimson-rayne/master

Browse Source 
Field Picker in the wysiwyg editor
This commit is contained in:
julceslauhub
2012-12-12 13:41:52 -08:00
parent fa99afabf4 dd4e044296
commit dc14a1f50d
11 changed files with 317 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
gulliver/js/tinymce/jscripts/tiny_mce/plugins/pmFieldPicker/FieldPicker.html vendored Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="editor_plugin_src.js"></script>
<script src="/js/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var getVariableList = function (dynUid, proUid){
var responseData
var url = tinyMCE.activeEditor.domainURL+"processes/processes_Ajax"; // action url that processes the ajax call
responseData = $.ajax({ // jquery ajax call
url : url,
type: "POST",
data: {action : 'getDynaformFieldList', DYN_UID: dynUid, PRO_UID:proUid}, // parameters
async: false,
dataType: "json" // json response type
}).responseText;
responseData = eval("(" +responseData+ ")");
return responseData;
}
var generateListValues = function(prefix){
var list = getVariableList(tinyMCE.activeEditor.dynUID, tinyMCE.activeEditor.proUID);
var combo = document.getElementById("varsField");
var option = document.createElement('option');
var aDelete;
for(i=(combo.length-1); i>=0; i--)
{
aDelete = combo.options[i];
aDelete.parentNode.removeChild( aDelete );
}
if(list.length>0){
for(i=0; i<list.length; i++)
{
option = document.createElement("OPTION");
option.value = list[i].id;
option.text = list[i].name;
combo.add(option);
}
} else {
option = document.createElement("OPTION");
option.value = 0;
option.text = 'No results';
combo.add(option);
}
}
$("#varsField").dblclick(function(){
if ($('#isLabel').is(':checked')){
updateEditorContent("{$"+$("#varsField").val()+"}");
} else {
updateEditorContent("{$form."+$("#varsField").val()+"}");
}
});
generateListValues();
});
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" onsubmit="">
<div id="help_desc">
Please, double click a field to add it into the editor.
</div>
<div id="label_desc">
Label <input type="checkbox" id="isLabel" name="isLabel">
</div>
<div id="desc_variables">
<select id="varsField" name="varsField" size="6" style="width:100%;">
</select>
</div>
</form>
</body>
</html>

95
gulliver/js/tinymce/jscripts/tiny_mce/plugins/pmFieldPicker/editor_plugin.js vendored Normal file
View File

@@ -0,0 +1,95 @@
/**
* Name: editor_plugin_src.js (for pmFieldPicker tinyMCE plugin)
**/
(function(){
// set the base url setting
tinyMCE.baseURL = "/js/tinymce/jscripts/tiny_mce";
var strPluginURL;
// the plugin init settings
tinymce.create('tinymce.plugins.pmFieldPickerPlugin', {
init: function(ed, url)
{
strPluginURL = url; // store the URL for future use..
ed.addCommand('mcepmFieldPicker', function() {
pmFieldPicker();
});
ed.addButton('pmFieldPicker', {
title: 'Field Picker',
label : '@#',
cmd: 'mcepmFieldPicker',
image: url + '/img/picker.png'
});
},
createControl: function(n, cm) {
return null;
},
getPluginURL: function() {
return strPluginURL;
}
});
tinymce.PluginManager.add('pmFieldPicker', tinymce.plugins.pmFieldPickerPlugin);
})();
// this function can get called from the plugin inint (above) or from the callback on advlink/advimg plugins..
// in the latter case, win and type will be set..
/**
* @function pmFieldPicker
* @description Opens the plugin popup, loading the form inside it.
* @param field_name deprecated
* @param type deprecated
* @param win deprecated
*
*/
function pmFieldPicker(field_name, type, win) {
var uloc=String(location);
var new_text = uloc.split('/');
var loc='/'+new_text[3]+'/'+new_text[4]+'/'+new_text[5]+'/controls/varsAjax?displayOption=tinyMCE&sSymbol=@@&&sProcess='+tinyMCE.activeEditor.processID;
var strPluginPath = tinyMCE.activeEditor.plugins.pmFieldPicker.getPluginURL(); // get the path to the uploader plugin
var strUploaderURL = strPluginPath + "/uploader.php"; // generate the path to the uploader script
var strUploadPath = tinyMCE.activeEditor.getParam('plugin_pmFieldPicker_upload_path'); // get the relative upload path
var strSubstitutePath = tinyMCE.activeEditor.getParam('plugin_pmFieldPicker_upload_substitute_path'); // get the path we'll substitute for the for the upload path (i.e. fully qualified)
if (strUploaderURL.indexOf("?") < 0){ // if we were called without any GET params
strUploaderURL = strUploaderURL + "?type=" + type + "&d=" + strUploadPath + "&subs=" + strSubstitutePath; // add our own params
} else {
strUploaderURL = strUploaderURL + "&type=" + type + "&d=" + strUploadPath + "&subs=" + strSubstitutePath;
}
//tinyMCE.activeEditor.anyVariable='path/to/ProcessMaker'
tinyMCE.activeEditor.windowManager.open({ // open the plugin popup
file : strPluginPath+'/FieldPicker.html',
title : 'Pick a Field',
width : '400px',
height : '120px',
resizable : "yes",
scrollbars : "no",
overflow : false,
inline : 1, // This parameter only has an effect if you use the inlinepopups plugin!
close_previous : "no"
}, {
window : win,
input : field_name
});
return false;
}
/**
* @function closePluginPopup
* @description closes the tinyMCE popup window
*/
function closePluginPopup(){
tinyMCEPopup.close(); // close popup window
}
/**
* @function updateEditorContent
* @description insert the editor content with a html code string
* @params serializedHTML String html code
*/
function updateEditorContent(serializedHTML){
tinyMCE.activeEditor.execCommand('mceInsertContent', false, serializedHTML);
closePluginPopup();
}

95
gulliver/js/tinymce/jscripts/tiny_mce/plugins/pmFieldPicker/editor_plugin_src.js vendored Normal file
View File

@@ -0,0 +1,95 @@
/**
* Name: editor_plugin_src.js (for pmFieldPicker tinyMCE plugin)
**/
(function(){
// set the base url setting
tinyMCE.baseURL = "/js/tinymce/jscripts/tiny_mce";
var strPluginURL;
// the plugin init settings
tinymce.create('tinymce.plugins.pmFieldPickerPlugin', {
init: function(ed, url)
{
strPluginURL = url; // store the URL for future use..
ed.addCommand('mcepmFieldPicker', function() {
pmFieldPicker();
});
ed.addButton('pmFieldPicker', {
title: 'Field Picker',
label : '@#',
cmd: 'mcepmFieldPicker',
image: url + '/img/picker.png'
});
},
createControl: function(n, cm) {
return null;
},
getPluginURL: function() {
return strPluginURL;
}
});
tinymce.PluginManager.add('pmFieldPicker', tinymce.plugins.pmFieldPickerPlugin);
})();
// this function can get called from the plugin inint (above) or from the callback on advlink/advimg plugins..
// in the latter case, win and type will be set..
/**
* @function pmFieldPicker
* @description Opens the plugin popup, loading the form inside it.
* @param field_name deprecated
* @param type deprecated
* @param win deprecated
*
*/
function pmFieldPicker(field_name, type, win) {
var uloc=String(location);
var new_text = uloc.split('/');
var loc='/'+new_text[3]+'/'+new_text[4]+'/'+new_text[5]+'/controls/varsAjax?displayOption=tinyMCE&sSymbol=@@&&sProcess='+tinyMCE.activeEditor.processID;
var strPluginPath = tinyMCE.activeEditor.plugins.pmFieldPicker.getPluginURL(); // get the path to the uploader plugin
var strUploaderURL = strPluginPath + "/uploader.php"; // generate the path to the uploader script
var strUploadPath = tinyMCE.activeEditor.getParam('plugin_pmFieldPicker_upload_path'); // get the relative upload path
var strSubstitutePath = tinyMCE.activeEditor.getParam('plugin_pmFieldPicker_upload_substitute_path'); // get the path we'll substitute for the for the upload path (i.e. fully qualified)
if (strUploaderURL.indexOf("?") < 0){ // if we were called without any GET params
strUploaderURL = strUploaderURL + "?type=" + type + "&d=" + strUploadPath + "&subs=" + strSubstitutePath; // add our own params
} else {
strUploaderURL = strUploaderURL + "&type=" + type + "&d=" + strUploadPath + "&subs=" + strSubstitutePath;
}
//tinyMCE.activeEditor.anyVariable='path/to/ProcessMaker'
tinyMCE.activeEditor.windowManager.open({ // open the plugin popup
file : strPluginPath+'/FieldPicker.html',
title : 'Pick a Field',
width : '400px',
height : '120px',
resizable : "yes",
scrollbars : "no",
overflow : false,
inline : 1, // This parameter only has an effect if you use the inlinepopups plugin!
close_previous : "no"
}, {
window : win,
input : field_name
});
return false;
}
/**
* @function closePluginPopup
* @description closes the tinyMCE popup window
*/
function closePluginPopup(){
tinyMCEPopup.close(); // close popup window
}
/**
* @function updateEditorContent
* @description insert the editor content with a html code string
* @params serializedHTML String html code
*/
function updateEditorContent(serializedHTML){
tinyMCE.activeEditor.execCommand('mceInsertContent', false, serializedHTML);
closePluginPopup();
}

BIN
gulliver/js/tinymce/jscripts/tiny_mce/plugins/pmFieldPicker/img/picker.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 B

3
gulliver/js/tinymce/jscripts/tiny_mce/plugins/pmFieldPicker/langs/en.js vendored Normal file
View File

@@ -0,0 +1,3 @@
tinyMCE.addI18n('en.pmFieldPicker', {
desc:"Pick a Field"
});

BIN
gulliver/js/tinymce/jscripts/tiny_mce/plugins/pmFieldPicker/progress.gif vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

4
gulliver/js/tinymce/jscripts/tiny_mce/plugins/pmVariablePicker/langs/en.js vendored
View File

@@ -1,3 +1,3 @@
tinyMCE.addI18n('en.ccSimpleUploader', { tinyMCE.addI18n('en.pmVariablePicker', {
desc:"Upload File to Server" desc:"Pick a Variable"
}); });

16
gulliver/system/class.wysiwygEditor.php
View File

@@ -43,6 +43,8 @@ class XmlForm_Field_WYSIWYG_EDITOR extends XmlForm_Field
public $defaultValue = '<br/>'; public $defaultValue = '<br/>';
public $editorType = ''; public $editorType = '';
public $processID = ''; public $processID = '';
public $dynUID = '';
/** /**
* render function returns the HTML definition for the Dynaform Field * render function returns the HTML definition for the Dynaform Field
* *
@@ -142,16 +144,18 @@ class XmlForm_Field_WYSIWYG_EDITOR extends XmlForm_Field
case 'DYNAFORM_TEMPLATE': case 'DYNAFORM_TEMPLATE':
$editorDefinition.= ' $editorDefinition.= '
var formProcessID = document.getElementById("form[PRO_UID]").value;
var formDynaformID = document.getElementById("form[DYN_UID]").value;
tinyMCE.init({ tinyMCE.init({
theme : "advanced", theme : "advanced",
plugins : "advhr,advimage,advlink,advlist,autolink,autoresize,autosave,contextmenu,directionality,emotions,example,example_dependency,fullpage,fullscreen,iespell,inlinepopups,insertdatetime,layer,legacyoutput,lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,save,searchreplace,spellchecker,style,tabfocus,table,template,visualblocks,visualchars,wordcount,xhtmlxtras,style,table", plugins : "advhr,advimage,advlink,advlist,autolink,autoresize,autosave,contextmenu,directionality,emotions,example,example_dependency,fullpage,fullscreen,iespell,inlinepopups,insertdatetime,layer,legacyoutput,lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,save,searchreplace,spellchecker,style,tabfocus,table,template,visualblocks,visualchars,wordcount,xhtmlxtras,style,table,noneditable,pmFieldPicker",
mode : "specific_textareas", mode : "specific_textareas",
//apply_source_formatting : true, //apply_source_formatting : true,
//remove_linebreaks: false, //remove_linebreaks: false,
editor_selector : "tmceEditor", editor_selector : "tmceEditor",
width : 850, width : \'100%\',
height : 300, height : 300,
theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,cut,copy,paste,|,bullist,numlist", theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,cut,copy,paste,|,bullist,numlist,|,pmFieldPicker",
theme_advanced_buttons2 : "tablecontrols,|outdent,indent,blockquote,|,undo,redo,|,link,unlink,image,|,forecolor,backcolor,styleprops,|,hr,removeformat,visualaid,|,sub,sup,|,ltr,rtl,|,code", theme_advanced_buttons2 : "tablecontrols,|outdent,indent,blockquote,|,undo,redo,|,link,unlink,image,|,forecolor,backcolor,styleprops,|,hr,removeformat,visualaid,|,sub,sup,|,ltr,rtl,|,code",
popup_css : "/js/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css", popup_css : "/js/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css",
skin : "o2k7", skin : "o2k7",
@@ -162,10 +166,16 @@ class XmlForm_Field_WYSIWYG_EDITOR extends XmlForm_Field
external_image_list_url : "js/image_list.js", external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js", media_external_list_url : "js/media_list.js",
extended_valid_elements : "div[*]", extended_valid_elements : "div[*]",
// noneditable_regexp: /[^"|^:|^\']{(.*?)}/g,
template_replace_values : { template_replace_values : {
username : "Some User", username : "Some User",
staffid : "991234" staffid : "991234"
}, },
oninit: function () {
tinyMCE.activeEditor.domainURL = domainURL;
tinyMCE.activeEditor.dynUID = formDynaformID;
tinyMCE.activeEditor.proUID = formProcessID;
},
handle_event_callback : function(e) { handle_event_callback : function(e) {
if(this.isDirty()) { if(this.isDirty()) {
this.save(); this.save();

3
workflow/engine/classes/class.dynaformEditor.php
View File

@@ -416,8 +416,7 @@ class dynaformEditorAjax extends dynaformEditor implements iDynaformEditorAjax
} else { } else {
$error = 0; $error = 0;
} }
$HtmlEditor = array('URL' => $A, 'HTML' => $html $HtmlEditor = array('URL' => $A, 'HTML' => $html, 'DYN_UID' => $file );
);
$G_PUBLISH->AddContent('xmlform', 'xmlform', 'dynaforms/dynaforms_HtmlEditor', '', $HtmlEditor, '', ''); $G_PUBLISH->AddContent('xmlform', 'xmlform', 'dynaforms/dynaforms_HtmlEditor', '', $HtmlEditor, '', '');
G::RenderPage("publish", 'raw'); G::RenderPage("publish", 'raw');
return array('error' => $error, 'html' => ob_get_clean() return array('error' => $error, 'html' => ob_get_clean()

32
workflow/engine/methods/processes/processes_Ajax.php
View File

@@ -551,16 +551,16 @@ try {
} }
echo Bootstrap::json_encode( $aVariables ); echo Bootstrap::json_encode( $aVariables );
break; break;
/** /**
* returns the prefix mean * returns the prefix mean
* *
*/ */
case 'getVariablePrefix': case 'getVariablePrefix':
$_REQUEST['prefix'] = $_REQUEST['prefix']!=null?$_REQUEST['prefix']:'ID_TO_STRING'; $_REQUEST['prefix'] = $_REQUEST['prefix']!=null?$_REQUEST['prefix']:'ID_TO_STRING';
echo G::LoadTranslation($_REQUEST['prefix']); echo G::LoadTranslation($_REQUEST['prefix']);
break; break;
/** /**
* return an array with all Variables of Grid type * return an array with all Variables of Grid type
*/ */
case 'getGridList': case 'getGridList':
G::LoadClass('xmlfield_InputPM'); G::LoadClass('xmlfield_InputPM');
@@ -574,8 +574,8 @@ try {
} }
echo Bootstrap::json_encode( $aVariables ); echo Bootstrap::json_encode( $aVariables );
break; break;
/** /**
* return an array with all Grid Variables according to Grid * return an array with all Grid Variables according to Grid
*/ */
case 'getVariableGrid': case 'getVariableGrid':
G::LoadClass('xmlfield_InputPM'); G::LoadClass('xmlfield_InputPM');
@@ -593,6 +593,24 @@ try {
echo Bootstrap::json_encode( $aVariables ); echo Bootstrap::json_encode( $aVariables );
break; break;
case 'getDynaformFieldList':
G::LoadClass( 'dynaformhandler' );
$dynaformFields = array ();
$resultArray = array ();
$proUid= isset( $_REQUEST['PRO_UID'] )?$_REQUEST['PRO_UID']:'';
$dynUid= isset( $_REQUEST['DYN_UID'] )?$_REQUEST['DYN_UID']:'';
if (is_file( PATH_DATA . '/sites/'. SYS_SYS .'/xmlForms/'. $proUid .'/'.$dynUid. '.xml' ) && filesize( PATH_DATA . '/sites/'. SYS_SYS .'/xmlForms/'. $proUid .'/'. $dynUid .'.xml' ) > 0) {
$dyn = new dynaFormHandler( PATH_DATA . '/sites/'. SYS_SYS .'/xmlForms/' .$proUid. '/' . $dynUid .'.xml' );
$dynaformFields[] = $dyn->getFields();
}
foreach ($dynaformFields as $aDynFormFields) {
foreach ($aDynFormFields as $field) {
$resultArray[] = array ("id"=>$field->nodeName, "name"=>$field->nodeName );
}
}
echo Bootstrap::json_encode( $resultArray );
// var_dump($resultArray);
break;
/* /*
case 'saveFile': case 'saveFile':
global $G_PUBLISH; global $G_PUBLISH;

4
workflow/engine/xmlform/dynaforms/dynaforms_HtmlEditor.xml
View File

@@ -3,7 +3,7 @@
<URL type="phpvariable"/> <URL type="phpvariable"/>
<DYN_UID type="phpvariable"/>
<PME_HTML_ENABLETEMPLATE type="checkbox" value="1" defaultvalue="0" labelOnRight="0"> <PME_HTML_ENABLETEMPLATE type="checkbox" value="1" defaultvalue="0" labelOnRight="0">
<en>Enable HTML Editing</en> <en>Enable HTML Editing</en>
@@ -21,7 +21,7 @@
<en>HTML View</en> <en>HTML View</en>
</HTML --> </HTML -->
<HTML type="wysiwyg_editor" editorType="DYNAFORM_TEMPLATE" width="100%" height="300px"> <HTML type="wysiwyg_editor" editorType="DYNAFORM_TEMPLATE" dynUID="@@DYN_UID" width="100%" height="300px">
<en>HTML View</en> <en>HTML View</en>
</HTML> </HTML>