Un foro de discusión para nuestra comunidad de hispano hablante

Moderator: amosbatto

By rcsalazar77
Procesmaker permite la creación de algunos elementos de un form a traves de su Dynaform con html5, pero dentro de los elementos no existe un editor: WYSIWYG HTML. Requiero que el contenido que se ingresa en una forma permita la creación de tablas, pegado de imagenes, justificación, tipo de letra, etc. Esto es factible hacerlo con un WYSIWYG HTML.
Es posible de alguna manera tener un WYSIWYG HTML en dynaforms? o puedo convertir un elemento de dynaforms (por ejemplo un textarea) en un WYSIWYG HTML?

Gracias por su ayuda,
By karlosKamacho
Hola, bueno processMaker utiliza los Output Documents.
te dejo estos link's para q los puedas revisar y espero que sea la solución que buscas.
    [1] http://wiki.processmaker.com/3.0/Output_Documents
    [2] http://wiki.processmaker.com/index.php/New_WYSIWYG_HTML_Editor#Plugin_Grid_Wizard
How to insert TinyMCE on all textarea in dynaform?
( PM 2.8 )
Insert custom js in head. gulliver/system/class.headPublisher.php line 254
Code: Select all
         $head .= "       <script type=\"text/javascript\" src=\"/js/tinymce/jscripts/tiny_mce/tiny_mce_src.js\"></script>\n";
         $head .= "       <script type=\"text/javascript\">\n";
         $head .= "           tinymce.init({\n";
         $head .= "               //selector: \"textarea\",\n";
         $head .= "               //plugins: \"autoresize, fullpage, fullscreen\",\n";
         $head .= "               //toolbar: \"fullpage_hide_in_source_view\",\n";
         $head .= "               //plugins: \"advhr,advimage,advlink,advlist,autolink,autoresize,contextmenu,directionality,emotions,example,example_dependency,fullpage,fullscreen,iespell,inlinepopups,insertdatetime,layer,legacyoutput,lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,save,searchreplace,style,tabfocus,table,template,visualblocks,visualchars,wordcount,xhtmlxtras,pmSimpleUploader,pmVariablePicker,pmGrids,style\",\n";
         $head .= "               mode: \"exact\",\n";         
         $head .= "               elements: \"form[TASK_PRIM],form[music_TASK_PL_PRIM],form[TASK_PRIM_OUT]\",\n";
         $head .= "               //editor_deselector: \"form[REDIRECT_TO_PRIM]\",\n";
         $head .= "               //verify_html: false,\n";
         $head .= "               //popup_css : \"/js/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css\",\n";
         $head .= "               theme: \"advanced\",\n";
         $head .= "               skin : \"o2k7\",\n";
         $head .= "               skin_variant : \"silver\",\n";
         $head .= "               \n";
         $head .= "               // Theme options\n";
         $head .= "               //theme_advanced_buttons1 : \"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect\",\n";
         $head .= "               theme_advanced_buttons1 : \"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist\",\n";
         $head .= "               //theme_advanced_buttons2 : \"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor\",\n";
         $head .= "               theme_advanced_buttons2 : \"undo,redo,|,link,unlink,code,|,insertdate,inserttime,preview,|,forecolor,backcolor,|,hr,removeformat,|,outdent,indent,blockquote\",\n";
         $head .= "               //theme_advanced_buttons3 : \"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen\",\n";
         $head .= "               //theme_advanced_buttons4 : \"insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage\",\n";
         $head .= "               theme_advanced_toolbar_location : \"top\",\n";
         $head .= "               theme_advanced_toolbar_align : \"left\",\n";
         $head .= "               theme_advanced_statusbar_location : \"bottom\",\n";
         $head .= "               theme_advanced_resizing : \"true\",\n";
         $head .= "               width: \"110mm\"\n";
         $head .= "           });     \n";
         $head .= "       </script>\n";
Result: the editor is displayed. New Field ID = field_id_old + '_ifr'
elements — ID textareas. OR rem 'mode' and 'elements' and unrem 'selector' for all textareas.
User avatar
By amosbatto
vktRus, Nice trick.
Have you had any problems with the TinyMCE altering the field properties in the HTML so the Dynaform doesn't display its data correctly?
User avatar
By vktRus
amosbatto wrote: Thu Jun 28, 2018 11:44 pm Have you had any problems with the TinyMCE altering the field properties in the HTML so the Dynaform doesn't display its data correctly?
If use /js/tinymce/jscripts/tiny_mce/tiny_mce_src.js — no problem.
If use /js/tinymce/jscripts/tiny_mce/tiny_mce.js — after submit error "A[x] is undefined"
PM 2.8
And now I think as the next step of the form to show instead of textarea+tinymce only formatted text. JS+outerHTML?

Add to JS on Dynaform:
Code: Select all
var primfields = [
primfields.forEach(function(item, i, primfields) {
  if (getField(item).value != '') getField(item).outerHTML = getField(item).value;
TinyMCE can not find textarea now. Show formatted text only.

Hi, Is there any way to show my custom column only[…]

Send for clarification

Hi, I know this is an old post but i could not fin[…]

add dropdown to search process

Please replay if there is any solution!!!!

Amosbatto, PMUsers.com is down.

Hi Amos, I appreciate you setting up a tips and t[…]