[rcsalazar77]

Saludos,
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,
Att,
Roberto

[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

[vktRus]

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.

[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?

[vktRus]

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 = [
  'TASK_PRIM',
  'music_TASK_PL_PRIM',
  'TASK_PRIM_OUT',
  'TASK_RESULT_PRIM'
];
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.